/* ==========================================================================
   BUGLIONE 1979 — componenti
   Dipende da token.css. Nessun colore o misura letterale qui dentro.

   Due vincoli che attraversano tutto il file:
   1. Nessuna immagine a piena larghezza. Il materiale fotografico ha una
      larghezza mediana di 1064 px in locale e un quarto del catalogo online
      non arriva a 1440 px: steso a schermo pieno perde nitidezza e mostra
      i difetti (marina disordinate, riprese amatoriali). Le foto restano
      dentro --misura-foto.
   2. Niente separatori a puntino, trattini lunghi decorativi, pallini negli
      elenchi, velature a gradiente. La gerarchia la fanno spazio, peso e
      filetti.
   ========================================================================== */


/* --------------------------------------------------------------------------
   TESTATA
   Stessa grammatica della testata dei Cantieri (script, filetto a 30 gradi,
   nome della divisione, voci in maiuscolo, lastra arancio), ma su fondo
   chiaro. Scendendo si stringe; scendendo ancora si toglie di mezzo, e torna
   appena si risale. In homepage parte trasparente sopra il manifesto.
   -------------------------------------------------------------------------- */

:root { --testata-h: 4.75rem; }

.testata {
  position: sticky;
  top: 0;
  z-index: var(--z-testata);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: var(--filetto-sp) solid var(--filetto);
  transition: translate 0.5s var(--ease-marca),
              background var(--t-micro-dur) var(--ease),
              border-color var(--t-micro-dur) var(--ease);
}
.testata[data-nascosta="true"] { translate: 0 -100%; }

.soglia .testata { position: fixed; inset: 0 0 auto; }
.soglia .testata:not([data-ridotta="true"]) {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: transparent;
}

.testata__interno {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  min-height: var(--testata-h);
  transition: min-height var(--t-macro-dur) var(--ease-marca);
}
.testata[data-ridotta="true"] .testata__interno { min-height: 3.75rem; }

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
  margin-right: auto;
  transition: color var(--t-micro-dur) var(--ease);
}
.marchio:hover { color: var(--arancio); }
.marchio svg {
  width: auto;
  height: clamp(1.75rem, 1.2rem + 1vw, 2.25rem);
  transition: height var(--t-macro-dur) var(--ease-marca);
}
.testata[data-ridotta="true"] .marchio svg { height: 1.6rem; }

/* Il nome della divisione, dietro il filetto inclinato: e il payoff
   "Yacht Builder" dei Cantieri, qui "Broker e Charter". */
.marchio__divisione {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--testo-tenue);
}
.marchio__divisione::before {
  content: "";
  position: absolute;
  inset-block: -0.35em;
  left: 0;
  width: 1px;
  background: var(--navy-30);
  transform: skewX(calc(var(--ang) * -1));
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }

.nav__voce {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--testo);
  white-space: nowrap;
}
.nav__voce::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--azione);
  transform: scaleX(0) skewX(calc(var(--ang) * -1));
  transform-origin: left;
  transition: transform 0.32s var(--ease-marca);
}
.nav__voce:hover::after,
.nav__voce[aria-current="page"]::after { transform: scaleX(1) skewX(calc(var(--ang) * -1)); }

.nav__azione { margin-left: clamp(0rem, 1vw, 1rem); }

.nav__gruppo { position: relative; }
.nav__sotto {
  position: absolute;
  top: 100%;
  left: -1rem;
  display: grid;
  min-width: 12rem;
  padding: var(--sp-3);
  background: var(--bianco);
  border: var(--filetto-sp) solid var(--filetto);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity var(--t-micro-dur) var(--ease), translate var(--t-micro-dur) var(--ease), visibility var(--t-micro-dur);
}
.nav__gruppo:hover .nav__sotto,
.nav__gruppo:focus-within .nav__sotto { opacity: 1; visibility: visible; translate: 0 0; }
.nav__sotto a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--sp-4);
}
.nav__sotto a:hover { background: var(--panna); }

.apri-menu { display: none; }

/* Su telefono il menu diventa una schermata intera, con le voci in grande
   nella voce display: e l'unico punto in cui il menu puo permettersi di
   essere un titolo. */
@media (max-width: 64rem) {
  /* Il filtro di sfocatura renderebbe la testata il riferimento del menu
     fisso, che resterebbe chiuso dentro i suoi 76px. */
  .testata { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bianco); }
  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: calc(var(--testata-h) + var(--sp-7)) var(--bordo-pagina) var(--sp-9);
    background: var(--panna);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    visibility: hidden;
    transition: clip-path 0.7s var(--ease-marca), visibility 0s linear 0.7s;
  }
  .nav[data-aperto="true"] {
    clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%);
    visibility: visible;
    transition: clip-path 0.7s var(--ease-marca), visibility 0s;
  }
  .nav__voce {
    font-family: var(--f-display);
    font-variation-settings: "wdth" var(--wdth-display);
    font-size: clamp(2.5rem, 11vw, 4rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    min-height: 0;
    padding-block: var(--sp-3);
  }
  .nav__voce::after { bottom: 0; }
  .nav__gruppo { position: static; }
  .nav__sotto {
    position: static; opacity: 1; visibility: visible; translate: none;
    background: none; border: 0; padding: 0 0 var(--sp-4); min-width: 0;
    display: flex; gap: var(--sp-5);
  }
  .nav__sotto a { padding: var(--sp-2) 0; }
  .nav__azione { margin: var(--sp-8) 0 0; }
  .apri-menu {
    display: inline-flex; flex-direction: column; gap: 6px;
    background: none; border: 0; cursor: pointer; padding: var(--sp-3);
    min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  }
  .apri-menu span {
    display: block; width: 26px; height: 2px; background: var(--testo);
    transition: transform 0.35s var(--ease-marca), opacity 0.2s;
  }
  .apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(-30deg); }
  .apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(30deg); }
  .marchio__divisione { display: none; }
}
@media (min-width: 24rem) and (max-width: 64rem) { .marchio__divisione { display: inline; } }


