/* ==========================================================================
   APN Voyage — foglio di stile unico
   Palette interamente chiara: sabbia asciutta, sabbia bagnata, acqua.
   Nessun fondo scuro. Le animazioni allo scroll sono CSS puro: dove non
   sono supportate, il contenuto resta semplicemente fermo e visibile.
   ========================================================================== */

/* --- Caratteri ---------------------------------------------------------------
   Il progetto era disegnato su Fraunces (titoli) e Karla (testo), ma i file
   non sono mai stati caricati: ogni pagina faceva due richieste fallite.
   Per ora si usano i caratteri di sistema. Per rimetterli, ripristina i due
   blocchi @font-face qui sotto, i preload in inc/head.php e antepone
   'Fraunces' e 'Karla' alle rispettive pile in --f-display e --f-testo.

   @font-face { font-family:'Fraunces'; src:url('/assets/fonts/fraunces-var.woff2') format('woff2-variations');
                font-weight:300 900; font-display:swap; ascent-override:92%; descent-override:24%; }
   @font-face { font-family:'Karla'; src:url('/assets/fonts/karla-var.woff2') format('woff2-variations');
                font-weight:300 800; font-display:swap; size-adjust:104%; ascent-override:94%; descent-override:22%; }
*/

/* --- Token --------------------------------------------------------------- */

:root {
  color-scheme: light;

  --c-bianco:    #FFFFFF;   /* schiuma */
  --c-sabbia-00: #FAF5EA;   /* sabbia asciutta al sole */
  --c-sabbia-10: #F2E9D8;   /* sabbia compatta */
  --c-sabbia-20: #E7DAC2;   /* sabbia bagnata: il piede */
  --c-schiuma:   #E6F0EE;   /* il velo d'acqua sulla battigia */
  --c-oro:       #96771A;   /* filetti e dettagli */
  --c-oro-cupo:  #7A5C10;   /* testo secondario */
  --c-testo:     #1E3A42;   /* inchiostro: il mare al largo */
  --c-testo-lieve: var(--c-oro-cupo);
  --c-mare:      #097183;   /* acqua bassa */
  --c-mare-cupo: #06606F;   /* al passaggio del mouse */
  --c-mare-fondo:#06525F;   /* lo stesso turchese, sopra il video */

  --c-fondo:      var(--c-sabbia-00);
  --c-superficie: var(--c-bianco);
  --c-bordo:      var(--c-oro);
  --c-accento:    var(--c-mare);

  /* Il ripiego conta: finché i .woff2 non ci sono, è questo che si vede. */
  --f-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-testo:   system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t-micro:   .8rem;
  --t-piccolo: clamp(.9rem, .87rem + .15vw, .975rem);
  --t-base:    clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-medio:   clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --t-grande:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --t-enorme:  clamp(2.3rem, 1.6rem + 3.4vw, 4.6rem);

  --s-1: .5rem;
  --s-2: .875rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  --larghezza: 74rem;
  --misura:    62ch;

  --raggio-s: 6px;
  --raggio-m: 12px;
  --raggio-l: 18px;

  --ombra-lieve: 0 1px 2px rgba(30, 58, 66, .05), 0 6px 20px rgba(30, 58, 66, .06);
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-testo);
  font-family: var(--f-testo);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-wrap: break-word;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

img, svg, video, picture { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin-block: 0 var(--s-3);
}

p { margin-block: 0 var(--s-3); max-width: var(--misura); }

/* Nessuna sottolineatura in tutto il sito: un link si riconosce dal peso
   e dal colore. Il grassetto è una distinzione non cromatica, quindi la
   regola resta valida anche per chi non percepisce i colori (WCAG 1.4.1). */
a {
  color: var(--c-accento);
  font-weight: 700;
  text-decoration: none;
}
a:hover { color: var(--c-mare-cupo); }

:focus-visible {
  outline: 3px solid var(--c-mare);
  outline-offset: 3px;
  border-radius: var(--raggio-s);
}

