/* ==========================================================================
   BUGLIONE BROKER E CHARTER — pagine interne
   Dipende da token.css, componenti.css e movimento.css.

   Ogni servizio si porta dietro il colore del suo pannello in homepage:
   Broker panna e navy, Charter arancio, Refit verde, Management mattone.
   Sotto la testa colorata la pagina torna chiara: l'impronta resta quella.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PULSANTE VUOTO
   Solo il contorno a 30 gradi, nel colore del testo che lo circonda; al
   passaggio si riempie dello stesso colore.
   -------------------------------------------------------------------------- */

.btn--vuoto { color: inherit; }
.btn--vuoto .btn__fondo { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--vuoto .btn__fondo::after { background: currentColor; }
.btn--vuoto .btn__testo { color: inherit; }
.btn--vuoto:hover .btn__testo,
.btn--vuoto:focus-visible .btn__testo { color: var(--vuoto-hover, var(--bianco)); }


/* --------------------------------------------------------------------------
   TESTA DI PAGINA
   -------------------------------------------------------------------------- */

.testa {
  --t-fondo: var(--panna);
  --t-testo: var(--navy);
  --t-lastra-1: var(--arancio);
  --t-lastra-2: var(--navy);
  --vuoto-hover: var(--panna);
  position: relative;
  overflow: hidden;
  background: var(--t-fondo);
  color: var(--t-testo);
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3.5rem, 7vw, 6rem);
  isolation: isolate;
}
.testa--arancio { --t-fondo: var(--arancio); --t-lastra-1: var(--navy); --t-lastra-2: var(--panna);
  --btn-fondo: var(--navy); --btn-testo: var(--panna); --btn-lastra: var(--panna); --btn-testo-hover: var(--navy); --vuoto-hover: var(--arancio); }
.testa--verde { --t-fondo: var(--verde); --t-testo: var(--panna); --t-lastra-1: var(--verde-chiaro); --t-lastra-2: var(--panna);
  --btn-fondo: var(--panna); --btn-testo: var(--navy); --btn-lastra: var(--navy); --btn-testo-hover: var(--panna); --vuoto-hover: var(--verde); }
.testa--mattone { --t-fondo: var(--mattone); --t-testo: var(--panna); --t-lastra-1: var(--giallo); --t-lastra-2: var(--panna);
  --btn-fondo: var(--panna); --btn-testo: var(--navy); --btn-lastra: var(--navy); --btn-testo-hover: var(--panna); --vuoto-hover: var(--mattone); }

/* Due lastre inclinate che attraversano la testa dietro la fotografia. */
.testa__lastre { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.testa__lastre span {
  position: absolute;
  top: -10%; bottom: -10%;
  transform: skewX(calc(var(--ang) * -1));
}
.testa__lastre span:nth-child(1) { right: 30%; width: clamp(3rem, 7vw, 7rem); background: var(--t-lastra-1); }
.testa__lastre span:nth-child(2) { right: calc(30% - clamp(1.75rem, 3vw, 3rem)); width: 10px; background: var(--t-lastra-2); }
.js-movimento .testa__lastre span { animation: lastra-sale 1.2s var(--ease-marca) both; }
.js-movimento .testa__lastre span:nth-child(2) { animation-delay: 0.12s; }
@keyframes lastra-sale { from { translate: -60vw 0; } }

.testa__griglia { display: grid; gap: var(--sp-9); align-items: center; }
@media (min-width: 60rem) {
  .testa--foto .testa__griglia { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}
@media (max-width: 59.99rem) {
  .testa__lastre span:nth-child(1) { right: -2rem; }
  .testa__lastre span:nth-child(2) { right: 3.5rem; }
}

.testa .etichetta { color: var(--t-testo); }
.testa .etichetta::before { background: var(--t-lastra-1); }
.testa__titolo {
  font-size: var(--t-apertura);
  line-height: var(--lh-apertura);
  font-weight: 900;
  color: var(--t-testo);
}
.testa__titolo .svela { --lastra-1: var(--t-lastra-1); --lastra-2: var(--t-lastra-2); }
/* Titoli fatti di una frase intera (refit, management): un gradino sotto,
   altrimenti a 104px la frase occupa cinque righe. */
.testa__titolo--frase { font-size: clamp(2.5rem, 1rem + 4.2vw, 5.5rem); }
.testa__lead { margin-top: var(--sp-8); }
.testa__lead p {
  max-width: 44ch;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--t-testo);
}
.testa__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-8); padding-left: 5px; }