/* --------------------------------------------------------------------------
   EROE A ZOOM (soglia)

   Geometria presa alla lettera dal componente di riferimento: ogni riquadro
   parte da 25vw x 25vh al centro, poi riceve il proprio scarto e la propria
   misura. Ne esce un grappolo fitto, non riquadri sparpagliati.

     riquadro   misura a mosaico     scarto            k
     0 video    25vw x 25vh          centro            4
     1          35vw x 30vh          +5vw   -30vh      5
     2          20vw x 45vh          -25vw  -10vh      5
     3          25vw x 25vh          +27,5vw            5
     4          20vw x 25vh          +5vw   +27,5vh     5
     5          30vw x 25vh          -22,5vw +27,5vh    5
     6          15vw x 15vh          +25vw  +22,5vh     6

   Il k dell'originale arrivava a 8 e 9 sugli ultimi due riquadri. E stato
   riportato a 5 e 6: quei valori servono solo a farli uscire di campo prima,
   ma obbligherebbero il browser a rasterizzare fotografie da 1320 px su
   riquadri da oltre 3400 px. La differenza non si vede, il degrado si.

   L'ingrandimento e implementato al contrario rispetto al componente: ogni
   riquadro e impaginato alla dimensione FINALE e parte scalato a 1/k. Cosi
   l'immagine non viene mai magnificata oltre la propria risoluzione, ed e
   piu nitida proprio alla fine, quando riempie lo schermo.
   -------------------------------------------------------------------------- */

/* Blocco introduttivo: il titolo sta qui, centrato, come nell'anteprima. */
.apertura {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 50svh;
  padding-block: var(--sp-10);
  text-align: center;
  overflow: hidden;
}
.apertura__contenuto { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sp-6); }
.apertura h1 {
  font-size: var(--t-apertura);
  line-height: var(--lh-apertura);
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: 0;
}
.apertura p { max-width: 46ch; color: var(--testo-tenue); font-size: var(--t-corpo-l); margin: 0; }
/* Niente alone a gradiente: la tavolozza del rebrand e fatta di campiture
   piene, nel manuale non c'e una sola sfumatura. Al suo posto il segno
   tricolore, in piccolo, sopra il titolo. */
.apertura__segno { width: 56px; height: auto; }

.zoom {
  --p: 0;                    /* avanzamento 0..1, scritto dal JavaScript */
  position: relative;
  height: 100svh;            /* senza JavaScript resta un mosaico fermo */
}
.js-zoom .zoom { height: 300svh; }