.skip {
  position: absolute;
  inset-inline-start: var(--s-3);
  inset-block-start: -6rem;
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--raggio-s);
  background: var(--c-mare);
  color: var(--c-bianco);
  transition: inset-block-start .15s;
}
.skip:focus { inset-block-start: var(--s-2); color: var(--c-bianco); }

.guscio { width: min(100% - 2 * var(--s-3), var(--larghezza)); margin-inline: auto; }

.a-voce {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Icone ---------------------------------------------------------------- */

.icona {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -.2em;
}

.riga {
  display: flex;
  align-items: flex-start;
  gap: .65em;
}
.riga .icona { margin-block-start: .15em; color: var(--c-testo); }

/* --- Elementi ricorrenti -------------------------------------------------- */

.occhiello {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accento);
  margin-block-end: var(--s-2);
}

.bottone {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--raggio-m);
  background: var(--c-mare);
  color: var(--c-bianco);
  font: inherit;
  font-weight: 700;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* La busta è un rettangolo più una linea: allo stesso tratto degli altri
   segni risulta più esile del testo che accompagna. */
.bottone .icona--mail { stroke-width: 2.8; }

.bottone:hover {
  background: var(--c-mare-cupo);
  color: var(--c-bianco);
  box-shadow: var(--ombra-lieve);
}
.bottone:active { transform: translateY(1px); }

/* currentColor: il bordo prende per definizione lo stesso colore del testo
   e dell'icona dentro al pulsante, e ci resta anche se cambiano. */
.bottone--vuoto {
  background: var(--c-bianco);
  border-color: currentColor;
  color: var(--c-testo);
}
.bottone--vuoto:hover { background: var(--c-bianco); color: var(--c-mare-cupo); border-color: var(--c-mare); }

.bottone--compatto {
  min-height: 44px;
  padding-inline: var(--s-3);
  font-size: var(--t-piccolo);
  border-radius: var(--raggio-s);
}

/* --- Ritmo delle sezioni --------------------------------------------------- */

.sezione {
  padding-block: var(--s-6);
  background: var(--c-sabbia-00);
  scroll-margin-block-start: 8rem;   /* l'intestazione è fissa: le ancore la scavalcano */
}
.sezione--schiuma { background: var(--c-schiuma); }

.due-colonne { display: grid; gap: var(--s-6) var(--s-5); align-items: start; }

@media (min-width: 62rem) {
  .due-colonne { grid-template-columns: 1fr 1fr; }
  /* Filetto verticale a metà: separa le due colonne senza scatole. */
  .due-colonne > * + * {
    border-inline-start: 1px solid var(--c-bordo);
    padding-inline-start: var(--s-5);
  }
}

.sezione__intro { max-width: 46ch; margin-block-end: var(--s-5); }
.sezione__intro h2 { font-size: var(--t-grande); }
.sezione__intro > :last-child { margin-block-end: 0; }

/* --- Intestazione bianca --------------------------------------------------- */

.intestazione {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--c-bianco);
  border-block-end: 1px solid rgba(30, 58, 66, .1);
  padding-block: var(--s-2);
  padding-block-start: max(var(--s-2), env(safe-area-inset-top));
}

.intestazione__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.marchio { flex: 0 0 auto; line-height: 0; }
.marchio img { width: clamp(88px, 18vw, 124px); height: auto; }

.navigazione { flex: 1 1 100%; order: 3; min-width: 0; }

.navigazione__voci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--t-piccolo);
}

.navigazione__voci a {
  display: inline-block;
  padding-block: .55rem;
  color: var(--c-testo);
  border-block-end: 2px solid transparent;
}
.navigazione__voci a:hover,
.navigazione__voci a[aria-current='page'] { color: var(--c-mare); border-block-end-color: var(--c-mare); }

@media (min-width: 62rem) {
  /* Le voci si accostano al numero di telefono invece di stare sotto al logo. */
  .navigazione { flex: 0 1 auto; order: 0; margin-inline-start: auto; }
  .intestazione .bottone { margin-inline-start: 0; }
}

.intestazione .bottone { margin-inline-start: auto; }

.menu__spunta {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: 0; opacity: 0;
  pointer-events: none;
}

