/* ==========================================================================
   REWINDY — Foglio di stile principale
   Design: Material Design 3 + DM Sans + Palette Wind & Salt
   
   Indice:
   1. Variabili CSS (colori, tipografia, spaziature, elevazioni)
   2. Reset e base
   3. Tipografia
   4. Layout (container)
   5. Bottoni M3 (pill, filled, outlined, tonal, whatsapp)
   6. Cards M3 (bordi, hover)
   7. Icone tonali
   8. Sezioni (alternanza sfondi, decorazioni)
   9. Navbar M3 (glassmorphism, hamburger, menu mobile)
   10. Hero
   11. About (decorazione laterale)
   12. Esperienze (griglia cards)
   13. Barca (layout 2 colonne, carosello)
   14. Pacchetti (cards su sfondo scuro)
   15. CTA finale
   16. Footer
   17. Cookie banner (floating pill M3)
   18. Responsive (768px, 480px)
   ========================================================================== */


/* ==========================================================================
   1. VARIABILI CSS
   ========================================================================== */
:root {
  /* Colori principali */
  --navy: #0F1D3D;
  --navy-lt: #1A2D56;
  --navy-dk: #0A1429;
  --teal: #20B298;
  --teal-lt: #28C9AB;
  --teal-dk: #1A9A82;
  --accent: #3B82F6;
  --accent-dk: #2563EB;

  /* Superfici tonali M3 */
  --surface: #FAFCFF;
  --surface-var: #EFF3F8;
  --tonal: rgba(32, 178, 152, 0.08);
  --tonal-s: rgba(32, 178, 152, 0.14);

  /* Testi */
  --on-surf: #0F1D3D;
  --on-surf-v: #44546A;
  --on-surf-m: #6B7A8D;

  /* Bordi M3 */
  --outline: #C4CDD8;
  --outline-v: #DDE3EB;

  /* Elevazioni M3 — leggere */
  --el1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --el2: 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --el3: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  /* Tipografia */
  --ff: 'DM Sans', sans-serif;

  /* Bordi arrotondati M3 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 100px;

  /* Transizioni */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;

  /* Layout */
  --mw: 1200px;
  --nh: 72px;
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 100% rispetta le preferenze font dell'utente (accessibilità) */
  font-size: 100%;
  scroll-behavior: smooth;
  /* Previene scroll orizzontale su mobile */
  overflow-x: hidden;
}

body {
  font-family: var(--ff);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-surf);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Spazio per navbar fissa */
  padding-top: var(--nh);
  /* Previene scroll orizzontale su mobile */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--teal);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--teal-dk);
}

ul, ol {
  list-style: none;
}


/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-surf);
}

p {
  margin-bottom: 1rem;
  color: var(--on-surf-v);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* ==========================================================================
   5. BOTTONI M3 — Pill, senza ombra di default
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 28px;
  border: none;
  border-radius: var(--r-full);
  font-family: var(--ff);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--t-base), box-shadow var(--t-base);
  text-decoration: none;
  box-shadow: none;
  min-height: 44px;
}

/* Filled — teal */
.btn-secondary {
  background: var(--teal);
  color: #fff;
}
.btn-secondary:hover {
  background: var(--teal-dk);
  box-shadow: var(--el1);
  color: #fff;
}

/* Outlined su sfondo scuro */
.btn-outline {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.35);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* Outlined su sfondo chiaro */
.btn-outline-dark {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--outline);
}
.btn-outline-dark:hover {
  background: var(--tonal);
  border-color: var(--teal);
}

/* CTA Navbar — navy con bordo e testo teal */
.btn-cta-nav {
  background: var(--navy);
  color: var(--teal-lt);
  border: 1.5px solid rgba(32, 178, 152, 0.35);
}
.btn-cta-nav:hover {
  background: var(--navy-lt);
  border-color: var(--teal);
  box-shadow: var(--el1);
  color: var(--teal-lt);
}


/* ==========================================================================
   6. CARDS M3 — bordi sottili, angoli morbidi
   ========================================================================== */
.card {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--outline-v);
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}
.card:hover {
  box-shadow: var(--el2);
  border-color: var(--outline);
  transform: translateY(-2px);
}


/* ==========================================================================
   7. ICONE TONALI M3
   ========================================================================== */
.icon-tonal {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--tonal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-dk);
}
.icon-tonal .material-symbols-rounded {
  font-size: 26px;
}


/* ==========================================================================
   8. SEZIONI
   ========================================================================== */
.section-line {
  width: 48px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
}


/* ==========================================================================
   9. NAVBAR M3 — glassmorphism + bordo
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--nh);
  height: auto;
  background: rgba(250, 252, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--outline-v);
  z-index: 1000;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nh);
  height: auto;
  width: 100%;
  padding: 0.75rem 2rem;
}

.navbar__logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 2px;
  text-decoration: none;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.navbar__links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surf-v);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-full);
  transition: color var(--t-fast), background var(--t-fast);
}

.navbar__links a:hover {
  color: var(--navy);
  background: var(--tonal);
}

/* Link attivo — pill tonal M3 */
.navbar__links a.active {
  color: var(--navy);
  font-weight: 600;
  background: var(--tonal);
}

.navbar__cta {
  margin-left: 0.5rem;
  padding: 8px 20px;
  font-size: 0.8rem;
}

/* Hamburger — visibile solo su mobile */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--r-full);
  transition: background var(--t-fast);
  z-index: 1001;
}

.navbar__hamburger:hover {
  background: var(--tonal);
}

.navbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}

.navbar__hamburger span:nth-child(1) { margin-bottom: 5px; }
.navbar__hamburger span:nth-child(3) { margin-top: 5px; }

/* Animazione hamburger → X */
.navbar__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile M3 */
.navbar__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(100vh - 100%);
  background: var(--surface);
  flex-direction: column;
  align-items: center;
  padding-top: 3rem;
  gap: 0.5rem;
  z-index: 999;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.navbar__mobile-menu.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.navbar__mobile-menu a {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  padding: 0.75rem 2rem;
  border-radius: var(--r-full);
  width: 80%;
  text-align: center;
  transition: background var(--t-fast);
}

.navbar__mobile-menu a:hover,
.navbar__mobile-menu a.active {
  background: var(--tonal);
  color: var(--teal-dk);
}

.navbar__mobile-menu .btn {
  margin-top: 1rem;
  width: auto;
}

/* Override colore testo bottone CTA nav — sia desktop che mobile */
.navbar__links .btn-cta-nav,
.navbar__mobile-menu .btn-cta-nav,
.navbar__mobile-menu .btn-cta-nav:hover {
  color: var(--teal-lt);
}


/* ==========================================================================
   10. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
  /* Compensa il padding-top del body */
  margin-top: calc(-1 * var(--nh));
  padding-top: var(--nh);
}

picture {
  display: block;
}

.tb-gallery__item picture,
.tb-gallery__carousel-slide picture,
.boat__carousel-slide picture {
  width: 100%;
  height: 100%;
}

/* <picture> wrapper del hero__bg deve coprire tutta l'area hero */
.hero > picture {
  position: absolute;
  inset: 0;
}

/* Immagine di sfondo */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 52% center;
  object-fit: cover;
  object-position: 52% center;
}