.zoom__vista {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.zoom__strato {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  scale: calc(var(--k0) + (1 - var(--k0)) * var(--p));
  will-change: transform;
}

.zoom__riq {
  width: var(--fw);
  height: var(--fh);
  translate: var(--fx, 0) var(--fy, 0);
  overflow: hidden;
}
.zoom__riq > img,
.zoom__riq > video { width: 100%; height: 100%; object-fit: cover; }

.zoom__strato:nth-child(1) { --k0: .25; }
.zoom__strato:nth-child(1) .zoom__riq { --fw: 100vw;   --fh: 100svh; }

.zoom__strato:nth-child(2) { --k0: .2; }
.zoom__strato:nth-child(2) .zoom__riq { --fw: 175vw;   --fh: 150svh; --fx: 25vw;     --fy: -150svh; }

.zoom__strato:nth-child(3) { --k0: .2; }
.zoom__strato:nth-child(3) .zoom__riq { --fw: 100vw;   --fh: 225svh; --fx: -125vw;   --fy: -50svh; }

.zoom__strato:nth-child(4) { --k0: .2; }
.zoom__strato:nth-child(4) .zoom__riq { --fw: 125vw;   --fh: 125svh; --fx: 137.5vw;  --fy: 0; }

.zoom__strato:nth-child(5) { --k0: .2; }
.zoom__strato:nth-child(5) .zoom__riq { --fw: 100vw;   --fh: 125svh; --fx: 25vw;     --fy: 137.5svh; }

.zoom__strato:nth-child(6) { --k0: .2; }
.zoom__strato:nth-child(6) .zoom__riq { --fw: 150vw;   --fh: 125svh; --fx: -112.5vw; --fy: 137.5svh; }

.zoom__strato:nth-child(7) { --k0: .16667; }
.zoom__strato:nth-child(7) .zoom__riq { --fw: 90vw;    --fh: 90svh;  --fx: 150vw;    --fy: 135svh; }

/* Su schermo verticale il girato orizzontale non puo riempire la schermata:
   ritagliato a 0,46:1 mostrerebbe solo una fetta di schiuma. Chiude quindi
   come banda centrata su fondo navy, che e una scelta, non un ripiego.
   Con i master verticali del cliente (720x1280) il riquadro tornerebbe pieno. */
@media (max-width: 48rem) and (orientation: portrait) {
  .zoom { background: var(--navy); }
  .zoom__strato:nth-child(1) .zoom__riq { --fh: 42svh; }
}

/* Senza movimento non c'e nulla da scorrere: resta il solo riquadro
   centrale, fermo e a schermo pieno. */
@media (prefers-reduced-motion: reduce) {
  .js-zoom .zoom { height: 100svh; }
  .zoom__strato { scale: 1; }
  .zoom__strato:not(:first-child) { display: none; }
}


/* --------------------------------------------------------------------------
   INTESTAZIONE DI PAGINA
   Sostituisce l'hero fotografico a schermo pieno: testo su fondo pulito,
   filetto di chiusura. Nessuna immagine da stirare, nessuna velatura.
   -------------------------------------------------------------------------- */

.intestazione {
  padding-block: var(--sezione-s) var(--sezione-s);
  border-bottom: var(--filetto-sp) solid var(--filetto);
}
.intestazione h1 { max-width: 20ch; }
.intestazione .prosa { margin-top: var(--sp-6); color: var(--testo-tenue); }

/* Variante con una fotografia affiancata. La foto non deve dominare: resta
   sotto i 30rem e il testo tiene la colonna piu larga, altrimenti a sinistra
   si apre un vuoto che il titolo compatto non riempie. */
.intestazione--foto { padding-block: var(--sp-10); }
.intestazione--foto .intestazione__griglia {
  display: grid;
  gap: var(--sp-9);
  align-items: center;
}
@media (min-width: 56rem) {
  .intestazione--foto .intestazione__griglia { grid-template-columns: 1fr minmax(0, 30rem); }
}
.intestazione__foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--navy-06);
}
.intestazione__foto img { width: 100%; height: 100%; object-fit: cover; }


/* --------------------------------------------------------------------------
   CARD BARCA
   Le quattro informazioni di base in griglia due per due: metraggio, motori,
   anno, ore di moto (per il noleggio metraggio, ospiti, cabine, bagni).
   Il prezzo chiude la card nella voce display, sempre presente.
   -------------------------------------------------------------------------- */

.griglia-barche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--sp-10) var(--sp-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card { display: flex; flex-direction: column; }
.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

/* Il taglio d'angolo a 30 gradi in basso a destra: 28px di altezza danno
   28 x tan(30) = 16,2px di base. */
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-12);
  margin-bottom: var(--sp-5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 16.2px) 100%, 0 100%);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale 1.1s var(--ease-marca);
}
.card:hover .card__media img { scale: 1.07; }

/* Al passaggio entra da sinistra una lastra con la parola "Scopri". */
.card__apri {
  position: absolute;
  left: 0; bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-5);
  background: var(--arancio);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  translate: -101% 0;
  transition: translate 0.45s var(--ease-marca);
}
.card:hover .card__apri, .card__link:focus-visible .card__apri { translate: 0 0; }

.card__senza-foto {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  font-size: var(--t-micro);
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.card__tag {
  position: absolute;
  top: var(--sp-4); left: var(--sp-5);
  padding: var(--sp-2) var(--sp-5);
  background: var(--navy);
  color: var(--panna);
  transform: skewX(calc(var(--ang) * -1));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.card__tag > span { display: inline-block; transform: skewX(var(--ang)); }

.card__nome {
  font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.875rem);
  font-weight: 800;
  line-height: 1;
  color: var(--testo);
  margin: 0 0 var(--sp-5);
  transition: color var(--t-micro-dur) var(--ease);
}
.card:hover .card__nome { color: var(--arancio); }

.card__dati {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.card__dati > div {
  padding-block: var(--sp-3);
  border-top: var(--filetto-sp) solid var(--navy-30);
  min-width: 0;
}
.card__dati dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.card__dati dd {
  margin: var(--sp-1) 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.card__prezzo {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--navy);
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--testo);
}
.card__prezzo small {
  font-family: var(--f-testo);
  font-variation-settings: "wdth" 100;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}


/* --------------------------------------------------------------------------
   FILTRI
   -------------------------------------------------------------------------- */

.filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-5) var(--sp-6);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sezione-s);
  border-bottom: var(--filetto-sp) solid var(--filetto);
}

.filtro { display: grid; gap: var(--sp-3); }
.filtro > span {
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.filtro select {
  appearance: none;
  min-width: 10rem;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);
  border: var(--filetto-sp) solid var(--navy-30);
  border-radius: var(--raggio);
  background: var(--sfondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300005D' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right var(--sp-4) center / 10px;
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  letter-spacing: var(--tr);
  cursor: pointer;
}
.filtro select:hover { border-color: var(--navy); }

.filtri__conteggio {
  margin-left: auto;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}
.filtri__azzera {
  background: none; border: 0; cursor: pointer; padding: var(--sp-3) 0;
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tr);
  color: var(--azione);
}

