/* ============================================================================
   LA VESTE DEL SITO — foglio unico (03/09/2026)

   Alessandro ha approvato l'impianto della home rifatta e ha chiesto:
   «ricorda di mettere anche gli effetti studiati nella veste del sito».
   Qui ci sono TUTTE E NOVE le tecniche di movimento approvate il 02/09
   (`veste.json` → movimento) e i componenti dell'accento di colore.

   Valori: 05_MARKETING/kit_grafico/veste.json. Nessun colore scritto a mano.
   ========================================================================= */
:root{
  --carta:#FFFFFF; --inchiostro:#141414; --grigio:#57514A; --filo:#E7E2DA;
  --ottanio:#1E5078; --ottanio-scuro:#0F2E46; --senape:#BE8228;
  --senape-scuro:#8F6118; --senape-chiaro:#E8B860;
  --ottanio-tinta:#EDF2F7; --senape-tinta:#F8F0DE;
}
*{box-sizing:border-box}
body{margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:'Montserrat',system-ui,sans-serif;font-weight:600;
  font-size:18px;line-height:1.62;-webkit-text-size-adjust:100%}
img{max-width:100%}
.w{max-width:760px;margin:0 auto;padding:0 24px}

/* ---- ACCENTO · la selezione ------------------------------------------- */
::selection{background:var(--senape);color:var(--inchiostro)}

/* ---- testata ----------------------------------------------------------- */
.testa{display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid var(--filo);background:var(--carta)}
.marchio{display:flex;align-items:baseline;gap:1px;font-size:17px;
  letter-spacing:-.01em;text-decoration:none;color:var(--inchiostro)}
.marchio b{font-weight:800}.marchio span{font-weight:500}
.menu{width:26px;height:2px;background:var(--inchiostro);position:relative;
  border:0;padding:0;cursor:pointer}
.menu::before,.menu::after{content:"";position:absolute;left:0;width:26px;
  height:2px;background:var(--inchiostro)}
.menu::before{top:-8px}.menu::after{top:8px}

/* ---- EFFETTO 6 · IL NASTRO — la fila di frasi che scorre ---------------- */
.nastro{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--filo);
  padding:11px 0;background:var(--carta)}
.nastro .treno{display:inline-block}
.nastro span{font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--inchiostro);padding:0 16px}
.nastro i{font-style:normal;color:var(--senape-scuro)}

/* ---- la foto che apre --------------------------------------------------- */
.cornice{overflow:hidden}
.apre{display:block;width:100%;height:auto;aspect-ratio:16/11;
  object-fit:cover;object-position:50% 35%}

/* ---- il bianco: centrato e respirato ----------------------------------- */
.dice{padding:46px 24px 50px;text-align:center;max-width:760px;margin:0 auto}
.occhiello{font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--senape-scuro);margin:0 0 20px}
h1{font-size:clamp(29px,8.2vw,47px);font-weight:800;line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;margin:0}
mark{background:var(--senape);color:var(--inchiostro);padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.voce{font-family:'Cardo',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(18px,4.5vw,23px);line-height:1.5;color:var(--grigio);
  margin:20px auto 0;max-width:30em}

/* ---- EFFETTO 7 · IL BOTTONE VIVO — il colore entra da sinistra ---------- */
.via{display:inline-block;margin-top:28px;padding:14px 26px;
  background:var(--ottanio-scuro);color:#fff;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  border-radius:2px;position:relative;overflow:hidden;z-index:0;border:0;
  cursor:pointer;font-family:inherit}
.via::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ottanio);transform:translateX(-101%);
  transition:transform .35s ease-out}
.via:hover::before,.via:focus-visible::before{transform:translateX(0)}
.via:focus-visible{outline:2px solid var(--ottanio);outline-offset:3px}
.oppure{margin:16px 0 0;font-size:14px;color:var(--grigio)}

