/* ==========================================================================
   Bagni Nido — Rapallo
   Sistema di design "Riviera Editoriale"
   Foglio di stile condiviso da index.html, tavola-fredda.html, chi-siamo.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Caratteri ospitati sul sito
   Prima venivano dai server di Google, che ricevevano cosi l'indirizzo IP di
   ogni visitatore. Ora i file sono qui: nessun dato esce verso terzi e le
   pagine caricano prima. Solo i sottoinsiemi latin e latin-ext, sufficienti
   per italiano, inglese, francese, tedesco e spagnolo.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root{
  /* Mare: dal fondale alla schiuma */
  --abisso:#08202F;
  --mare:#0F3A54;
  --onda:#2A7599;
  --riflesso:#6FB0CE;
  --chiaro:#B9DAEA;
  --schiuma:#EEF6F9;

  /* Terra: sabbia e legno consumato dal sole */
  --sabbia:#F4EADA;
  --sabbia-2:#E6D4B4;
  --legno:#9A7A4F;

  /* Accento: i due blu del marchio, campionati dal logo.
     Quello scuro sui fondi chiari, quello chiaro sui fondi scuri:
     e l'unico modo per tenere lo stesso accento leggibile ovunque. */
  --accento:#315574;
  --accento-hover:#3E6A90;
  --accento-chiaro:#68A4CB;

  --carta:#FBFAF7;
  --inchiostro:#0B1B27;
  --inchiostro-70:rgba(11,27,39,.72);
  --inchiostro-50:rgba(11,27,39,.55);
  --bianco:#FFFFFF;

  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-script:"Caveat","Segoe Script",cursive;

  /* Ritmo verticale su base 8 */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --radius-s:10px;
  --radius:18px;
  --radius-l:28px;

  --ombra-1:0 2px 8px rgba(8,32,47,.06);
  --ombra-2:0 14px 38px rgba(8,32,47,.10);
  --ombra-3:0 30px 70px rgba(8,32,47,.22);

  /* Un unico ritmo per tutte le animazioni */
  --t-rapido:160ms;
  --t-medio:260ms;
  --t-lento:520ms;
  --ease-out:cubic-bezier(.22,.68,.35,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);

  --z-header:100;
  --z-dropdown:200;
  --z-sticky:300;

  --container:1200px;
  --header-h:76px;
}

/* --------------------------------------------------------------------------
   2. Reset e basi
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--inchiostro);
  background:var(--carta);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video,svg{max-width:100%;display:block;}
img,video{height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
iframe{border:0;}

::selection{background:var(--accento);color:var(--bianco);}

:focus-visible{
  outline:3px solid var(--accento);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}

.skip-link{
  position:absolute;
  left:var(--s-4);
  top:-100px;
  z-index:calc(var(--z-sticky) + 10);
  background:var(--abisso);
  color:var(--bianco);
  padding:var(--s-3) var(--s-5);
  border-radius:var(--radius-s);
  font-weight:700;
  transition:top var(--t-medio) var(--ease-out);
}
.skip-link:focus{top:var(--s-4);}

.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;
}

/* --------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.022em;
  text-wrap:balance;
  font-variation-settings:"SOFT" 20,"WONK" 1;
}

h1{
  font-size:clamp(2.9rem,7.4vw,6rem);
  font-weight:600;
}
h2{
  font-size:clamp(2rem,4.4vw,3.5rem);
  margin-bottom:var(--s-4);
}
h3{
  font-family:var(--font-body);
  font-size:1.16rem;
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.01em;
  font-variation-settings:normal;
}
h4{
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-variation-settings:normal;
}

/* La grafia a mano resta il tocco caldo del marchio: una sola parola per titolo */
.script{
  font-family:var(--font-script);
  font-weight:600;
  font-style:normal;
  color:var(--accento);
  letter-spacing:0;
  font-size:1.12em;
  line-height:.9;
  display:inline-block;
  padding-inline:.04em;
}
/* Contesti scuri: hero della home, hero di pagina, sezione "Dove siamo".
   Ogni regola su fondo scuro passa da qui, così nessun testo resta
   con il colore pensato per il fondo chiaro. */
.on-dark .script,.hero .script,.page-hero .script,.dove .script{color:var(--accento-chiaro);}

.lead{
  font-size:clamp(1.04rem,1.35vw,1.22rem);
  line-height:1.62;
  color:var(--inchiostro-70);
  max-width:62ch;
}
.on-dark .lead,.hero .lead,.page-hero .lead,.dove .lead{color:rgba(255,255,255,.78);}

