/* ═══════════════════════════════════════════════════════════════════
   BBCalaGonone.com — ROYAL MINIMALIST STYLESHEET
   Versione: 2026 · Accessibilità WCAG 2.1 AA/AAA
   Palette: Blu Notte #001A33 · Oro Sabbia #C2A366
   Daltonico-safe: contrasto ≥7:1 su tutti i testi principali
   Typo: Cormorant Garamond (display) · Inter (body)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Inter:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  /* Palette primaria — daltonico-safe (non dipende dal rosso/verde) */
  --midnight:     #001A33;   /* Blu Notte — contrasto 17.5:1 su bianco */
  --cobalt:       #003366;   /* Blu medio — contrasto 12.6:1 su bianco */
  --steel:        #005599;   /* Blu acciaio — contrasto 7.2:1 su bianco */
  --sand:         #C2A366;   /* Oro Sabbia — accento */
  --sand-pale:    #EDE4D0;   /* Oro chiaro — sfondo sezioni */
  --sand-dark:    #9A7E45;   /* Oro scuro — testo su chiaro 4.7:1 */

  /* Neutri */
  --ivory:        #F7F5F0;   /* Sfondo principale */
  --parchment:    #EDE9E0;   /* Sfondo sezioni alternate */
  --vellum:       #E2DDD3;   /* Bordi e divisori */
  --stone:        #6B6560;   /* Testo secondario 4.6:1 su ivory */
  --graphite:     #2C2926;   /* Testo corpo 12.1:1 su ivory */
  --ink:          #0A0806;   /* Testo headings principali 19:1 su ivory */
  --white:        #FFFFFF;

  /* Semaforo meteo — paletta daltonico-safe:
     usa BLU (buono) vs ARANCIO (warning) vs VIOLA (stop)
     evitando rosso/verde che i daltonici confondono */
  --sea-go-fg:    #004D99;   /* Blu intenso — "Naviga" */
  --sea-go-bg:    #CCE0FF;
  --sea-warn-fg:  #7A4500;   /* Arancio scuro — "Prudenza" */
  --sea-warn-bg:  #FFE4B5;
  --sea-stop-fg:  #5C007A;   /* Viola — "Stop" */
  --sea-stop-bg:  #E8C8F5;

  /* App colori */
  --wa:           #25D366;
  --focus-ring:   #0077CC;   /* Focus accessibile — visibile per tutti */

  /* Tipografia */
  --f-display:    'Cormorant Garamond', 'Georgia', serif;
  --f-body:       'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:       'DM Mono', 'Courier New', monospace;

  /* Layout */
  --nav-h:        88px;   /* 64px originale + 24px barra Translate mobile */
  --bnav-h:       60px;
  --max:          1160px;
  --gutter:       clamp(1rem, 4vw, 2rem);

  /* Motion */
  --ease:         cubic-bezier(.16, 1, .3, 1);
  --dur-fast:     .2s;
  --dur-med:      .45s;
  --dur-slow:     .85s;
}

/* ── RIDUZIONE MOVIMENTO (accessibilità) ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--f-body);
  background: var(--ivory);
  color: var(--graphite);
  padding-top: var(--nav-h);
  padding-bottom: var(--bnav-h);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
img   { display: block; max-width: 100%; height: auto }
a     { color: inherit; text-decoration: none }
ul,ol { list-style: none }
button { font-family: inherit; cursor: pointer }

/* ── FOCUS VISIBILE (WCAG 2.4.7) ────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible { border-radius: 2px }

/* ── SKIP LINK ───────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 0; z-index: 9999;
  background: var(--midnight); color: var(--white);
  padding: .75rem 1.5rem;
  font-family: var(--f-body); font-weight: 500;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 0 }

/* ── UTILITY ─────────────────────────────────────────────────────── */
.wrap    { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── HEADER ──────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  background: rgba(247, 245, 240, .97);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--vellum);
  display: flex; align-items: center;
  padding: 24px var(--gutter) 0;  /* 24px top mobile = spazio barra Translate ridotto */
  gap: 1rem;
}

/* Logo */
.hdr-logo { flex-shrink: 0; display: block; line-height: 1 }
.hdr-logo__name {
  font-family: var(--f-display);
  font-size: clamp(.95rem, 2vw, 1.15rem);
  font-weight: 700; letter-spacing: .06em;
  color: var(--midnight); display: block;
}
.hdr-logo__sub {
  font-family: var(--f-mono);
  font-size: .52rem; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone); display: block; margin-top: 2px;
}