.testa__foto {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 72svh;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, .08);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 26.6px) 100%, 0 100%);
}
.testa__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 59.99rem) {
  .testa__foto { aspect-ratio: 16 / 11; }
  .testa__foto[data-parallasse] { transform: none !important; }
}

/* Affermazioni numerate sotto un titolo: stesso segno dei claim in homepage. */
.claim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-5) var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.claim li {
  padding-top: var(--sp-4);
  border-top: 2px solid currentColor;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
.claim__n {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--f-serif);
  font-variation-settings: normal;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--t-lastra-1, var(--arancio));
}


/* --------------------------------------------------------------------------
   YACHT BROKER: LINGUETTE E FILTRI
   -------------------------------------------------------------------------- */

.elenco-barche { background: var(--bianco); }

.linguette { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0 0 var(--sp-9) 8px; }
.linguetta {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-7);
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  isolation: isolate;
}
.linguetta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 2px solid var(--navy);
  transform: skewX(calc(var(--ang) * -1));
  transition: background var(--t-micro-dur) var(--ease);
}
.linguetta sup { font-family: var(--f-serif); font-variation-settings: normal; font-size: 0.45em; font-weight: 700; color: var(--arancio); }
.linguetta:hover::before { background: var(--panna); }
.linguetta[aria-current="page"] { color: var(--panna); }
.linguetta[aria-current="page"]::before { background: var(--navy); }

.filtro select { border: 1.5px solid var(--navy); border-radius: 0; background-color: var(--bianco); font-weight: 600; }
.filtro > span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; color: var(--navy); }
.filtri { border-bottom: 2px solid var(--navy); }


/* --------------------------------------------------------------------------
   YACHT CHARTER: LA FLOTTA SUL PALCO
   La barca attiva riempie la scena; la card su cui si clicca si allarga
   fino a diventare lo sfondo (l'animazione la scrive il JavaScript, dal
   rettangolo della card al palco intero).
   -------------------------------------------------------------------------- */

.flotta { position: relative; background: var(--navy); color: var(--panna); }
.flotta__palco { position: relative; height: clamp(36rem, 94svh, 60rem); overflow: hidden; }

.scena { position: absolute; inset: 0; visibility: hidden; z-index: 0; }
.scena[data-attiva="true"] { visibility: visible; z-index: 2; }
.scena[data-uscente="true"] { visibility: visible; z-index: 1; }

.scena__sfondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transition: transform 9s linear;
}
.scena[data-attiva="true"] .scena__sfondo { transform: scale(1.02); }

.scena__info {
  position: absolute;
  z-index: 2;
  left: max(var(--bordo-pagina), (100vw - var(--misura-largo)) / 2);
  top: clamp(2rem, 7vh, 4.5rem);
  width: min(33rem, 100% - var(--bordo-pagina) * 2);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - 46.2px) 0, 100% 80px, 100% 100%, 0 100%);
}
.scena__info > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-marca);
}
.scena[data-attiva="true"] .scena__info > * { opacity: 1; transform: none; }
.scena[data-attiva="true"] .scena__info > :nth-child(2) { transition-delay: 0.08s; }
.scena[data-attiva="true"] .scena__info > :nth-child(3) { transition-delay: 0.16s; }
.scena[data-attiva="true"] .scena__info > :nth-child(4) { transition-delay: 0.24s; }
.scena[data-attiva="true"] .scena__info > :nth-child(5) { transition-delay: 0.32s; }

.scena__n { margin: 0 0 var(--sp-3); font-family: var(--f-serif); font-variation-settings: normal; font-weight: 700; color: var(--arancio); }
.scena__n span { color: #9A9AC4; }
.scena__nome { font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.75rem); font-weight: 900; line-height: 0.88; color: var(--panna); }
.scena__dati { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin: var(--sp-7) 0 0; }
.scena__dati > div { padding-top: var(--sp-3); border-top: 1px solid rgba(255, 232, 223, .3); }
.scena__dati dt { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9A9AC4; }
.scena__dati dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: 1.625rem; font-weight: 800; line-height: 1; color: var(--panna);
}
.scena__tariffa {
  margin: var(--sp-6) 0 0;
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: 2.25rem; font-weight: 900; line-height: 1; color: var(--arancio);
}
.scena__tariffa small {
  font-family: var(--f-testo); font-variation-settings: "wdth" 100;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--panna);
}
.scena__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); padding-left: 5px; --vuoto-hover: var(--navy); }