/* Occhiello: etichetta + riga a righe da ombrellone (firma grafica del sito) */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  font-family:var(--font-body);
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--onda);
  margin-bottom:var(--s-4);
}
.eyebrow::before{
  content:"";
  width:44px;
  height:9px;
  border-radius:2px;
  flex:none;
  background:repeating-linear-gradient(
    115deg,
    var(--accento) 0 5px,
    transparent 5px 10px
  );
}
.on-dark .eyebrow,.hero .eyebrow,.page-hero .eyebrow,.dove .eyebrow{color:var(--riflesso);}
.on-dark .eyebrow::before,.hero .eyebrow::before,
.page-hero .eyebrow::before,.dove .eyebrow::before{
  background:repeating-linear-gradient(115deg,var(--accento-chiaro) 0 5px,transparent 5px 10px);
}
/* Stelle: scure sul chiaro, chiare sullo scuro */
.on-dark .stars,.hero .stars,.page-hero .stars,.dove .stars{color:var(--accento-chiaro);}
/* Anche l'anello di messa a fuoco deve restare visibile sul navy */
.on-dark :focus-visible,.hero :focus-visible,
.page-hero :focus-visible,.dove :focus-visible,
footer.site-footer :focus-visible{outline-color:var(--accento-chiaro);}

.section-head{
  max-width:64ch;
  margin-bottom:var(--s-8);
}

/* --------------------------------------------------------------------------
   4. Sezioni e divisori
   -------------------------------------------------------------------------- */
section{position:relative;}

.section-pad{padding-block:clamp(64px,9vw,var(--s-10));}

.light-section{background:var(--carta);}
.sand-section{background:var(--sabbia);}
.on-dark{background:var(--abisso);color:var(--bianco);}

/* Onde stratificate: due profili che scorrono lentamente in direzioni opposte.
   Ogni SVG è largo il doppio del contenitore e contiene due periodi d'onda
   identici, così lo scorrimento del 50% si richiude senza salti. */
.wave-divider{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:clamp(46px,6vw,92px);
  line-height:0;
  pointer-events:none;
  overflow:hidden;
}
.wave-divider svg{
  position:absolute;
  left:0;bottom:0;
  width:200%;
  max-width:none; /* scavalca il max-width:100% del reset, altrimenti l'onda si dimezza */
  height:100%;
  display:block;
}
.wave-divider .wave-back{
  opacity:.9;
  animation:wave-drift 26s linear infinite;
}
.wave-divider .wave-front{
  animation:wave-drift 17s linear infinite reverse;
}
@keyframes wave-drift{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

/* --------------------------------------------------------------------------
   5. Bottoni
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:48px;
  padding:13px 24px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.005em;
  line-height:1.2;
  cursor:pointer;
  border:2px solid transparent;
  white-space:nowrap;
  transition:transform var(--t-rapido) var(--ease-out),
             box-shadow var(--t-medio) var(--ease-out),
             background-color var(--t-medio) var(--ease-out),
             border-color var(--t-medio) var(--ease-out),
             color var(--t-medio) var(--ease-out);
  touch-action:manipulation;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}

.btn-primary{
  background:var(--accento);
  color:var(--bianco);
  box-shadow:0 8px 22px rgba(49,85,116,.34);
}
.btn-primary:hover{background:var(--accento-hover);box-shadow:0 14px 30px rgba(49,85,116,.42);}

.btn-dark{
  background:var(--abisso);
  color:var(--bianco);
  box-shadow:var(--ombra-2);
}
.btn-dark:hover{background:var(--mare);}

.btn-outline{
  background:transparent;
  color:var(--abisso);
  border-color:rgba(8,32,47,.24);
}
.btn-outline:hover{border-color:var(--abisso);background:rgba(8,32,47,.05);}

/* Su fondo navy il blu scuro sparirebbe: nei contesti scuri il bottone
   principale passa al blu chiaro del logo, con testo scuro sopra. */
.on-dark .btn-primary,.hero .btn-primary,.page-hero .btn-primary,.dove .btn-primary{
  background:var(--accento-chiaro);
  color:var(--abisso);
  box-shadow:0 8px 22px rgba(8,32,47,.38);
}
.on-dark .btn-primary:hover,.hero .btn-primary:hover,
.page-hero .btn-primary:hover,.dove .btn-primary:hover{
  background:#84B9D9;
  box-shadow:0 14px 30px rgba(8,32,47,.46);
}

.on-dark .btn-outline,.hero .btn-outline,.page-hero .btn-outline,.dove .btn-outline{
  color:var(--bianco);
  border-color:rgba(255,255,255,.42);
}
.on-dark .btn-outline:hover,.hero .btn-outline:hover,
.page-hero .btn-outline:hover,.dove .btn-outline:hover{
  border-color:var(--bianco);
  background:rgba(255,255,255,.12);
}

.btn-ghost{
  background:rgba(255,255,255,.9);
  color:var(--abisso);
  border-color:rgba(8,32,47,.1);
  box-shadow:var(--ombra-1);
}
.btn-ghost:hover{background:var(--bianco);}

.btn .chev{transition:transform var(--t-medio) var(--ease-out);flex:none;}
.book-dropdown.open .btn .chev{transform:rotate(180deg);}

/* --------------------------------------------------------------------------
   6. Menu a tendina "Chiama / WhatsApp"
   -------------------------------------------------------------------------- */
.book-dropdown{position:relative;display:inline-block;}

.book-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:210px;
  background:var(--bianco);
  border:1px solid rgba(8,32,47,.09);
  border-radius:var(--radius);
  box-shadow:var(--ombra-3);
  padding:var(--s-2);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  transition:opacity var(--t-medio) var(--ease-out),
             transform var(--t-medio) var(--ease-out),
             visibility var(--t-medio);
  z-index:var(--z-dropdown);
}
.book-dropdown.open .book-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.book-dropdown.drop-up .book-menu{
  top:auto;
  bottom:calc(100% + 10px);
  transform-origin:bottom left;
}
.book-dropdown.drop-right .book-menu{left:auto;right:0;transform-origin:top right;}