/* Overlay scuro gradiente */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,29,61,0.65) 0%, rgba(15,29,61,0.82) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--mw);
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
}

.hero__title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 1.25rem;
  max-width: 700px;
}

.hero__title span {
  color: var(--teal-lt);
}

.hero__subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 2rem;
  font-weight: 300;
}

.hero__buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Where preview sopra il titolo */
.hero__where {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--teal-lt);
  margin-bottom: 1rem;
}


/* ==========================================================================
   11. ABOUT — testo a sinistra + info mosaic card a destra
   ========================================================================== */
.about {
  padding: 4rem 0;
  background: #fff;
}

.about__inner {
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.about__text-wrap {
  max-width: 520px;
}

.about__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.75rem;
}

.about__title {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.about__line {
  margin-bottom: 1.25rem;
}

.about__text p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--on-surf-v);
  margin-bottom: 0.75rem;
}

.about__text p:last-child {
  margin-bottom: 1.5rem;
}

/* Bottone Discover the Boat — navy con testo teal */
.about__btn-discover {
  background: var(--navy);
  color: var(--teal-lt);
  border: none;
  border-radius: var(--r-full);
  padding: 12px 28px;
  font-family: var(--ff);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--t-base), box-shadow var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.about__btn-discover:hover {
  background: var(--navy-lt);
  box-shadow: var(--el1);
  color: var(--teal-lt);
}

/* Info mosaic card */
.about__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--outline-v);
  border: 1px solid var(--outline-v);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.about__mosaic-item {
  background: var(--surface-var);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  transition: background var(--t-base), transform var(--t-base);
}

.about__mosaic-item:hover {
  background: #fff;
  transform: translateY(-2px);
}

.about__mosaic-num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.about__mosaic-num small {
  font-size: 1rem;
  font-weight: 500;
}

.about__mosaic-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--on-surf);
  margin-bottom: 0.1rem;
}

.about__mosaic-sub {
  font-size: 0.65rem;
  color: var(--on-surf-m);
}


/* ==========================================================================
   12. ESPERIENZE — griglia 3 cards
   ========================================================================== */
.exp-prev {
  padding: 4rem 0;
  background: var(--surface-var);
}

.exp-prev__hdr {
  text-align: center;
  margin-bottom: 2.5rem;
}

.exp-prev__hdr h2 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.exp-prev__hdr .section-line {
  margin: 0.5rem auto 0.75rem;
}

.exp-prev__hdr p {
  color: var(--on-surf-m);
  max-width: 500px;
  margin: 0 auto;
}

/* Variante allineata a sinistra */
.exp-prev__hdr--left {
  text-align: left;
}

.exp-prev__hdr--left .section-line {
  margin-left: 0;
  margin-right: auto;
}

.exp-prev__hdr--left p {
  margin: 0;
}

/* Label "What We Offer" sopra il titolo */
.exp-prev__label {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.exp-card {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.exp-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--tonal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--teal-dk);
}

.exp-card__icon .material-symbols-rounded {
  font-size: 24px;
}

.exp-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.exp-card__desc {
  font-size: 0.875rem;
  color: var(--on-surf-v);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 1.25rem;
}

.exp-card__cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap var(--t-fast);
}

.exp-card__cta:hover {
  gap: 0.6rem;
  color: var(--teal-dk);
}

.exp-prev__ft {
  margin-top: 2rem;
}


/* ==========================================================================
   13. BARCA — 2 colonne + carosello foto
   ========================================================================== */
.boat {
  padding: 4rem 0;
  background: #fff;
  overflow: hidden;
}

.boat__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 1.5rem;
  overflow: hidden;
}

.boat__content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.boat__content .section-line {
  margin-bottom: 1.25rem;
}

.boat__name {
  font-size: 1.05rem;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Iconcine specifiche barca — griglia 2 colonne */
.boat__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.boat__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--on-surf-v);
}

.boat__feature-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--tonal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--teal-dk);
}

.boat__feature-icon .material-symbols-rounded {
  font-size: 18px;
}

/* Carosello foto — JS vanilla */
.boat__carousel {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--outline-v);
  aspect-ratio: 4 / 3;
  background: var(--surface-var);
}

.boat__carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  height: 100%;
}

.boat__carousel-slide {
  min-width: 100%;
  height: 100%;
}

.boat__carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder per slide senza foto */
.boat__carousel-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--on-surf-m);
  background: var(--surface-var);
}

.boat__carousel-placeholder .material-symbols-rounded {
  font-size: 48px;
}

/* Frecce navigazione */
.boat__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--el2);
  transition: background var(--t-fast);
  z-index: 2;
  color: var(--navy);
}

.boat__carousel-btn:hover {
  background: #fff;
}

.boat__carousel-btn--prev { left: 12px; }
.boat__carousel-btn--next { right: 12px; }

/* Wrapper carosello + stats nella stessa card visiva */
.boat__media {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}

/* Il carosello ha angoli arrotondati solo in alto */
.boat__media .boat__carousel {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

/* Stats sotto il carosello — sfondo navy, angoli arrotondati in basso */
.boat__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--navy);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
  max-width: 100%;
}

.boat__stat {
  padding: 1rem 0.75rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.boat__stat:last-child {
  border-right: none;
}

.boat__stat-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal-lt);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.boat__stat-num small {
  font-size: 0.85rem;
  font-weight: 500;
}

.boat__stat-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.15rem;
}

.boat__stat-sub {
  display: block;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
}

/* Dots sotto la card completa */
.boat__media .boat__carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.75rem;
  padding: 12px 0 0;
}

.boat__carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--outline);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  padding: 0;
}

.boat__carousel-dot.active {
  background: var(--teal);
  transform: scale(1.2);
}


/* ==========================================================================
/* ==========================================================================
   14b. PACKAGES HOME — cards chiare con lista strutturata
   ========================================================================== */
.pkgs-home {
  padding: 4rem 0;
  background: var(--surface);
}

.pkgs-home__hdr {
  text-align: center;
  margin-bottom: 2.5rem;
}

.pkgs-home__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.pkgs-home__hdr h2 {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.pkgs-home__hdr .section-line {
  margin: 0.5rem auto 0.75rem;
}

.pkgs-home__hdr > p:last-child {
  color: var(--on-surf-m);
  font-size: 0.95rem;
}

.pkgs-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 820px;
}

.pkgs-home-card {
  border: 1px solid var(--outline-v);
  border-radius: var(--r-lg);
  padding: 2rem;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: visible;
  min-width: 0;
}

.pkgs-home-card:hover {
  box-shadow: var(--el2);
  border-color: var(--outline);
  transform: translateY(-2px);
}

/* Card featured (All-Inclusive) — sfondo navy */
.pkgs-home-card--featured {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.pkgs-home-card--featured .pkgs-home-card__title {
  color: #fff;
}

.pkgs-home-card--featured .pkgs-home-card__sub {
  color: var(--teal-lt);
}

.pkgs-home-card--featured .section-line {
  background: var(--teal-lt);
}

.pkgs-home-card--featured .pkgs-home-card__section-label {
  color: rgba(255,255,255,0.5);
}

.pkgs-home-card--featured .pkgs-home-card__list li {
  color: rgba(255,255,255,0.75);
}

.pkgs-home-card--featured .pkgs-home-card__list li .material-symbols-rounded {
  color: var(--teal-lt);
}

/* Badge "Most Popular" */
.pkgs-home-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--teal);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-full);
}