.flotta__fila {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
}
.miniature {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-4);
  margin: 0; padding: 0;
  list-style: none;
}
.miniatura {
  display: grid;
  gap: var(--sp-3);
  width: clamp(8.5rem, 11vw, 11.5rem);
  padding: var(--sp-3);
  border: 0;
  background: var(--navy);
  color: var(--panna);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.miniatura__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.miniatura__foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity var(--t-micro-dur) var(--ease), scale 0.6s var(--ease-marca); }
.miniatura:hover img { opacity: 1; scale: 1.06; }
.miniatura[aria-current="true"] img { opacity: 1; }
.miniatura__nome { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miniatura__tempo { display: block; height: 2px; background: rgba(255, 232, 223, .22); overflow: hidden; }
.miniatura__tempo::after { content: ""; display: block; height: 100%; background: var(--arancio); transform: scaleX(0); transform-origin: left; }
.miniatura[aria-current="true"] .miniatura__tempo::after { animation: tempo-scena var(--durata-scena, 7s) linear forwards; }
.flotta[data-pausa="true"] .miniatura[aria-current="true"] .miniatura__tempo::after { animation: none; transform: scaleX(1); }
@keyframes tempo-scena { to { transform: scaleX(1); } }

@media (max-width: 59.99rem) {
  .flotta__palco { height: auto; display: grid; }
  .scena { position: relative; grid-area: 1 / 1; min-height: 40rem; }
  .scena__info { left: var(--bordo-pagina); right: var(--bordo-pagina); top: auto; bottom: var(--bordo-pagina); width: auto; }
  .scena__dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flotta__fila { position: static; padding-block: var(--sp-6); }
  .miniature { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .miniatura { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scena__sfondo { transition: none; transform: none; }
  .scena__info > * { opacity: 1; transform: none; }
}


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

.scheda-testa { background: var(--panna); padding-block: clamp(2.5rem, 6vw, 5rem); }
.scheda-testa__griglia { display: grid; gap: var(--sp-9); align-items: center; }
@media (min-width: 60rem) { .scheda-testa__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.scheda-testa__nome { font-size: clamp(2.75rem, 1.2rem + 4.6vw, 6rem); font-weight: 900; line-height: 0.9; }
.chiave {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-7);
  margin: var(--sp-8) 0 0;
}
.chiave > div { padding-top: var(--sp-3); border-top: 2px solid var(--navy); min-width: 0; }
.chiave dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--testo-tenue); }
.chiave dd {
  margin: var(--sp-2) 0 0;
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem); font-weight: 800; line-height: 1.02;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.scheda-testa__prezzo { display: grid; gap: var(--sp-2); margin-top: var(--sp-8); }
.scheda-testa__prezzo span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--testo-tenue); }
.scheda-testa__prezzo strong {
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); font-weight: 900; line-height: 0.95; color: var(--navy);
}
.scheda-testa__prezzo small, .contatto__prezzo small {
  font-family: var(--f-testo); font-variation-settings: "wdth" 100;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--testo-tenue);
}
.scheda-testa__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-7); padding-left: 5px; }
.scheda-testa__tel {
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: 1.5rem; font-weight: 800; color: var(--navy); text-decoration: none;
}
.scheda-testa__tel:hover { color: var(--arancio); }

.scheda-testa__foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0; border: 0;
  overflow: hidden;
  background: var(--navy-12);
  cursor: zoom-in;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 26.6px) 100%, 0 100%);
}
.scheda-testa__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-marca); }
.scheda-testa__foto:hover img { scale: 1.04; }
.scheda-testa__conto {
  position: absolute; left: 0; bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-5);
  background: var(--navy); color: var(--panna);
  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%);
}