.book-option{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-height:46px;
  padding:11px 14px;
  border-radius:var(--radius-s);
  font-weight:700;
  font-size:.94rem;
  color:var(--inchiostro);
  transition:background-color var(--t-rapido) var(--ease-out),
             color var(--t-rapido) var(--ease-out);
}
.book-option:hover,.book-option:focus-visible{background:var(--schiuma);color:var(--mare);}
.book-option.wa:hover,.book-option.wa:focus-visible{background:#E7F7EC;color:#12823E;}
.book-option svg{flex:none;}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
header.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:rgba(251,250,247,.82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-medio) var(--ease-out),
             box-shadow var(--t-medio) var(--ease-out),
             background-color var(--t-medio) var(--ease-out);
}
header.site-header.scrolled{
  border-bottom-color:rgba(8,32,47,.1);
  box-shadow:0 6px 24px rgba(8,32,47,.07);
  background:rgba(251,250,247,.94);
}

header.site-header nav{
  max-width:var(--container);
  margin-inline:auto;
  padding:var(--s-3) clamp(20px,5vw,40px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  min-height:var(--header-h);
}

.brand{display:flex;align-items:center;flex:none;}
.brand img{
  height:46px;
  width:auto;
  transition:height var(--t-medio) var(--ease-out);
}
header.site-header.scrolled .brand img{height:38px;}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--s-2);
}
.nav-links a{
  position:relative;
  padding:10px 12px;
  font-weight:700;
  font-size:.93rem;
  white-space:nowrap;
  color:var(--inchiostro-70);
  border-radius:var(--radius-s);
  transition:color var(--t-rapido) var(--ease-out);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:4px;
  height:2px;
  border-radius:2px;
  background:var(--accento);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-medio) var(--ease-out);
}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{color:var(--abisso);}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.active::after{transform:scaleX(1);}

.nav-cta{display:flex;align-items:center;gap:var(--s-2);flex:none;}

/* Selettore di lingua */
.lang-switch{position:relative;flex:none;}
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(8,32,47,.16);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--inchiostro);
  background:rgba(255,255,255,.6);
  transition:background-color var(--t-rapido) var(--ease-out),
             border-color var(--t-rapido) var(--ease-out);
}
.lang-toggle:hover{background:var(--bianco);border-color:rgba(8,32,47,.32);}
.lang-toggle .globe{flex:none;}
.lang-toggle .chev{width:11px;height:11px;transition:transform var(--t-medio) var(--ease-out);}
.lang-switch.open .lang-toggle .chev{transform:rotate(180deg);}

.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:190px;
  background:var(--bianco);
  border:1px solid rgba(8,32,47,.09);
  border-radius:var(--radius);
  box-shadow:var(--ombra-3);
  padding:var(--s-2);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin:top right;
  transition:opacity var(--t-medio) var(--ease-out),
             transform var(--t-medio) var(--ease-out),
             visibility var(--t-medio);
  z-index:var(--z-dropdown);
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1);}

.lang-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  width:100%;
  min-height:44px;
  padding:10px 13px;
  border-radius:var(--radius-s);
  font-weight:700;
  font-size:.93rem;
  text-align:left;
  transition:background-color var(--t-rapido) var(--ease-out);
}
.lang-option:hover,.lang-option:focus-visible{background:var(--schiuma);}
.lang-option .code{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--inchiostro-50);
}
.lang-option[aria-current="true"]{background:var(--schiuma);color:var(--mare);}
.lang-option[aria-current="true"] .code{color:var(--onda);}