.hdr-gap { flex: 1 }

/* Sea LED */
.sea-led {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .85rem; border-radius: 100px;
  font-family: var(--f-mono);
  font-size: .6rem; font-weight: 400; letter-spacing: .08em;
  border: 1.5px solid transparent;
  cursor: default; white-space: nowrap; flex-shrink: 0;
}
.sea-led__dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; position: relative;
}
.sea-led__dot::after {
  content: '';
  position: absolute; inset: -3px; border-radius: 50%;
  animation: ledPulse 2.4s ease-in-out infinite;
}

/* Stato GO — Blu */
.sea-led.go  { background: var(--sea-go-bg);   color: var(--sea-go-fg);   border-color: rgba(0,77,153,.25) }
.sea-led.go  .sea-led__dot { background: var(--sea-go-fg) }
.sea-led.go  .sea-led__dot::after { box-shadow: 0 0 0 4px rgba(0,77,153,.25) }
/* Stato WARN — Arancio */
.sea-led.warn { background: var(--sea-warn-bg); color: var(--sea-warn-fg); border-color: rgba(122,69,0,.25) }
.sea-led.warn .sea-led__dot { background: var(--sea-warn-fg) }
.sea-led.warn .sea-led__dot::after { animation: none }
/* Stato STOP — Viola */
.sea-led.stop { background: var(--sea-stop-bg); color: var(--sea-stop-fg); border-color: rgba(92,0,122,.25) }
.sea-led.stop .sea-led__dot { background: var(--sea-stop-fg) }
.sea-led.stop .sea-led__dot::after { box-shadow: 0 0 0 4px rgba(92,0,122,.25); animation-duration: .9s }

@keyframes ledPulse {
  0%, 100% { opacity: 1; transform: scale(1) }
  50%       { opacity: .3; transform: scale(.65) }
}

/* Hamburger */
.hdr-toggle {
  width: 40px; height: 40px; flex-shrink: 0;
  background: none; border: 1.5px solid var(--vellum);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.hdr-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: var(--midnight);
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast);
}
.hdr-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.hdr-toggle.open span:nth-child(2) { opacity: 0 }
.hdr-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* Desktop CTA */
.hdr-ctas { display: none; align-items: center; gap: .5rem }
.hdr-btn {
  font-family: var(--f-mono);
  font-size: .62rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem 1rem; white-space: nowrap;
  border: 1.5px solid var(--midnight); color: var(--midnight);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.hdr-btn:hover, .hdr-btn--fill         { background: var(--midnight); color: var(--white) }
.hdr-btn--fill:hover                   { background: var(--cobalt) }
.hdr-btn--wa                           { border-color: var(--wa); color: var(--wa) }
.hdr-btn--wa:hover                     { background: var(--wa); color: var(--white) }

/* ── NAV OVERLAY + DRAWER ────────────────────────────────────────── */
.nav-overlay {
  position: fixed; inset: 0; z-index: 850;
  background: rgba(0, 26, 51, .6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med);
}
.nav-overlay.open { opacity: 1; pointer-events: all }

.site-nav {
  position: fixed; top: 0; right: 0;
  width: min(380px, 94vw);
  height: 100dvh;          /* piena altezza schermo — no scroll */
  z-index: 860;
  background: var(--white); border-left: 1px solid var(--vellum);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 1rem) 2rem 2rem;
  overflow-y: auto;        /* scroll solo se il contenuto non entra */
  overscroll-behavior: contain;
}
.site-nav.open { transform: translateX(0) }

/* Nav sezioni */
.nav-section {
  font-family: var(--f-mono);
  font-size: .56rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--stone); display: block;
  padding: 1.5rem 0 .45rem;
  border-top: 1px solid var(--vellum); margin-top: .3rem;
}
.nav-section:first-child { border-top: none; margin-top: 0; padding-top: 0 }

.site-nav a {
  font-family: var(--f-body);
  font-size: .95rem; font-weight: 300;
  color: var(--graphite); padding: .72rem 0;
  border-bottom: 1px solid var(--parchment);
  display: block; letter-spacing: .01em;
  transition: color var(--dur-fast), padding-left var(--dur-med) var(--ease);
}
.site-nav a:hover, .site-nav a.active { color: var(--midnight); padding-left: .6rem }
.site-nav a.active { font-weight: 500 }