.galleria-scheda { background: var(--panna); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.binario--foto .binario__traccia { display: flex; gap: var(--sp-4); list-style: none; margin: 0; }
.binario--foto li { flex: none; width: clamp(14rem, 26vw, 23rem); aspect-ratio: 3 / 2; scroll-snap-align: start; }
.binario--foto button { display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--navy-12); }
.binario--foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-marca); }
.binario--foto button:hover img { scale: 1.06; }

.scheda { grid-template-columns: minmax(0, 1fr) 20rem; }
@media (max-width: 62rem) { .scheda { grid-template-columns: 1fr; } }
.prosa--scheda p { font-size: 1.0625rem; line-height: 1.7; }
.scheda__tecnica { margin-top: var(--sezione-s); }

.charter-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-7); margin-top: var(--sp-9); }
.charter-info h3 {
  margin-bottom: var(--sp-3); padding-top: var(--sp-3); border-top: 2px solid var(--navy);
  font-family: var(--f-testo); font-variation-settings: "wdth" 100;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em;
}
.gettoni { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin: 0; padding: 0 0 0 6px; list-style: none; }
.gettoni li { position: relative; padding: var(--sp-2) var(--sp-5); font-size: 0.8125rem; font-weight: 600; isolation: isolate; }
.gettoni li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--panna); transform: skewX(calc(var(--ang) * -1)); }

.contatto { border: 2px solid var(--navy); border-radius: 0; top: calc(3.75rem + var(--sp-6)); }
.contatto__etichetta { margin: 0 0 var(--sp-2); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--testo-tenue); }
.contatto__prezzo {
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: 2.25rem; font-weight: 900; line-height: 1;
}
@media (max-width: 62rem) {
  /* sul telefono il riquadro diventa la barra fissa in basso: senza top:auto
     la regola da desktop lo stendeva su tutta la pagina */
  .contatto { top: auto; border: 0; border-top: 2px solid var(--navy); background: var(--bianco); }
  .contatto__etichetta { display: none; }
  .contatto__prezzo { font-size: 1.5rem; }
}

.tecnica { border-radius: 0; clip-path: polygon(0 0, calc(100% - 46.2px) 0, 100% 80px, 100% 100%, 0 100%); }
.tecnica__testata h2 { font-family: var(--f-testo); font-variation-settings: "wdth" 100; letter-spacing: 0.18em; color: var(--panna); }
.dato dd { font-weight: 600; }


/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */

.lightbox {
  width: 100vw; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(0, 0, 102, .97);
  color: var(--panna);
  overflow: hidden;
}
.lightbox::backdrop { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-entra 0.45s var(--ease-marca); }
}
@keyframes lightbox-entra { from { opacity: 0; } }

.lightbox__figura { position: absolute; inset: 4.5rem 6rem; display: grid; place-items: center; margin: 0; }
.lightbox__figura img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__figura img.entra { animation: foto-entra 0.6s var(--ease-marca); }
@keyframes foto-entra { from { opacity: 0; filter: blur(10px); transform: scale(0.97); } }

.lightbox__chiudi, .lightbox__freccia {
  position: absolute;
  width: 3.5rem; height: 3rem;
  border: 0; background: none; cursor: pointer;
  color: var(--panna); font-size: 1.375rem; line-height: 1;
  isolation: isolate;
}
.lightbox__chiudi::before, .lightbox__freccia::before {
  content: ""; position: absolute; inset: 0 7px; z-index: -1;
  border: 1.5px solid rgba(255, 232, 223, .5);
  transform: skewX(calc(var(--ang) * -1));
  transition: background var(--t-micro-dur) var(--ease), border-color var(--t-micro-dur) var(--ease);
}
.lightbox__chiudi:hover::before, .lightbox__freccia:hover::before { background: var(--arancio); border-color: var(--arancio); }
.lightbox__chiudi:hover, .lightbox__freccia:hover { color: var(--navy); }
.lightbox__chiudi { top: 1rem; right: 1rem; }
.lightbox__freccia { top: 50%; translate: 0 -50%; }
.lightbox__freccia--prec { left: 1rem; }
.lightbox__freccia--succ { right: 1rem; }
.lightbox__conto {
  position: absolute; left: 50%; bottom: 1.25rem; translate: -50% 0; margin: 0;
  font-family: var(--f-serif); font-variation-settings: normal; font-weight: 700;
}
@media (max-width: 40rem) {
  .lightbox__figura { inset: 4.5rem 0.5rem 5rem; }
  .lightbox__freccia { top: auto; bottom: 0.75rem; translate: none; }
}