/* Menu mobile a scomparsa */
.nav-toggle{
  display:none;
  width:46px;height:46px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-s);
  border:1px solid rgba(8,32,47,.16);
}
.nav-toggle:hover{background:rgba(8,32,47,.05);}
.nav-toggle span{
  display:block;
  width:20px;height:2px;
  background:var(--abisso);
  border-radius:2px;
  position:relative;
  transition:background-color var(--t-rapido) var(--ease-out);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";
  position:absolute;left:0;
  width:20px;height:2px;
  background:var(--abisso);
  border-radius:2px;
  transition:transform var(--t-medio) var(--ease-out);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* --------------------------------------------------------------------------
   8. Hero della home — video a tutta larghezza
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(92vh,860px);
  display:flex;
  align-items:flex-end;
  padding-top:clamp(48px,10vw,120px);
  padding-bottom:clamp(80px,10vw,150px);
  background:var(--abisso);
  color:var(--bianco);
  overflow:hidden;
  isolation:isolate;
}

.hero-media{
  position:absolute;
  inset:-6% 0 0 0;
  height:112%;
  z-index:-2;
  will-change:transform;
}
.hero-media img,.hero-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
}
/* Il video compare in dissolvenza solo quando è davvero pronto:
   fino a quel momento resta la foto, quindi niente riquadro nero */
.hero-media video,.media-frame video{
  opacity:0;
  transition:opacity 700ms var(--ease-out);
}
.hero-media video.is-playing,.media-frame video.is-playing{opacity:1;}
/* Scrim doppio: verticale per il testo, laterale per il contrasto sui bordi */
/* Il video ha zone molto chiare: il velo laterale garantisce il contrasto
   del testo qualunque fotogramma sia a schermo */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(8,32,47,.94) 0%,rgba(8,32,47,.66) 38%,rgba(8,32,47,.26) 70%,rgba(8,32,47,.48) 100%),
    linear-gradient(to right,rgba(8,32,47,.82) 0%,rgba(8,32,47,.52) 38%,rgba(8,32,47,0) 78%);
}

.hero-inner{position:relative;width:100%;}
.hero-copy{max-width:min(760px,92%);}

.hero h1{
  margin-block:var(--s-5) var(--s-5);
  color:var(--bianco);
  text-shadow:0 2px 30px rgba(8,32,47,.45);
}
.hero .lead{
  color:rgba(255,255,255,.88);
  max-width:56ch;
  text-shadow:0 1px 12px rgba(8,32,47,.55);
}

.rating-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  padding:9px 16px 9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.88rem;
  font-weight:600;
  color:rgba(255,255,255,.9);
}
.rating-badge b{
  font-size:1.02rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--bianco);
}
.stars{color:var(--accento);letter-spacing:.1em;font-size:.95rem;line-height:1;}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3);
  margin-top:var(--s-6);
}

/* Barra informazioni: si sovrappone al bordo inferiore dell'hero */
.hero-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:clamp(40px,6vw,72px);
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  max-width:820px;
}
.hero-meta > *{
  background:rgba(8,32,47,.42);
  padding:var(--s-4) var(--s-5);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.hero-meta span{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--riflesso);
}
.hero-meta strong{
  font-size:.97rem;
  font-weight:700;
  color:var(--bianco);
  line-height:1.35;
}
.hero-meta a:hover{color:var(--accento-chiaro);}

.scroll-hint{
  position:absolute;
  right:clamp(20px,5vw,40px);
  bottom:clamp(80px,10vw,140px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-3);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  writing-mode:vertical-rl;
}
.scroll-hint::after{
  content:"";
  width:1px;height:56px;
  background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);
  animation:scroll-pulse 2.4s var(--ease-out) infinite;
}
@keyframes scroll-pulse{
  0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top;}
  50%{opacity:1;transform:scaleY(1);transform-origin:top;}
}

/* --------------------------------------------------------------------------
   9. Hero delle pagine interne
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;
  background:var(--abisso);
  color:var(--bianco);
  padding-top:clamp(56px,8vw,96px);
  padding-bottom:clamp(90px,11vw,150px);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%,rgba(42,117,153,.5),transparent 62%),
    radial-gradient(ellipse 60% 80% at 92% 30%,rgba(217,142,43,.18),transparent 60%);
  pointer-events:none;
}
.page-hero .container{position:relative;}
.page-hero h1{margin-block:var(--s-4) var(--s-5);color:var(--bianco);}
.page-hero .lead{color:rgba(255,255,255,.78);}

/* flex (non inline-flex) così l'occhiello sottostante va sempre a capo,
   qualunque sia la lunghezza della traduzione */
.back-link{
  display:flex;
  width:fit-content;
  align-items:center;
  gap:var(--s-2);
  min-height:44px;
  margin-bottom:var(--s-4);
  font-size:.9rem;
  font-weight:700;
  color:rgba(255,255,255,.72);
  transition:color var(--t-rapido) var(--ease-out),transform var(--t-rapido) var(--ease-out);
}
.back-link:hover{color:var(--bianco);transform:translateX(-3px);}

/* --------------------------------------------------------------------------
   10. Fascia di rassicurazione
   -------------------------------------------------------------------------- */