.nav-ctas-mob {
  margin-top: 2rem; display: flex; flex-direction: column; gap: .6rem;
}
.nav-ctas-mob a {
  display: flex; align-items: center; justify-content: center;
  padding: .9rem; font-family: var(--f-mono);
  font-size: .66rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  border: none; border-bottom: none !important;
}
.nc-midnight { background: var(--midnight) !important; color: var(--white) !important }
.nc-wa       { background: var(--wa) !important;       color: var(--white) !important }

/* Desktop nav inline */
.site-nav.desk {
  position: static; transform: none !important;
  width: auto; background: transparent; padding: 0;
  flex-direction: row; align-items: center; gap: 0;
  overflow: visible; border: none;
}
.site-nav.desk .nav-section, .site-nav.desk .nav-ctas-mob { display: none }
.site-nav.desk a {
  font-size: .78rem; font-weight: 400; letter-spacing: .03em;
  padding: .35rem .7rem; border-bottom: none;
  display: inline-block; color: var(--graphite); position: relative;
}
.site-nav.desk a::after {
  content: ''; position: absolute;
  bottom: 0; left: .7rem; right: .7rem; height: 1.5px;
  background: var(--midnight); transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease);
}
.site-nav.desk a:hover,
.site-nav.desk a.active { color: var(--midnight); padding-left: .7rem }
.site-nav.desk a:hover::after,
.site-nav.desk a.active::after { transform: scaleX(1) }

/* ── HERO ────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 92svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--midnight);
}
.hero--half  { min-height: 56vh }
.hero--short { min-height: 40vh }

.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  transform: scale(1.06);
  animation: hReveal 2s var(--ease) forwards;
}
@keyframes hReveal {
  from { transform: scale(1.12); opacity: .7 }
  to   { transform: scale(1.02); opacity: 1 }
}
.hero__grad {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,26,51,.06) 0%,
    rgba(0,26,51,.42) 48%,
    rgba(0,26,51,.94) 100%
  );
}
.hero__body {
  position: relative; z-index: 2;
  padding: 2.5rem var(--gutter) 3rem;
  animation: fadeUpHero 1.4s var(--ease) .55s both;
}
@keyframes fadeUpHero {
  from { opacity: 0; transform: translateY(22px) }
  to   { opacity: 1; transform: none }
}
.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: .6rem; font-weight: 300;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.55); display: block; margin-bottom: .9rem;
}
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 8.5vw, 4.8rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.02em;
  color: var(--white); margin-bottom: .9rem;
}
.hero__title em { font-style: italic; font-weight: 300; color: var(--sand) }
.hero__sub {
  font-family: var(--f-body);
  font-size: .96rem; font-weight: 300; line-height: 1.76;
  color: rgba(255,255,255,.75); max-width: 510px; margin-bottom: 2rem;
}
.hero__actions { display: flex; gap: .75rem; flex-wrap: wrap }

/* CTA buttons — alti contrasto per accessibilità */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono);
  font-size: .65rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  padding: .9rem 1.8rem;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform .1s;
  white-space: nowrap; border: none;
}
.btn:active { transform: scale(.97) }
.btn--primary    { background: var(--sand); color: var(--midnight) }
.btn--primary:hover { background: #D4B478; color: var(--midnight) }
.btn--white      { background: var(--white); color: var(--midnight) }
.btn--white:hover { background: var(--ivory) }
.btn--ghost      {
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.35);
  color: var(--white); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,.2) }
.btn--dark       { background: var(--midnight); color: var(--white) }
.btn--dark:hover { background: var(--cobalt) }
.btn--wa         { background: var(--wa); color: var(--white) }
.btn--wa:hover   { filter: brightness(1.08) }
.btn--outline    { border: 1.5px solid var(--midnight); color: var(--midnight) }
.btn--outline:hover { background: var(--midnight); color: var(--white) }
.btn--sm         { padding: .65rem 1.2rem; font-size: .6rem }