/* --------------------------------------------------------------------------
   YACHT REFIT
   -------------------------------------------------------------------------- */

.coordina { background: var(--bianco); padding-block: var(--sezione); }
.coordina__testa { margin-bottom: var(--sp-10); }
.coordina__titolo, .archivio-refit__titolo, .pleasure__titolo {
  font-size: clamp(2.75rem, 1.2rem + 4.8vw, 6.5rem);
  font-weight: 900;
  line-height: 0.9;
}

/* I tre principi si impilano: ogni carta si ferma sotto la testata e la
   successiva le scorre sopra, lasciando visibile il bordo di quella prima. */
.pila { display: grid; gap: var(--sp-7); margin: 0; padding: 0; list-style: none; }
.pila__carta {
  --c-fondo: var(--panna); --c-testo: var(--navy); --c-n: var(--arancio);
  position: sticky;
  top: calc(4.5rem + var(--i) * 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  align-items: stretch;
  gap: clamp(1.25rem, 4vw, 4rem);
  min-height: clamp(16rem, 42svh, 24rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--c-fondo);
  color: var(--c-testo);
  clip-path: polygon(0 0, calc(100% - 46.2px) 0, 100% 80px, 100% 100%, 0 100%);
}
.pila__carta:nth-child(2) { --c-fondo: var(--sabbia); }
.pila__carta:nth-child(3) { --c-fondo: var(--verde); --c-testo: var(--panna); --c-n: var(--verde-chiaro); }
.pila__n {
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(4.5rem, 2rem + 9vw, 11rem); font-style: italic; font-weight: 900; line-height: 0.78;
  color: var(--c-n);
}
/* Titolo in alto, frase in basso, e a destra una trama di lastre a 30 gradi
   nel colore d'accento della carta. */
.pila__testi { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-7); }
.pila__titolo {
  font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--c-n);
}
.pila__trama {
  margin: calc(clamp(1.5rem, 4vw, 3.5rem) * -1) calc(clamp(1.5rem, 4vw, 3.5rem) * -1) calc(clamp(1.5rem, 4vw, 3.5rem) * -1) 0;
  background: repeating-linear-gradient(120deg, var(--c-n) 0 12px, transparent 12px 40px);
  opacity: 0.85;
}
.pila__testo {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
@media (max-width: 40rem) {
  .pila__carta { grid-template-columns: 1fr; align-items: start; position: relative; top: 0; }
  .pila__trama { display: none; }
}

.aree-refit { position: relative; overflow: hidden; background: var(--navy); color: var(--panna); padding-block: var(--sezione); }
.aree-refit .etichetta { color: var(--panna); }
.aree-righe { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 232, 223, .25); }
.area-riga {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 232, 223, .25);
  isolation: isolate;
  transition: color 0.35s var(--ease);
}
.area-riga::before {
  content: "";
  position: absolute; inset: 0 -12vw; z-index: -1;
  background: var(--arancio);
  transform: translateX(-102%) skewX(calc(var(--ang) * -1));
  transition: transform 0.6s var(--ease-marca);
}
.area-riga:hover { color: var(--navy); }
.area-riga:hover::before { transform: translateX(0) skewX(calc(var(--ang) * -1)); }
.area-riga__n { font-family: var(--f-serif); font-variation-settings: normal; font-weight: 700; color: var(--arancio); transition: color 0.35s var(--ease); }
.area-riga:hover .area-riga__n { color: var(--navy); }
.area-riga__titolo {
  display: flex; flex-wrap: wrap; gap: 0 0.35em;
  font-size: clamp(2rem, 1rem + 3.2vw, 4.75rem); font-weight: 900; line-height: 0.92;
  color: inherit;
}
@media (max-width: 40rem) { .area-riga__titolo { font-size: 7vw; } }
.area-riga__voce + .area-riga__voce::before { content: "/"; margin-right: 0.35em; color: var(--arancio); font-style: italic; }
.area-riga:hover .area-riga__voce + .area-riga__voce::before { color: var(--panna); }
.area-riga__foto { display: none; }

/* Dietro le righe scorrono i nomi delle aree, solo a contorno e appena
   visibili: riempiono il vuoto a destra senza togliere leggibilita. */