.pkgs-home-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.15rem;
}

.pkgs-home-card__sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pkgs-home-card__section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--on-surf-m);
  margin-bottom: 0.5rem;
}

.pkgs-home-card__section-label--not {
  margin-top: 1rem;
  color: var(--on-surf-m);
  opacity: 0.6;
}

.pkgs-home-card__list {
  list-style: none;
  margin-bottom: 0.5rem;
}

.pkgs-home-card__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--on-surf-v);
  padding: 0.3rem 0;
}

.pkgs-home-card__list li .material-symbols-rounded {
  font-size: 18px;
  color: var(--teal);
}

/* Lista "not included" grigia */
.pkgs-home-card__list--not li {
  color: var(--on-surf-m);
  opacity: 0.5;
}

.pkgs-home-card__list--not li .material-symbols-rounded {
  color: var(--on-surf-m);
}

.pkgs-home-card__btn {
  margin-top: auto;
  padding-top: 1.25rem;
  width: 100%;
}

/* ==========================================================================
   14c. DESTINAZIONI — Where We Sail
   ========================================================================== */
.destinations {
  padding: 4rem 0;
  background: var(--surface-var);
  text-align: left;
}

.destinations__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.destinations h2 {
  font-size: 2.25rem;
}

.destinations__desc {
  font-size: 0.95rem;
  color: var(--on-surf-m);
  max-width: 560px;
  margin: 0 0 2rem;
}

.destinations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: var(--mw);
}

/* Destinazioni come cards M3 */
.destinations__card {
  padding: 1.25rem;
  text-align: left;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.destinations__card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.destinations__card p {
  font-size: 0.8rem;
  color: var(--on-surf-m);
  margin-bottom: 0;
}

.destinations__num {
  display: block;
  font-size: 0.7rem;
  color: var(--outline);
  font-weight: 600;
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   15. CTA FINALE — gradiente teal, più respiro
   ========================================================================== */
.cta-final {
  padding: 4rem 0;
  background: linear-gradient(
    135deg,
    var(--teal-dk) 0%,
    var(--teal) 50%,
    var(--teal-lt) 100%
  );
}

/* Layout orizzontale su desktop */
.cta-final__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.cta-final__text h2 {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 0.25rem;
  text-align: left;
}

.cta-final__text p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-align: left;
  max-width: none;
}

.cta-final__buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.footer {
  background: var(--navy-dk);
  color: #fff;
  padding: 3.5rem 0 1.5rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.footer__desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 320px;
}

.footer__contacts h4,
.footer__nav h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}

.footer__contacts a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.6rem;
  transition: color var(--t-fast);
}

.footer__contacts a:hover {
  color: var(--teal);
}

.footer__contacts .material-symbols-rounded {
  font-size: 18px;
}

.footer__nav a {
  display: block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
  transition: color var(--t-fast);
}

.footer__nav a:hover {
  color: var(--teal);
}

.footer__bottom {
  max-width: var(--mw);
  margin: 2.5rem auto 0;
  padding: 1.25rem 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__copyright {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer__policy-links {
  display: flex;
  gap: 1.5rem;
}

.footer__policy-links a {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer__policy-links a:hover {
  color: var(--teal);
}


/* ==========================================================================
   17. COOKIE BANNER — floating pill M3
   ========================================================================== */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 720px;
  background: var(--navy);
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-lg);
  box-shadow: var(--el3);
  z-index: 2000;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cookie-banner__text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  min-width: 240px;
  line-height: 1.5;
}

.cookie-banner__text a {
  color: var(--teal-lt);
  text-decoration: underline;
}

.cookie-banner__buttons {
  display: flex;
  gap: 0.5rem;
}

.cookie-banner__buttons .btn {
  padding: 8px 20px;
  font-size: 0.75rem;
}


/* ==========================================================================
   18. BOTTONE WHATSAPP FLOATING — fisso in basso a destra, sempre visibile
   ========================================================================== */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 1500;
  transition: transform var(--t-base), box-shadow var(--t-base);
  text-decoration: none;
}

.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  color: #fff;
}

.wa-float .material-symbols-rounded {
  font-size: 28px;
}

/* Nasconde il floating quando il cookie banner è visibile (evita sovrapposizione) */
.cookie-banner.is-visible ~ .wa-float {
  bottom: 6rem;
}


/* ==========================================================================
   18b. PAGINA THE BOAT — gallery, lightbox, highlights, specs, comfort
   Classi tb-* originali (recuperate da V9.5 pre-refactoring)
   ========================================================================== */

.tb-gallery {
  padding: 4rem 0;
  background: var(--surface-var);
}

.tb-gallery__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.tb-gallery__title {
  font-size: 2.25rem;
  line-height: 1.2;
}

.tb-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.tb-gallery__item--wide {
  grid-column: span 2;
}

.tb-gallery__item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--outline-v);
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.tb-gallery__item:hover {
  box-shadow: var(--el2);
  transform: translateY(-2px);
}

.tb-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tb-gallery__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 29, 61, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base);
}

.tb-gallery__overlay .material-symbols-rounded {
  font-size: 36px;
  color: rgba(255, 255, 255, 0);
  transition: color var(--t-base);
}

.tb-gallery__item:hover .tb-gallery__overlay {
  background: rgba(15, 29, 61, 0.35);
}

.tb-gallery__item:hover .tb-gallery__overlay .material-symbols-rounded {
  color: rgba(255, 255, 255, 0.9);
}

.tb-gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--on-surf-m);
  background: var(--surface);
}

.tb-gallery__placeholder .material-symbols-rounded {
  font-size: 40px;
  color: var(--outline);
}

.tb-gallery__placeholder span:last-child {
  font-size: 0.8rem;
}

/* --- Carosello galleria mobile — nascosto su desktop --- */
.tb-gallery__carousel {
  display: none;
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--outline-v);
  aspect-ratio: 4 / 3;
  background: var(--surface);
}

.tb-gallery__carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  height: 100%;
}

.tb-gallery__carousel-slide {
  min-width: 100%;
  height: 100%;
}

.tb-gallery__carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-gallery__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--el2);
  transition: background var(--t-fast);
  z-index: 2;
  color: var(--navy);
}

.tb-gallery__carousel-btn:hover {
  background: #fff;
}

.tb-gallery__carousel-btn--prev { left: 12px; }
.tb-gallery__carousel-btn--next { right: 12px; }

.tb-gallery__carousel-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 0;
}

.tb-gallery__carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--outline);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  padding: 0;
}

.tb-gallery__carousel-dot.active {
  background: var(--teal);
  transform: scale(1.2);
}

/* --- Lightbox — overlay fullscreen --- */
.tb-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(10, 20, 41, 0.95);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tb-lightbox.is-open {
  display: flex;
  opacity: 1;
}

.tb-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--t-fast);
  z-index: 3001;
}

.tb-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tb-lightbox__close .material-symbols-rounded {
  font-size: 28px;
}

.tb-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--t-fast);
  z-index: 3001;
}