/* ── SEA STATUS BAR (espanso) ────────────────────────────────────── */
.sea-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem var(--gutter);
  background: var(--white); border-bottom: 1px solid var(--vellum);
  border-left: 4px solid transparent;
}
.sea-bar.go   { border-left-color: var(--sea-go-fg) }
.sea-bar.warn { border-left-color: var(--sea-warn-fg) }
.sea-bar.stop { border-left-color: var(--sea-stop-fg) }
.sea-bar__icon { font-size: 1.5rem; flex-shrink: 0 }
.sea-bar__body { flex: 1 }
.sea-bar__label {
  font-family: var(--f-mono); font-size: .56rem; font-weight: 300;
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone);
}
.sea-bar__status {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600;
  margin: .1rem 0;
}
.sea-bar.go   .sea-bar__status { color: var(--sea-go-fg) }
.sea-bar.warn .sea-bar__status { color: var(--sea-warn-fg) }
.sea-bar.stop .sea-bar__status { color: var(--sea-stop-fg) }
.sea-bar__note { font-size: .76rem; font-weight: 300; color: var(--stone) }
.sea-bar__badge {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 400;
  padding: .24rem .75rem; letter-spacing: .06em; flex-shrink: 0;
}
.sea-bar.go   .sea-bar__badge { background: var(--sea-go-bg);   color: var(--sea-go-fg) }
.sea-bar.warn .sea-bar__badge { background: var(--sea-warn-bg); color: var(--sea-warn-fg) }
.sea-bar.stop .sea-bar__badge { background: var(--sea-stop-bg); color: var(--sea-stop-fg) }

/* ── SEZIONI ─────────────────────────────────────────────────────── */
.section { padding: 4rem var(--gutter) }
.section--sm  { padding: 2.5rem var(--gutter) }
.section--lg  { padding: 6rem var(--gutter) }
.section--ivory  { background: var(--ivory) }
.section--parch  { background: var(--parchment) }
.section--sand   { background: var(--sand-pale) }
.section--dark   { background: var(--midnight); color: var(--white) }
.section--cobalt { background: var(--cobalt);   color: var(--white) }

.section__eyebrow {
  font-family: var(--f-mono); font-size: .58rem; font-weight: 300;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--stone); display: block; margin-bottom: 1rem;
}
.section--dark .section__eyebrow,
.section--cobalt .section__eyebrow { color: rgba(255,255,255,.45) }
.section__title {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.015em;
  margin-bottom: .75rem; color: var(--midnight);
}
.section--dark .section__title,
.section--cobalt .section__title { color: var(--white) }
.section__title em { font-style: italic; font-weight: 300; color: var(--sand-dark) }
.section--dark .section__title em { color: var(--sand) }
.section__body {
  font-size: .94rem; font-weight: 300; line-height: 1.8;
  color: var(--stone); max-width: 600px;
}
.section--dark .section__body,
.section--cobalt .section__body { color: rgba(255,255,255,.62) }

/* ── BOAT CARDS (Royal Edition) ─────────────────────────────────── */
.fleet-grid {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--vellum);
}
.bc {
  border-bottom: 1px solid var(--vellum);
  overflow: hidden; position: relative;
  /* Fade-in animazione JS */
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-fast);
}
.bc.visible { opacity: 1; transform: none }
.bc:nth-child(2) { transition-delay: .1s }
.bc:nth-child(3) { transition-delay: .18s }
.bc:nth-child(4) { transition-delay: .26s }
.bc:nth-child(5) { transition-delay: .34s }
.bc:nth-child(6) { transition-delay: .42s }

.bc__photo {
  position: relative; height: 270px; overflow: hidden;
  background: var(--midnight);
}
.bc__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.86) saturate(.88);
  transition: transform .7s var(--ease), filter .4s;
}
.bc:hover .bc__photo img { transform: scale(1.05); filter: brightness(.96) saturate(1) }

.bc__num {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--f-mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0,26,51,.78); backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9); padding: .26rem .8rem;
}
.bc__badge {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--f-mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--sand); color: var(--midnight); padding: .26rem .8rem;
}

.bc__body { padding: 1.75rem 1.5rem; background: var(--white) }
.bc__name {
  font-family: var(--f-display);
  font-size: 1.75rem; font-weight: 700; color: var(--midnight);
  line-height: 1.05; letter-spacing: -.01em; margin-bottom: .2rem;
}
.bc__spec {
  font-family: var(--f-mono); font-size: .62rem; font-weight: 300;
  letter-spacing: .08em; color: var(--stone); margin-bottom: .85rem;
}
.bc__desc {
  font-size: .9rem; font-weight: 300; line-height: 1.75;
  color: var(--graphite); margin-bottom: 1.1rem;
}