.aree-refit > .contenitore--largo { position: relative; z-index: 1; }
.aree-refit__nastro {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  pointer-events: none;
  transform: rotate(-4deg) scale(1.15);
}
.aree-refit__nastro .nastro__voce {
  font-size: clamp(6rem, 17vw, 16rem);
  -webkit-text-stroke: 1.5px rgba(255, 232, 223, .13);
}
.aree-refit__nastro .nastro__segno { height: clamp(2.5rem, 6vw, 5.5rem); opacity: 0.25; }

.anteprima-cursore {
  position: absolute;
  z-index: 3;
  left: 0; top: 0;
  width: clamp(12rem, 17vw, 17rem);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--ax, 0px), var(--ay, 0px)) translate(-50%, -50%) scale(0.7) rotate(-6deg);
  transition: opacity 0.3s var(--ease), scale 0.4s var(--ease-marca);
}
.aree-refit[data-anteprima-attiva="true"] .anteprima-cursore {
  opacity: 1;
  transform: translate(var(--ax, 0px), var(--ay, 0px)) translate(-50%, -50%) scale(1) rotate(-4deg);
}
@media (max-width: 59.99rem), (hover: none) {
  .anteprima-cursore { display: none; }
  .area-riga { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .area-riga__foto { display: block; width: 5.5rem; aspect-ratio: 3 / 4; object-fit: cover; }
}

.archivio-refit { background: var(--bianco); }
.archivio-refit__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-9); }
.archivio-refit__conto { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.archivio-refit__conto strong {
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: 2.75rem; font-weight: 900; letter-spacing: 0; color: var(--arancio); margin: 0 0.15em 0 0.6em;
}
.lavorazione__nome { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); font-weight: 900; }
.lavorazione > summary { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
.lavorazione[open] > summary { color: var(--arancio); }
.lavorazione__corpo { padding-bottom: var(--sp-10); }
@media (min-width: 56rem) {
  .lavorazione__corpo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.lavorazione__video { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-5); }
.video-card { margin: 0; }
.video-card figcaption { margin-top: var(--sp-3); font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.video { border-radius: 0; }
.video::after {
  width: 3.75rem; height: 2.5rem;
  border-radius: 0;
  clip-path: polygon(14.4px 0, 100% 0, calc(100% - 14.4px) 100%, 0 100%);
  background-size: 11px;
}

.propspeed__griglia { display: grid; gap: var(--sp-9); align-items: start; }
@media (min-width: 56rem) { .propspeed__griglia { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.propspeed .video-card figcaption { color: var(--panna); }


/* --------------------------------------------------------------------------
   YACHT MANAGEMENT
   -------------------------------------------------------------------------- */

.squadra { background: var(--bianco); padding-block: var(--sezione); }

/* La frase si accende parola per parola mentre la si scorre. */
.accendi {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2rem, 1rem + 2.9vw, 4.25rem);
  font-weight: 900;
  line-height: 0.95;
  color: var(--navy);
}
.js-movimento .accendi__parola { color: rgba(0, 0, 102, .14); transition: color 0.35s var(--ease); }
.js-movimento .accendi__parola.accesa { color: var(--navy); }
.js-movimento .accendi__parola.accesa:nth-last-child(-n+2) { color: var(--mattone); }

/* Titolo a sinistra, i tre punti impilati a destra: uno e un paragrafo e
   due sono una riga, e affiancati in tre colonne si vedeva. */
.squadra__griglia { display: grid; gap: var(--sp-9); margin-top: var(--sp-7); }
@media (min-width: 60rem) {
  .squadra__griglia { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-10); align-items: start; }
}
.punti { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.punti li { padding-block: var(--sp-5); border-top: 2px solid var(--navy); }
.punti li:last-child { border-bottom: 2px solid var(--navy); }
.punti__n { display: block; margin-bottom: var(--sp-4); font-family: var(--f-serif); font-variation-settings: normal; font-weight: 700; color: var(--mattone); }
.punti p { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 600; line-height: 1.35; color: var(--navy); }

.pleasure { background: var(--sabbia); padding-block: var(--sezione); }
.pleasure__titolo { margin-bottom: var(--sp-10); }
.carte-servizio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.carta-servizio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: clamp(20rem, 40svh, 28rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bianco);
  color: var(--navy);
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, calc(100% - 46.2px) 0, 100% 80px, 100% 100%, 0 100%);
  transition: color 0.4s var(--ease);
}
.carta-servizio::before {
  content: "";
  position: absolute; inset: 0 -40%; z-index: -1;
  background: var(--mattone);
  transform: translateX(-102%) skewX(calc(var(--ang) * -1));
  transition: transform 0.7s var(--ease-marca);
}
.carta-servizio:hover { color: var(--panna); }
.carta-servizio:hover::before { transform: translateX(0) skewX(calc(var(--ang) * -1)); }
.carta-servizio__n {
  font-family: var(--f-display); font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(4rem, 2rem + 5vw, 7rem); font-style: italic; font-weight: 900; line-height: 0.8;
  color: var(--mattone); transition: color 0.4s var(--ease);
}
.carta-servizio:hover .carta-servizio__n { color: var(--giallo); }
.carta-servizio__nome { margin-top: auto; font-size: clamp(2rem, 1.2rem + 1.8vw, 3rem); font-weight: 900; line-height: 0.9; color: inherit; }
.carta-servizio p { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; max-width: 26ch; }


/* --------------------------------------------------------------------------
   TI RICHIAMIAMO
   Resta su navy: e l'unica pagina in cui il lime scandisce le ore.
   -------------------------------------------------------------------------- */

.richiamo { background: var(--navy); color: var(--panna); padding-block: var(--sezione); }
.richiamo__griglia { display: grid; gap: var(--sp-10); }
@media (min-width: 56rem) { .richiamo__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: start; } }
.richiamo .etichetta { color: var(--panna); }
.richiamo__titolo { font-size: var(--t-apertura); line-height: var(--lh-apertura); font-weight: 900; color: var(--panna); }
.richiamo__titolo .svela { --lastra-2: var(--panna); }
.richiamo__sotto {
  margin: var(--sp-6) 0 var(--sezione-s);
  font-family: var(--f-serif); font-variation-settings: normal;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-style: italic; font-weight: 500;
}
.richiamo .promessa p { color: var(--panna); }
.richiamo__forma {
  padding: clamp(var(--sp-5), 4vw, var(--sp-8));
  background: rgba(255, 232, 223, .07);
  clip-path: polygon(0 0, calc(100% - 46.2px) 0, 100% 80px, 100% 100%, 0 100%);
}
.richiamo .campo > span { color: var(--panna); }
.richiamo .campo input, .richiamo .campo textarea, .richiamo .campo select {
  background: transparent; color: var(--panna); border-color: rgba(255, 232, 223, .35); border-radius: 0;
}
.richiamo .campo select option { color: var(--navy); }
.richiamo .campo input:focus, .richiamo .campo textarea:focus { border-color: var(--panna); }
.richiamo .pannello__nota { color: #B9B9DA; }
.richiamo .pannello__nota a { color: var(--panna); }

/* Senza il numero davanti, la riga dell'archivio ha tre colonne. */
.lavorazione > summary { grid-template-columns: 1fr auto auto; }
@media (max-width: 40rem) { .lavorazione > summary { grid-template-columns: 1fr auto; } }


/* --------------------------------------------------------------------------
   CREW (management)
   Cinque categorie a sinistra; passando sopra a una si apre, a destra, lo
   specchietto con le persone. Su telefono lo specchietto si apre sotto la
   categoria toccata.
   -------------------------------------------------------------------------- */

.crew { position: relative; margin-top: var(--sezione); padding-top: var(--sezione-s); border-top: 2px solid var(--navy); }
.crew__testa { display: grid; gap: var(--sp-5); }
/* Il titolo sta su una riga: le due lastre restano, ma affiancate. */
.crew__titolo { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); font-weight: 900; line-height: 0.95; }
.crew__titolo .svela { --lastra-1: var(--mattone); display: inline-block; vertical-align: top; }
.crew__titolo .svela + .svela { margin-left: 0.22em; }
.crew__testo { margin: 0; max-width: 40ch; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-weight: 500; line-height: 1.5; color: var(--navy); }