.tb-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tb-lightbox__nav .material-symbols-rounded {
  font-size: 32px;
}

.tb-lightbox__nav--prev { left: 1rem; }
.tb-lightbox__nav--next { right: 1rem; }

.tb-lightbox__content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tb-lightbox__img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--r-md);
  object-fit: contain;
}

.tb-lightbox__caption {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-top: 1rem;
  text-align: center;
}

.tb-lightbox__counter {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* --- Mosaico icone — panoramica rapida dotazioni --- */
.tb-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--outline-v);
  border: 1px solid var(--outline-v);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 3rem;
}

.tb-highlights__item {
  background: var(--surface-var);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  transition: background var(--t-base), transform var(--t-base);
}

.tb-highlights__item:hover {
  background: #fff;
  transform: translateY(-2px);
}

.tb-highlights__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--tonal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.tb-highlights__icon .material-symbols-rounded {
  font-size: 22px;
  color: var(--teal-dk);
}

.tb-highlights__val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.tb-highlights__label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--on-surf-m);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Specifiche tecniche — griglia 2x2 --- */
.tb-specs {
  padding: 4rem 0;
  background: #fff;
}

.tb-specs__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.tb-specs__title {
  font-size: 2.25rem;
  line-height: 1.2;
}

.tb-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.tb-specs__group {
  background: var(--surface-var);
  border-radius: var(--r-lg);
  border: 1px solid var(--outline-v);
  padding: 1.75rem;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.tb-specs__group:hover {
  box-shadow: var(--el2);
  border-color: var(--outline);
  transform: translateY(-2px);
}

.tb-specs__group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--outline-v);
}

.tb-specs__group-title .material-symbols-rounded {
  font-size: 22px;
  color: var(--teal);
}

.tb-specs__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tb-specs__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.875rem;
}

.tb-specs__key {
  color: var(--on-surf-m);
  font-weight: 500;
  flex-shrink: 0;
}

.tb-specs__val {
  color: var(--navy);
  font-weight: 600;
  text-align: right;
}

/* --- Comfort & On Board — 3 cards --- */
.tb-comfort {
  padding: 4rem 0;
  background: #fff;
}

.tb-comfort__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.tb-comfort__title {
  font-size: 2.25rem;
  line-height: 1.2;
}

.tb-comfort__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.tb-comfort__card {
  padding: 1.75rem;
  background: var(--surface-var);
}

.tb-comfort__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.tb-comfort__card p {
  font-size: 0.875rem;
  color: var(--on-surf-v);
  line-height: 1.65;
  margin-bottom: 0;
}


/* ==========================================================================
   19. PAGINA EXPERIENCES — redesign con booking cards interattive
   ========================================================================== */

/* Hero combinato — unica sezione navy */
.exp-hero-combined {
  background: var(--navy);
  padding: 3.5rem 0 3rem;
  text-align: left;
}

.exp-hero-combined__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--teal-lt);
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.exp-hero-combined h1 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.exp-hero-combined__subtitle {
  font-size: 1.15rem;
  color: var(--teal-lt);
  margin-bottom: 0.5rem;
}

.exp-hero-combined__ports {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  max-width: 640px;
}

/* Menu a tendina — stile M3 */
.exp-select-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.exp-select-group label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--on-surf-m);
  margin-bottom: 0.3rem;
}

.exp-select {
  width: 100%;
  padding: 8px 12px;
  min-height: 42px;
  border: 1px solid var(--outline-v);
  border-radius: var(--r-sm);
  font-family: var(--ff);
  font-size: 0.85rem;
  color: var(--on-surf);
  background: var(--surface);
  cursor: pointer;
  appearance: auto;
  transition: border-color var(--t-fast);
}

.exp-select:focus {
  outline: none;
  border-color: var(--teal);
}

/* Bottone WhatsApp — navy con logo WA */
.exp-btn-wa {
  flex: 1;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.8rem;
  border-radius: var(--r-full);
  gap: 0.4rem;
}

.exp-btn-wa:hover {
  background: var(--navy-lt);
  box-shadow: var(--el1);
  color: #fff;
}

/* Bottone Email — teal */
.exp-btn-email {
  flex: 1;
  background: var(--teal);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.8rem;
  border-radius: var(--r-full);
  gap: 0.4rem;
}

.exp-btn-email:hover {
  background: var(--teal-dk);
  box-shadow: var(--el1);
  color: #fff;
}

/* Info cards — Good to Know (invariate) */
.exp-info {
  padding: 3.5rem 0;
  background: #fff;
}

.exp-info__inner {
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.exp-info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.exp-info-card {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--outline-v);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
  cursor: default;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.exp-info-card:hover {
  box-shadow: var(--el2);
  border-color: var(--outline);
  transform: translateY(-2px);
}

.exp-info-card .material-symbols-rounded {
  font-size: 24px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.exp-info-card__text h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.exp-info-card__text p {
  font-size: 0.85rem;
  color: var(--on-surf-v);
  margin-bottom: 0;
  line-height: 1.5;
}


/* ==========================================================================
   19b. EXPERIENCES — Nuovo layout semplificato
   Offer cards (3 esperienze), Package cards (2 pacchetti), Booking card unica
   ========================================================================== */

/* --- Sezione "What We Offer" — sfondo grigio chiaro --- */
.exp-offers {
  padding: 3.5rem 0;
  background: var(--surface-var);
}

.exp-offers__grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Card singola esperienza — sfondo grigio chiaro */
.exp-offer-card {
  background: #fff;
  border: 1px solid var(--outline-v);
  border-radius: var(--r-lg);
  padding: 2rem;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.exp-offer-card:hover {
  box-shadow: var(--el2);
  border-color: var(--outline);
  transform: translateY(-2px);
}

.exp-offer-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.exp-offer-card__header h2 {
  font-size: 1.75rem;
  margin: 0;
}

.exp-offer-card__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--on-surf-v);
  max-width: 720px;
  margin-bottom: 1.25rem;
}

.exp-offer-card__info {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.exp-offer-card__info-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--on-surf-v);
}

.exp-offer-card__info-item .material-symbols-rounded {
  font-size: 20px;
  color: var(--teal);
}

/* --- Sezione Packages — 2 card affiancate --- */
.exp-packages {
  padding: 3.5rem 0;
  background: #fff;
}

.exp-packages__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 820px;
}