.menu__leva { display: none; }

@media (min-width: 62rem) { .menu__spunta { display: none; } }

/* --- Apertura con video ---------------------------------------------------- */

.apertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-block-size: min(78svh, 44rem);
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
}

/* Il poster sta anche come sfondo CSS: se l'autoplay è bloccato (Risparmio
   energetico iOS) non c'è nessun lampo, si vede direttamente l'immagine. */
.apertura__sfondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-sabbia-10) url('/assets/img/spiaggia-poster.jpg') center / cover no-repeat;
}

.apertura__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Il movimento del filmato — onde e gambe — sta fra il 55% e l'80% della
     larghezza, baricentro al 66%: misurato sulla varianza temporale colonna
     per colonna su 27 fotogrammi. Al centro c'è solo acqua ferma, ed è
     esattamente quella che il ritaglio teneva su schermo stretto. */
  object-position: 68% center;
  pointer-events: none;
}

/* Velo di sabbia: tiene il testo leggibile qualunque fotogramma passi. */
.apertura__sfondo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Tarato sul video reale: il blocco più scuro sotto al testo ha
     luminanza 0,11, quindi al 56% l'inchiostro sta a 5,7:1. Sopra il 60%
     il velo comincia solo a nascondere le onde senza guadagnare nulla. */
  background: linear-gradient(96deg,
    rgba(250, 245, 234, .62) 0%,
    rgba(250, 245, 234, .56) 60%,
    rgba(250, 245, 234, .26) 100%);
}

@media (max-width: 46rem) {
  .apertura__sfondo::after { background: rgba(250, 245, 234, .62); }
}

.apertura h1 {
  font-size: var(--t-enorme);
  font-weight: 500;
  max-width: 17ch;
}

.apertura__risposta { font-size: var(--t-medio); max-width: 52ch; }

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
  max-width: none;
}

.apertura__dati {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-mare-fondo);
}

/* Sopra il video il velo si ferma al 62% per non coprire le onde: a quel
   punto il turchese del pulsante scende a 2,97:1. Stessa tinta, portata
   in profondita, torna a 4,62:1. */
.apertura .occhiello { color: var(--c-mare-fondo); }
.apertura__dati .icona { color: var(--c-mare-fondo); }
/* I collegamenti qui non si distinguono per il peso ma per la posizione:
   il testo attorno è già in maiuscoletto spaziato e un 700 lo sfondava. */
.apertura__dati a { color: inherit; font-weight: inherit; }

/* --- Stacchi a onda fra le sezioni ------------------------------------------
   Due strati mascherati dalla stessa piastrella SVG, che scorrono a velocità
   diverse e in versi opposti. La piastrella contiene due periodi esatti,
   quindi traslando di metà elemento il giro si chiude senza scatto. */

.onda {
  --onda-da: var(--c-sabbia-00);
  --onda-a:  var(--c-schiuma);
  position: relative;
  overflow: hidden;
  block-size: clamp(34px, 4.5vw, 62px);
  background: var(--onda-da);
  line-height: 0;
}

.onda--rovescia { --onda-da: var(--c-schiuma); --onda-a: var(--c-sabbia-00); }

.onda::before,
.onda::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 200%;
  background: var(--onda-a);
  -webkit-mask: url('/assets/img/onda.svg') repeat-x left bottom / 50% 100%;
          mask: url('/assets/img/onda.svg') repeat-x left bottom / 50% 100%;
}

/* Il secondo strato, più alto e più tenue, fa la schiuma dietro alla cresta. */
.onda::before { opacity: .45; inset-block-start: -10px; }

@keyframes onda-scorre { to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: no-preference) {
  .onda::before { animation: onda-scorre 38s linear infinite reverse; }
  .onda::after  { animation: onda-scorre 24s linear infinite; }
}

/* --- Il banco -------------------------------------------------------------- */

.banco { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }

@media (min-width: 46rem) { .banco { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }

.banco > li { display: flex; min-width: 0; }

.scrivania {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--c-superficie);
  border: 1px solid rgba(30, 58, 66, .1);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-lieve);
}