.crew__elenco { margin: var(--sp-8) 0 0; padding: 0; list-style: none; }

.crew__categoria {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: clamp(1rem, 2vw, 1.5rem) var(--sp-5);
  border: 0;
  border-top: 2px solid var(--navy);
  background: none;
  color: var(--navy);
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem);
  font-weight: 900;
  line-height: 0.95;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s var(--ease);
}
.crew__voce:last-child .crew__categoria { border-bottom: 2px solid var(--navy); }
.crew__categoria::before {
  content: "";
  position: absolute; inset: 0 -20%; z-index: -1;
  background: var(--mattone);
  transform: translateX(-102%) skewX(calc(var(--ang) * -1));
  transition: transform 0.6s var(--ease-marca);
}
.crew__voce[data-attiva="true"] .crew__categoria,
.crew__categoria:hover { color: var(--panna); }
.crew__voce[data-attiva="true"] .crew__categoria::before,
.crew__categoria:hover::before { transform: translateX(0) skewX(calc(var(--ang) * -1)); }
.crew__segno { flex: none; width: 22px; height: 12px; background: currentColor; transform: skewX(calc(var(--ang) * -1)); transition: transform 0.4s var(--ease-marca); }
.crew__voce[data-attiva="true"] .crew__segno { transform: skewX(calc(var(--ang) * -1)) translateX(8px); }

