/* =====================================================================
   Ad Personam Puglia — fogli di stile (mobile-first)
   ===================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colori: palette ufficiale del logo (Pietra chiara, Inchiostro, Verde ulivo,
     Blu Adriatico, Terracotta) più alcune tinte derivate per contrasto e superfici */
  --calce: #F4EFE6;
  --calce-chiara: #FBF8F2;
  --pietra: #E8DFD0;
  --pietra-scura: #C9BBA4;
  --inchiostro: #23211D;
  --grigio: #5F584D;
  --ulivo: #5B6B4A;
  --ulivo-scuro: #46533A; /* per i testi in verde: il verde ufficiale non basta su pietra e mare */
  --terracotta: #A9532F;
  --mare: #D6E2E3;
  --adriatico: #2F5D7C;
  --adriatico-profondo: #24485F;
  --su-scuro: #F4EFE6;
  --su-scuro-tenue: #DCE3E7;

  /* zone della mappa (armonizzate con la reference) */
  --z-gargano: #55704F;
  --z-costa: #C97A4A;
  --z-murgia: #B59C6C;
  --z-itria: #A9505B;
  --z-salento: #4D7591;
  --z-matera: #2B2721;

  /* tipografia: scala 1,25 su base 18 px */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --t-piccolo: 0.875rem;
  --t-base: 1.0625rem;
  --t-guida: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
  --t-h2: clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --t-h1: clamp(3rem, 2rem + 4.2vw, 5.1rem);

  /* spazi */
  --margine: clamp(1.25rem, 5vw, 4rem);
  --spazio-sezione: clamp(4.5rem, 10vw, 8.5rem);
  --larghezza: 75rem;
  --raggio: 3px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entrate e risposte al tocco */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimenti sullo schermo */
  --altezza-testata: 4.5rem; /* aggiornata da js/sito.js con l'altezza reale */
}

@media (min-width: 600px) {
  :root { --t-base: 1.125rem; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--calce);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
figure { margin: 0; }
[hidden] { display: none !important; }
.js .solo-no-js { display: none; }
html:not(.js) .solo-js,
html:not(.js) img[data-src] { display: none; }

:focus-visible {
  outline: 3px solid var(--ulivo);
  outline-offset: 3px;
  border-radius: 2px;
}
.parliamone :focus-visible,
.piede :focus-visible { outline-color: var(--su-scuro); }

.salta {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--inchiostro);
  color: var(--calce);
  padding: 0.75rem 1rem;
  border-radius: var(--raggio);
}
.salta:focus { top: 1rem; }