/* Sollevamento condiviso da tutte le schede del sito.
   Sta sempre su un elemento interno, mai sull'<li>: quello è già impegnato
   dall'animazione allo scroll e i due transform si annullerebbero. */
@media (prefers-reduced-motion: no-preference) {
  .scrivania,
  .riquadro,
  .percorso li {
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
  }
  .scrivania:hover, .scrivania:focus-within,
  .riquadro:hover, .riquadro:focus-within,
  .percorso li:hover, .percorso li:focus-within {
    transform: translateY(-5px) scale(1.018);
    box-shadow: 0 10px 30px rgba(30, 58, 66, .13);
  }
}

.scrivania__ritratto {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.scrivania__corpo { padding: var(--s-3); flex: 1 1 auto; }
.scrivania__corpo > :last-child { margin-block-end: 0; }

.scrivania__nome { font-size: var(--t-medio); margin-block-end: .25rem; }

.scrivania__ruolo {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accento);
  margin-block-end: var(--s-2);
}

.scrivania__firma {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: var(--s-3) 0 0; padding: 0;
  list-style: none;
  font-size: var(--t-micro);
}

.scrivania__firma li {
  padding: .3rem .7rem;
  border: 1px solid var(--c-bordo);
  border-radius: 100px;
  color: var(--c-testo-lieve);
}

/* --- Servizi --------------------------------------------------------------- */

/* auto-fill e non auto-fit: con auto-fit le colonne vuote spariscono e
   l'ultima scheda rimasta sola si allarga su tutta la riga. */