/* Card pacchetto — base condivisa */
.exp-pkg-card {
  border-radius: var(--r-lg);
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.exp-pkg-card:hover {
  box-shadow: var(--el2);
  transform: translateY(-2px);
}

/* Essential — teal chiaro con testi scuri leggibili */
.exp-pkg-card--essential {
  background: rgba(32, 178, 152, 0.10);
  border: 1px solid rgba(32, 178, 152, 0.25);
}

.exp-pkg-card--essential .exp-pkg-card__title { color: var(--navy); }
.exp-pkg-card--essential .exp-pkg-card__sub { color: var(--teal-dk); }
.exp-pkg-card--essential .section-line { background: var(--teal); }
.exp-pkg-card--essential .exp-pkg-card__section-label { color: var(--on-surf-m); }
.exp-pkg-card--essential .exp-pkg-card__list li { color: var(--on-surf-v); }
.exp-pkg-card--essential .exp-pkg-card__list li .material-symbols-rounded { color: var(--teal); }
.exp-pkg-card--essential .exp-pkg-card__list--not li { color: var(--on-surf-m); opacity: 0.6; }
.exp-pkg-card--essential .exp-pkg-card__list--not li .material-symbols-rounded { color: var(--on-surf-m); }

/* All-Inclusive — blu/navy */
.exp-pkg-card--allinclusive {
  background: var(--navy);
  border: 1px solid var(--navy);
}

.exp-pkg-card--allinclusive .exp-pkg-card__title { color: #fff; }
.exp-pkg-card--allinclusive .exp-pkg-card__sub { color: var(--teal-lt); }
.exp-pkg-card--allinclusive .section-line { background: var(--teal-lt); }
.exp-pkg-card--allinclusive .exp-pkg-card__section-label { color: rgba(255,255,255,0.5); }
.exp-pkg-card--allinclusive .exp-pkg-card__list li { color: rgba(255,255,255,0.75); }
.exp-pkg-card--allinclusive .exp-pkg-card__list li .material-symbols-rounded { color: var(--teal-lt); }

/* Badge Most Popular */
.exp-pkg-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--teal);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--r-full);
}

.exp-pkg-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.exp-pkg-card__sub {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.exp-pkg-card__section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--on-surf-m);
  margin-bottom: 0.35rem;
}

.exp-pkg-card__section-label--not {
  margin-top: 0.75rem;
  opacity: 0.6;
}

.exp-pkg-card__list {
  list-style: none;
  margin-bottom: 0.35rem;
}

.exp-pkg-card__list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--on-surf-v);
  padding: 0.2rem 0;
}

.exp-pkg-card__list li .material-symbols-rounded {
  font-size: 16px;
  color: var(--teal);
}

.exp-pkg-card__list--not li {
  color: var(--on-surf-m);
  opacity: 0.5;
}

.exp-pkg-card__list--not li .material-symbols-rounded {
  color: var(--on-surf-m);
}

/* --- Sezione Booking unica --- */
.exp-booking-section {
  padding: 3.5rem 0;
  background: var(--surface-var);
}

.exp-booking-single {
  background: #fff;
  border: 1px solid var(--outline-v);
  border-radius: var(--r-lg);
  padding: 2rem;
  max-width: 640px;
}

.exp-booking-single__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.exp-booking-single__desc {
  font-size: 0.9rem;
  color: var(--on-surf-v);
  line-height: 1.5;
}

/* Selettori in griglia 2x2 */
.exp-booking-single__selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Bottoni contatto nella booking card */
.exp-booking-single__actions {
  display: flex;
  gap: 0.75rem;
}


/* ==========================================================================
   19c. PAGINA CONTACTS — cards contatto, form, mappa
   Classi ct-* originali (recuperate da V9.5 pre-refactoring)
   ========================================================================== */

/* --- Cards canali di contatto --- */
.ct-channels {
  padding: 4rem 0;
  background: var(--surface-var);
}

.ct-channels__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ct-channel {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.ct-channel:hover {
  color: inherit;
}

.ct-channel__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--tonal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--teal-dk);
}

.ct-channel__icon .material-symbols-rounded {
  font-size: 26px;
}

.ct-channel__icon svg {
  color: var(--teal-dk);
}

.ct-channel__icon--wa {
  background: rgba(37, 211, 102, 0.1);
}

.ct-channel h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.ct-channel p {
  font-size: 0.85rem;
  color: var(--on-surf-v);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 1rem;
}

.ct-channel__action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  transition: gap var(--t-fast), color var(--t-fast);
}

.ct-channel:hover .ct-channel__action {
  gap: 0.6rem;
  color: var(--teal-dk);
}

/* --- Form di contatto --- */
.ct-form {
  padding: 4rem 0;
  background: #fff;
}

.ct-form__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
}

.ct-form__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.ct-form__title {
  font-size: 2.25rem;
  line-height: 1.2;
}

.ct-form__desc {
  font-size: 0.95rem;
  color: var(--on-surf-v);
  line-height: 1.7;
}

.ct-form__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ct-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ct-form__field label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--on-surf-m);
}

.ct-form__field input,
.ct-form__field select,
.ct-form__field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--outline-v);
  border-radius: var(--r-sm);
  font-family: var(--ff);
  font-size: 0.9rem;
  color: var(--on-surf);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: auto;
}

.ct-form__field input:focus,
.ct-form__field select:focus,
.ct-form__field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(32, 178, 152, 0.1);
}

.ct-form__field input::placeholder,
.ct-form__field textarea::placeholder {
  color: var(--on-surf-m);
  opacity: 0.6;
}

.ct-form__field textarea {
  resize: vertical;
  min-height: 100px;
}

.ct-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ct-form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Wrapper per bottoni Submit + WhatsApp affiancati */
.ct-form__buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.ct-form__success {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: rgba(32, 178, 152, 0.08);
  border-radius: var(--r-md);
  border: 1px solid rgba(32, 178, 152, 0.2);
}

.ct-form__success p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--on-surf);
}

/* --- Mappa --- */
.ct-map {
  padding: 4rem 0;
  background: var(--surface-var);
}

.ct-map__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.ct-map__title {
  font-size: 2.25rem;
  line-height: 1.2;
}

.ct-map__embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--outline-v);
}

.ct-map__embed iframe {
  display: block;
}


/* ==========================================================================
   19d. PAGINE POLICY — Privacy e Cookie Policy
   Classi .policy originali (recuperate da V9.5 pre-refactoring)
   ========================================================================== */

.policy {
  padding: 4rem 0;
  background: var(--surface);
}

.policy__content {
  max-width: 780px;
  margin: 0 auto;
}

.policy__updated {
  font-size: 0.8rem;
  color: var(--on-surf-m);
  font-style: italic;
  margin-bottom: 2rem;
}

.policy__content h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--outline-v);
}

.policy__content h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.policy__content p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--on-surf-v);
  margin-bottom: 0.75rem;
}

.policy__content a {
  color: var(--teal);
  font-weight: 500;
}

.policy__content a:hover {
  color: var(--teal-dk);
}

.policy__box {
  background: var(--surface-var);
  border: 1px solid var(--outline-v);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--on-surf);
  margin-bottom: 1rem;
}

.policy__table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.policy__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.policy__table th {
  background: var(--surface-var);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--navy);
  border-bottom: 2px solid var(--outline-v);
}

.policy__table td {
  padding: 0.65rem 1rem;
  color: var(--on-surf-v);
  border-bottom: 1px solid var(--outline-v);
  vertical-align: top;
}

.policy__table code {
  font-size: 0.8rem;
  background: var(--tonal);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--teal-dk);
}

.policy__table a {
  font-size: 0.8rem;
}

.policy__rights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}

.policy__right {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--surface-var);
  border-radius: var(--r-md);
  border: 1px solid var(--outline-v);
}

.policy__right .material-symbols-rounded {
  font-size: 24px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.policy__right strong {
  display: block;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 0.15rem;
}

.policy__right p {
  font-size: 0.8rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.policy__consent-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.policy__consent-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--on-surf-v);
  line-height: 1.6;
}