.vuoto { padding: var(--sezione) 0; text-align: center; color: var(--testo-tenue); }


/* --------------------------------------------------------------------------
   SCHEDA BARCA
   -------------------------------------------------------------------------- */

.scheda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--sezione-s) var(--sp-10);
  align-items: start;
}
@media (max-width: 62rem) {
  .scheda { grid-template-columns: 1fr; gap: var(--sp-9); }
}

/* I quattro dati di sintesi, sotto il titolo. Filetto sopra, niente pallini. */
.sintesi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-9);
  margin: var(--sp-7) 0 0;
  padding: var(--sp-6) 0 0;
  border-top: var(--filetto-sp) solid var(--filetto);
  list-style: none;
}
.sintesi div { display: grid; gap: var(--sp-2); }
.sintesi dt {
  font-size: var(--t-micro);
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.sintesi dd {
  margin: 0;
  font-size: var(--t-titolo-s);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tr);
  font-variant-numeric: tabular-nums;
  color: var(--testo);
}


/* --- SCHEDA TECNICA — l'elemento firma -----------------------------------
   Fondo navy, valori in monospaziato lime, etichette in lavanda maiuscolo.
   Il monospaziato qui e funzionale: allinea cifre e unita di misura.
   Fra campo e valore c'e spazio, non una fila di puntini. */

.tecnica { background: var(--navy); border-radius: var(--raggio); overflow: hidden; }

.tecnica__testata {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-7) var(--sp-5);
  border-bottom: var(--filetto-sp) solid var(--filetto-scuro);
}
.tecnica__testata h2 {
  font-size: var(--t-micro);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--bianco);
}
.tecnica__conteggio { font-size: var(--t-micro); color: var(--navy-30); }

.gruppo { border-bottom: var(--filetto-sp) solid var(--filetto-scuro); }
.gruppo:last-child { border-bottom: 0; }

.gruppo > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  color: var(--bianco);
  transition: color var(--t-micro-dur) var(--ease);
}
.gruppo > summary::-webkit-details-marker { display: none; }
.gruppo > summary:hover { color: var(--lime); }

.gruppo__segno { flex: none; width: 11px; height: 11px; position: relative; }
.gruppo__segno::before,
.gruppo__segno::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--lime);
  transition: rotate var(--t-macro-dur) var(--ease-marca);
}
.gruppo__segno::after { rotate: 90deg; }
.gruppo[open] .gruppo__segno::after { rotate: 0deg; }

.gruppo__corpo { padding: 0 var(--sp-7) var(--sp-7); }
.dati { margin: 0; }

.dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
  border-top: var(--filetto-sp) solid rgba(195, 194, 206, .12);
}
.dato:first-child { border-top: 0; }

.dato dt {
  font-size: var(--t-micro);
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--navy-30);
}
.dato dd {
  margin: 0;
  text-align: right;
  font-family: var(--f-dato);
  font-size: var(--t-piccolo);
  line-height: var(--lh-dato);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--lime);
}

@media (max-width: 34rem) {
  .dato { flex-direction: column; gap: var(--sp-2); }
  .dato dd { text-align: left; }
}


/* --- Galleria ------------------------------------------------------------
   Griglia regolare di riquadri piccoli: nessuna immagine viene ingrandita
   oltre un terzo della colonna. */

.galleria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}
.galleria li { min-width: 0; aspect-ratio: 3 / 2; }
.galleria img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--navy-06);
}
@media (max-width: 40rem) { .galleria { grid-template-columns: repeat(2, 1fr); } }

.galleria__altre { font-size: var(--t-piccolo); color: var(--testo-tenue); }


/* --- Riquadro contatto ---------------------------------------------------- */

.contatto {
  position: sticky;
  top: 5.75rem;
  z-index: var(--z-sticky);
  padding: var(--sp-7);
  border: var(--filetto-sp) solid var(--filetto);
  border-radius: var(--raggio);
  background: var(--sfondo);
}
.contatto__prezzo {
  font-size: var(--t-titolo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tr);
  color: var(--testo);
  margin: 0 0 var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.contatto__nome {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  margin: 0 0 var(--sp-6);
}
.contatto__diretto {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--filetto-sp) solid var(--filetto);
  font-size: var(--t-piccolo);
}
.contatto__diretto a { text-decoration: none; color: var(--testo-tenue); }
.contatto__diretto a:hover { color: var(--azione); }

@media (max-width: 62rem) {
  .contatto {
    position: fixed;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--bordo-pagina);
    border: 0;
    border-top: var(--filetto-sp) solid var(--filetto);
    border-radius: 0;
  }
  .contatto__prezzo { font-size: var(--t-corpo-l); margin: 0; }
  .contatto__nome, .contatto__diretto { display: none; }
  .contatto .btn { margin-left: auto; width: auto; }
  body { padding-bottom: 5rem; }
}


/* --------------------------------------------------------------------------
   PANNELLO "CONTATTA IL BROKER"
   -------------------------------------------------------------------------- */