.elenco-servizi {
  display: grid;
  gap: var(--s-3) var(--s-4);
  margin: 0; padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* Ogni riquadro del sito è un francobollo: quattro file di cerchi
   trasparenti mordono i bordi, e mask-composite le somma tutte e quattro.
   L'ombra sta sull'<li> e non sulla scheda, perché una maschera taglia via
   anche l'ombra dell'elemento su cui è applicata. */
.elenco-servizi li,
.griglia-schede li {
  display: flex;
  min-width: 0;
  filter: drop-shadow(0 2px 3px rgba(30, 58, 66, .10)) drop-shadow(0 8px 14px rgba(30, 58, 66, .08));
}

.riquadro {
  --foro: 7px;
  --passo-foro: 22px;
  /* Nelle griglie il riquadro è un <div>, nelle schede-link è un <a>, che
     di suo è inline: fuori da un contenitore flex perderebbe padding e
     maschera. Dichiararlo blocco qui vale in ogni contesto. */
  display: block;
  position: relative;
  flex: 1 1 auto;
  padding: 1.7rem 1.5rem;
  background: var(--c-superficie);
  -webkit-mask:
    radial-gradient(circle var(--foro) at 50% 0,    #0000 98%, #000) 0 0 / var(--passo-foro) 100%,
    radial-gradient(circle var(--foro) at 50% 100%, #0000 98%, #000) 0 0 / var(--passo-foro) 100%,
    radial-gradient(circle var(--foro) at 0 50%,    #0000 98%, #000) 0 0 / 100% var(--passo-foro),
    radial-gradient(circle var(--foro) at 100% 50%, #0000 98%, #000) 0 0 / 100% var(--passo-foro);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle var(--foro) at 50% 0,    #0000 98%, #000) 0 0 / var(--passo-foro) 100%,
    radial-gradient(circle var(--foro) at 50% 100%, #0000 98%, #000) 0 0 / var(--passo-foro) 100%,
    radial-gradient(circle var(--foro) at 0 50%,    #0000 98%, #000) 0 0 / 100% var(--passo-foro),
    radial-gradient(circle var(--foro) at 100% 50%, #0000 98%, #000) 0 0 / 100% var(--passo-foro);
  mask-composite: intersect;
}

/* Variante liscia: niente dentelli, torna il rettangolo raccordato. */
.griglia-schede--liscia .riquadro {
  -webkit-mask: none;
          mask: none;
  padding: var(--s-3);
  border: 1px solid rgba(30, 58, 66, .1);
  border-block-start: 3px solid var(--c-mare);
  border-radius: var(--raggio-m);
}

.griglia-schede--liscia .riquadro::before { display: none; }

/* La cornice interna: staccata dai dentelli e con gli spigoli smussati. */
.riquadro::before {
  content: '';
  position: absolute;
  inset: 15px;
  border: 1px solid var(--c-mare);
  border-radius: 4px;
  opacity: .35;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .elenco-servizi li,
  .griglia-schede li { transition: filter .3s ease; }
  .elenco-servizi li:hover,
  .griglia-schede li:hover {
    filter: drop-shadow(0 3px 5px rgba(30, 58, 66, .14)) drop-shadow(0 12px 22px rgba(30, 58, 66, .13));
  }
  .riquadro:hover { box-shadow: none; }
}

.elenco-servizi strong { display: block; font-size: var(--t-base); }
.elenco-servizi span { color: var(--c-mare); font-size: var(--t-piccolo); }

/* --- Percorso (sequenza reale, quindi numerata) ---------------------------- */

/* I passaggi scorrono in orizzontale nell'ordine 01 → 02 → 03.
   tabindex="0" sul contenitore serve a chi naviga da tastiera: senza,
   una zona scorrevole senza elementi attivabili resta irraggiungibile. */
.pista {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--c-oro) transparent;
  margin-inline: calc(-1 * var(--s-3));
  padding: var(--s-1) var(--s-3) var(--s-3);
}

.percorso {
  counter-reset: passo;
  display: flex;
  gap: var(--s-3);
  margin: 0; padding: 0;
  list-style: none;
}

.percorso li {
  counter-increment: passo;
  flex: 0 0 clamp(15rem, 76vw, 22rem);
  scroll-snap-align: start;
  padding: var(--s-4) var(--s-3);
  background: var(--c-superficie);
  border: 1px solid rgba(30, 58, 66, .1);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-lieve);
}

/* Il numero sta sul contenitore della testa, così può affiancare l'icona
   invece di stare su una riga sua. Il contatore si legge lo stesso: le
   variabili di conteggio scendono lungo l'albero. */
.passo-numero::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-grande);
  font-weight: 800;
  line-height: 1;
  color: var(--c-mare);
  margin-block-end: var(--s-2);
}

/* Titolo e icona sulla stessa riga, l'icona spinta a filo destro. */
.passo-titolo {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-block-end: var(--s-2);
}

.passo-titolo h3 {
  margin: 0;
  min-width: 0;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem);
}

.passo-titolo .icona {
  flex: none;
  /* Altezza pari alla riga del titolo (1,25rem × interlinea 1,1 ≈ 1,375rem):
     così il segno resta centrato sulla prima riga invece di scivolare sotto. */
  inline-size: 1.35rem;
  block-size: 1.35rem;
  stroke-width: 1.8;
  color: inherit;              /* lo stesso inchiostro del titolo */
  margin-block-start: 0;
}

.percorso li > :last-child { margin-block-end: 0; }

/* --- Domande frequenti ------------------------------------------------------ */

.domanda { border-block-end: 1px solid var(--c-mare); }
.domanda:last-of-type { border-block-end: none; }

.domanda summary {
  font-family: var(--f-display);
  font-size: var(--t-medio);
  font-weight: 600;
  cursor: pointer;
  padding-block: var(--s-3);
  list-style-position: outside;
}

.domanda summary::marker { color: var(--c-mare); }
.domanda__azione { margin-block: var(--s-1) var(--s-3); }

/* Un numero di telefono spezzato a metà non si riconosce più. */
.senza-spezzare { white-space: nowrap; }

/* --- La mappa, dentro la prima domanda --------------------------------------
   Sta nel corpo della risposta, non a fianco: chiudendo la domanda si chiude
   anche lei, e con lei si ferma la richiesta al server di Google. */

.mappa {
  max-inline-size: 34rem;
  margin-block-end: var(--s-3);
  border: 1px solid rgba(30, 58, 66, .12);
  border-radius: var(--raggio-m);
  overflow: hidden;
  line-height: 0;
}

.mappa iframe {
  display: block;
  inline-size: 100%;
  block-size: 15rem;
  border: 0;
}
.domanda p { margin-block: 0 var(--s-3); }

/* --- Pagine interne ---------------------------------------------------------- */

.pagina-apertura {
  background: var(--c-schiuma);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--c-bordo);
  scroll-margin-block-start: 8rem;
}

/* Variante senza stacco: stesso fondo della sezione che segue e nessun
   filetto, così il titolo e le schede stanno su una superficie sola. */
/* Usata dalla pagina Facebook: fondo celeste continuo con la sezione
   sottostante, nessun filetto di stacco. */
.pagina-apertura--unita {
  background: var(--c-schiuma);
  border-block-end: 0;
  padding-block-end: 0;
}

.pagina-apertura h1 { font-size: var(--t-grande); max-width: 22ch; }
.pagina-apertura p { font-size: var(--t-medio); max-width: 54ch; margin-block-end: 0; }

/* display:flex invece di line-height:0 — così il riquadro del paragrafo è
   alto esattamente quanto il segno e il margine sotto viene applicato per
   intero, senza che l'allineamento alla linea di base se ne mangi una parte. */
.marchio-social {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding-block: 0 1.5rem;
  color: var(--c-accento);
}

.marchio-social .icona { inline-size: 2.9rem; block-size: 2.9rem; }

.briciole { font-size: var(--t-micro); margin-block-end: var(--s-2); }
.briciole ol { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.briciole li + li::before { content: '\203A'; margin-inline-end: .5em; color: var(--c-testo-lieve); }

.prosa { max-width: 68ch; }
.prosa > :first-child { margin-block-start: 0; }
.prosa h2 { font-size: var(--t-medio); margin-block-start: var(--s-5); }
.prosa h3 { font-size: var(--t-base); margin-block: var(--s-4) var(--s-1); }
.prosa :is(ul, ol) { margin-block: 0 var(--s-3); padding-inline-start: 1.3em; max-width: var(--misura); }
.prosa li { margin-block-end: .35rem; }
.prosa :is(ul, ol) li::marker { color: var(--c-mare); }

.aggiornamento {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-bordo);
  font-size: var(--t-micro);
  color: var(--c-testo-lieve);
}

/* Griglia di schede cliccabili: pagine Facebook, link utili */
.griglia-schede {
  display: grid;
  gap: var(--s-3);
  margin: 0; padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.griglia-schede li { display: flex; min-width: 0; }
.griglia-schede .riquadro { color: var(--c-testo); }
.griglia-schede strong { display: block; font-size: var(--t-base); margin-block-end: .2rem; }
.griglia-schede span { color: var(--c-mare); font-size: var(--t-piccolo); }

/* --- Piede ------------------------------------------------------------------ */

.piede {
  scroll-margin-block-start: 8rem;
  /* Un solo oro per tutto il piede: ridefinendo i token sul contenitore
     lo ereditano titoli, indirizzo, etichette, icone, link e dati legali.
     #6E5310 sulla sabbia bagnata sta a 5,23:1. */
  --c-testo:       #6E5310;
  --c-testo-lieve: #6E5310;
  --c-accento:     #6E5310;
  color: var(--c-testo);
  background: var(--c-sabbia-20);
  padding-block: var(--s-5);
  padding-block-end: max(var(--s-5), env(safe-area-inset-bottom));
  font-size: var(--t-piccolo);
}

.piede__griglia {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.piede__titolo { font-size: var(--t-base); margin-block-end: var(--s-2); }
.piede__indirizzo { font-style: normal; display: grid; gap: var(--s-2); }
.piede__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }

.voce { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.voce__nota { color: var(--c-testo); font-weight: 400; }


/* align-items:end tiene la targa a filo del fondo della colonna legale:
   è quello che la porta davvero "in basso a destra" e non solo a destra. */
.piede__coda {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-bordo);
  display: grid;
  gap: var(--s-4);
  align-items: end;
}

.piede__coda > * { min-inline-size: 0; }

/* La seconda colonna ha una misura definita, non "auto": con "auto" il
   100% dell'immagine non ha nulla contro cui risolversi, il browser
   ripiega sulla larghezza intrinseca del file (1200px) e schiaccia a zero
   la colonna dei dati legali. */
@media (min-width: 46rem) {
  .piede__coda { grid-template-columns: minmax(18rem, 1fr) minmax(0, 24rem); }
}

/* I marchi istituzionali vanno riprodotti su fondo neutro, non sulla sabbia. */
.piede__fesr img {
  inline-size: 100%;
  max-inline-size: 24rem;
  block-size: auto;
  margin-inline-start: auto;
  padding: var(--s-2) var(--s-3);
  background: var(--c-bianco);
  border-radius: var(--raggio-m);
}

/* Segnaposto e busta sono disegni a filo: a questa misura il tratto
   sottile li rende più esili del testo che accompagnano. */
.piede .icona { stroke-width: 2.5; }

.piede__legale {
  font-size: var(--t-micro);
  color: var(--c-testo-lieve);
}
.piede__legale p { max-width: none; }
.piede__firma { margin-block-end: 0; }

/* --- Pulsante WhatsApp fisso -------------------------------------------------
   Verde e glifo sono quelli del marchio WhatsApp. Bianco su #25D366 sta a
   1,98:1, sotto il minimo per i componenti di interfaccia, ma la 1.4.11
   esclude espressamente i logotipi. Il contorno del pulsante lo affido
   quindi all'ombra, che lo stacca dal fondo a qualsiasi altezza di pagina. */

.wapp {
  position: fixed;
  inset-block-end: max(var(--s-3), env(safe-area-inset-bottom));
  inset-inline-end: max(var(--s-3), env(safe-area-inset-right));
  z-index: 60;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(30, 58, 66, .30);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wapp .icona { inline-size: 30px; block-size: 30px; }

.wapp:hover,
.wapp:focus-visible { color: #FFFFFF; box-shadow: 0 6px 22px rgba(30, 58, 66, .40); }

@media (prefers-reduced-motion: no-preference) {
  .wapp:hover { transform: scale(1.06); }
}

/* --- Animazioni allo scroll, in CSS puro ------------------------------------
   Nessun JavaScript: se il browser non conosce animation-timeline, il
   blocco @supports viene ignorato e il contenuto resta visibile e fermo.
   Non esiste quindi il caso "sezione bloccata a opacity:0".               */

@keyframes sali {
  from { opacity: 0; transform: translateY(1.75rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes entra {
  from { opacity: 0; transform: translateY(1.1rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes posa-ombra {
  to { box-shadow: 0 1px 3px rgba(30, 58, 66, .06), 0 8px 24px rgba(30, 58, 66, .08); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Apertura: entra al caricamento, non allo scroll. */
  .apertura__testo > * { animation: entra .7s cubic-bezier(.22, .61, .36, 1) both; }
  .apertura__testo > *:nth-child(2) { animation-delay: .08s; }
  .apertura__testo > *:nth-child(3) { animation-delay: .16s; }
  .apertura__testo > *:nth-child(4) { animation-delay: .24s; }
  .apertura__testo > *:nth-child(5) { animation-delay: .32s; }

  @supports (animation-timeline: view()) {
    .anima {
      animation: sali linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 28%;
    }

    /* Sfalsamento: le schede non salgono tutte insieme. */
    .anima-lista > * {
      animation: sali linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
    }
    .anima-lista > *:nth-child(3n+2) { animation-range: entry 6% cover 30%; }
    .anima-lista > *:nth-child(3n+3) { animation-range: entry 10% cover 34%; }
  }

  @supports (animation-timeline: scroll()) {
    .intestazione {
      animation: posa-ombra linear both;
      animation-timeline: scroll();
      animation-range: 0 140px;
    }
  }
}

/* --- Solo mobile ------------------------------------------------------------
   Da qui in giù nulla tocca il desktop: sono tutte regole dentro max-width. */

/* Il menu diventa una tendina. L'elenco resta lo stesso, cambia solo come
   viene mostrato: nessun contenuto duplicato per le due versioni. */
@media (max-width: 61.99rem) {
  /* Solo il segno, a filo destro del logo. Il riquadro di tocco resta di
     44px anche senza testo accanto. */
  .menu__leva {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    min-height: 44px;
    margin-inline-start: auto;
    cursor: pointer;
  }

  .menu__leva svg { inline-size: 1.55rem; block-size: 1.55rem; }

  .menu__spunta:focus-visible ~ .menu__leva {
    outline: 3px solid var(--c-mare);
    outline-offset: 3px;
  }

  /* Il numero resta comunque nel pulsante fisso in basso a destra. */
  .intestazione .bottone { display: none; }

  .navigazione__voci { display: none; }

  .menu__spunta:checked ~ .navigazione .navigazione__voci {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-start: var(--s-2);
  }

  /* Righe di separazione nel turchese del pulsante telefono. */
  .navigazione__voci li + li { border-block-start: 1px solid var(--c-mare); }
  .navigazione__voci a { display: block; padding-block: .85rem; }
}

@media (max-width: 46rem) {

  /* Due colonne, ma non più una griglia: la griglia ragiona per righe, e
     finché lo fa la distanza verticale fra una scheda e la successiva dipende
     da quanto è alta la vicina. Le colonne CSS impacchettano invece gli
     elementi uno sotto l'altro con un margine fisso, e con column-fill: balance
     distribuiscono il contenuto per rendere le due colonne alte quasi uguali —
     senza dover riordinare nulla a mano. */
  .elenco-servizi,
  .griglia-schede {
    display: block;
    columns: 2;
    column-gap: var(--s-2);
    column-fill: balance;
  }

  .elenco-servizi li,
  .griglia-schede li {
    display: block;
    break-inside: avoid;          /* una scheda non si spezza fra due colonne */
    margin-block-end: var(--s-2); /* è questa la distanza, sempre la stessa */
  }

  /* Dentelli e cornice rimpiccioliti in proporzione alla scheda. */
  .riquadro {
    --foro: 5px;
    --passo-foro: 16px;
    padding: 1.15rem .85rem;
  }

  .riquadro::before { inset: 10px; border-radius: 3px; }
  .griglia-schede strong,
  .elenco-servizi strong { font-size: var(--t-piccolo); }

  /* Le tre tappe si impilano: niente barra di scorrimento orizzontale. */
  .pista {
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0;
  }

  .percorso { flex-direction: column; }
  .percorso li { flex: 1 1 auto; inline-size: 100%; scroll-snap-align: none; }

  /* Freccetta e domanda staccate dal bordo. */
  /* Con "outside" il triangolino esce dal riquadro e nessun padding lo
     raggiunge: riportarlo dentro è quello che lo fa spostare davvero. */
  .domanda summary {
    list-style-position: inside;
    padding-inline-start: 1.15rem;
  }

  /* La targa FESR al centro: in colonna singola, a destra sembrava persa. */
  .piede__fesr img { margin-inline: auto; }

  /* "Manda i documenti a info@apn.voyage" su una riga sola. Il corpo è
     calcolato sullo spazio realmente disponibile, non scelto a occhio:
     35 caratteri + icona + spaziatura + margini interni ≤ larghezza utile. */
  .bottone--mail {
    white-space: nowrap;
    max-inline-size: 100%;
    padding-inline: var(--s-2);
    font-size: clamp(.65rem, .2rem + 2.6vw, .95rem);
  }
}

/* --- Chi ha chiesto meno movimento ------------------------------------------
   Le animazioni stanno già tutte dentro "no-preference", quindi qui non
   serve il reset universale con !important: bastano lo scorrimento dolce
   e le poche transizioni dichiarate fuori da quel blocco. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bottone,
  .skip,
  .wapp,
  .elenco-servizi li,
  .griglia-schede li { transition: none; }
}

/* --- Stampa ------------------------------------------------------------------ */

@media print {
  .intestazione, .skip, .apertura__azioni, .apertura__sfondo, .wapp { display: none; }
  body, .sezione, .sezione--schiuma, .piede { background: #FFF; color: #000; }
  .apertura { min-block-size: 0; }
}