.policy__consent-item .material-symbols-rounded {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.policy__browsers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}

.policy__browsers a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--outline-v);
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--on-surf-v);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.policy__browsers a:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--tonal);
}


/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE — Tutti i breakpoint consolidati
   
   Strategia:
   - 768px: tablet e mobile (hamburger, 1 colonna, font bump)
   - 480px: mobile piccolo (stack verticale, padding ridotto)
   - 375px: iPhone SE e mini (font ridotto, 1 colonna ovunque)
   - 1400px+: schermi molto grandi (max-width garantito)
   ========================================================================== */

/* === TABLET E MOBILE (≤768px) === */
@media (max-width: 768px) {
  :root {
    --nh: 64px;
  }

  /* --- Font bump per leggibilità mobile (+1.5pt) --- */
  body { font-size: 1.1rem; }
  .hero__subtitle { font-size: 1.1rem; }
  .hero__where { font-size: 0.85rem; }
  .boat__desc, .about__text p { font-size: 1.05rem; }
  .boat__feature span { font-size: 0.92rem; }
  .exp-card__desc { font-size: 0.95rem; }
  .exp-card__title { font-size: 1.25rem; }
  .exp-prev__hdr p { font-size: 1rem; }
  .destinations__card p { font-size: 0.9rem; }
  .destinations__card h3 { font-size: 1.05rem; }
  .footer__desc { font-size: 0.95rem; }
  .footer__contacts a, .footer__nav a { font-size: 0.95rem; }
  .cookie-banner__text { font-size: 0.9rem; }
  .pkgs-home-card__list li { font-size: 0.95rem; }
  .exp-hero-combined__subtitle { font-size: 1.2rem; }
  .exp-hero-combined__ports { font-size: 1rem; }
  .exp-section__desc { font-size: 1.05rem; }
  .exp-info-card__text p { font-size: 0.95rem; }
  .exp-info-card__text h4 { font-size: 1rem; }
  .tb-gallery__placeholder span:last-child { font-size: 0.9rem; }
  .tb-specs__item { font-size: 0.95rem; }
  .tb-comfort__card p { font-size: 0.95rem; }
  .tb-comfort__card h3 { font-size: 1.2rem; }
  .ct-channel p { font-size: 0.95rem; }
  .ct-channel h3 { font-size: 1.2rem; }
  .ct-form__desc { font-size: 1.05rem; }
  .policy__content p { font-size: 1rem; }
  .policy__table td, .policy__table th { font-size: 0.9rem; }

  /* --- Navbar mobile --- */
  .navbar__hamburger { display: flex; }
  .navbar__links { display: none; }

  /* --- Hero mobile --- */
  .hero__title { font-size: 2.25rem; }
  .hero__subtitle { font-size: 1rem; }
  .hero__content { padding: 4rem 1.5rem 3rem; }

  /* --- About mobile --- */
  .about__inner { grid-template-columns: 1fr; }
  .about__title { font-size: 1.75rem; }
  .about__mosaic { grid-template-columns: 1fr 1fr; }

  /* --- Esperienze mobile --- */
  .exp-grid { grid-template-columns: 1fr; max-width: 480px; }
  .exp-hero-combined h1 { font-size: 2rem; }
  .exp-info__grid { grid-template-columns: 1fr; }

  /* --- Nuove card esperienze/pacchetti/booking responsive --- */
  .exp-offer-card__desc { font-size: 1.05rem; }
  .exp-offer-card__info { gap: 0.75rem; }
  .exp-packages__grid { grid-template-columns: 1fr; max-width: 420px; }
  .exp-pkg-card__list li { font-size: 0.92rem; }
  .exp-booking-single__selects { grid-template-columns: 1fr; }
  .exp-booking-single__actions { flex-direction: column; }
  .exp-booking-single { max-width: 100%; }

  /* --- Barca mobile --- */
  .boat__inner { grid-template-columns: 1fr; }
  .boat__media { order: -1; overflow: hidden; max-width: 100%; }
  .boat__carousel { max-width: 100%; aspect-ratio: 16 / 9; }
  .boat__content { text-align: left; }
  .boat__features { grid-template-columns: 1fr; }
  .boat__stats { grid-template-columns: repeat(2, 1fr); max-width: 100%; padding: 0; }
  .boat__stat { padding: 0.6rem 0.5rem; }
  .boat__stat-num { font-size: 1.2rem; }
  .boat__stat-label { font-size: 0.55rem; }
  .boat__stat-sub { font-size: 0.5rem; }

  /* --- Pacchetti mobile --- */
  .pkgs-home-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

  /* --- Destinazioni mobile --- */
  .destinations__grid { grid-template-columns: repeat(2, 1fr); }
  .destinations h2 { font-size: 1.75rem; }

  /* --- Footer mobile --- */
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__contacts { display: flex; flex-direction: column; }
  .footer__contacts a { display: flex; align-items: center; gap: 0.5rem; }
  .footer__nav { display: flex; flex-direction: column; }
  .footer__nav a { display: block; margin-bottom: 0.5rem; }

  /* --- Cookie banner mobile --- */
  .cookie-banner { bottom: 0.75rem; width: calc(100% - 1.5rem); }
  .cookie-banner__inner { flex-direction: column; align-items: flex-start; }
  .cookie-banner__buttons .btn { min-height: 44px; min-width: 44px; padding: 10px 24px; }

  /* --- Spaziature ridotte mobile --- */
  .about, .exp-prev, .boat, .pkgs, .pkgs-home, .destinations { padding: 3rem 0; }
  .cta-final { padding: 3rem 0; }

  /* --- Bottoni centrati mobile --- */
  .exp-prev__ft { text-align: center; padding-left: 0; }
  .about__btn-discover { display: flex; justify-content: center; width: 100%; }
  .boat__content .btn { display: flex; justify-content: center; width: 100%; }
  .cta-final__inner { flex-direction: column; text-align: center; }
  .cta-final__text h2 { text-align: center; font-size: 1.75rem; }
  .cta-final__text p { text-align: center; }
  .cta-final__buttons { justify-content: center; width: 100%; }
  .cta-final__buttons .btn { width: 100%; justify-content: center; }

  /* --- The Boat page mobile --- */
  .tb-highlights { grid-template-columns: repeat(3, 1fr); }
  .tb-highlights__item { padding: 1rem 0.75rem; }
  .tb-highlights__val { font-size: 0.9rem; }
  .tb-gallery__grid { display: none; }
  .tb-gallery__carousel { display: block; }
  .tb-gallery__carousel-dots { display: flex; }
  .tb-gallery__title, .tb-specs__title, .tb-comfort__title { font-size: 1.75rem; }
  .tb-specs__grid { grid-template-columns: 1fr; }
  .tb-comfort__grid { grid-template-columns: 1fr; max-width: 480px; }
  .tb-lightbox__nav--prev { left: 0.5rem; }
  .tb-lightbox__nav--next { right: 0.5rem; }
  .tb-lightbox__close { top: 0.75rem; right: 0.75rem; }

  /* --- Contacts page mobile --- */
  .ct-channels__grid { grid-template-columns: 1fr 1fr; }
  .ct-form__inner { grid-template-columns: 1fr; }
  .ct-form__title { font-size: 1.75rem; }
  .ct-form__row { grid-template-columns: 1fr; }
  .ct-form__submit { width: 100%; justify-content: center; }
  .ct-map__title { font-size: 1.75rem; }
  .ct-map__embed iframe { height: 350px; }

  /* --- Policy mobile --- */
  .policy__rights { grid-template-columns: 1fr; }
  .policy__content h2 { font-size: 1.2rem; }

  /* --- Touch target mobile (accessibilità) --- */
  .footer__contacts a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__policy-links a { min-height: 44px; display: inline-flex; align-items: center; }

  /* --- WhatsApp float mobile --- */
  .wa-float { width: 50px; height: 50px; bottom: 1.25rem; right: 1.25rem; }
}