.pannello {
  margin: 0 0 0 auto;
  width: min(100%, 29rem);
  max-height: 100dvh;
  height: 100dvh;
  padding: 0;
  border: 0;
  background: var(--sfondo);
  color: var(--testo-corpo);
  overflow-y: auto;
}
.pannello::backdrop { background: rgba(0, 0, 102, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

@media (prefers-reduced-motion: no-preference) {
  .pannello {
    transition: translate var(--t-macro-dur) var(--ease-marca),
                overlay var(--t-macro-dur) allow-discrete,
                display var(--t-macro-dur) allow-discrete;
  }
  .pannello:not([open]) { translate: 100% 0; }
  @starting-style { .pannello[open] { translate: 100% 0; } }
}

.pannello__interno { padding: var(--sp-9) var(--sp-8) var(--sp-10); }
.pannello__chiudi {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: var(--filetto-sp) solid var(--filetto);
  border-radius: 50%; cursor: pointer; color: var(--testo);
  font-size: var(--t-titolo-s); line-height: 1;
}
.pannello__chiudi:hover { background: var(--navy); color: var(--bianco); }

.campo { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.campo > span {
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  /* Senza questo un <select> non scende sotto la larghezza della sua opzione
     piu lunga e allarga la colonna che lo contiene: su telefono erano 50px di
     pagina che traboccavano. */
  min-width: 0;
  min-height: 44px;
  padding: var(--sp-4);
  border: var(--filetto-sp) solid var(--navy-30);
  border-radius: var(--raggio);
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: var(--t-corpo);
  letter-spacing: var(--tr);
}
.campo textarea { min-height: 6.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--navy); }
.campo-doppio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
@media (max-width: 26rem) { .campo-doppio { grid-template-columns: 1fr; } }

.pannello__nota { margin-top: var(--sp-5); font-size: var(--t-piccolo); color: var(--testo-tenue); }

/* Il tipo di richiesta: quattro lastre a 30 gradi, una sola accesa. */
.campo--scelte { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.campo--scelte legend {
  padding: 0; margin-bottom: var(--sp-3);
  font-size: var(--t-micro); font-weight: var(--peso-medio);
  letter-spacing: var(--tr-etichetta); text-transform: uppercase; color: var(--testo-tenue);
}
.scelte { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); padding-left: 7px; }
.scelta { position: relative; cursor: pointer; }
.scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta span {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--testo);
  position: relative; isolation: isolate;
}
.scelta span::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--navy-30);
  transform: skewX(calc(var(--ang) * -1));
  transition: background var(--t-micro-dur) var(--ease), border-color var(--t-micro-dur) var(--ease);
}
.scelta:hover span::before { border-color: var(--navy); }
.scelta input:checked + span { color: var(--panna); }
.scelta input:checked + span::before { background: var(--navy); border-color: var(--navy); }
.scelta input:focus-visible + span::before { outline: 2px solid var(--azione); outline-offset: 2px; }


/* --------------------------------------------------------------------------
   BLOCCHI SERVIZIO (soglia)
   Immagine contenuta in alto, testo sotto su fondo pulito. Niente
   fotografia a tutta cassa con velatura e testo sovrapposto.
   -------------------------------------------------------------------------- */

.servizi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-9) var(--sp-6);
  list-style: none;
  margin: 0; padding: 0;
}

.servizio { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.servizio__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--navy-06);
  margin-bottom: var(--sp-5);
}
.servizio__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale var(--t-macro-dur) var(--ease);
}
.servizio:hover .servizio__media img { scale: 1.03; }
.servizio h2 { font-size: var(--t-titolo-s); margin-bottom: var(--sp-3); transition: color var(--t-micro-dur) var(--ease); }
.servizio:hover h2 { color: var(--azione); }
.servizio p { font-size: var(--t-piccolo); color: var(--testo-tenue); margin: 0; }
.servizio .etichetta { margin: 0 0 var(--sp-3); }


/* --------------------------------------------------------------------------
   AREE (refit / management)
   -------------------------------------------------------------------------- */

.aree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--filetto-sp);
  background: var(--filetto);
  border: var(--filetto-sp) solid var(--filetto);
  list-style: none;
  margin: 0; padding: 0;
}
.area { padding: var(--sp-7); background: var(--sfondo); }
.area h3 { font-size: var(--t-corpo-l); margin-bottom: var(--sp-4); }
.area p { font-size: var(--t-piccolo); color: var(--testo-tenue); margin: 0; }


/* --------------------------------------------------------------------------
   CASE STUDY REFIT
   -------------------------------------------------------------------------- */

.casi { display: grid; gap: var(--sezione-s); align-items: start; list-style: none; margin: 0; padding: 0; }
@media (min-width: 52rem) { .casi { grid-template-columns: repeat(2, 1fr); } }

.caso {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--navy);
}
.caso h3 { font-size: var(--t-titolo-s); }

/* Elenco lavori senza pallini: rientro e filetti sottili. */
.caso__lavori { margin: 0; padding: 0; list-style: none; display: grid; }
.caso__lavori li {
  padding-block: var(--sp-4);
  border-top: var(--filetto-sp) solid var(--filetto);
  font-size: var(--t-piccolo);
  line-height: 1.55;
  color: var(--testo-corpo);
}

