/* ═══════════════════════════════════════════════════════════════════
   MARAM YACHTING — «UN GIORNO A BORDO»
   La firma: --ora va da 0 (mezzogiorno) a 1 (notte) e illumina tutto.
   Senza JS la pagina resta a mezzogiorno: leggibile e completa.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Instrument Serif";src:url(fonts/instrumentserif.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrumentserif-italic.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --ottone:#C98A3E;   --ottone-chiaro:#E0AC6A;
  --mare:#1C4A5A;
  --g-fondo:244,235,221;  --g-inchiostro:42,26,18;
  --n-fondo:42,26,18;     --n-inchiostro:242,230,214;

  /* Aggiornate da app.js. Senza JS restano al giorno. */
  --fondo:rgb(var(--g-fondo));
  --inchiostro:rgb(var(--g-inchiostro));
  --tenue:rgba(42,26,18,.62);
  --velo:rgba(42,26,18,.12);
  --ombra:0 18px 50px -28px rgba(42,26,18,.55);

  --titolo:"Instrument Serif",Georgia,"Times New Roman",serif;
  --testo:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --guscio:min(1240px,100% - 2.5rem);
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background-color:var(--fondo);color:var(--inchiostro);
  font-family:var(--testo);font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.62;font-weight:400;overflow-x:hidden;
  /* 🔴 niente transition qui: con una custom property che cambia a ogni
     fotogramma la transizione congela il valore. Il movimento lo dà --ora. */
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--titolo);font-weight:400;line-height:1.06;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.4rem,1.3rem + 4.6vw,5.1rem)}
h2{font-size:clamp(1.85rem,1.15rem + 2.7vw,3.35rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem)}
p{margin:0 0 .85rem}
.guscio{width:var(--guscio);margin-inline:auto}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── il salto-contenuto ── */
.salta{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ottone);color:#1a0f0a;
  padding:.7rem 1.1rem;border-radius:0 0 var(--r) 0;font-weight:600}
.salta:focus{left:0}

/* ═══════ BARRA ═══════ */
.barra{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:1.2rem;
  padding:.85rem 0;transition:padding .3s ease}
.barra::before{content:"";position:absolute;inset:0;background-color:var(--fondo);opacity:0;
  transition:opacity .3s ease;border-bottom:1px solid transparent}
.barra.giu{padding:.5rem 0}
.barra.giu::before{opacity:.94;border-bottom-color:var(--velo)}
.barra__in{position:relative;display:flex;align-items:center;gap:1.4rem;width:var(--guscio);margin-inline:auto}
.marca{font-family:var(--titolo);font-size:1.16rem;letter-spacing:.16em;text-decoration:none;
  white-space:nowrap;text-transform:uppercase}
.marca em{font-style:italic;color:var(--ottone);letter-spacing:.1em}
.nav{display:none;gap:1.5rem;margin-left:auto;font-size:.92rem}
.nav a{text-decoration:none;opacity:.78;padding-block:.2rem;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ottone);
  transition:right .28s cubic-bezier(.22,.75,.2,1)}
.nav a:hover,.nav a:focus-visible{opacity:1}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.lingue{display:flex;gap:.15rem;margin-left:auto;font-size:.8rem;letter-spacing:.09em}
.nav+.lingue{margin-left:0}
.lingue a{text-decoration:none;opacity:.5;padding:.28rem .5rem;border-radius:6px}
.lingue a:hover{opacity:.85}
.lingue a[aria-current]{opacity:1;background:var(--ottone);color:#231409;font-weight:600}
@media(min-width:1000px){.nav{display:flex}}

/* ═══════ APERTURA ═══════ */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero__sfondo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__sfondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);
  animation:respiro 22s cubic-bezier(.4,0,.5,1) infinite alternate}