/* Accordion prezzi */
.price-acc { border: 1px solid var(--vellum); overflow: hidden }
.price-acc__btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: var(--parchment); border: none;
  padding: .85rem 1.1rem;
  font-family: var(--f-body); font-size: .85rem; font-weight: 300;
  color: var(--midnight);
  transition: background var(--dur-fast);
}
.price-acc__btn:hover { background: var(--sand-pale) }
.price-acc__btn strong { font-family: var(--f-display); font-size: 1.05rem; font-weight: 700 }
.price-acc__icon { font-style: normal; transition: transform var(--dur-med) var(--ease) }
.price-acc__btn[aria-expanded="true"] .price-acc__icon { transform: rotate(45deg) }
.price-acc__body { display: none }
.price-acc__body.open { display: block }

.ps { /* price season header */
  padding: .5rem 1.1rem .28rem;
  font-family: var(--f-mono); font-size: .55rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stone);
  background: var(--ivory); border-top: 1px solid var(--vellum);
}
.ps:first-child { border-top: none }
.pr { /* price row */
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; padding: .5rem 1.1rem;
  border-top: 1px solid var(--vellum);
}
.pr:nth-child(even) { background: rgba(194,163,102,.06) }
.pr__d { font-size: .77rem; font-weight: 300; color: var(--graphite); flex: 1 }
.pr__p { font-family: var(--f-mono); font-size: .88rem; color: var(--midnight); white-space: nowrap }
.pr__c { font-family: var(--f-mono); font-size: .6rem; color: var(--stone); white-space: nowrap }

.bc__cta { display: flex; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap }

/* Variante flagship (M/Y Tropic) */
.bc.flagship .bc__body  { background: var(--midnight) }
.bc.flagship .bc__name  { color: var(--sand) }
.bc.flagship .bc__spec  { color: rgba(255,255,255,.4) }
.bc.flagship .bc__desc  { color: rgba(255,255,255,.7) }
.bc.flagship .price-acc { border-color: rgba(255,255,255,.12) }
.bc.flagship .price-acc__btn  { background: rgba(255,255,255,.07); color: var(--white) }
.bc.flagship .price-acc__btn:hover { background: rgba(255,255,255,.12) }
.bc.flagship .ps { background: rgba(255,255,255,.05); color: rgba(255,255,255,.38); border-top-color: rgba(255,255,255,.08) }
.bc.flagship .pr { border-top-color: rgba(255,255,255,.08) }
.bc.flagship .pr:nth-child(even) { background: rgba(194,163,102,.08) }
.bc.flagship .pr__d { color: rgba(255,255,255,.7) }
.bc.flagship .pr__p { color: var(--sand) }
.bc.flagship .pr__c { color: rgba(255,255,255,.35) }

/* ── PHOTO STRIP EDITORIALE ──────────────────────────────────────── */
.ed-strip {
  position: relative; height: 58vw; min-height: 280px; max-height: 560px;
  overflow: hidden; display: flex; align-items: flex-end;
  background: var(--midnight);
}
.ed-strip__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .7s var(--ease);
}
.ed-strip:hover .ed-strip__bg { transform: scale(1.04) }
.ed-strip__grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,26,51,.9) 0%, rgba(0,26,51,.06) 65%);
}
.ed-strip__body { position: relative; z-index: 1; padding: 2rem var(--gutter) }
.ed-strip__label {
  font-family: var(--f-mono); font-size: .58rem; font-weight: 300;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.45); display: block; margin-bottom: .5rem;
}
.ed-strip__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  font-weight: 700; color: var(--white); line-height: 1.1;
  margin-bottom: .65rem;
}
.ed-strip__title em { font-style: italic; font-weight: 300; color: var(--sand) }
.ed-strip__link {
  font-family: var(--f-mono); font-size: .62rem; font-weight: 300;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand); border-bottom: 1px solid var(--sand);
  padding-bottom: .2rem; display: inline-flex; gap: .4rem; align-items: center;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.ed-strip__link:hover { color: var(--white); border-color: var(--white) }

/* ── GALLERIA ────────────────────────────────────────────────────── */
.gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem;
}
.gallery__cell {
  position: relative; overflow: hidden; aspect-ratio: 1;
  background: var(--midnight); display: block;
}
.gallery__cell.wide { grid-column: 1 / -1; aspect-ratio: 16/7 }
.gallery__cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.85) saturate(.88);
  transition: transform .55s var(--ease), filter .35s;
}
.gallery__cell:hover img { transform: scale(1.07); filter: brightness(.98) saturate(1) }
.gallery__label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: .65rem .9rem;
  background: linear-gradient(to top, rgba(0,26,51,.85), transparent);
  font-family: var(--f-display); font-size: .92rem; font-weight: 400;
  color: var(--white);
}