/* Video in facciata: miniatura statica, l'iframe nasce al primo click. */
.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0; padding: 0;
  border-radius: var(--raggio);
  overflow: hidden;
  cursor: pointer;
  background: var(--navy);
}
.video img { width: 100%; height: 100%; object-fit: cover; }
.video::after {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--azione) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='white'%3E%3Cpath d='M12 7L0 14V0z'/%3E%3C/svg%3E") no-repeat center / 12px;
  transition: scale var(--t-micro-dur) var(--ease);
}
.video:hover::after { scale: 1.08; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video[data-attivo]::after { display: none; }


/* --------------------------------------------------------------------------
   PERCORSI, PROCESSO, ELENCHI SU FONDO SCURO
   -------------------------------------------------------------------------- */

.percorsi { display: grid; gap: var(--sp-7); }
@media (min-width: 48rem) { .percorsi { grid-template-columns: repeat(2, 1fr); } }

.percorso {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  padding: var(--sp-8);
  background: var(--sfondo-alt);
  border-radius: var(--raggio);
}
.percorso h3 { font-size: var(--t-titolo-s); }

/* Elenco, non sequenza: le imbarcazioni trattate non hanno un ordine. */
.elenco-scuro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-5) var(--sp-7);
  list-style: none;
  margin: 0; padding: 0;
}
.elenco-scuro li {
  padding-top: var(--sp-4);
  border-top: var(--filetto-sp) solid var(--filetto-scuro);
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--bianco);
}

/* Qui invece la numerazione porta informazione: le fasi sono una sequenza
   reale, dal contratto al varo, e l'ordine e il contenuto. */
.processo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-6);
  counter-reset: fase;
  list-style: none;
  margin: 0; padding: 0;
}
.processo li {
  counter-increment: fase;
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--filetto-scuro);
  font-size: var(--t-piccolo);
  color: var(--bianco);
}
.processo li::before {
  content: counter(fase, decimal-leading-zero);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--navy-30);
}


/* --------------------------------------------------------------------------
   PIEDE
   Navy pieno con lo script arancio in grande: e la tavola del manuale
   (Buglione rosso su blu), portata a chiusura di ogni pagina.
   -------------------------------------------------------------------------- */

.piede {
  background: var(--navy);
  color: #B9B9DA;
  padding-block: var(--sezione) var(--sp-7);
  overflow: hidden;
}
.piede a { color: var(--panna); text-decoration: none; }
.piede a:hover { color: var(--arancio); }

.piede__griglia {
  display: grid;
  gap: var(--sp-9) var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
@media (min-width: 72rem) {
  .piede__griglia { grid-template-columns: 1.5fr repeat(4, 1fr); }
}
.piede h3 {
  font-family: var(--f-testo);
  font-variation-settings: "wdth" 100;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--panna);
  margin-bottom: var(--sp-5);
}
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); font-size: var(--t-piccolo); }
.piede p { font-size: var(--t-piccolo); max-width: 30ch; }
.piede__sedi span, .piede__rete small {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9AC4;
}
.piede__sedi li { color: var(--panna); }
.piede__rete small { margin-top: 2px; text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }


.piede__coda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: space-between;
  margin-top: var(--sezione-s);
  padding-top: var(--sp-6);
  border-top: var(--filetto-sp) solid var(--filetto-scuro);
  font-size: var(--t-micro);
}


/* ==========================================================================
   ————— REBRAND 2026 —————
   Da qui in giu i componenti nati con la nuova identita.
   ========================================================================== */


/* --------------------------------------------------------------------------
   APERTURA DI SERVIZIO (refit, management, richiamo)

   L'animazione richiesta per la testa di pagina non e un video ne una foto:
   il materiale fotografico non regge la piena larghezza, e una velatura su
   una foto mediocre e proprio il difetto che si sta correggendo.
   Al suo posto entra la geometria del marchio. Tre lastre inclinate di 30
   gradi scorrono da sinistra sul fondo navy, sfalsate, e si fermano; sopra
   il titolo sale parola per parola. Tutto in CSS: se il foglio di stile c'e,
   l'animazione parte; se non parte, resta un fondo navy con il testo sopra,
   che e comunque lo stato finale.
   -------------------------------------------------------------------------- */

.eroe {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--panna);
  padding-block: clamp(var(--sp-11), 9vw, 8rem);
}
.eroe__lastre { position: absolute; inset: -20% -30%; pointer-events: none; }
.eroe__lastra {
  position: absolute;
  top: 0; bottom: 0;
  width: 22%;
  transform: skewX(calc(var(--ang) * -1)) translateX(-180%);
  animation: lastra-entra 1.15s var(--ease-marca) forwards;
  animation-delay: calc(var(--i) * 0.12s);
}
/* Le prime due sono ombre appena percettibili sul navy; le ultime due sono la
   banda della targa, arancio e panna affiancate, sul bordo destro. Larghezze
   in pixel e non in percentuale: a 1600px una banda in percentuale diventava
   una lastra che si mangiava mezzo titolo. */