::selection { background: var(--ulivo); color: #fff; }
textarea { caret-color: var(--adriatico); }

/* ---------- elementi comuni ---------- */
.sezione {
  padding: var(--spazio-sezione) var(--margine);
}
.sezione > * {
  max-width: var(--larghezza);
  margin-inline: auto;
}
.sezione__nome {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-guida);
  color: var(--ulivo-scuro);
  margin-bottom: 0.4rem;
}
.titolo-sezione {
  font-size: var(--t-h2);
  letter-spacing: -0.012em;
  margin-bottom: 1.5rem;
  max-width: 22ch;
}
.testo-guida {
  font-family: var(--serif);
  font-size: var(--t-guida);
  line-height: 1.5;
}

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 160ms var(--ease-out);
}
.bottone--pieno { background: var(--ulivo); color: #fff; }
.bottone--chiaro { background: var(--calce); color: var(--adriatico); }

/* tutto ciò che si preme risponde subito; l'hover esiste solo con un mouse */
a, button, .scelta { -webkit-tap-highlight-color: transparent; }
.bottone:active,
.menu a.menu__scrivimi:active,
.legenda__zona:active,
.scelta:active span,
.film__pausa:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .bottone--pieno:hover { background: var(--ulivo-scuro); }
  .bottone--chiaro:hover { background: #fff; }
}
.icona-wa { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }

.link-azione,
.link-semplice {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: text-decoration-thickness 180ms ease, text-underline-offset 180ms var(--ease-out);
}
.link-azione {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  .link-azione:hover,
  .link-semplice:hover { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
}

.da-completare {
  display: block;
  max-width: none;
  border: 1.5px dashed #9A7A3C;
  background: #F6EBCF;
  color: #5E4614;
  padding: 0.6rem 0.9rem;
  border-radius: var(--raggio);
  font-size: var(--t-piccolo);
  line-height: 1.45;
}
.da-completare--scuro {
  border-color: rgba(245, 240, 230, 0.6);
  background: rgba(245, 240, 230, 0.08);
  color: var(--su-scuro);
}
.da-completare code { font-size: 0.95em; }

/* ---------- testata ---------- */
.testata {
  background: var(--calce);
  border-bottom: 1px solid var(--pietra);
  position: relative;
  z-index: 20;
}
.testata__interno {
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding: 0.75rem var(--margine);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* logo: il pittogramma è un <symbol> richiamato con <use>; i colori si cambiano
   con --p-sinistra, --p-lente, --p-destra */
.definizioni { position: absolute; width: 0; height: 0; overflow: hidden; }
.pittogramma { display: block; flex: none; aspect-ratio: 684 / 473; height: auto; }

.marchio {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.marchio .pittogramma { width: 3rem; }
.marchio__testo { display: flex; flex-direction: column; line-height: 1.1; text-transform: uppercase; }
.marchio__nome { font-family: var(--serif); font-weight: 650; font-size: 1.05rem; letter-spacing: 0.02em; }
.marchio__luogo,
.marchio__sotto { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--grigio); }
.marchio__luogo { color: var(--inchiostro); font-weight: 500; }
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.menu li:not(:last-child) { display: none; }
.menu a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
@media (hover: hover) and (pointer: fine) {
  .menu a:hover { text-decoration-color: currentColor; }
  }
.menu a:not(.menu__scrivimi) { transition: text-decoration-color 180ms ease; }
.menu__scrivimi {
  padding: 0 1.1rem;
  border: 1.5px solid var(--ulivo);
  border-radius: 999px;
  color: var(--ulivo-scuro);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, transform 160ms var(--ease-out);
}
.menu a.menu__scrivimi:hover { background: var(--ulivo); color: #fff; text-decoration: none; }

@media (min-width: 760px) {
  .menu li:not(:last-child) { display: list-item; }
}
.testata { position: sticky; top: 0; }
[id] { scroll-margin-top: var(--altezza-testata); }
/* le sezioni ricevono il focus quando ci si arriva dal menu: niente contorno sull'intera sezione */
[tabindex="-1"]:focus { outline: none; }

/* selettore di lingua: un menu a tendina nativo (<details>), compatto anche sul telefono */
.menu { margin-left: auto; }
.lingue { position: relative; }
.lingue summary {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  border-radius: var(--raggio);
}
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 200ms var(--ease-out);
}
.lingue[open] summary svg { transform: rotate(180deg); }
.lingue ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 9.5rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  background: var(--calce-chiara);
  border: 1px solid var(--pietra);
  border-radius: var(--raggio);
  box-shadow: 0 8px 24px rgba(35, 33, 29, 0.14);
  transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@starting-style {
  .lingue[open] ul { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.lingue a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--raggio);
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 0.9375rem;
}
.lingue a[aria-current="page"] { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .lingue a:hover { background: var(--calce); }
}
.su-hero .lingue summary { color: var(--su-scuro); }
/* sul telefono marchio, "Scrivimi" e lingua devono stare in una riga: spazi più stretti */
@media (max-width: 599px) {
  .testata__interno { gap: 0.5rem; }
  .menu__scrivimi { padding: 0 0.9rem; }
}

/* sopra la hero l'intestazione è trasparente e senza marchio (il marchio è nella hero) */
.testata { transition: background-color 0.3s ease, border-color 0.3s ease; }
.marchio { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms; }
.su-hero .testata { background: transparent; border-bottom-color: transparent; }
.su-hero .marchio { opacity: 0; transform: translateY(-4px); visibility: hidden; }
.su-hero .menu a { color: var(--su-scuro); }
.su-hero .menu__scrivimi { border-color: rgba(244, 239, 230, 0.75); }
@media (hover: hover) and (pointer: fine) {
  .su-hero .menu a.menu__scrivimi:hover { background: var(--su-scuro); color: var(--inchiostro); }
}
.su-hero .testata :focus-visible { outline-color: var(--su-scuro); }

/* ---------- hero: il "film" di foto sfocate ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  margin-top: calc(-1 * var(--altezza-testata));
  padding: calc(var(--altezza-testata) + 3rem) var(--margine) 7.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--su-scuro);
  overflow: hidden;
  background: var(--adriatico-profondo);
}
.film { position: absolute; inset: 0; z-index: -2; }
.film__fotogramma {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.film__fotogramma.is-attivo { opacity: 1; }
.film__fotogramma img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: opacity 400ms var(--ease-out);
}
.js .film__fotogramma img:not(.is-caricata) { opacity: 0; }
/* un lento carrello in avanti, solo transform: fluido anche sui telefoni */
.film__fotogramma.in-moto img { animation: carrello var(--durata-fotogramma, 9.8s) linear both; }
.film.is-sospeso .film__fotogramma img { animation-play-state: paused; }
@keyframes carrello {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); }
}
/* velatura calda: tiene leggibile il testo chiaro su qualsiasi foto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%, rgba(42, 33, 24, 0.64), rgba(42, 33, 24, 0.42) 62%, rgba(42, 33, 24, 0.16) 100%),
    linear-gradient(to bottom, rgba(42, 33, 24, 0.55) 0, rgba(42, 33, 24, 0) 18%),
    linear-gradient(to top, rgba(42, 33, 24, 0.4) 0, rgba(42, 33, 24, 0) 16%);
}
.hero :focus-visible { outline-color: var(--su-scuro); }
.hero__contenuto,
.hero__scorri { text-shadow: 0 0 1.5rem rgba(35, 33, 29, 0.45), 0 1px 2px rgba(35, 33, 29, 0.35); }
.hero .bottone { text-shadow: none; }

.hero__contenuto {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__pittogramma {
  width: clamp(4rem, 3rem + 3vw, 5.5rem);
  margin-bottom: 1.5rem;
  --p-sinistra: var(--su-scuro);
  --p-lente: var(--su-scuro);
  --p-destra: var(--su-scuro);
}

/* il titolo è la versione primaria del logo: nome in serif maiuscolo, luogo e mestiere in sans */
.hero__titolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.75rem;
  line-height: 1;
}
.hero__nome {
  font-family: var(--serif);
  font-weight: 620;
  font-size: clamp(2.3rem, 1.2rem + 4vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
@media (min-width: 600px) {
  .hero__nome { white-space: nowrap; }
}
.hero__luogo,
.hero__cosa {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.hero__luogo {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 500;
  margin-top: 0.6rem;
}
.hero__cosa {
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.3rem);
  font-weight: 400;
  margin-top: 0.35rem;
}
/* se in config.js si sceglie una frase del brief al posto del nome */
.hero__titolo.is-frase {
  display: block;
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.8rem);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
}
.hero__sottotitolo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0 auto 2.25rem;
  text-wrap: balance;
}
.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes affiora { from { opacity: 0; } to { opacity: 1; } }
.js .hero__contenuto > * { animation: entra 500ms var(--ease-out) both; }
.js .hero__contenuto > :nth-child(2) { animation-delay: 60ms; }
.js .hero__contenuto > :nth-child(3) { animation-delay: 120ms; }
.js .hero__contenuto > :nth-child(4) { animation-delay: 180ms; }
.js .hero__scorri,
.js .film__pausa { animation: affiora 500ms var(--ease-out) 300ms both; }