/* === MOBILE PICCOLO (≤480px) === */
@media (max-width: 480px) {
  .hero__title { font-size: 1.85rem; }
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; justify-content: center; }
  .container { padding: 0 1rem; }
  .destinations__grid { grid-template-columns: 1fr; }
  .about__mosaic { grid-template-columns: 1fr; }
  .ct-channels__grid { grid-template-columns: 1fr; }
  .tb-highlights { grid-template-columns: repeat(2, 1fr); }
}


/* === iPHONE SE E SCHERMI MINI (≤375px) === */
@media (max-width: 375px) {
  body { font-size: 1rem; }
  .hero__title { font-size: 1.65rem; }
  .hero__where { font-size: 0.75rem; }
  .destinations__grid { grid-template-columns: 1fr; }
  .about__mosaic { grid-template-columns: 1fr; }
  .boat__stat-num { font-size: 1rem; }
  .boat__stat-label { font-size: 0.55rem; }
  .container { padding: 0 0.75rem; }
}


/* === SCHERMI GRANDI (≥1400px) === */
@media (min-width: 1400px) {
  .boat__inner,
  .about__inner,
  .exp-prev__hdr,
  .footer__inner {
    max-width: 1200px;
  }
}


/* ==========================================================================
   INTERATTIVITÀ — hover e click persistente (is-active)
   ========================================================================== */

/* Ombra persistente al click su tutte le card */
.card.is-active,
.destinations__card.is-active,
.exp-info-card.is-active,
.pkgs-home-card.is-active,
.ct-channel.is-active,
.tb-specs__group.is-active,
.tb-highlights__item.is-active,
.about__mosaic-item.is-active {
  box-shadow: var(--el2);
  border-color: var(--outline);
  transform: translateY(-2px);
}


/* ==========================================================================
   DARK MODE — Opzione 2 "Slate neutro"
   Attivata automaticamente dalla preferenza di sistema dell'utente.
   Nessun JavaScript, nessun toggle manuale.
   
   Palette dark scelta:
   - Body:        #0F1117
   - Sezioni alt: #171B26
   - Card:        #1E2333
   - Card hover:  #262D40
   - Testo prim:  #ECEEF2
   - Testo sec:   #8B96A8
   - Testo muted: #525D70
   - Bordi:       #2A3145
   - Footer:      #060A16 (invariato)
   - Teal accent: invariato (#20B298, #28C9AB, #1A9A82)
   ========================================================================== */