/* ── INFO STRIP ──────────────────────────────────────────────────── */
.info-strip { display: grid; border-top: 1px solid var(--vellum); border-bottom: 1px solid var(--vellum) }
.info-cell { padding: 1.25rem var(--gutter); border-bottom: 1px solid var(--vellum) }
.info-cell:last-child { border-bottom: none }
.info-cell__label {
  font-family: var(--f-mono); font-size: .56rem; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
  display: block; margin-bottom: .3rem;
}
.info-cell__value {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600;
  color: var(--midnight);
}

/* ── NOTES BOX ───────────────────────────────────────────────────── */
.notes-box {
  padding: 2rem var(--gutter);
  background: var(--sand-pale);
  border-top: 1px solid var(--vellum); border-bottom: 1px solid var(--vellum);
}
.notes-box__title {
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 600;
  color: var(--midnight); margin-bottom: 1rem;
}
.note {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .84rem; font-weight: 300; color: var(--graphite);
  line-height: 1.7; padding: .5rem 0; border-bottom: 1px solid var(--vellum);
}
.note:last-child { border-bottom: none }
.note::before { content: '—'; font-family: var(--f-mono); color: var(--sand-dark); flex-shrink: 0 }

/* ── QUOTE ───────────────────────────────────────────────────────── */
.quote-block { padding: 5rem var(--gutter); text-align: center }
.quote-mark {
  font-family: var(--f-display); font-size: 6rem;
  color: var(--vellum); line-height: .5; display: block; margin-bottom: .6rem;
}
.quote-text {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 4vw, 2.1rem);
  font-weight: 400; font-style: italic;
  color: var(--midnight); line-height: 1.5;
  max-width: 700px; margin: 0 auto .85rem;
}
.quote-credit {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
}

/* ── DESTINATION SCROLL ──────────────────────────────────────────── */
.dest-scroll {
  display: flex; gap: .4rem;
  overflow-x: auto; padding: 0 var(--gutter) 1rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dest-scroll::-webkit-scrollbar { display: none }
.dest-pill {
  flex-shrink: 0; width: 148px; height: 196px;
  position: relative; overflow: hidden;
  background: var(--midnight); display: block;
}
.dest-pill img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), filter .4s;
  filter: brightness(.82);
}
.dest-pill:hover img { transform: scale(1.08); filter: brightness(.96) }
.dest-pill__name {
  position: absolute; bottom: 0; left: 0; right: 0; padding: .65rem .8rem;
  background: linear-gradient(to top, rgba(0,26,51,.9), transparent);
  font-family: var(--f-display); font-size: .92rem; font-weight: 400;
  color: var(--white);
}

/* ── LINK CARDS ──────────────────────────────────────────────────── */
.link-cat__title {
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 600;
  color: var(--midnight); margin-bottom: .75rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--sand);
}
.link-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .72rem 0; border-bottom: 1px solid var(--parchment);
  text-decoration: none; color: inherit;
  transition: padding-left var(--dur-med) var(--ease), background var(--dur-fast);
}
.link-item:hover { padding-left: .45rem; background: var(--sand-pale) }
.link-item__title { font-size: .9rem; font-weight: 400; color: var(--cobalt) }
.link-item__desc  { font-size: .76rem; font-weight: 300; color: var(--stone); margin-top: .1rem }

/* ── STAT BOX ────────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem }
.stat-box {
  background: var(--white); border: 1px solid var(--vellum);
  padding: 1.25rem .85rem; text-align: center;
}
.stat-box__num {
  font-family: var(--f-display); font-size: 2.2rem; font-weight: 900;
  color: var(--midnight); line-height: 1;
}
.stat-box__lbl {
  font-family: var(--f-mono); font-size: .57rem; font-weight: 300;
  letter-spacing: .12em; color: var(--stone); margin-top: .25rem;
  display: block; line-height: 1.3;
}

/* ── CTA BIG ─────────────────────────────────────────────────────── */
.cta-big { background: var(--midnight); padding: 5rem var(--gutter); text-align: center }
.cta-big__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700; font-style: italic;
  color: var(--white); line-height: 1.1; margin-bottom: .65rem;
}
.cta-big__title span { color: var(--sand) }
.cta-big__sub {
  font-size: .92rem; font-weight: 300;
  color: rgba(255,255,255,.56); line-height: 1.8; margin-bottom: 2.5rem;
}
.cta-big__btns { display: flex; flex-direction: column; gap: .75rem; align-items: center }