.eroe__lastra:nth-child(1) { left: 4%;  width: 22%; background: rgba(255, 232, 223, .045); --i: 0; }
.eroe__lastra:nth-child(2) { left: 24%; width: 30%; background: rgba(255, 232, 223, .075); --i: 1; }
.eroe__lastra:nth-child(3) { left: 76%; width: 26px; background: var(--arancio); --i: 2; }
.eroe__lastra:nth-child(4) { left: calc(76% + 34px); width: 8px; background: var(--panna); --i: 3; }

@keyframes lastra-entra { to { transform: skewX(calc(var(--ang) * -1)) translateX(0); } }

.eroe__interno { position: relative; z-index: 1; }
.eroe .etichetta { color: var(--panna); }
.eroe h1 {
  font-size: var(--t-apertura);
  line-height: var(--lh-apertura);
  letter-spacing: -0.035em;
  color: var(--panna);
  max-width: 15ch;
  margin-bottom: var(--sp-6);
}
.eroe__sotto {
  font-family: var(--f-serif);
  font-variation-settings: normal;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--panna);
  max-width: 24ch;
  margin-bottom: var(--sp-9);
}
.eroe .btn__fondo::after { background: var(--panna); }
.eroe .btn:hover .btn__testo,
.eroe .btn:focus-visible .btn__testo { color: var(--navy); }

/* Il titolo sale parola per parola, come sulla soglia. */
.parola {
  display: inline-block;
  animation: parola-sale 0.85s var(--ease-marca) both;
  animation-delay: calc(0.28s + var(--i) * 0.07s);
}
@keyframes parola-sale {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eroe__lastra, .parola { animation: none; transform: none; opacity: 1; }
  .eroe__lastra { transform: skewX(calc(var(--ang) * -1)); }
}


/* --------------------------------------------------------------------------
   CATENA DI PRESA IN CARICO (refit)
   I cinque passaggi che l'armatore non deve fare da solo. La numerazione
   porta informazione, quindi resta; il filetto sopra ogni voce e inclinato
   come il marchio.
   -------------------------------------------------------------------------- */

.catena {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-7) var(--sp-6);
  counter-reset: passo;
  list-style: none;
  margin: 0; padding: 0;
}
.catena li {
  counter-increment: passo;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  position: relative;
}
.catena { --reparto: var(--navy); }
.reparto--refit .catena { --reparto: var(--verde); }
.reparto--management .catena { --reparto: var(--mattone); }
.catena li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--reparto);
  transform: skewX(calc(var(--ang) * -1));
}
.catena__n {
  font-family: var(--f-dato);
  font-size: var(--t-micro);
  color: var(--reparto);
  font-variant-numeric: tabular-nums;
}
.catena h3 { font-size: var(--t-corpo-l); }
.catena p { font-size: var(--t-piccolo); color: var(--testo-tenue); margin: 0; }

/* Il paragone con l'impresa edile: sta da solo, in serif, e l'unico momento
   in cui il sito alza la voce senza ingrandire il corpo. */
.richiamo {
  font-family: var(--f-serif);
  font-variation-settings: normal;
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
  max-width: 30ch;
  margin: 0;
  padding-left: var(--sp-7);
  position: relative;
}
.richiamo::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 7px;
  height: 1.5em;
  background: var(--azione);
  transform: skewX(calc(var(--ang) * -1));
}
.sezione--navy .richiamo { color: var(--panna); }


/* --------------------------------------------------------------------------
   ARCHIVIO DELLE LAVORAZIONI (refit)

   La versione precedente metteva otto casi in due colonne, ognuno con il
   proprio elenco aperto: 40 righe di lavori tutte insieme, il video piccolo
   e la pagina lunghissima. Qui l'archivio diventa un elenco di righe alte,
   una per imbarcazione, con il nome in grande: si legge come un indice.
   La riga si apre e mostra il video e le opere solo quando serve.
   E un <details>, quindi funziona anche senza JavaScript.
   -------------------------------------------------------------------------- */

.archivio { border-top: 2px solid var(--navy); }

.lavorazione { border-bottom: var(--filetto-sp) solid var(--navy-30); }

.lavorazione > summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-micro-dur) var(--ease);
}
.lavorazione > summary::-webkit-details-marker { display: none; }
.lavorazione > summary:hover { color: var(--azione); }

.lavorazione__n {
  font-family: var(--f-dato);
  font-size: var(--t-micro);
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}
.lavorazione__nome {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  font-weight: var(--peso-nero);
  letter-spacing: var(--tr-stretto);
  text-transform: uppercase;
  line-height: 1.05;
  color: inherit;
  margin: 0;
}
.lavorazione__conto {
  font-size: var(--t-micro);
  letter-spacing: var(--tr-etichetta);
  text-transform: uppercase;
  color: var(--testo-tenue);
  white-space: nowrap;
}
.lavorazione__segno { flex: none; width: 13px; height: 13px; position: relative; }
.lavorazione__segno::before,
.lavorazione__segno::after {
  content: "";
  position: absolute; inset: 50% 0 auto;
  height: 1.5px; margin-top: -0.75px;
  background: currentColor;
  transition: rotate var(--t-micro-dur) var(--ease);
}
.lavorazione__segno::after { rotate: 90deg; }
.lavorazione[open] .lavorazione__segno::after { rotate: 0deg; }