@keyframes respiro{to{transform:scale(1.0)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,12,8,.42) 0%,rgba(20,12,8,.12) 38%,rgba(20,12,8,.78) 100%)}
.hero__in{width:var(--guscio);margin-inline:auto;padding:9rem 0 clamp(3.5rem,9vh,7rem);color:#F6EEE3}
.occhiello{font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;opacity:.75;margin-bottom:1.1rem;
  font-weight:500}
.hero h1{max-width:16ch;text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero__testo{margin:1.6rem 0 2.3rem;max-width:46ch;font-size:1.06rem;opacity:.94}
.hero__testo p{margin:0 0 .3rem}
.bottoni{display:flex;flex-wrap:wrap;gap:.7rem}
.freccia{position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;width:22px;height:34px;
  border:1.5px solid rgba(246,238,227,.5);border-radius:11px;z-index:1}
.freccia::after{content:"";position:absolute;left:50%;top:7px;translate:-50% 0;width:3px;height:6px;
  border-radius:2px;background:#F6EEE3;animation:scendi 1.9s ease-in-out infinite}
@keyframes scendi{0%,100%{opacity:0;transform:translateY(0)}35%{opacity:1}70%{opacity:0;transform:translateY(11px)}}

/* ═══════ PULSANTI ═══════ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.86rem 1.5rem;border-radius:100px;
  font:inherit;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn--pieno{background:var(--ottone);color:#231409;box-shadow:0 10px 30px -14px rgba(201,138,62,.9)}
.btn--pieno:hover{background:var(--ottone-chiaro);transform:translateY(-2px)}
.btn--fil{border-color:currentColor;opacity:.9}
.btn--fil:hover{opacity:1;transform:translateY(-2px)}
.btn svg{width:1.05em;height:1.05em;fill:currentColor;flex:none}

/* ═══════ NASTRO — scorre sempre, non si ferma mai ═══════ */
.nastro{overflow:hidden;white-space:nowrap;padding:.9rem 0;border-block:1px solid var(--velo);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nastro__pista{display:inline-flex;gap:2.6rem;animation:scorri 38s linear infinite;will-change:transform}
.nastro__pista span{font-family:var(--titolo);font-size:1.28rem;letter-spacing:.05em;opacity:.55;
  display:inline-flex;align-items:center;gap:2.6rem}
.nastro__pista span::after{content:"◆";font-size:.42em;opacity:.6}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ═══════ SEZIONI — la colonna che si sposta ═══════ */
.sez{padding:clamp(4rem,10vh,7.5rem) 0;position:relative}
.sez__griglia{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center}
@media(min-width:900px){
  .sez__griglia{grid-template-columns:repeat(12,1fr)}
  .sez__testo{grid-column:1/span 5}
  .sez__media{grid-column:7/span 6}
  .sez--dx .sez__testo{grid-column:8/span 5;order:2}
  .sez--dx .sez__media{grid-column:1/span 6;order:1}
}
.sez h2{margin-bottom:1.1rem;text-wrap:balance;max-width:18ch}
.sez__testo p{color:var(--tenue);max-width:44ch}
.sez__testo .btn{margin-top:1rem}

/* ═══════ FOTOGRAFIE ═══════ */
.foto{border-radius:var(--r);overflow:hidden;box-shadow:var(--ombra);background-color:var(--velo)}
.foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.75,.2,1)}
.foto:hover img{transform:scale(1.045)}
.griglia{display:grid;gap:.85rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.g3{grid-template-columns:repeat(3,1fr)}}
.griglia .foto img{aspect-ratio:1/1;object-fit:cover}
.alta .foto img{aspect-ratio:3/4}

/* le tre rotture a tutta pagina */
.rottura{position:relative;height:clamp(46vh,58vh,66vh);overflow:hidden;isolation:isolate}
.rottura img{width:100%;height:100%;object-fit:cover}
.rottura__testo{position:absolute;inset:auto 0 0 0;padding:2.4rem 0;color:#F6EEE3;
  background:linear-gradient(180deg,transparent,rgba(20,12,8,.72))}
.rottura__testo p{font-family:var(--titolo);font-size:clamp(1.35rem,1rem + 1.6vw,2.2rem);margin:0;
  max-width:24ch;text-wrap:balance}

/* ═══════ LE TRE PORTE ═══════ */
.porte__scelta{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 2.4rem}
.porta{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.8rem 1.35rem;
  border:1px solid var(--velo);border-radius:var(--r);background:transparent;color:inherit;
  font:inherit;cursor:pointer;text-align:left;transition:border-color .25s,background-color .25s,transform .25s}
.porta b{font-weight:600;font-size:1rem}
.porta small{opacity:.62;font-size:.83rem;letter-spacing:.03em}
.porta:hover{transform:translateY(-2px);border-color:var(--ottone)}
.porta[aria-selected="true"]{background:var(--ottone);color:#231409;border-color:var(--ottone)}
.porta[aria-selected="true"] small{opacity:.8}
.pannello{display:grid;gap:clamp(1.6rem,3vw,2.8rem);align-items:center}
@media(min-width:900px){.pannello{grid-template-columns:1fr 1fr}}
.pannello h3{margin-bottom:.7rem}
.pannello ul{margin:0 0 1.3rem;padding:0;list-style:none}
.pannello li{position:relative;padding-left:1.35rem;margin-bottom:.4rem;color:var(--tenue)}
.pannello li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--ottone)}
html.js .pannello{display:none}
html.js .pannello.attivo{display:grid}

/* ═══════ I SETTE GIORNI ═══════ */
.giorni{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem .2rem 1.1rem;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.giorni::-webkit-scrollbar{display:none}
.giorno{flex:0 0 auto;scroll-snap-align:center;padding:.65rem 1.1rem;border-radius:100px;
  border:1px solid var(--velo);background:transparent;color:inherit;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;line-height:1.25;transition:border-color .2s,background-color .2s}
.giorno b{font-weight:600;font-size:.98rem}
.giorno small{opacity:.6;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.giorno:hover{border-color:var(--ottone)}
.giorno[aria-selected="true"]{background:var(--ottone);color:#231409;border-color:var(--ottone)}
.giorno[aria-selected="true"] small{opacity:.8}
.giorno__testo{border:1px solid var(--velo);border-radius:var(--r);padding:1.5rem 1.6rem;min-height:9.5rem}
.giorno__testo h3{margin-bottom:.5rem;color:var(--ottone)}
.giorno__testo p{margin:0;color:var(--tenue)}

/* ═══════ ELENCO EVENTI ═══════ */
.tag{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.8rem;padding:0;list-style:none}
.tag li{padding:.45rem 1rem;border:1px solid var(--velo);border-radius:100px;font-size:.9rem;color:var(--tenue)}

/* ═══════ I TRE PASSAGGI ═══════ */
.passi{display:grid;gap:1.6rem;counter-reset:p}
@media(min-width:760px){.passi{grid-template-columns:repeat(3,1fr);gap:2.2rem}}
.passo{counter-increment:p;padding-top:1.1rem;border-top:2px solid var(--ottone)}
.passo::before{content:"0" counter(p);font-family:var(--titolo);font-size:2.6rem;color:var(--ottone);
  display:block;line-height:1;margin-bottom:.5rem}
.passo h3{margin-bottom:.3rem}
.passo p{color:var(--tenue);margin:0}

/* ═══════ PREZZI ═══════ */
.prezzi{text-align:center;max-width:56ch;margin-inline:auto}
.prezzi p{color:var(--tenue)}
.prezzi .btn{margin-top:1.2rem}

/* ═══════ FAQ ═══════ */
.faq{max-width:62ch;margin-inline:auto}
.faq details{border-bottom:1px solid var(--velo)}
.faq summary{cursor:pointer;padding:1.15rem 2rem 1.15rem 0;font-weight:600;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.55rem;width:9px;height:9px;
  border-right:1.5px solid var(--ottone);border-bottom:1.5px solid var(--ottone);
  transform:rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 0 1.2rem;color:var(--tenue);margin:0}

/* ═══════ CONTATTI ═══════ */
.contatti{position:relative;isolation:isolate;color:#F6EEE3;text-align:center;
  padding:clamp(5rem,14vh,9rem) 0}
.contatti__sfondo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.contatti__sfondo img{width:100%;height:100%;object-fit:cover}
.contatti::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(18,10,6,.66)}
.contatti h2{margin-bottom:1rem}
.contatti .occhiello{opacity:.8}
.recapiti{display:flex;flex-direction:column;gap:.35rem;margin:1.6rem 0 2rem;font-size:1.12rem}
.recapiti a{text-decoration:none;border-bottom:1px solid rgba(246,238,227,.35);padding-bottom:2px;
  align-self:center}
.recapiti a:hover{border-color:var(--ottone)}

/* ═══════ FONDO PAGINA ═══════ */
.fondo{padding:2.6rem 0 3.2rem;border-top:1px solid var(--velo);font-size:.87rem;color:var(--tenue)}
.fondo__in{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:flex-start}
.fondo p{margin:0 0 .25rem}
.credit{margin-top:1.6rem;opacity:.72;font-size:.84rem}
.credit a{text-decoration:underline;text-underline-offset:2px}
.credit a:hover{opacity:1;color:var(--ottone)}

/* ═══════ COOKIE — una riga sola ═══════ */
.cookie{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;gap:1rem;align-items:center;
  justify-content:center;padding:.62rem 1rem;font-size:.82rem;line-height:1.35;
  background-color:var(--fondo);border-top:1px solid var(--velo);color:var(--inchiostro)}
.cookie a{text-decoration:underline;text-underline-offset:2px}
.cookie button{background:none;border:0;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.6;
  color:inherit;padding:0 .3rem}
.cookie button:hover{opacity:1}
@media(max-width:520px){.cookie{font-size:.75rem;padding:.5rem .7rem}}

/* ═══════════════════════════════════════════════════════════════════
   APPARIZIONI — 🔴 la regola che viene dal disastro della v1:
   senza JS TUTTO È VISIBILE. Lo stato nascosto esiste solo se app.js gira,
   e app.js garantisce di scoprirlo (observer + rete di sicurezza a 3s).
   ═══════════════════════════════════════════════════════════════════ */
html.js .riv{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.75,.2,1),transform .7s cubic-bezier(.22,.75,.2,1)}
html.js .riv.on{opacity:1;transform:none}
html.js .parola{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.75,.2,1)}
html.js .parola.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .riv,html.js .parola{opacity:1!important;transform:none!important;transition:none!important}
  .hero__sfondo img{animation:none;transform:none}
  .nastro__pista{animation-duration:240s}
  .freccia::after{animation:none;opacity:.8}
  .foto img{transition:none}
  .foto:hover img{transform:none}
}