/* ---- ACCENTO · il link marcato ----------------------------------------- */
.oppure a,.sez p a,.strada p a{color:var(--inchiostro);text-decoration:none;
  font-weight:700;padding:0 2px;
  background:linear-gradient(var(--senape),var(--senape)) no-repeat 0 100%/100% 2px;
  transition:background-size .25s ease-out}
.sez p a:hover,.strada p a:hover,.oppure a:hover{background-size:100% 100%}

/* ⚠️ i corpi cadono sulla SCALA della veste (11·14·18·23·29·37): nove
   gradini presi a occhio erano rumore tipografico.
/* ---- l'indice 01 02 03 -------------------------------------------------- */
/* ⚠️ 03/09: le celle toccavano il bordo (x=0). La griglia sta dentro la
   gabbia come tutto il resto: il margine di pagina non e' negoziabile. */
.indice{display:grid;grid-template-columns:repeat(3,1fr);
  max-width:760px;margin:0 auto;padding:0 18px;
  border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}
.indice a{padding:24px 6px 28px;text-align:center;text-decoration:none;
  border-right:1px solid var(--filo);color:var(--inchiostro)}
.indice a:last-child{border-right:0}
.indice .n{display:block;font-size:13px;font-weight:800;color:var(--ottanio);
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.indice .v{display:block;margin-top:14px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}

/* ---- le sezioni: il filetto firmato ------------------------------------ */
/* ⚠️ IL MARGINE DI PAGINA — qui il 03/09 ho rifatto lo STESSO difetto che
   Alessandro mi aveva gia' segnalato sul sito vecchio («Jesolo non e' troppo
   attaccato al bordo sinistro?»): `padding:50px 0 6px` azzera il margine
   laterale che `.w` aveva messo, e il testo finisce a zero dal bordo.
   Si scrive solo il verticale, il laterale non si tocca. */
section.sez{padding-top:50px;padding-bottom:6px}
h2{font-size:clamp(23px,5.6vw,29px);font-weight:800;letter-spacing:-.02em;
  line-height:1.08;margin:0;padding-top:.9rem;
  border-top:2px solid var(--inchiostro);
  background:linear-gradient(var(--senape),var(--senape)) no-repeat 0 0/64px 2px}
.sez p{color:var(--grigio);margin:16px 0 0;max-width:66ch}
.sez p b{color:var(--inchiostro)}

/* le voci come indice numerato */
/* le voci: il NUMERO le separa gia'. Le linee fra una e l'altra erano una
   cornice per ogni cosa — via, e al loro posto l'aria. */
.strade{margin:28px 0 0;counter-reset:s}
.strada{counter-increment:s;padding:0 0 30px}
.strada h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.01em}
.strada h3::before{content:counter(s,decimal-leading-zero);display:block;
  font-size:12px;color:var(--ottanio);letter-spacing:.06em;margin-bottom:7px;
  font-variant-numeric:tabular-nums}
.strada p{margin:8px 0 0;font-size:18px;color:var(--grigio)}

/* la frase forte */
/* ⚠️ 03/09, Alessandro: «guida si dominio no, ci sono linee sopra e sotto,
   serve?». No, e non servivano: aveva la riga nera del filetto ma senza il
   segno senape, quindi sembrava un titolo di sezione monco, ed era stretta
   fra la linea delle strade sopra e quella del titolo dopo — tre righe in
   pochi centimetri. La veste dice: «i raggruppamenti si raccontano con le
   DISTANZE, non con le cornici». Qui comanda l'aria: nessuna linea, e tanto
   spazio sopra e sotto perche' la frase resti sola e colpisca. */
.forte{margin:64px 0 56px;font-size:clamp(23px,5.6vw,29px);font-weight:800;
  letter-spacing:-.02em;line-height:1.12;color:var(--inchiostro);
  text-align:center;max-width:22ch;margin-inline:auto}

