/* ==========================================================================
   IL CAVALIERE
   1. Variabili      5. Intro        9. Isole
   2. Base           6. Rotta       10. Settimane
   3. Header         7. Barca       11. FAQ
   4. Hero           8. A bordo     12. Finale + footer
   ========================================================================== */

/* font: Clarity City (licenza OFL), caricato da CDN */
@font-face {
  font-family: "Clarity City";
  src: url("https://cdn.jsdelivr.net/npm/@cds/city@1.1.0/Webfonts/WOFF2/ClarityCity-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clarity City";
  src: url("https://cdn.jsdelivr.net/npm/@cds/city@1.1.0/Webfonts/WOFF2/ClarityCity-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clarity City";
  src: url("https://cdn.jsdelivr.net/npm/@cds/city@1.1.0/Webfonts/WOFF2/ClarityCity-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Clarity City";
  src: url("https://cdn.jsdelivr.net/npm/@cds/city@1.1.0/Webfonts/WOFF2/ClarityCity-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clarity City";
  src: url("https://cdn.jsdelivr.net/npm/@cds/city@1.1.0/Webfonts/WOFF2/ClarityCity-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 1. Variabili ------------------------------------------------------------ */
:root {
  --carta: #f4efe4;
  --carta-scura: #e9e0cd;
  --sabbia: #d8c8a6;
  --navy: #15213a;
  --egeo: #3f86a3;
  --rosso: #b4573c;
  --grigio: #6b6f76;

  /* un solo font per tutto il sito; i tre nomi restano per non toccare il resto */
  --serif: "Clarity City", system-ui, sans-serif;
  --serif-testo: "Clarity City", system-ui, sans-serif;
  --sans: "Clarity City", system-ui, sans-serif;

  --margine: clamp(1.25rem, 5vw, 4.5rem);
  --spazio: clamp(5rem, 12vw, 10rem);   /* distanza tra le sezioni */
  --gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.99rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.pagina {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--margine);
}

/* niente scorrimento laterale: gli elementi grafici che escono dai bordi
   (soffi di vento, rosa dei venti) vengono tagliati qui */
main { overflow-x: clip; }

main > section { margin-bottom: var(--spazio); }

.solo-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* piccole scritte: sigla, coordinate, didascalie */
.sigla, .coord, figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.coord { color: var(--egeo); font-variant-numeric: tabular-nums; }

/* link con freccia */
.freccia {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
  transition: color 0.2s, letter-spacing 0.3s;
}
.freccia:hover { color: var(--rosso); letter-spacing: 0.02em; }
.freccia--forte { font-family: var(--serif-testo); font-size: 1.2rem; }

/* intestazione di sezione */
.capo {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  border-top: 1px solid var(--navy);
  padding-top: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.capo h2 { font-size: clamp(1.92rem, 4.8vw, 4rem); }

/* fotografie ------------------------------------------------------------- */
.foto img, .foto__vuota {
  width: 100%;
  aspect-ratio: var(--r, 3 / 2);
  object-fit: cover;
  background: var(--sabbia);
}
.f-vert  { --r: 4 / 5; }
.f-alta   { --r: 2 / 3; }
.f-larga  { --r: 3 / 2; }
.f-pano   { --r: 21 / 9; }
.f-quadra { --r: 6 / 5; }

figcaption { margin-top: 0.6rem; color: var(--grigio); }

/* segnaposto mostrato finché manca il file della foto */
.foto__vuota {
  display: grid;
  place-items: center;
  background: var(--sabbia);
  color: var(--navy);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 1rem;
}

/* acqua ------------------------------------------------------------------
   Texture di mare dietro ad alcune sezioni: aggiungi class="acqua" a una
   sezione. Compare e sparisce sfumando nella carta.
   Per usare una tua foto del mare (già ingrandita e sfocata) cambia --acqua. */
:root { --acqua: url("../images/acqua.svg"); }

.acqua { position: relative; isolation: isolate; }
.acqua::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--acqua-da, 0);
  bottom: var(--acqua-a, 0);
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--acqua) center / cover no-repeat;
  opacity: var(--acqua-forza, 0.55);
  -webkit-mask-image: var(--acqua-sfuma);
          mask-image: var(--acqua-sfuma);
  --acqua-sfuma: linear-gradient(transparent, #000 40%, #000 60%, transparent);
  pointer-events: none;
}
/* variante: intensa in alto (sotto una foto), poi sparisce */
.acqua--dall-alto::before { --acqua-sfuma: linear-gradient(#000, transparent 85%); }


/* reveal: attivo solo con JavaScript */
.js .foto, .js .appare {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js .foto.visibile, .js .appare.visibile { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .foto, .js .appare { opacity: 1; transform: none; transition: none; }
}

/* 3. Header --------------------------------------------------------------- */
.testata {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--margine);
  background: var(--carta);
}

.testata__nome {
  font-family: var(--serif);
  font-size: 1.26rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav { display: flex; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.nav a {
  font-size: 0.84rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav a:hover { border-color: currentColor; }

.testata__menu { display: none; }

@media (max-width: 800px) {
  .testata__menu {
    display: block;
    width: 2.75rem; height: 2.75rem;
    margin-right: -0.6rem;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .testata__menu-linee,
  .testata__menu-linee::before {
    display: block;
    width: 1.6rem; height: 1px;
    margin-inline: auto;
    background: var(--navy);
    transition: transform 0.25s;
  }
  .testata__menu-linee { transform: translateY(-4px); }
  .testata__menu-linee::before { content: ""; transform: translateY(8px); }
  [aria-expanded="true"] .testata__menu-linee { transform: rotate(45deg); }
  [aria-expanded="true"] .testata__menu-linee::before { transform: rotate(-90deg); }

  .nav {
    position: fixed;
    inset: 4.9rem 0 0 0;
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--margine) 2rem;
    background: var(--carta);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s;
    overflow-y: auto;
  }
  .nav.aperto { visibility: visible; opacity: 1; }
  .nav a {
    font-family: var(--serif);
    font-size: 1.76rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--sabbia);
  }
}

/* 4. Hero ----------------------------------------------------------------- */
/* sfondo: hero.png a piena larghezza, testo in alto sul cielo */
:root {
  --testata-h: 4.3rem;                              /* altezza dell'header */
  --scena-h: calc(100vh - var(--testata-h));
  --scena-h: calc(100svh - var(--testata-h));       /* una schermata, header escluso */
}

.hero {
  background: var(--navy) url("../hero.png") center bottom / cover no-repeat;
  color: var(--carta);
}
.hero__dentro {
  min-height: var(--scena-h);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}
.hero__titolo {
  font-size: clamp(2.08rem, 4.32vw, 4.16rem);
  margin: 0 0 2rem;
}
.hero .freccia:hover { color: var(--sabbia); }

@media (max-width: 800px) {
  .hero__titolo { font-size: clamp(2rem, 8.8vw, 2.88rem); margin-top: 1rem; }
}

/* 5. Intro ---------------------------------------------------------------- */
/* sfondo: cavaliere.png. Su desktop il testo sta a destra, sopra il cielo. */
.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --salita: 40px;            /* di quanto sale la foto durante la dissolvenza */
}
.intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--salita) * -1) 0;
  background: url("../cavaliere.png") left center / cover no-repeat;
}
.intro__dentro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-content: start;
  min-height: var(--scena-h);
  padding-block: clamp(2rem, 5vw, 4.5rem);
}
.intro__titolo {
  font-size: clamp(1.6rem, 2.88vw, 2.72rem);
  line-height: 1.05;
  margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
}
.intro__testo {
  grid-column: 8 / 13;
  font-size: 1.02rem;
}
.intro__testo p + p { margin-top: 1.1em; }
.intro__testo .intro__chiusa {
  margin-top: 2.5rem;
  font-family: var(--serif-testo);
  font-style: italic;
  font-size: clamp(1.28rem, 2.4vw, 1.84rem);
  line-height: 1.2;
}

/* mobile: la foto occupa la prima schermata, il testo segue su carta */
@media (max-width: 800px) {
  .intro { --salita: 0px; }
  .intro::before { inset: 0 0 auto 0; height: var(--scena-h); }
  .intro__dentro { min-height: 0; padding-top: calc(var(--scena-h) + 2.5rem); }
  .intro__testo { grid-column: 1 / -1; }
}

/* scena: dissolvenza hero → intro ------------------------------------------
   Hero e intro sono sovrapposte in un blocco che resta fermo sotto l'header
   per --scena-scroll di scroll. In quel tratto js/main.js porta --t da 0 a 1:
   la hero (sopra) svanisce e lascia vedere l'intro (sotto), che intanto sale
   di --salita. Senza JavaScript, o con "riduci movimento" attivo, le due
   sezioni stanno semplicemente una sotto l'altra. */
.scena {
  margin-bottom: var(--spazio);
  --scena-scroll: 450px;     /* più lungo = dissolvenza più lenta */
}

@media (prefers-reduced-motion: no-preference) {
  .js .scena::after { content: ""; display: block; height: var(--scena-scroll); }
  .js .scena__fissa { position: sticky; top: var(--testata-h); }

  .js .hero {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto 0;
    height: calc(var(--scena-h) + 16px);    /* 16px di scorta per la salita */
    overflow: hidden;
    opacity: calc(1 - var(--t, 0));
    transform: translate3d(0, calc(var(--t, 0) * -14px), 0);
    will-change: opacity, transform;
  }
  .js .scena.oltre .hero { pointer-events: none; }

  .js .intro::before {
    transform: translate3d(0, calc((1 - var(--t, 1)) * var(--salita)), 0);
    will-change: transform;
  }
}

/* il testo dell'intro compare nella seconda metà (solo desktop) */
@media (prefers-reduced-motion: no-preference) and (min-width: 801px) {
  .js .intro__testo {
    opacity: var(--testo, 1);
    translate: 0 calc((1 - var(--testo, 1)) * 10px);
  }
}

/* 6. Rotta ----------------------------------------------------------------
   Pagina di diario: tre tappe, ognuna con la sua foto. Niente griglia regolare:
   ogni tappa ha larghezza, posizione e distanza proprie. Per spostarne una
   basta cambiare grid-column e margin-top qui sotto. */
.rotta__diario {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: start;
}

.scalo h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.36rem, 2.08vw, 1.84rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.scalo__dove { margin-top: 0.3rem; font-size: 0.88rem; color: var(--grigio); }
.scalo .coord { margin-bottom: 0.9rem; }

/* Leros: foto grande orizzontale, il nome in basso a destra */
.scalo--leros {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
}
.scalo--leros .foto { flex: 0 0 63%; }
.scalo--leros .scalo__testo { padding-bottom: 1.25rem; }
.scalo--leros h3 { font-size: clamp(1.68rem, 2.88vw, 2.48rem); }

/* la nota: un appunto a margine, staccato dalle tappe */
.rotta__nota {
  grid-column: 2 / 7;
  grid-row: 2;
  margin-top: clamp(5rem, 11vw, 10rem);
  font-family: var(--serif-testo);
  font-size: 1.07rem;
  line-height: 1.55;
}
.rotta__nota::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-bottom: 1.4rem;
  background: var(--navy);
}

/* Kalymnos: foto piccola, lontana, in basso a destra */
.scalo--kalymnos {
  grid-column: 9 / 13;
  grid-row: 2;
  margin-top: clamp(9rem, 21vw, 19rem);
}
.scalo--kalymnos .foto { width: 68%; margin-left: auto; }
.scalo--kalymnos .scalo__testo { width: 68%; margin: 1rem 0 0 auto; }

/* Kos: foto verticale stretta, risale a fianco di Kalymnos */
.scalo--kos {
  grid-column: 2 / 8;
  grid-row: 3;
  margin-top: clamp(-7rem, -6vw, -2rem);
  display: flex;
  align-items: flex-end;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.scalo--kos .foto { flex: 0 0 57%; }
.scalo--kos img { object-position: 36% 50%; }
.scalo--kos .scalo__testo { padding-bottom: 18%; }

@media (max-width: 800px) {
  .rotta__diario { display: block; }

  .scalo--leros { display: block; }
  .scalo--leros .foto { margin-inline: calc(var(--margine) * -1); }
  .scalo--leros .scalo__testo { padding: 1.25rem 0 0; }

  .rotta__nota { margin: 4.5rem 0 0 14%; }

  .scalo--kalymnos { width: 60%; margin: 5rem 0 0 auto; }
  .scalo--kalymnos .foto,
  .scalo--kalymnos .scalo__testo { width: auto; }

  .scalo--kos { display: block; margin-top: 4rem; }
  .scalo--kos .foto { width: 74%; }
  .scalo--kos .scalo__testo { padding: 1.1rem 0 0; }
}

/* soffi di vento ------------------------------------------------------------
   Quattro soffi disegnati a linea sottile, come sulle vecchie carte nautiche:
   poche linee parallele che partono insieme, si separano e a volte finiscono
   in un ricciolo. Stanno dietro a testi e foto. Quando un soffio entra nello
   schermo le sue linee si disegnano una dopo l'altra (--i = ordine), poi il
   soffio continua a muoversi appena.
   Per spostarne uno cambia --x, --y (posizione), --w (larghezza), --r (inclinazione). */
.rotta { position: relative; isolation: isolate; }
.soffio {
  position: absolute;
  z-index: -1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  overflow: visible;
  pointer-events: none;
  opacity: 0.45;
  rotate: var(--r, 0deg);
  animation: soffio-deriva var(--t, 13s) ease-in-out infinite alternate;
}
.soffio path {
  fill: none;
  stroke: #4a6076;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  opacity: var(--o, 1);
}
.js .soffio path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 3s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--d, 0s) + var(--i) * 0.24s);
}
.js .soffio.disegnato path { stroke-dashoffset: 0; }

.soffio--a { --x: 28%; --y: 1.5%; --w: 40%; --r: -2deg; --t: 13s; }
.soffio--b { --x: 52%; --y: 46.5%; --w: 30%; --r: 3deg;  --t: 17s; --d: 0.3s; }
.soffio--c { --x: -4%; --y: 63%;  --w: 30%; --r: -4deg; --t: 11s; --d: 0.15s; }
.soffio--d { --x: 52%; --y: 82%;  --w: 46%; --r: 2deg;  --t: 19s; --d: 0.4s; }

@keyframes soffio-deriva {
  from { translate: -6px 2px; }
  to   { translate: 9px -3px; }
}

@media (max-width: 800px) {
  .soffio { opacity: 0.34; }
  .soffio--a, .soffio--d { display: none; }
  .soffio path:nth-child(n + 4) { display: none; }
  .soffio--b { --x: -6%; --y: 31.2%; --w: 112%; --r: 1deg; }
  .soffio--c { --x: -5%; --y: 66.9%; --w: 105%; --r: -1deg; }
}
@media (prefers-reduced-motion: reduce) {
  .soffio { animation: none; }
  .js .soffio path { transition: none; stroke-dashoffset: 0; }
}

/* rosa dei venti -----------------------------------------------------------
   Apre la sezione: grande, a tratto sottile, nell'angolo in alto a destra e
   tagliata dai bordi (--fuori-x / --fuori-y = quanto esce, in parti della sua
   misura). Sta dietro a testi e foto. Quando entra nello schermo compare
   lentamente ruotando di pochi gradi, poi resta ferma. */
.rosa-campo {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.rosa {
  --misura: clamp(280px, 30vw, 420px);
  --fuori-x: 0.14;
  --fuori-y: 0.3;
  position: absolute;
  top: calc(var(--misura) * var(--fuori-y) * -1);
  right: calc(var(--misura) * var(--fuori-x) * -1);
  width: var(--misura);
  height: var(--misura);
  opacity: 0.2;
}
.rosa circle, .rosa path {
  fill: none;
  stroke: #4a6076;
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.rosa .rosa__lieve, .rosa .rosa__lieve path { stroke-width: 0.5; }
.rosa text {
  fill: var(--navy);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: central;
}
.rosa .rosa__piccola { font-size: 6.5px; letter-spacing: 0.08em; }

.js .rosa {
  opacity: 0;
  rotate: -7deg;
  transition: opacity 3.5s ease, rotate 4.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.js .rosa.disegnato { opacity: 0.2; rotate: 0deg; }

@media (max-width: 800px) {
  .rosa { --misura: clamp(160px, 50vw, 220px); --fuori-x: 0.2; --fuori-y: 0.26; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rosa { opacity: 0.2; rotate: 0deg; transition: none; }
}

/* 7. Barca ---------------------------------------------------------------- */
.barca__griglia {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 4rem) var(--gap);
  align-items: start;
}
.b1 { grid-column: 1 / 8; }
.b2 { grid-column: 9 / 13; margin-top: 5rem; }
.b3 { grid-column: 2 / 5; }
.b4 { grid-column: 5 / 13; }
.b5 { grid-column: 1 / 6; }
.b6 { grid-column: 6 / 10; align-self: end; }
.b7 { grid-column: 10 / 13; }

.barca__dati {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--navy);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
.barca__dati span + span::before { content: "/"; margin-inline: 0.9em; color: var(--rosso); }

@media (max-width: 800px) {
  .b1, .b4, .b5 { grid-column: 1 / -1; }
  .b2 { grid-column: 1 / 8; margin-top: 0; }
  .b3 { grid-column: 8 / 13; align-self: end; }
  .b6 { grid-column: 1 / 7; }
  .b7 { grid-column: 7 / 13; align-self: start; }
}

/* 10. Settimane ----------------------------------------------------------- */
.settimane {
  background: var(--carta-scura);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.settimane__griglia {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.agenda li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--navy);
}
.agenda li:first-child { border-top: 1px solid var(--navy); }
.agenda__data {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.36rem, 3.2vw, 2.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}
.agenda__posti { font-size: 0.84rem; white-space: nowrap; }
.agenda .completo .agenda__data {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.agenda .completo .agenda__posti { color: var(--rosso); }

.prezzo {
  margin: 2.5rem 0 2rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.76rem, 3.2vw, 2.56rem);
}
.prezzo span { font-family: var(--sans); font-weight: 400; font-size: 0.93rem; }

.incluso { display: grid; gap: 2.5rem; }
.incluso h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--navy);
}
.incluso li { padding: 0.2rem 0; }

@media (max-width: 800px) {
  .settimane__griglia { grid-template-columns: 1fr; }
  .incluso { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* 11. FAQ ----------------------------------------------------------------- */
.faq__lista { max-width: 46rem; }

.faq details { border-bottom: 1px solid var(--navy); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.2rem 0;
  font-family: var(--serif-testo);
  font-size: clamp(0.92rem, 1.76vw, 1.2rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); color: var(--rosso); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--egeo); }
.faq details p { padding-bottom: 1.5rem; max-width: 34rem; }

/* 12. Finale + footer ----------------------------------------------------- */
main > .finale { margin-bottom: 0; }
.finale__foto img, .finale__foto .foto__vuota { aspect-ratio: 16 / 8; }
/* farfalla.png ha in alto il bordo scuro del tendalino: lo si taglia fuori */
.finale__foto { overflow: hidden; }
.finale__foto img { object-position: center bottom; }
.finale__testo { padding-block: clamp(2rem, 4vw, 3.25rem); }
.finale__titolo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.72rem);
  line-height: 1.05;
  margin-bottom: 0.9rem;
}

.piede {
  background: var(--navy);
  color: var(--carta);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
.piede__dentro {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 2rem;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.piede__nome {
  font-family: var(--serif);
  font-size: 1.26rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.piede__isole { font-family: var(--serif-testo); font-style: italic; letter-spacing: 0.02em; }
.piede__link { display: flex; justify-content: flex-end; gap: 2rem; }
.piede__link a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 0.15em; transition: color 0.2s, border-color 0.2s; }
.piede__link a:hover { color: var(--sabbia); border-color: currentColor; }

@media (max-width: 800px) {
  .finale__foto img, .finale__foto .foto__vuota { aspect-ratio: 4 / 5; }
  .finale__foto img { transform: scale(1.12); transform-origin: center bottom; }
  .piede__dentro { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.5rem; }
  .piede__link { justify-content: flex-start; }
}