.trust-strip{
  background:var(--sabbia);
  padding-block:var(--s-7);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-5);
}
.trust-item{
  display:flex;
  align-items:flex-start;
  gap:var(--s-4);
  padding-left:var(--s-5);
  border-left:2px solid rgba(154,122,79,.28);
}
.trust-item:first-child{border-left:0;padding-left:0;}
.trust-item .ic{
  width:44px;height:44px;
  flex:none;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--bianco);
  box-shadow:var(--ombra-1);
}
.trust-item strong{display:block;font-weight:800;font-size:1rem;line-height:1.3;}
.trust-item small{
  display:block;
  font-size:.87rem;
  line-height:1.5;
  color:var(--inchiostro-70);
  margin-top:2px;
}

/* --------------------------------------------------------------------------
   11. Servizi — elenco editoriale numerato
   -------------------------------------------------------------------------- */
.servizi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--s-4);
}
.service-card{
  position:relative;
  padding:var(--s-6) var(--s-5) var(--s-7);
  border-radius:var(--radius);
  background:var(--bianco);
  border:1px solid rgba(8,32,47,.07);
  overflow:hidden;
  transition:transform var(--t-medio) var(--ease-out),
             box-shadow var(--t-medio) var(--ease-out),
             border-color var(--t-medio) var(--ease-out);
}
.service-card::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:repeating-linear-gradient(115deg,var(--accento) 0 8px,var(--chiaro) 8px 16px);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-lento) var(--ease-out);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--ombra-2);
  border-color:rgba(8,32,47,.02);
}
.service-card:hover::after{transform:scaleX(1);}

.service-card .num{
  display:block;
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:600;
  line-height:1;
  color:var(--sabbia-2);
  margin-bottom:var(--s-4);
  font-variant-numeric:tabular-nums;
  transition:color var(--t-medio) var(--ease-out);
}
.service-card:hover .num{color:var(--accento);}
.service-card h3{margin-bottom:var(--s-2);}
.service-card p{font-size:.94rem;color:var(--inchiostro-70);line-height:1.6;}

/* Video a tutta larghezza nelle pagine interne */
.media-frame{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--ombra-3);
  margin-bottom:var(--s-8);
  background:var(--mare);
  aspect-ratio:16/9;
}
.media-frame video,.media-frame img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   12. Insegna di benvenuto
   -------------------------------------------------------------------------- */
.welcome-banner{
  background:var(--sabbia);
  padding-block:clamp(64px,9vw,var(--s-10));
  overflow:hidden;
}
.welcome-inner{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,6vw,80px);
  align-items:center;
}
.welcome-sign-img{
  width:100%;
  max-width:400px;
  margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(8,32,47,.24));
  transform:rotate(-2.5deg);
  transition:transform var(--t-lento) var(--ease-out);
}
.welcome-banner:hover .welcome-sign-img{transform:rotate(-1deg) scale(1.02);}

/* --------------------------------------------------------------------------
   13. La spiaggia — impaginazione asimmetrica
   -------------------------------------------------------------------------- */
.spiaggia{
  background:var(--carta);
  padding-block:clamp(64px,9vw,var(--s-10));
}
.spiaggia-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,88px);
  align-items:center;
}
.spiaggia-visual{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--ombra-3);
}
.spiaggia-visual img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform 900ms var(--ease-out);
}
.spiaggia-visual:hover img{transform:scale(1.045);}
.spiaggia-caption{
  position:absolute;
  left:var(--s-5);bottom:var(--s-5);
  padding:8px 16px;
  border-radius:999px;
  background:rgba(8,32,47,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--bianco);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.spiaggia-list{
  display:grid;
  gap:var(--s-5);
  margin-top:var(--s-6);
}
.spiaggia-list li{
  display:flex;
  gap:var(--s-4);
  align-items:flex-start;
}
.spiaggia-list .dot{
  width:10px;height:10px;
  flex:none;
  margin-top:9px;
  border-radius:50%;
  background:var(--accento);
  box-shadow:0 0 0 5px rgba(49,85,116,.16);
}
.spiaggia-list strong{display:block;font-weight:800;font-size:1.02rem;}
.spiaggia-list span{
  display:block;
  font-size:.94rem;
  color:var(--inchiostro-70);
  line-height:1.55;
}

/* --------------------------------------------------------------------------
   14. Recensioni
   -------------------------------------------------------------------------- */
.recensioni{
  background:var(--schiuma);
  padding-block:clamp(64px,9vw,var(--s-10));
}
.rec-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-5);
  margin-bottom:var(--s-8);
}
.rec-score{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--radius);
  background:var(--bianco);
  box-shadow:var(--ombra-1);
  transition:transform var(--t-medio) var(--ease-out),box-shadow var(--t-medio) var(--ease-out);
}
.rec-score:hover{transform:translateY(-3px);box-shadow:var(--ombra-2);}
.rec-score .big{
  font-family:var(--font-display);
  font-size:2.9rem;
  font-weight:600;
  line-height:1;
  color:var(--abisso);
  font-variant-numeric:tabular-nums;
}
.rec-score small{
  display:block;
  font-size:.84rem;
  color:var(--inchiostro-50);
  margin-top:3px;
}