/* elenco numerato */
.righe{margin:22px 0 0;padding:0;list-style:none;counter-reset:r}
.righe li{counter-increment:r;padding:0 0 22px 34px;position:relative;
  font-size:18px;color:var(--grigio)}
.righe li::before{content:counter(r,decimal-leading-zero);position:absolute;
  left:0;top:14px;font-size:12px;font-weight:800;color:var(--ottanio);
  font-variant-numeric:tabular-nums}
.righe b{color:var(--inchiostro);font-weight:700}

/* ---- EFFETTO 5 · I NUMERI CHE SALGONO (recensioni) --------------------- */
.voto{display:flex;align-items:baseline;gap:12px;margin:26px 0 0}
.voto b{font-size:37px;font-weight:800;color:var(--ottanio);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stelle{font-size:11px;letter-spacing:.2em;color:var(--senape-scuro);
  font-weight:700;text-transform:uppercase}
.rec{margin:26px 0 0}
.rec p{margin:0;font-size:18px;color:var(--inchiostro);max-width:60ch}
.rec cite{display:block;margin-top:8px;font-style:normal;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grigio);font-weight:700}

/* ---- ACCENTO · LA STANZA, una sola per pagina -------------------------- */
.stanza{background:var(--ottanio);color:#fff;margin:54px 0 0;
  padding:44px max(24px,calc((100% - 760px)/2)) 48px;text-align:center}
.stanza .occhiello{color:var(--senape-chiaro)}
.stanza h2{color:#fff;border-top-color:#fff;display:inline-block;
  padding-top:1rem;
  background:linear-gradient(var(--senape-chiaro),var(--senape-chiaro)) no-repeat 50% 0/64px 2px}
.stanza .voce{color:#BFD7E8}
.stanza .via{background:transparent;box-shadow:inset 0 0 0 1px #fff}
.stanza .via::before{background:rgba(255,255,255,.16)}
.stanza .oppure{color:#BFD7E8}
.stanza .oppure a{color:#fff;
  background-image:linear-gradient(var(--senape-chiaro),var(--senape-chiaro))}

/* ---- ACCENTO · il numero fantasma (i passi di un percorso) ------------- */
.passi{counter-reset:p;margin:24px 0 0}
.passo{counter-increment:p;position:relative;overflow:hidden;
  padding:26px 0 28px;border-bottom:1px solid var(--filo)}
.passo::before{content:counter(p,decimal-leading-zero);position:absolute;
  right:-10px;bottom:-42px;z-index:0;pointer-events:none;
  font-size:132px;font-weight:900;line-height:1;color:var(--ottanio-tinta);
  letter-spacing:-.04em}
.passo > *{position:relative;z-index:1}
.passo h3{margin:0;font-size:23px;font-weight:800}
.passo p{margin:8px 0 0;font-size:18px;color:var(--grigio);max-width:56ch}

/* ---- ACCENTO · il capolettera (articoli) ------------------------------- */
.attacco:first-letter{font-family:'Cardo',Georgia,serif;font-weight:700;
  font-style:normal;color:var(--ottanio);float:left;line-height:.80;
  font-size:3.9em;padding:.02em .09em 0 0}

/* ---- EFFETTO 8 · LA FOTO CHE RISPONDE (schede) ------------------------- */
.arti{display:grid;gap:1px;background:var(--filo);border:1px solid var(--filo);
  margin:24px 0 0}
.arti a{background:var(--carta);padding:22px 20px;text-decoration:none;
  color:inherit;display:block}
.arti figure{margin:0 0 14px;overflow:hidden}
.arti img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s ease-out}
.arti a:hover img,.arti a:focus-within img{transform:scale(1.04)}
.arti h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.01em}
.arti p{margin:8px 0 0;font-size:18px;color:var(--grigio)}

/* ---- ACCENTO · la tinta di servizio ------------------------------------ */
.tinta{background:var(--senape-tinta);margin:54px 0 0;padding:36px 24px 40px;
  text-align:center}
.tinta p{margin:0 auto;max-width:34em;color:var(--inchiostro)}
.tinta .via{margin-top:20px}

/* ---- il piede: bianco, filetto firmato --------------------------------- */
.piede{padding:30px 24px 38px;border-top:2px solid var(--inchiostro);
  position:relative}
.piede::after{content:"";position:absolute;left:24px;top:2px;width:64px;
  height:2px;background:var(--senape)}
.piede .fila{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);font-weight:700;margin-top:18px}
.piede .sotto{margin:14px 0 0;color:var(--grigio);font-size:18px;max-width:52ch}