.hero__scorri {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.75rem;
  color: var(--su-scuro);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.hero__scorri svg,
.film__pausa svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film__pausa {
  position: absolute;
  right: var(--margine);
  bottom: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 239, 230, 0.6);
  border-radius: 50%;
  background: rgba(35, 33, 29, 0.3);
  color: var(--su-scuro);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .film__pausa:hover { background: rgba(35, 33, 29, 0.55); }
}
.film__pausa .icona-play { fill: currentColor; stroke: none; display: none; }
.hero.is-ferma .icona-pausa { display: none; }
.hero.is-ferma .icona-play { display: block; }

/* ---------- conosciamoci ---------- */
.conosciamoci {
  background: linear-gradient(to bottom, var(--calce) 0%, var(--pietra) 100%);
}
.conosciamoci__griglia {
  display: grid;
  gap: 2.5rem;
}
.conosciamoci__foto img {
  width: 100%;
  border-radius: var(--raggio);
}
.conosciamoci__foto { max-width: 26rem; }

.passi {
  list-style: none;
  padding: 0;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  gap: 2.25rem;
  position: relative;
}
.passo { position: relative; padding-top: 3.25rem; text-align: center; }
.passo__numero {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ulivo-scuro);
}
.passo__titolo { font-size: var(--t-h3); margin-bottom: 0.4rem; }
.passo p { max-width: 34ch; margin-inline: auto; }