.rec-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s-5);
}
.rec-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  padding:var(--s-6) var(--s-5);
  border-radius:var(--radius);
  background:var(--bianco);
  box-shadow:var(--ombra-1);
  transition:transform var(--t-medio) var(--ease-out),box-shadow var(--t-medio) var(--ease-out);
}
.rec-card::before{
  content:"\201C";
  position:absolute;
  top:6px;right:22px;
  font-family:var(--font-display);
  font-size:5.5rem;
  line-height:1;
  color:var(--sabbia-2);
  opacity:.7;
  pointer-events:none;
}
.rec-card:hover{transform:translateY(-5px);box-shadow:var(--ombra-2);}
.rec-card p{
  position:relative;
  font-size:1rem;
  line-height:1.62;
  color:var(--inchiostro);
  flex:1;
}
.rec-author{display:flex;align-items:center;gap:var(--s-3);}
.rec-author .avatar{
  width:42px;height:42px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--mare);
  color:var(--bianco);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.04em;
}
.rec-author strong{display:block;font-weight:800;font-size:.95rem;}
.rec-author span{display:block;font-size:.8rem;color:var(--inchiostro-50);}

/* --------------------------------------------------------------------------
   15. Dove siamo
   -------------------------------------------------------------------------- */
.dove{
  background:var(--abisso);
  color:var(--bianco);
  padding-block:clamp(64px,9vw,var(--s-10));
  position:relative;
  overflow:hidden;
}
.dove::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 70% at 8% 20%,rgba(42,117,153,.42),transparent 60%);
  pointer-events:none;
}
.dove-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,6vw,72px);
  align-items:center;
}
.dove h2{color:var(--bianco);}

.info-list{display:grid;gap:var(--s-4);margin-block:var(--s-6);}
.info-item{display:flex;gap:var(--s-4);align-items:flex-start;}
.info-item .ic{
  width:42px;height:42px;
  flex:none;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.info-item strong{
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--riflesso);
  margin-bottom:2px;
}
.info-item a,.info-item span{
  font-size:1rem;
  font-weight:600;
  color:var(--bianco);
  line-height:1.45;
}
.info-item a{border-bottom:1px solid rgba(255,255,255,.28);transition:border-color var(--t-rapido) var(--ease-out),color var(--t-rapido) var(--ease-out);}
.info-item a:hover{color:var(--accento-chiaro);border-color:var(--accento-chiaro);}

.map-wrap{
  /* Senza position:relative il riquadro di consenso, che è in posizione
     assoluta, si aggancia alla sezione e copre la colonna del testo */
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--ombra-3);
  border:1px solid rgba(255,255,255,.14);
  aspect-ratio:4/3;
  background:var(--mare);
}
.map-wrap iframe{width:100%;height:100%;display:block;filter:saturate(.92);}

/* --------------------------------------------------------------------------
   16. Piatti
   -------------------------------------------------------------------------- */
/* 300px come minimo tiene tre colonne su desktop: sei piatti su due righe piene */
.piatti-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s-5);
}
.piatto-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  border-radius:var(--radius);
  background:var(--bianco);
  border:1px solid rgba(8,32,47,.07);
  overflow:hidden;
  transition:transform var(--t-medio) var(--ease-out),box-shadow var(--t-medio) var(--ease-out);
}
.piatto-card:hover{transform:translateY(-6px);box-shadow:var(--ombra-2);}
.piatto-img{overflow:hidden;aspect-ratio:4/5;background:var(--schiuma);}
.piatto-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 800ms var(--ease-out);
}
.piatto-card:hover .piatto-img img{transform:scale(1.06);}
.piatto-card small{
  display:block;
  padding:0 var(--s-5) var(--s-5);
  font-size:.9rem;
  line-height:1.55;
  color:var(--inchiostro-70);
}
.piatti-outro{
  margin-top:var(--s-6);
  font-size:1rem;
  color:var(--inchiostro-70);
  max-width:60ch;
}

/* --------------------------------------------------------------------------
   17. CTA finale
   -------------------------------------------------------------------------- */