/* ============================================================================
   IL MOVIMENTO — le nove tecniche approvate il 02/09.
   Regola della veste: «il movimento e' un avverbio, non il verbo».
   `prefers-reduced-motion` spegne tutto e lascia lo stato finale.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){

  /* 1 · IL RESPIRO DELLA FOTO — 16 secondi, quasi non si vede */
  .apre{animation:sh-respira 16s ease-in-out infinite alternate}
  @keyframes sh-respira{from{transform:scale(1)}to{transform:scale(1.07)}}

  /* 2 · LA MARCATURA CHE SI ACCENDE — una volta sola */
  mark{background-image:linear-gradient(var(--senape),var(--senape));
    background-color:transparent;background-repeat:no-repeat;
    background-size:0% 100%;
    animation:sh-marca .5s ease-out .55s forwards}
  @keyframes sh-marca{to{background-size:100% 100%}}

  /* 4 · L'INGRESSO A SCALINI */
  .dice > *{opacity:0;transform:translateY(16px);
    animation:sh-su .55s ease-out forwards}
  .dice > *:nth-child(1){animation-delay:.10s}
  .dice > *:nth-child(2){animation-delay:.20s}
  .dice > *:nth-child(3){animation-delay:.30s}
  .dice > *:nth-child(4){animation-delay:.42s}
  .dice > *:nth-child(5){animation-delay:.52s}
  @keyframes sh-su{to{opacity:1;transform:none}}

  /* 6 · IL NASTRO — 26 secondi per giro, lento apposta */
  .nastro .treno{animation:sh-scorri 26s linear infinite}
  @keyframes sh-scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* 9 · IL FILO CHE SI TIRA — il segno senape cresce fino a 64 px */
  h2{background-size:0 2px;animation:sh-filo .6s ease-out .2s forwards}
  @keyframes sh-filo{to{background-size:64px 2px}}
}

@media (min-width:720px){
  .arti{grid-template-columns:1fr 1fr}
  .dice{padding-top:56px}
}


/* ---- LA FOTO DENTRO LA SEZIONE (03/09) --------------------------------
   Difetto trovato misurando: UNA sola foto in una pagina alta 5.300 px.
   E' il «si spegne a meta'» che Alessandro aveva gia' segnalato sul sito
   vecchio. La foto qui non decora: fa respirare e riporta il cane, che e'
   la cosa di cui parliamo. Rapporto max 2,1:1 come vuole la veste. */
.figura{margin:34px 0 0;overflow:hidden}
.figura img{display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;transition:transform .6s ease-out}
.figura:hover img{transform:scale(1.03)}
.figura figcaption{margin:10px 0 0;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grigio)}

/* i titoletti dalla settima sezione in poi: stesso peso di lettura, ma senza
   il filetto — quello firma la testata, non ogni blocco (03/09) */
.sez.seguito{padding-top:30px}
.sez.seguito h3{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:0}

/* ============================================================================
   INGRESSO A SCALINI — la tecnica n.4 della veste (veste.json → movimento)
   ⚠️ 03/09: il motore in veste.js aggiungeva gia' la classe `.vivo`, ma qui non
   c'era NESSUNA regola che le desse un aspetto: l'effetto era acceso e
   invisibile. Misurare «c'e' il codice» non basta — bisogna guardare.
   400-600 ms, ease-out, una volta sola; fra fratelli 80-120 ms di ritardo.
   ========================================================================== */