/* ── FOOTER ──────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,.5); padding: 4rem var(--gutter) 2rem }
.footer__brand {
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: .04em; color: var(--white); display: block; margin-bottom: .28rem;
}
.footer__tagline {
  font-family: var(--f-mono); font-size: .54rem; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.28); display: block; margin-bottom: 3rem;
}
.footer__grid { display: grid; gap: 2rem; margin-bottom: 3rem }
.footer__col h4 {
  font-family: var(--f-mono); font-size: .55rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand); margin-bottom: .8rem;
}
.footer__col a {
  display: block; margin-bottom: .5rem;
  font-size: .82rem; font-weight: 300;
  color: rgba(255,255,255,.48);
  transition: color var(--dur-fast);
}
.footer__col a:hover { color: var(--white) }

/* Animazione footer */
.footer__col {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.footer__col.visible { opacity: 1; transform: none }
.footer__col:nth-child(2) { transition-delay: .1s }
.footer__col:nth-child(3) { transition-delay: .2s }
.footer__col:nth-child(4) { transition-delay: .3s }

.footer__div { border: none; border-top: 1px solid rgba(255,255,255,.07); margin-bottom: 1.5rem }
.footer__legal {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 300;
  color: rgba(255,255,255,.22); text-align: center;
  display: flex; flex-direction: column; gap: .3rem;
}
.footer__legal a { color: rgba(255,255,255,.22) }
.footer__legal a:hover { color: rgba(255,255,255,.55) }

/* ── BOTTOM NAV ──────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: 950;
  height: var(--bnav-h);
  background: rgba(247,245,240,.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--vellum);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .18rem;
  font-family: var(--f-mono); font-size: .5rem; font-weight: 300;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--stone); background: none; border: none;
  cursor: pointer; text-decoration: none;
  transition: color var(--dur-fast), background var(--dur-fast);
  padding: .4rem .2rem;
}
.bn:active { background: var(--parchment) }
.bn__i { font-size: 1.1rem; line-height: 1; display: block }
.bn--book  { color: var(--midnight) }
.bn--wa    { color: var(--wa) }
.bn--meteo { color: var(--sea-warn-fg) }
.bn--map   { color: var(--sea-stop-fg) }
.bn--call  { color: var(--cobalt) }

/* ── SCROLL REVEAL BASE ──────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.visible { opacity: 1; transform: none }
.reveal-d1 { transition-delay: .08s }
.reveal-d2 { transition-delay: .16s }
.reveal-d3 { transition-delay: .24s }
.reveal-d4 { transition-delay: .32s }

/* ── MAPPA EMBED ─────────────────────────────────────────────────── */
.map-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden }
.map-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 }
.map-wrap--short { padding-bottom: 40% }

/* ── TRANSPORT TABLE ─────────────────────────────────────────────── */
.transport-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem }
.transport-table th {
  font-family: var(--f-mono); font-size: .57rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
  padding: .65rem .85rem; text-align: left;
  background: var(--parchment); border-bottom: 2px solid var(--sand);
}
.transport-table td {
  padding: .65rem .85rem; border-bottom: 1px solid var(--vellum);
  font-size: .84rem; font-weight: 300; color: var(--graphite);
}
.transport-table tr:nth-child(even) td { background: rgba(194,163,102,.05) }
.transport-table a { color: var(--cobalt); text-decoration: underline }