.cta-final{
  position:relative;
  background:var(--sabbia);
  padding-block:clamp(64px,9vw,110px);
  text-align:center;
  overflow:hidden;
}
/* Righe da ombrellone: la firma grafica, qui in grande */
.cta-final::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:10px;
  background:repeating-linear-gradient(115deg,var(--accento) 0 14px,var(--chiaro) 14px 28px);
}
.cta-final h2{margin-bottom:var(--s-4);}
.cta-final p{
  font-size:clamp(1rem,1.3vw,1.15rem);
  color:var(--inchiostro-70);
  max-width:56ch;
  margin-inline:auto;
}
.cta-final .hero-ctas{justify-content:center;}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
footer.site-footer{
  background:var(--abisso);
  color:rgba(255,255,255,.72);
  padding-block:var(--s-8) var(--s-6);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  gap:var(--s-7);
  padding-bottom:var(--s-7);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand img{width:170px;margin-bottom:var(--s-4);}
.footer-brand p{font-size:.93rem;line-height:1.6;max-width:44ch;}
.socials{display:flex;gap:var(--s-2);margin-top:var(--s-5);}
.socials a{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  transition:background-color var(--t-rapido) var(--ease-out),
             border-color var(--t-rapido) var(--ease-out),
             transform var(--t-rapido) var(--ease-out);
}
.socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);transform:translateY(-2px);}

.footer-col h4{color:var(--bianco);margin-bottom:var(--s-4);}
.footer-col ul{display:grid;gap:var(--s-3);}
.footer-col a,.footer-col span{font-size:.93rem;}
.footer-col a{transition:color var(--t-rapido) var(--ease-out);}
.footer-col a:hover{color:var(--accento-chiaro);}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--s-3);
  padding-top:var(--s-5);
  font-size:.85rem;
  color:rgba(255,255,255,.5);
}
.designer-link{border-bottom:1px solid rgba(255,255,255,.28);}
.designer-link:hover{color:var(--accento-chiaro);border-color:var(--accento-chiaro);}

/* --------------------------------------------------------------------------
   19. Barra di contatto fissa (solo mobile)
   -------------------------------------------------------------------------- */
.sticky-cta{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--z-sticky);
  gap:var(--s-2);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(8,32,47,.1);
  box-shadow:0 -6px 24px rgba(8,32,47,.1);
}
.sticky-cta .book-dropdown{flex:1;}
.sticky-cta .book-toggle{width:100%;background:var(--accento);color:var(--bianco);}
.sticky-cta .book-menu{width:100%;}
.sticky-cta .dir{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 18px;
  border-radius:999px;
  border:2px solid rgba(8,32,47,.2);
  font-weight:800;
  font-size:.95rem;
}

/* --------------------------------------------------------------------------
   20. Animazioni allo scorrimento
   -------------------------------------------------------------------------- */
/* Il contenuto parte nascosto solo se il JavaScript è attivo:
   senza JS la pagina resta interamente leggibile */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-visible{opacity:1;transform:none;}

/* Cambio lingua: breve dissolvenza per evitare lo scatto del testo */
body.lang-switching main,
body.lang-switching header.site-header,
body.lang-switching footer.site-footer{
  opacity:.35;
  transition:opacity 130ms var(--ease-in);
}

/* --------------------------------------------------------------------------
   21. Adattamento agli schermi
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .welcome-inner,.spiaggia-inner,.dove-inner{grid-template-columns:1fr;}
  .spiaggia-visual img{aspect-ratio:16/10;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}

/* Le etichette di navigazione tradotte (tedesco e francese in particolare)
   sono molto piu lunghe dell'italiano: il menu compatto entra prima. */