/* il "filo": un'impuntura ondulata che cuce un passo al successivo */
.passo:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% - 12px);
  bottom: -2.1rem;
  height: 1.95rem;
  width: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 600'%3E%3Cpath d='M12 0C2 50 2 100 12 150S22 250 12 300S2 400 12 450S22 550 12 600' fill='none' stroke='%235B6B4A' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='7 6' pathLength='598'/%3E%3C/svg%3E") repeat-y center top / 24px 600px;
  opacity: 0.8;
}

@media (min-width: 960px) {
  .conosciamoci__griglia {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .conosciamoci__testo { padding-top: clamp(1rem, 4vw, 4rem); }
  .passi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
  .passo { padding-top: 4.5rem; }
  .passo__numero { font-size: 2.9rem; }
  /* dal numero di questo passo a quello del successivo (gap di 3rem tra le colonne) */
  .passo:not(:last-child)::after {
    left: calc(50% + 1.6rem);
    right: calc(-50% - 1.4rem);
    top: 0.9rem;
    bottom: auto;
    width: auto;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24'%3E%3Cpath d='M0 12C50 2 100 2 150 12S250 22 300 12S400 2 450 12S550 22 600 12' fill='none' stroke='%235B6B4A' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='7 6' pathLength='598'/%3E%3C/svg%3E") repeat-x left center / 600px 24px;
  }
}

/* ---------- i luoghi ---------- */
.luoghi {
  position: relative;
  background: linear-gradient(to bottom, var(--mare) 0, var(--mare) calc(100% - 22rem), var(--calce) 100%);
  margin-top: 3rem;
}
/* bordo superiore ondulato: la pagina arriva al mare */
.luoghi::before,
.parliamone::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: clamp(2rem, 5vw, 4rem);
  background: var(--mare);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52 C160 30 260 70 420 56 S700 18 860 40 S1160 74 1300 46 S1400 36 1440 42 V80 H0Z'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52 C160 30 260 70 420 56 S700 18 860 40 S1160 74 1300 46 S1400 36 1440 42 V80 H0Z'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
}
.conosciamoci + .luoghi { margin-top: 0; }
.luoghi__intro { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.luoghi__intro .titolo-sezione { max-width: 24ch; }

.atlante {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.atlante__mappa { margin-inline: calc(var(--margine) * -0.5); }

/* mappa */
.mappa { width: 100%; height: auto; display: block; }
.mappa__terra { fill: #EFE8DA; stroke: var(--pietra-scura); stroke-width: 1.2; }
.mappa__zona path {
  fill: var(--c);
  stroke: var(--calce);
  stroke-width: 2.5;
  stroke-linejoin: round;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
[data-zona="gargano"] { --c: var(--z-gargano); }
[data-zona="costa"] { --c: var(--z-costa); }
[data-zona="murgia"] { --c: var(--z-murgia); }
[data-zona="itria"] { --c: var(--z-itria); }
[data-zona="salento"] { --c: var(--z-salento); }
[data-zona="matera"] { --c: var(--z-matera); }

.atlante.ha-selezione .mappa__zona path { opacity: 0.7; }
.atlante .mappa__zona.is-attiva path,
.atlante .mappa__zona.is-anteprima path { opacity: 1; }
.mappa__zona.is-attiva path { stroke: #fff; stroke-width: 4.5; }

.mappa__nome {
  font-family: var(--serif);
  font-size: 40px;
  fill: var(--inchiostro);
  text-anchor: middle;
  pointer-events: none;
}
.mappa__nome--chiaro { fill: #fff; }
.mappa__nome[data-zona="costa"] { font-size: 30px; font-style: italic; }
.mappa__nome[data-zona="itria"] { font-size: 36px; }
.mappa__regione {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  fill: var(--grigio);
}
.citta { cursor: default; }
.citta[data-zona] { cursor: pointer; }
.citta circle { fill: var(--inchiostro); stroke: var(--calce); stroke-width: 2.5; }
.citta--casa circle { fill: var(--calce); stroke: var(--inchiostro); stroke-width: 3; }
.citta text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  fill: var(--inchiostro);
}
.citta--orientamento circle { fill: #8D8579; stroke-width: 2; }
.citta--orientamento text { font-weight: 500; font-size: 17px; fill: var(--grigio); }
.citta--chiara text { fill: #fff; }
.citta--chiara circle { stroke: #fff; }
.citta--orientamento.citta--chiara circle { fill: rgba(255, 255, 255, 0.75); stroke: none; }

@media (max-width: 599px) {
  /* su schermi piccoli restano i nomi delle zone e i punti; i luoghi sono nei pannelli */
  .mappa__nome { font-size: 50px; }
  .mappa__nome[data-zona="costa"] { font-size: 36px; }
  .mappa__nome[data-zona="itria"] { font-size: 44px; }
  .citta text,
  .mappa__regione { display: none; }
  .citta--racconto circle { r: 11px; }
}

/* legenda e dettaglio delle zone */
.legenda {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.legenda__zona {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(43, 39, 33, 0.28);
  border-radius: 999px;
  background: rgba(251, 248, 241, 0.7);
  color: var(--inchiostro);
  font: 500 0.9375rem/1.2 var(--sans);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 160ms var(--ease-out);
}
.legenda__zona.is-anteprima { border-color: var(--inchiostro); background: var(--calce-chiara); }
@media (hover: hover) and (pointer: fine) {
  .legenda__zona:hover { border-color: var(--inchiostro); background: var(--calce-chiara); }
}
.legenda__zona[aria-pressed="true"] {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--calce);
}
.legenda__colore {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1.5px var(--calce-chiara);
  transition: transform 240ms var(--ease-out);
}
.legenda__zona[aria-pressed="true"] .legenda__colore { transform: scale(1.2); }
.legenda__zona[data-zona="matera"] .legenda__colore {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

.zone { display: grid; gap: 2.5rem; }
.js .zona:not(.is-attiva) { display: none; }
.zona img,
.zona .da-completare--foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raggio);
  margin-bottom: 1.1rem;
}
.zona .da-completare--foto {
  display: grid;
  place-items: center;
  text-align: center;
  font-size: var(--t-base);
}
.zona figure img { margin-bottom: 0.5rem; }
.zona figcaption {
  font-size: var(--t-piccolo);
  color: var(--grigio);
  margin-bottom: 1.1rem;
  max-width: 48ch;
}
.zona__nome {
  font-size: var(--t-h3);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.zona__nome::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}
.zona[data-zona="matera"] .zona__nome::before { background: transparent; box-shadow: inset 0 0 0 2px var(--inchiostro); }
.zona__fuori { font-family: var(--serif); font-style: italic; color: var(--grigio); margin-bottom: 0.6rem; }
.js .zona.is-attiva { opacity: 1; transform: none; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
@starting-style {
  .js .zona.is-attiva { opacity: 0; transform: translateY(8px); }
}

@media (min-width: 960px) {
  .atlante {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
  .atlante__mappa { margin-inline: 0; }
  .atlante__dettaglio { position: sticky; top: 6rem; }
}

/* blocco Costa Sveva */
.costa-sveva {
  display: grid;
  gap: 2rem;
  margin-top: clamp(4.5rem, 9vw, 8rem);
}
.costa-sveva__titolo { font-size: var(--t-h2); margin-bottom: 1.25rem; letter-spacing: -0.012em; }
.costa-sveva__foto {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.costa-sveva__foto img { border-radius: var(--raggio); width: 100%; }
.costa-sveva__grande { aspect-ratio: 5 / 4; object-fit: cover; object-position: 62% 50%; }
.costa-sveva__striscia { aspect-ratio: 2 / 3; object-fit: cover; margin-top: 18%; }

@media (min-width: 960px) {
  .costa-sveva {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
}

/* ---------- macchia mediterranea ---------- */
.macchia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 1vw, 0.9rem);
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding: 0 var(--margine);
}
.macchia img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raggio); }

/* ---------- chi sono ---------- */
.chi-sono {
  display: grid;
  gap: 3rem;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
}
.chi-sono > * { margin-inline: 0; }
.chi-sono__testo p { max-width: 60ch; }
.stampa {
  justify-self: center;
  width: min(80%, 23rem);
  background: #FFFDF8;
  padding: 0.75rem 0.75rem 2.75rem;
  border: 1px solid var(--pietra);
  transform: rotate(2deg);
}
@media (min-width: 960px) {
  .chi-sono {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
    padding-bottom: calc(var(--spazio-sezione) + 2rem);
  }
  .stampa { width: 100%; justify-self: end; }
}

/* ---------- parliamone ---------- */
.parliamone {
  position: relative;
  background: var(--adriatico);
  color: var(--su-scuro);
  margin-top: 2.5rem;
}
.parliamone::before { background: var(--adriatico); }

.livelli {
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid rgba(245, 240, 230, 0.2);
}
.livelli__titolo {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-style: italic;
  margin-bottom: 1.75rem;
  max-width: 24ch;
}
.livelli__colonne { display: grid; gap: 2rem; }
.livello h3 { font-size: var(--t-h3); margin-bottom: 0.6rem; font-style: italic; }
.livello p { color: var(--su-scuro-tenue); }
@media (min-width: 760px) {
  .livelli__colonne { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
}

.invito__titolo { max-width: 26ch; margin-bottom: 2.5rem; }

/* "Ricontattami": la via più breve, prima delle domande */
.richiamo {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid rgba(245, 240, 230, 0.35);
  border-radius: var(--raggio);
}
.richiamo__titolo {
  font-family: var(--serif);
  font-size: var(--t-h3);
  margin-bottom: 0.25rem;
}
.richiamo__testo p:not(.richiamo__titolo) { color: var(--su-scuro-tenue); }
/* versione inglese: videochiamata in evidenza e, accanto, l'email */
.richiamo__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
@media (min-width: 760px) {
  .richiamo { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}

.compositore { display: grid; gap: 2.5rem; }
.compositore__intro { color: var(--su-scuro-tenue); margin-bottom: 1.75rem; }
.domanda {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
  min-width: 0;
}
.domanda legend {
  font-family: var(--serif);
  font-size: 1.3rem;
  padding: 0;
  margin-bottom: 0.75rem;
}
.domanda__nota {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-piccolo);
  color: var(--su-scuro-tenue);
  margin-top: 0.15rem;
}
.scelte { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scelta { position: relative; display: inline-flex; }
.scelta input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.scelta span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid rgba(245, 240, 230, 0.5);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .scelta:hover span { border-color: var(--su-scuro); }
}
.scelta input:checked + span {
  background: var(--su-scuro);
  border-color: var(--su-scuro);
  color: var(--adriatico);
}
.scelta input:focus-visible + span {
  outline: 3px solid var(--su-scuro);
  outline-offset: 3px;
}

.compositore__etichetta {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}
.compositore textarea {
  width: 100%;
  min-height: 12rem;
  resize: vertical;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: var(--raggio);
  background: var(--calce-chiara);
  color: var(--inchiostro);
  font: 1rem/1.6 var(--sans);
}
.compositore textarea:focus-visible { outline: 3px solid var(--su-scuro); outline-offset: 3px; }
.compositore__ricomponi,
.compositore__azzera { margin-top: 0.6rem; margin-right: 1.25rem; font-size: var(--t-piccolo); color: var(--su-scuro); min-height: 2.75rem; }
.compositore__invia { margin-top: 1.25rem; }
.compositore [data-avviso-whatsapp] { margin-top: 0.75rem; }

@media (min-width: 960px) {
  .compositore { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .compositore__messaggio { padding-top: 0.25rem; }
}

.alternative {
  list-style: none;
  padding: 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2.5rem;
  border-top: 1px solid rgba(245, 240, 230, 0.2);
  display: grid;
  gap: 2rem;
}
.alternativa__azione {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--serif);
  font-size: var(--t-h3);
  color: var(--su-scuro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 180ms ease, text-underline-offset 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .alternativa__azione:hover { text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
}
.alternativa p { color: var(--su-scuro-tenue); margin-top: 0.25rem; }
.alternativa .da-completare { margin-top: 0.75rem; }
.alternativa p.alternativa__indirizzo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  margin-top: 0.5rem;
  color: var(--su-scuro);
}
.alternativa__indirizzo a { color: inherit; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.alternativa__copia { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-piccolo); }
.alternativa__esito { font-size: var(--t-piccolo); color: var(--su-scuro-tenue); }
@media (min-width: 760px) {
  .alternative { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
}
@media (min-width: 960px) {
  .alternative { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
}

/* ---------- piede ---------- */
.piede {
  background: var(--adriatico-profondo);
  color: var(--su-scuro);
  padding: clamp(3rem, 6vw, 4.5rem) var(--margine);
  font-size: var(--t-piccolo);
}
.piede__interno {
  max-width: var(--larghezza);
  margin-inline: auto;
  display: grid;
  gap: 2rem;
}
.piede__pittogramma {
  width: 3.5rem;
  margin-bottom: 1rem;
  --p-sinistra: var(--su-scuro);
  --p-lente: var(--su-scuro);
  --p-destra: var(--su-scuro);
}
.piede__nome { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 0.2rem; }
.piede__payoff { color: var(--su-scuro-tenue); font-size: 1rem; }
.piede__contatti { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.piede__contatti a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.piede__note { display: grid; gap: 0.6rem; }
@media (min-width: 960px) {
  .piede__interno { grid-template-columns: 1.2fr 1fr 1.4fr; align-items: start; }
}

/* ---------- movimento allo scorrimento ----------
   Le classi le mette js/sito.js (avviaComparse) e solo con JavaScript attivo: senza,
   tutto è visibile da subito. Ogni elemento compare una volta sola, poi resta fermo. */

/* titoli e testi: affiorano di poco, in cascata dentro lo stesso blocco */
.comparsa {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--ritardo, 0ms);
}
.comparsa.is-visibile { opacity: 1; transform: none; }

/* foto: si aprono dai bordi verso l'esterno, come una stampa che si sviluppa */
.comparsa-foto {
  opacity: 0;
  clip-path: inset(5% round var(--raggio));
  transition: opacity 900ms var(--ease-out), clip-path 1100ms var(--ease-out);
  transition-delay: var(--ritardo, 0ms);
}
.comparsa-foto.is-visibile { opacity: 1; clip-path: inset(0 round var(--raggio)); }
/* la foto di "Chi sono" si posa sul tavolo: arriva un po' più storta e si assesta */
.stampa.comparsa-foto {
  clip-path: none;
  transform: translateY(16px) rotate(4deg);
  transition: opacity 800ms var(--ease-out), transform 1100ms var(--ease-out);
}
.stampa.comparsa-foto.is-visibile { transform: rotate(2deg); }

/* Conosciamoci: i passi arrivano uno alla volta e il filo si cuce dall'uno all'altro */
.comparsa-gruppo.passi .passo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.comparsa-gruppo.passi .passo:not(:last-child)::after {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 650ms var(--ease-in-out);
}
@media (min-width: 960px) {
  .comparsa-gruppo.passi .passo:not(:last-child)::after { clip-path: inset(0 100% 0 0); }
}
.comparsa-gruppo.passi.is-visibile .passo { opacity: 1; transform: none; }
.comparsa-gruppo.passi.is-visibile .passo:nth-child(2) { transition-delay: 550ms; }
.comparsa-gruppo.passi.is-visibile .passo:nth-child(3) { transition-delay: 1100ms; }
.comparsa-gruppo.passi.is-visibile .passo:not(:last-child)::after { clip-path: inset(0); transition-delay: 250ms; }
.comparsa-gruppo.passi.is-visibile .passo:nth-child(2)::after { transition-delay: 800ms; }

/* la mappa si accende: prima le zone, poi i nomi e le città; Trani pulsa una volta */
.comparsa-gruppo .mappa__zona,
.comparsa-gruppo .mappa__nomi,
.comparsa-gruppo .mappa__citta {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.comparsa-gruppo.is-visibile .mappa__zona,
.comparsa-gruppo.is-visibile .mappa__nomi,
.comparsa-gruppo.is-visibile .mappa__citta { opacity: 1; }
.comparsa-gruppo.is-visibile .mappa__zona:nth-child(2) { transition-delay: 90ms; }
.comparsa-gruppo.is-visibile .mappa__zona:nth-child(3) { transition-delay: 180ms; }
.comparsa-gruppo.is-visibile .mappa__zona:nth-child(4) { transition-delay: 270ms; }
.comparsa-gruppo.is-visibile .mappa__zona:nth-child(5) { transition-delay: 360ms; }
.comparsa-gruppo.is-visibile .mappa__nomi { transition-delay: 500ms; }
.comparsa-gruppo.is-visibile .mappa__citta { transition-delay: 650ms; }
.citta--casa circle { transform-box: fill-box; transform-origin: center; }
.comparsa-gruppo.is-visibile .citta--casa circle { animation: battito 900ms var(--ease-out) 1300ms 1; }
@keyframes battito {
  40% { transform: scale(1.45); }
  to { transform: scale(1); }
}

/* la hero si allontana mentre scorri: il testo sfuma e sale appena (solo dove il browser
   lega le animazioni allo scorrimento; altrove resta ferma, senza perdere nulla) */
@supports (animation-timeline: scroll()) {
  .js .hero__contenuto {
    animation: allontana linear both;
    animation-timeline: scroll(root);
    animation-range: 0 70vh;
  }
  @keyframes allontana {
    to { opacity: 0.15; transform: translateY(-36px); }
  }
}

/* "Scorri" oscilla piano tre volte, per dire che la pagina continua, poi si ferma */
.js .hero__scorri svg { animation: oscilla 2.6s var(--ease-in-out) 1.2s 3; }
html:not(.su-hero) .hero__scorri svg { animation-play-state: paused; }
@keyframes oscilla {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(4px); }
}

/* in stampa niente resta nascosto in attesa di uno scorrimento */
@media print {
  .comparsa, .comparsa-foto, .comparsa-gruppo .passo,
  .comparsa-gruppo .mappa__zona, .comparsa-gruppo .mappa__nomi, .comparsa-gruppo .mappa__citta {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------- movimento ridotto ----------
   Meno movimento, non zero: niente spostamenti, zoom o scorrimenti animati,
   ma restano le dissolvenze e i cambi di colore che aiutano a capire cosa è cambiato. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .film__fotogramma.in-moto img { animation: none; }
  .js .hero__contenuto > * { animation-name: affiora; }
  .su-hero .marchio { transform: none; }
  .bottone:active,
  .menu a.menu__scrivimi:active,
  .legenda__zona:active,
  .scelta:active span,
  .film__pausa:active { transform: none; }
  /* le comparse restano, ma solo come dissolvenze */
  .comparsa,
  .comparsa-gruppo.passi .passo { transform: none; }
  .stampa.comparsa-foto { transform: rotate(2deg); }
  .comparsa-foto,
  .comparsa-gruppo.passi .passo:not(:last-child)::after { clip-path: none; }
  .comparsa-gruppo.is-visibile .citta--casa circle,
  .js .hero__scorri svg,
  .js .hero__contenuto { animation: none; }
  .js .zona.is-attiva { transform: none; }
  .legenda__zona[aria-pressed="true"] .legenda__colore { transform: none; }
  .lingue[open] summary svg { transform: none; }
}