.crew__specchio {
  display: none;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--panna);
  clip-path: polygon(0 0, calc(100% - 46.2px) 0, 100% 80px, 100% 100%, 0 100%);
}
.crew__voce[data-attiva="true"] .crew__specchio { display: block; }
/* backwards e non both: finita l'animazione non resta nulla applicato, e
   Safari torna a disegnare foto e testi a piena definizione. */
.js-movimento .crew__voce[data-attiva="true"] .crew__specchio { animation: specchio-apre 0.7s var(--ease-marca) backwards; }
@keyframes specchio-apre {
  from { clip-path: polygon(0 0, 12% 0, 0 100%, 0 100%); }
  to   { clip-path: polygon(0 0, calc(100% - 46.2px) 0, 100% 80px, 100% 100%, 0 100%); }
}

.membri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: var(--sp-6) var(--sp-5); margin: 0; padding: 0; list-style: none; }
.membro { min-width: 0; }
.js-movimento .crew__voce[data-attiva="true"] .membro { animation: membro-entra 0.8s var(--ease-marca) backwards; }
.crew__voce[data-attiva="true"] .membro:nth-child(2) { animation-delay: 0.08s; }
.crew__voce[data-attiva="true"] .membro:nth-child(3) { animation-delay: 0.16s; }
.crew__voce[data-attiva="true"] .membro:nth-child(4) { animation-delay: 0.24s; }
.crew__voce[data-attiva="true"] .membro:nth-child(5) { animation-delay: 0.32s; }
@keyframes membro-entra { from { opacity: 0; filter: blur(10px); transform: translateY(20px); } }

.membro__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); }
.membro__foto img { width: 100%; height: 100%; object-fit: cover; }
.membro__nome { margin-top: var(--sp-4); font-size: 1.5rem; font-weight: 900; line-height: 1; }
.membro__ruolo { margin: var(--sp-2) 0 var(--sp-3); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mattone); }
.membro__descrizione { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--navy); }

@media (min-width: 60rem) {
  /* Il riquadro e alto quanto titolo e categorie: tre colonne e foto
     quadrate, cosi i cinque capitani stanno in due righe. */
  .crew { min-height: calc(var(--sezione-s) + 44rem); }
  .crew__testa, .crew__elenco { width: 40%; }
  .crew__specchio { position: absolute; top: var(--sezione-s); right: 0; bottom: 0; width: 52%; overflow-y: auto; padding: clamp(1.25rem, 2vw, 1.75rem); }
  .membri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .membro__foto { aspect-ratio: 1 / 1; }
  .membro__nome { margin-top: var(--sp-3); font-size: 1.25rem; }
  .membro__ruolo { margin: var(--sp-2) 0; }
  .membro__descrizione { font-size: 0.8125rem; line-height: 1.4; }
}
@media (max-width: 59.99rem) {
  .crew__specchio { margin-bottom: var(--sp-5); }
  .membri { grid-auto-flow: column; grid-auto-columns: minmax(11rem, 62%); grid-template-columns: none; overflow-x: auto; scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crew__specchio, .membro { animation: none !important; }
}