@media (max-width:1100px){
  :root{--header-h:66px;}

  .nav-toggle{display:inline-flex;}

  .nav-links{
    position:fixed;
    inset:var(--header-h) 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--s-4) clamp(20px,5vw,40px) var(--s-6);
    background:rgba(251,250,247,.98);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(8,32,47,.1);
    box-shadow:0 18px 40px rgba(8,32,47,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity var(--t-medio) var(--ease-out),
               transform var(--t-medio) var(--ease-out),
               visibility var(--t-medio);
  }
  .nav-links.open{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-links a{
    padding:14px 4px;
    font-size:1.05rem;
    border-bottom:1px solid rgba(8,32,47,.08);
    border-radius:0;
  }
  .nav-links a::after{left:4px;right:auto;width:26px;bottom:8px;}

  .nav-cta .book-dropdown{display:none;}

  .hero{min-height:auto;padding-bottom:clamp(64px,12vw,110px);}
  .hero-meta{grid-template-columns:1fr;}
  .scroll-hint{display:none;}

  .trust-grid{grid-template-columns:1fr;gap:var(--s-4);}
  .trust-item{border-left:0;padding-left:0;}

  .sticky-cta{display:flex;}
  footer.site-footer{padding-bottom:calc(var(--s-6) + 78px);}
}

@media (max-width:620px){
  h2{font-size:clamp(1.75rem,7vw,2.3rem);}
  .rec-top{align-items:flex-start;}
  .rec-score{width:100%;}
  .footer-grid{grid-template-columns:1fr;gap:var(--s-6);}
  .hero-ctas{width:100%;}
  .hero-ctas > *,.hero-ctas .book-dropdown,.hero-ctas .btn{width:100%;}
  .cta-final .hero-ctas > *{width:100%;}
  .book-menu{width:100%;min-width:0;}
  .service-card{padding:var(--s-5) var(--s-5) var(--s-6);}
  .welcome-sign-img{max-width:280px;}
}

/* --------------------------------------------------------------------------
   22. Preferenze dell'utente
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .hero-media{transform:none !important;}
  .scroll-hint::after{animation:none;opacity:.6;}
}

@media print{
  header.site-header,.sticky-cta,.wave-divider,.scroll-hint,.map-wrap{display:none;}
  body{background:#fff;color:#000;}
  .hero,.page-hero,.dove,footer.site-footer{background:#fff;color:#000;}
}

/* --------------------------------------------------------------------------
   24. Mappa su richiesta e blocco legale
   -------------------------------------------------------------------------- */
.map-consent{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s-3);
  padding:clamp(24px,4vw,40px);
  text-align:center;
  background:
    radial-gradient(ellipse 80% 90% at 50% 0%,rgba(42,117,153,.35),transparent 70%),
    var(--mare);
}
.map-consent-title{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2vw,1.6rem);
  font-weight:600;
  color:var(--bianco);
}
.map-consent-text{
  font-size:.92rem;
  line-height:1.55;
  color:rgba(255,255,255,.76);
  max-width:46ch;
}
.map-consent-btn{margin-top:var(--s-2);}
.map-consent-alt{
  font-size:.86rem;
  color:rgba(255,255,255,.66);
  border-bottom:1px solid rgba(255,255,255,.3);
  transition:color var(--t-rapido) var(--ease-out),border-color var(--t-rapido) var(--ease-out);
}
.map-consent-alt:hover{color:var(--bianco);border-color:var(--bianco);}

/* Dati identificativi dell'impresa, in fondo al footer */
.footer-legal{
  padding-top:var(--s-5);
  margin-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.84rem;
  line-height:1.7;
  color:rgba(255,255,255,.55);
}
.footer-legal dl{
  display:flex;
  flex-wrap:wrap;
  gap:4px var(--s-5);
}
.footer-legal div{display:flex;gap:6px;}
.footer-legal dt{color:rgba(255,255,255,.4);}
.footer-legal dd{color:rgba(255,255,255,.72);}
.footer-legal .todo{
  color:var(--chiaro);
  font-weight:800;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-5);
  margin-top:var(--s-3);
}
.footer-links a{
  color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.24);
  transition:color var(--t-rapido) var(--ease-out),border-color var(--t-rapido) var(--ease-out);
}
.footer-links a:hover{color:var(--accento-chiaro);border-color:var(--accento-chiaro);}

/* --------------------------------------------------------------------------
   25. Pagine di testo (note legali)
   -------------------------------------------------------------------------- */
.legal{
  background:var(--carta);
  padding-block:clamp(48px,7vw,88px);
}
.legal-body{max-width:74ch;}
.legal-body h2{
  font-size:clamp(1.6rem,3vw,2.3rem);
  margin-top:var(--s-8);
  margin-bottom:var(--s-4);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{
  font-size:1.05rem;
  margin-top:var(--s-6);
  margin-bottom:var(--s-2);
}
.legal-body p{margin-bottom:var(--s-4);color:var(--inchiostro-70);}
.legal-body ul{
  margin:0 0 var(--s-4);
  padding-left:var(--s-5);
  list-style:disc;
  color:var(--inchiostro-70);
}
.legal-body li{margin-bottom:var(--s-2);}
.legal-body a{
  color:var(--mare);
  font-weight:600;
  border-bottom:1px solid rgba(15,58,84,.3);
}
.legal-body a:hover{border-color:var(--mare);}
.legal-body strong{color:var(--inchiostro);}

/* Riquadro giallo: i punti che il titolare deve completare prima di pubblicare */
.legal-note{
  padding:var(--s-5);
  margin-bottom:var(--s-7);
  border-radius:var(--radius);
  background:#EAF3F9;
  border:1px solid #A8CCE3;
}
.legal-note p{color:#22485F;margin-bottom:0;}
.legal-note strong{color:#173648;}

.legal-updated{
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid rgba(8,32,47,.1);
  font-size:.88rem;
  color:var(--inchiostro-50);
}

/* Ogni recensione rimanda alla scheda Google: l'autenticita e verificabile */
.rec-source{
  display:block;
  font-size:.8rem;
  color:var(--inchiostro-50);
  border-bottom:1px solid rgba(11,27,39,.22);
  width:fit-content;
  transition:color var(--t-rapido) var(--ease-out),border-color var(--t-rapido) var(--ease-out);
}
.rec-source:hover{color:var(--mare);border-color:var(--mare);}