@media (prefers-color-scheme: dark) {

  /* --- Ridefinizione variabili CSS in dark mode --- */
  :root {
    /* Superfici */
    --surface:      #0F1117;
    --surface-var:  #171B26;

    /* Testi */
    --on-surf:   #ECEEF2;
    --on-surf-v: #8B96A8;
    --on-surf-m: #525D70;

    /* Bordi */
    --outline:   #3A4459;
    --outline-v: #2A3145;

    /* Elevazioni — su scuro si usano bordi sottili invece di ombre */
    --el1: 0 0 0 1px rgba(255,255,255,0.06);
    --el2: 0 0 0 1px rgba(255,255,255,0.08);
    --el3: 0 0 0 1px rgba(255,255,255,0.10);

    /* Tonal (teal su scuro) */
    --tonal:   rgba(32, 178, 152, 0.12);
    --tonal-s: rgba(32, 178, 152, 0.18);
  }

  /* --- Base --- */
  body {
    color: var(--on-surf);
    background: var(--surface);
  }

  /* Testo selezione */
  ::selection {
    background: rgba(32, 178, 152, 0.25);
    color: #ECEEF2;
  }

  /* --- Tipografia --- */
  h1, h2, h3, h4 {
    color: var(--on-surf);
  }

  p {
    color: var(--on-surf-v);
  }

  /* --- Cards M3 — sfondo carta scuro --- */
  .card {
    background: #1E2333;
    border-color: #2A3145;
  }

  .card:hover {
    border-color: #3A4459;
  }

  /* --- Navbar — glassmorphism scuro --- */
  .navbar {
    background: rgba(15, 17, 23, 0.88);
    border-bottom-color: #2A3145;
  }

  .navbar__logo {
    color: #ECEEF2;
  }

  .navbar__links a {
    color: #8B96A8;
  }

  .navbar__links a:hover,
  .navbar__links a.active {
    color: #ECEEF2;
    background: var(--tonal);
  }

  /* Hamburger — linee chiare */
  .navbar__hamburger span {
    background: #ECEEF2;
  }

  /* Menu mobile — sfondo scuro */
  .navbar__mobile-menu {
    background: #0F1117;
  }

  .navbar__mobile-menu a {
    color: #ECEEF2;
  }

  .navbar__mobile-menu a:hover,
  .navbar__mobile-menu a.active {
    background: var(--tonal);
    color: var(--teal-lt);
  }

  /* Bottone CTA navbar */
  .btn-cta-nav {
    background: #1E2333;
    border-color: rgba(32, 178, 152, 0.40);
  }

  .btn-cta-nav:hover {
    background: #262D40;
  }

  /* --- Sezione About --- */
  .about {
    background: #0F1117;
  }

  .about__mosaic-item {
    background: #1E2333;
  }

  .about__mosaic-item:hover {
    background: #262D40;
  }

  .about__mosaic-label {
    color: #ECEEF2;
  }

  /* Bottone Discover the Boat — su scuro diventa teal outline */
  .about__btn-discover {
    background: #1E2333;
    color: var(--teal-lt);
    border: 1.5px solid rgba(32, 178, 152, 0.40);
  }

  .about__btn-discover:hover {
    background: #262D40;
    color: var(--teal-lt);
  }

  /* --- Sezione Esperienze preview --- */
  .exp-prev {
    background: #171B26;
  }

  .exp-card__title {
    color: #ECEEF2;
  }

  /* --- Sezione Barca (homepage) --- */
  .boat {
    background: #0F1117;
  }

  /* Frecce carosello — su scuro sfondo semi-trasparente scuro */
  .boat__carousel-btn {
    background: rgba(30, 35, 51, 0.90);
    color: #ECEEF2;
  }

  .boat__carousel-btn:hover {
    background: #262D40;
  }

  /* --- Sezione Packages home --- */
  .pkgs-home {
    background: #0F1117;
  }

  .pkgs-home-card {
    background: #1E2333;
    border-color: #2A3145;
  }

  .pkgs-home-card:hover {
    border-color: #3A4459;
  }

  .pkgs-home-card__title {
    color: #ECEEF2;
  }

  .pkgs-home-card__section-label {
    color: #525D70;
  }

  .pkgs-home-card__list li {
    color: #8B96A8;
  }

  /* Card featured (All-Inclusive) — navy, invariata su dark */
  .pkgs-home-card--featured {
    background: var(--navy);
    border-color: var(--navy);
  }

  /* --- Destinazioni --- */
  .destinations {
    background: #171B26;
  }

  .destinations__card h4 {
    color: #ECEEF2;
  }

  /* --- CTA finale — gradiente teal, invariato in dark --- */

  /* --- Footer — già scuro, aggiustamenti minimi --- */
  .footer {
    background: #060A16;
  }

  /* --- Cookie banner --- */
  .cookie-banner {
    background: #1E2333;
    border: 1px solid #2A3145;
  }

  /* --- Sezione policy --- */
  .policy {
    background: #0F1117;
  }

  .policy__box {
    background: #1E2333;
    border-color: #2A3145;
  }

  .policy__table th {
    background: #1E2333;
    color: #ECEEF2;
    border-bottom-color: #2A3145;
  }

  .policy__table td {
    color: #8B96A8;
    border-bottom-color: #2A3145;
  }

  .policy__right {
    background: #1E2333;
    border-color: #2A3145;
  }

  .policy__right strong {
    color: #ECEEF2;
  }

  .policy__browsers a {
    border-color: #2A3145;
    color: #8B96A8;
  }

  .policy__browsers a:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--tonal);
  }

  /* --- Pagina The Boat (tb-*) --- */
  .tb-gallery {
    background: #171B26;
  }

  .tb-gallery__item {
    background: #1E2333;
    border-color: #2A3145;
  }

  .tb-gallery__placeholder {
    background: #1E2333;
  }

  /* Carosello mobile */
  .tb-gallery__carousel {
    background: #1E2333;
    border-color: #2A3145;
  }

  .tb-gallery__carousel-btn {
    background: rgba(30, 35, 51, 0.90);
    color: #ECEEF2;
  }

  .tb-gallery__carousel-btn:hover {
    background: #262D40;
  }

  /* Overlay galleria — hover su dark */
  .tb-gallery__item:hover .tb-gallery__overlay {
    background: rgba(15, 17, 23, 0.45);
  }

  /* Highlights mosaico */
  .tb-highlights {
    background: #2A3145;
    border-color: #2A3145;
  }

  .tb-highlights__item {
    background: #1E2333;
  }

  .tb-highlights__item:hover {
    background: #262D40;
  }

  .tb-highlights__val {
    color: #ECEEF2;
  }

  /* Specs tecnici */
  .tb-specs {
    background: #0F1117;
  }

  .tb-specs__group {
    background: #1E2333;
    border-color: #2A3145;
  }

  .tb-specs__group:hover {
    border-color: #3A4459;
  }

  .tb-specs__group-title {
    color: #ECEEF2;
    border-bottom-color: #2A3145;
  }

  .tb-specs__val {
    color: #ECEEF2;
  }

  /* Comfort & On Board */
  .tb-comfort {
    background: #0F1117;
  }

  .tb-comfort__card {
    background: #1E2333;
  }

  .tb-comfort__card h3 {
    color: #ECEEF2;
  }

  /* --- Pagina Experiences (exp-*) --- */
  .exp-info {
    background: #0F1117;
  }

  .exp-info-card {
    background: #1E2333;
    border-color: #2A3145;
  }

  .exp-info-card:hover {
    border-color: #3A4459;
  }

  .exp-info-card__text h4 {
    color: #ECEEF2;
  }

  .exp-offers {
    background: #171B26;
  }

  .exp-offer-card {
    background: #1E2333;
    border-color: #2A3145;
  }

  .exp-offer-card:hover {
    border-color: #3A4459;
  }

  .exp-offer-card__header h2 {
    color: #ECEEF2;
  }

  /* Package Essential — teal su scuro */
  .exp-pkg-card--essential {
    background: rgba(32, 178, 152, 0.08);
    border-color: rgba(32, 178, 152, 0.20);
  }

  .exp-pkg-card--essential .exp-pkg-card__title { color: #ECEEF2; }
  .exp-pkg-card--essential .exp-pkg-card__list li { color: #8B96A8; }

  /* Package All-Inclusive — navy, invariato */

  .exp-packages {
    background: #0F1117;
  }

  .exp-booking-section {
    background: #171B26;
  }

  .exp-booking-single {
    background: #1E2333;
    border-color: #2A3145;
  }

  .exp-booking-single__title {
    color: #ECEEF2;
  }

  /* Select e input form experiences */
  .exp-select {
    background: #1E2333;
    border-color: #2A3145;
    color: #ECEEF2;
  }

  .exp-select:focus {
    border-color: var(--teal);
  }

  /* --- Pagina Contacts (ct-*) --- */
  .ct-channels {
    background: #171B26;
  }

  .ct-channel h3 {
    color: #ECEEF2;
  }

  .ct-form {
    background: #0F1117;
  }

  .ct-form__field input,
  .ct-form__field select,
  .ct-form__field textarea {
    background: #1E2333;
    border-color: #2A3145;
    color: #ECEEF2;
  }

  .ct-form__field input:focus,
  .ct-form__field select:focus,
  .ct-form__field textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(32, 178, 152, 0.12);
  }

  .ct-form__field input::placeholder,
  .ct-form__field textarea::placeholder {
    color: #525D70;
    opacity: 1;
  }

  .ct-map {
    background: #171B26;
  }

  .ct-map__embed {
    border-color: #2A3145;
  }

  /* --- Bottone outline-dark — su scuro diventa outline chiaro --- */
  .btn-outline-dark {
    color: #ECEEF2;
    border-color: #2A3145;
  }

  .btn-outline-dark:hover {
    background: var(--tonal);
    border-color: var(--teal);
    color: var(--teal-lt);
  }

  /* --- Hover states interattivi generici --- */
  .about__mosaic-item.is-active,
  .exp-info-card.is-active,
  .pkgs-home-card.is-active,
  .ct-channel.is-active,
  .tb-specs__group.is-active,
  .tb-highlights__item.is-active {
    border-color: #3A4459;
  }

} /* fine @media (prefers-color-scheme: dark) */

/* ==========================================================================
   COOKIE BANNER — pill floating custom
   ========================================================================== */
#cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--navy);
  border: 1px solid var(--outline-v);
  border-radius: var(--r-full);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 680px;
  width: calc(100% - 3rem);
  box-shadow: var(--el3);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

#cookie-banner.is-hidden {
  display: none;
}

#cookie-banner p {
  margin: 0;
  flex: 1;
}

#cookie-banner p a {
  color: var(--teal-lt);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

#cookie-accept {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff);
}

#cookie-decline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--r-full);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff);
}

.footer__cookie-reset {
  background: none;
  border: none;
  color: var(--teal);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  font-family: var(--ff);
}

@media (prefers-color-scheme: dark) {
  #cookie-banner {
    background: #1E2333;
  }
}

@media (max-width: 480px) {
  #cookie-banner {
    flex-direction: column;
    text-align: center;
    border-radius: var(--r-xl);
  }
}