/* ⚠️ 03/09, DALLA PROVA: con `opacity:0` di partenza, se il JS non parte
   (il firewall del sito blocca script) la pagina resta BIANCA — il contenuto
   c'e' ma non si vede. Si nasconde solo dopo che il motore ha messo la classe
   `sh-vivo` sull'<html>: senza motore, tutto visibile. */
.sh-vivo [data-su]{opacity:0;transform:translateY(16px);
          transition:opacity .5s ease-out,transform .5s ease-out}
.sh-vivo [data-su].vivo{opacity:1;transform:none}
.sh-vivo [data-su] > *{opacity:0;transform:translateY(10px);
              transition:opacity .45s ease-out,transform .45s ease-out}
.sh-vivo [data-su].vivo > *{opacity:1;transform:none}
.sh-vivo [data-su].vivo > *:nth-child(1){transition-delay:.08s}
.sh-vivo [data-su].vivo > *:nth-child(2){transition-delay:.18s}
.sh-vivo [data-su].vivo > *:nth-child(3){transition-delay:.28s}
.sh-vivo [data-su].vivo > *:nth-child(4){transition-delay:.38s}
.sh-vivo [data-su].vivo > *:nth-child(n+5){transition-delay:.46s}
/* le «strade» sono fratelli fra loro: scalano anche loro */
.sh-vivo [data-su].vivo .strada{transition:opacity .45s ease-out,transform .45s ease-out}
@media (prefers-reduced-motion:reduce){
  [data-su],.sh-vivo [data-su] > *{opacity:1 !important;transform:none !important;
                          transition:none !important}
}

/* ============================================================================
   IL PANNELLO DEL MENU — 03/09
   ⚠️ L'icona c'era e non apriva niente: tre righe disegnate, zero navigazione.
   Il pannello lo apre veste.js con addEventListener (MAI `onclick=` nel
   markup: il firewall del sito lo blocca — reference_firewall_sito_blocca_script).
   ========================================================================== */
.pannello{position:fixed;inset:0;background:var(--carta,#fff);z-index:90;
          display:flex;flex-direction:column;justify-content:center;
          padding:0 max(18px,5vw);opacity:0;visibility:hidden;
          transition:opacity .28s ease-out}
.pannello.aperto{opacity:1;visibility:visible}
.pannello a{display:block;font-family:Montserrat,system-ui,sans-serif;
            font-weight:700;font-size:23px;line-height:1.25;letter-spacing:-.01em;
            color:var(--inchiostro,#12161c);text-decoration:none;padding:11px 0;
            border-bottom:1px solid rgba(18,22,28,.08)}
.pannello a:last-of-type{border-bottom:0}
.pannello a:hover{color:var(--ottanio,#14495e)}
.pannello .chiudi{position:absolute;top:18px;right:max(18px,5vw);width:34px;
                  height:34px;border:0;background:none;cursor:pointer;padding:0}
.pannello .chiudi::before,.pannello .chiudi::after{content:"";position:absolute;
  left:4px;top:16px;width:26px;height:2px;background:var(--inchiostro,#12161c)}
.pannello .chiudi::before{transform:rotate(45deg)}
.pannello .chiudi::after{transform:rotate(-45deg)}
.pannello .telefono{margin-top:22px;font-family:Cardo,Georgia,serif;
                    font-style:italic;font-size:18px;color:var(--ottanio,#14495e)}
body.bloccato{overflow:hidden}
@media (min-width:900px){.pannello a{font-size:29px}}
/* ⚠️ il numero nel pannello ereditava `.pannello a` (Montserrat 700): usciva in
   grassetto invece che in Cardo corsivo come vuole la veste. Visto guardando. */
.pannello .telefono a{font-family:Cardo,Georgia,serif;font-weight:400;
  font-style:italic;font-size:18px;color:var(--ottanio,#14495e);
  border:0;padding:0;display:inline}