.lavorazione__corpo {
  display: grid;
  gap: var(--sp-7);
  padding-bottom: var(--sp-9);
}
@media (min-width: 56rem) {
  .lavorazione__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.lavorazione__opere { margin: 0; padding: 0; list-style: none; display: grid; }
.lavorazione__opere li {
  padding-block: var(--sp-4);
  border-top: var(--filetto-sp) solid var(--filetto);
  font-size: var(--t-piccolo);
  line-height: 1.5;
}
.lavorazione__opere li:first-child { border-top: 0; }

@media (max-width: 40rem) {
  .lavorazione > summary { grid-template-columns: 1fr auto; }
  .lavorazione__n, .lavorazione__conto { display: none; }
}


/* --------------------------------------------------------------------------
   BLOCCO A DUE (testo + riquadro fotografico)
   Il riquadro resta contenuto e porta il taglio a 30 gradi.
   -------------------------------------------------------------------------- */

.duo { display: grid; gap: var(--sp-9); align-items: center; }
@media (min-width: 54rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-11); }
  .duo--rovescio > :first-child { order: 2; }
}
.duo__foto {
  aspect-ratio: 4 / 3;
  max-width: var(--misura-foto);
  overflow: hidden;
  background: var(--navy-06);
  border-radius: var(--raggio);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 19.6px) 100%, 0 100%);
}
.duo__foto img { width: 100%; height: 100%; object-fit: cover; }


/* --------------------------------------------------------------------------
   EQUIPAGGIO (management)
   Quattro ruoli, non quattro caselle: ognuno ha un ritratto e due righe che
   dicono chi e. Finche non arrivano le fotografie dell'equipaggio il
   riquadro mostra il segno tricolore su fondo pieno, e resta dignitoso.
   -------------------------------------------------------------------------- */

.equipaggio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-8) var(--sp-6);
  list-style: none;
  margin: 0; padding: 0;
}
.ruolo { display: grid; align-content: start; gap: var(--sp-5); }
.ruolo__ritratto {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--navy);
  border-radius: var(--raggio);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 16.2px) 100%, 0 100%);
}
.ruolo__ritratto img { width: 100%; height: 100%; object-fit: cover; }
.ruolo__ritratto svg { width: 52%; height: auto; opacity: .85; }
.ruolo__ritratto--vuoto { position: relative; }
.ruolo__ritratto--vuoto::after {
  content: "ritratto in arrivo";
  position: absolute;
  left: var(--sp-5); bottom: var(--sp-5);
  font-family: var(--f-dato);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 232, 223, .5);
}
.ruolo h3 { font-size: var(--t-titolo-s); }
.ruolo p { font-size: var(--t-piccolo); color: var(--testo-tenue); margin: 0; }
.ruolo__conto {
  font-family: var(--f-dato);
  font-size: var(--t-micro);
  color: var(--azione);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   PAGINA "TI RICHIAMIAMO"
   Una sola cosa da fare: lasciare un numero. Nessuna distrazione a fianco.
   -------------------------------------------------------------------------- */

.richiamo-pagina { display: grid; gap: var(--sp-10); }
@media (min-width: 56rem) {
  .richiamo-pagina { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--sp-12); align-items: start; }
}
.richiamo-pagina__forma {
  padding: clamp(var(--sp-5), 4vw, var(--sp-8));
  background: var(--sfondo-alt);
  border-radius: var(--raggio);
}
.sezione--navy .richiamo-pagina__forma { background: rgba(255, 232, 223, .07); }
.sezione--navy .campo > span { color: var(--panna); }
.sezione--navy .campo input,
.sezione--navy .campo textarea,
.sezione--navy .campo select {
  background: transparent;
  color: var(--panna);
  border-color: var(--filetto-scuro);
}
.sezione--navy .campo input:focus,
.sezione--navy .campo textarea:focus { border-color: var(--panna); }

.promessa {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
  margin: 0; padding: 0;
}
.promessa li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
  padding-top: var(--sp-5);
  border-top: var(--filetto-sp) solid var(--filetto-scuro);
}
.promessa__ore {
  font-family: var(--f-dato);
  font-size: var(--t-corpo);
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.promessa p { font-size: var(--t-piccolo); margin: 0; }


.piede__marchio { color: var(--panna); display: block; margin-bottom: var(--sp-6); }
.piede__marchio svg { height: 2.5rem; width: auto; }


/* Su schermo stretto un'etichetta lunga in nowrap tiene aperto il pulsante
   oltre la larghezza della pagina. Sotto i 480px la si lascia andare a capo:
   il parallelogramma cresce in altezza invece che in larghezza. */
@media (max-width: 30rem) {
  .btn__testo {
    white-space: normal;
    text-align: center;
    /* l'indirizzo email e una parola sola e senza questo non ha punti dove
       spezzarsi: a 320px usciva dalla pagina */
    overflow-wrap: anywhere;
    padding-inline: calc(var(--sp-5) + var(--sbieco));
  }
}