/* ── STAY CARDS (Ospitalità) ─────────────────────────────────────── */
.stay-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem }
.stay-card { background: var(--white); border: 1px solid var(--vellum); overflow: hidden }
.stay-card__photo { height: 240px; overflow: hidden; background: var(--midnight) }
.stay-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease) }
.stay-card:hover .stay-card__photo img { transform: scale(1.05) }
.stay-card__body { padding: 1.5rem }
.stay-card__name {
  font-family: var(--f-display); font-size: 1.4rem; font-weight: 700;
  color: var(--midnight); margin-bottom: .35rem;
}
.stay-card__desc { font-size: .88rem; font-weight: 300; color: var(--stone); line-height: 1.72; margin-bottom: 1rem }
.stay-card__amenities { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem }
.amenity {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 300;
  letter-spacing: .06em; padding: .2rem .65rem;
  background: var(--sand-pale); color: var(--sand-dark);
  border: 1px solid var(--sand);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (min-width: 580px) {
  .fleet-grid   { grid-template-columns: repeat(2, 1fr) }
  .bc__photo    { height: 310px }
  .info-strip   { grid-template-columns: 1fr 1fr }
  .info-cell    { border-right: 1px solid var(--vellum); border-bottom: none }
  .info-cell:nth-child(2n)          { border-right: none }
  .info-cell:nth-last-child(-n+2)   { border-bottom: none }
  .gallery      { grid-template-columns: repeat(3, 1fr) }
  .stay-grid    { grid-template-columns: repeat(2, 1fr) }
}

@media (min-width: 960px) {
  body          { padding-bottom: 0 }
  /* Su desktop la barra Translate non occupa spazio fisso nell'header */
  :root         { --nav-h: 80px }   /* desktop: 64px + 16px extra abbassamento */
  .site-header  { padding: 16px var(--gutter) 0 }
  .bottom-nav   { display: none }
  .hdr-toggle   { display: none }
  .hdr-ctas     { display: flex }
  .fleet-grid   { grid-template-columns: repeat(3, 1fr) }
  .bc__photo    { height: 380px }
  .section      { padding: 6rem var(--gutter) }
  .section--sm  { padding: 3rem var(--gutter) }
  .info-strip   { grid-template-columns: repeat(4, 1fr) }
  .info-cell    { border-right: 1px solid var(--vellum); border-bottom: none }
  .info-cell:last-child { border-right: none }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr }
  .ed-strip     { height: 40vw; max-height: 540px }
  .cta-big__btns { flex-direction: row; justify-content: center }
  .gallery      { grid-template-columns: repeat(4, 1fr) }
  .stay-grid    { grid-template-columns: repeat(2, 1fr) }
  .hero__body   { max-width: 680px; padding: 4rem var(--gutter) 5rem }
}










/* ===== STILE CARTOLINA MULTIMEDIALE ===== */
.postcard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

.postcard {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.postcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.12);
}

.postcard__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #001A33;
}

.postcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.4s ease;
  filter: brightness(0.92) saturate(1.02);
}

.postcard:hover .postcard__media img {
  transform: scale(1.04);
  filter: brightness(0.98) saturate(1.05);
}

.postcard__badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0,26,51,0.85);
  backdrop-filter: blur(6px);
  color: #C2A366;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.85rem;
  border-radius: 40px;
}

.postcard__body {
  padding: 1.8rem;
}

.postcard__title {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #001A33;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.postcard__subtitle {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C2A366;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #EDE4D0;
  display: inline-block;
}

.postcard__desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #2C2926;
  margin-bottom: 1.25rem;
}

.postcard__credit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: #9A7E45;
  margin-bottom: 1rem;
}

.postcard__icon {
  font-size: 0.9rem;
}

.postcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #001A33;
  border-bottom: 1.5px solid #C2A366;
  padding-bottom: 0.2rem;
  transition: gap 0.2s ease, color 0.2s ease;
}

.postcard__link:hover {
  gap: 0.75rem;
  color: #C2A366;
}

/* VISUAL NOTE */
.visual-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 780px;
  margin: 1rem auto 3rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #F7F5F0 0%, #EDE4D0 100%);
  border-radius: 60px;
  border-left: 4px solid #C2A366;
}

.visual-note__icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.visual-note__text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #2C2926;
  font-style: italic;
}

.visual-note__text strong {
  color: #001A33;
  font-style: normal;
}

/* RESPONSIVE */
@media (min-width: 768px) {
  .postcard {
    grid-template-columns: 1fr 1.2fr;
  }
  
  .postcard__media {
    aspect-ratio: 4/3;
  }
  
  .postcard:nth-child(even) .postcard__media {
    order: 2;
  }
  
  .postcard:nth-child(even) .postcard__body {
    order: 1;
  }
}

@media (max-width: 767px) {
  .postcard-grid {
    padding: 0.5rem 1rem 2rem;
    gap: 1.5rem;
  }
  
  .postcard__title {
    font-size: 1.3rem;
  }
  
  .postcard__body {
    padding: 1.2rem;
  }
  
  .visual-note {
    margin: 0 1rem 2rem;
    padding: 1rem 1.2rem;
    flex-direction: column;
    text-align: center;
  }
}