/* ============================================================
   VALOA — art of love
   Design system + shared styles — LIGHT edition
   Palette: bianco #f8f4eb · bordeaux #6b1228 · oro #c9aa6a · nero #1d1d1d
   Motif: "il filo rosso dell'amore" — a red thread woven through the site.
   ============================================================ */

:root {
  /* Brand */
  --bianco: #f8f4eb;
  --bordeaux: #6b1228;
  --bordeaux-deep: #4a0c1b;
  --bordeaux-soft: #8a2540;
  --oro: #c9aa6a;
  --oro-deep: #9c7a39;
  --oro-light: #e3cf9f;
  --nero: #1d1d1d;

  /* Semantic — cream canvas, bordeaux & gold as accents */
  --bg: #f8f4eb;
  --bg-alt: #f1e9d9;
  --surface: #fffdf8;
  --surface-2: #fffffb;
  --ink: #24141a;
  --ink-soft: rgba(36, 20, 26, 0.79);
  --ink-faint: rgba(36, 20, 26, 0.50);
  --line: rgba(107, 18, 40, 0.16);
  --line-soft: rgba(36, 20, 26, 0.10);
  --line-gold: rgba(201, 170, 106, 0.6);
  --line-gold-soft: rgba(201, 170, 106, 0.42);

  /* Elevation + bordeaux glow */
  --shadow: 0 22px 50px -30px rgba(74,12,27,0.30), 0 6px 16px -10px rgba(74,12,27,0.12);
  --shadow-hover: 0 30px 64px -28px rgba(107,18,40,0.42), 0 0 46px -12px rgba(107,18,40,0.38);

  /* Type */
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* il tono delle frasi della hero: un terra caldo che sta dentro il gesso
     invece di stamparci sopra. Le varianti provate stanno nel racconto del
     17/09: bordeaux pieno #6b1228, gesso scuro #241a1e. */
  --inciso: #55443e;

  /* quanto e alta la fascia crema in cima: la misura main.js sul filetto.
     Il muro comincia da li, cosi la prima lastra entra intera invece di
     essere tagliata dal bordo dello schermo. */
  --banda-h: 8.4rem;

  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.has-smooth { scroll-behavior: auto; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--bordeaux); color: var(--bianco); }

/* Warm paper grain */
body::after {
  content: "";
  position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,-3%)}
}

main, .footer, .nav { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
section { position: relative; }
.section-pad { padding-block: clamp(5rem, 12vh, 11rem); position: relative; }
.section-pad > .wrap { position: relative; z-index: 1; }

/* ---------- Typography helpers ---------- */
.display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.02;
  /* 10/10, Francesco: i titoli tutti in maiuscolo. Il maiuscolo vuole aria
     fra le lettere, altrimenti si impasta. */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-wrap: balance;   /* righe pari: niente parola sola in fondo */
  color: var(--ink);
}
/* keep serif sub-headings substantial (never brittle) */
.rcard h3, .ocard h3, .pcard__body h3, .wizard__q, .result__row h4,
.card-panel__head h3, .info-block a, .info-block p, .gfcard__result b { font-weight: 600; }
.italic { font-style: italic; }
/* 10/10, Francesco: le parole importanti in bordeaux pieno, niente sfumatura */
.gold { color: var(--bordeaux); }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bordeaux);
  display: inline-flex; align-items: center; gap: 1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--oro-deep); }
.eyebrow.center::after { content: ""; width: 34px; height: 1px; background: var(--oro-deep); }
.eyebrow.center { justify-content: center; }
.lead { color: var(--ink-soft); font-weight: 400; font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 46ch; }

/* ---------- Bottoni ----------
   Pieni di bordeaux con la scritta oro, angoli smussati, e al passaggio
   il fondo scende sul bordeaux scuro: l'oro ci sta a 5,42:1 sul primo e
   a 6,94:1 sul secondo, quindi diventa più leggibile e non meno.
   Il padding a destra compensa lo spazio che la spaziatura fra lettere
   aggiunge in coda: senza, la scritta risulta spostata a sinistra. */
/* L'INVITO E INCISO, NON STAMPATO.
   Prima era un rettangolo bordeaux pieno con angoli arrotondati: la cosa piu
   da template di tutta la pagina, e in contrasto con le frasi che ora sono
   solo contorno. Adesso il bottone e dello stesso materiale del testo:
   nessun riempimento, un filetto sottile, la parola nel tono del gesso.
   Al passaggio del mouse il bordeaux sale dal basso e la parola diventa oro
   — il riempimento e la ricompensa del gesto, non lo stato di partenza.
   Niente raggio: sul gesso un angolo arrotondato non esiste.
   .btn.solid resta pieno per il carrello e il pagamento, dove il bottone
   deve farsi vedere e non fare l'elegante. */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.85em;
  padding: 1.15em 2.6em;
  padding-right: calc(2.6em + 0.28em);
  border-radius: 0;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  background: none;
  border: 1px solid var(--line);
  color: var(--inciso);
  overflow: hidden; isolation: isolate;
  transform: translateZ(0);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease),
              transform 0.28s var(--ease);
}
.btn > span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.7em; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--bordeaux);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.btn:hover, .btn:focus-visible, .btn:active {
  color: var(--oro); border-color: var(--bordeaux);
}

/* Reazione al tocco. Il bottone cresce avvicinandosi e cresce ancora
   sotto la pressione: la transizione dell'ingrandimento è più corta di
   quella del colore, così la mano sente subito la risposta.
   L'ombra si scalda sul bordeaux invece che sul nero, per non sporcare
   il crema del fondo. */
.btn:hover, .btn:focus-visible {
  transform: scale(1.035);
  box-shadow: 0 8px 22px rgba(107, 18, 40, 0.22);
}
.btn:active {
  transform: scale(1.075);
  box-shadow: 0 12px 30px rgba(107, 18, 40, 0.28);
  transition-duration: 0.12s;
}
.btn:hover::before, .btn:focus-visible::before, .btn:active::before { transform: translateY(0); }
.btn .arrow { transition: transform 0.45s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

/* Le vecchie varianti restano valide nel markup e non cambiano più niente:
   i bottoni sono uno solo. */
.btn.solid, .btn.ghost { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--oro); }
.btn.solid::before, .btn.ghost::before { background: var(--bordeaux-deep); }
.btn.solid:hover, .btn.ghost:hover { color: var(--oro-light); border-color: var(--bordeaux-deep); }
.btn-lg { padding: 1.4em 3.4em; padding-right: calc(3.4em + 0.3em); font-size: 0.82rem; letter-spacing: 0.3em; border-radius: 12px; }

/* Heartbeat — cards pulse like a beating heart on hover, with the glow beneath
   flaring in rhythm. Quick double-beat (~0.73s) then a ~2s pause. */
@keyframes heartbeat {
  0%        { transform: translateY(-6px) scale(1);     box-shadow: 0 22px 50px -30px rgba(74,12,27,0.28), 0 0 24px -14px rgba(107,18,40,0.35); }
  6%        { transform: translateY(-6px) scale(1.055);  box-shadow: 0 32px 64px -26px rgba(74,12,27,0.42), 0 0 64px -6px rgba(107,18,40,0.85); }
  12%       { transform: translateY(-6px) scale(1.012);  box-shadow: 0 24px 52px -30px rgba(74,12,27,0.3),  0 0 30px -12px rgba(107,18,40,0.45); }
  18%       { transform: translateY(-6px) scale(1.055);  box-shadow: 0 32px 64px -26px rgba(74,12,27,0.42), 0 0 64px -6px rgba(107,18,40,0.85); }
  27%, 100% { transform: translateY(-6px) scale(1);     box-shadow: 0 22px 50px -30px rgba(74,12,27,0.28), 0 0 24px -14px rgba(107,18,40,0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .rcard:hover, .ocard:hover, .fcard:hover, .pcard:hover { animation: none !important; transform: translateY(-4px); }
  /* niente ingrandimento: resta il cambio di colore, che basta a dire
     che il bottone ha risposto */
  .btn:hover, .btn:focus-visible, .btn:active { transform: none; box-shadow: none; }
  .btn::before { transition: none; }
  .fbtn:hover, .fbtn:focus-visible, .fbtn:active { transform: none; }
}

/* Text link with underline sweep */
.tlink {
  position: relative; display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bordeaux);
  padding-bottom: 4px; font-weight: 500;
}
.tlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink .arrow { transition: transform 0.4s var(--ease); }
.tlink:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Intro loader
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--bg); display: grid; place-items: center;
}
.loader__inner { text-align: center; animation: loaderIn 1s var(--ease) both; }
@keyframes loaderIn { from { opacity: 0; transform: translateY(12px); } }
.loader__logo { width: min(230px, 60vw); height: auto; margin: 0 auto 1.9rem; display: block; }
.loader__word { font-family: var(--serif); font-size: 2.4rem; letter-spacing: 0.5em;
  text-indent: 0.5em; color: var(--bordeaux); }
.loader__tag { margin-top: 0.7rem; font-size: 0.66rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--oro-deep); }
.loader__line { width: 200px; height: 1px; background: var(--line); margin: 2rem auto 0; overflow: hidden; }
.loader__line i { display: block; height: 100%; width: 0; background: var(--bordeaux); transition: width 0.2s linear; }
.loader.done { opacity: 0; visibility: hidden; transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease); }

/* A RIPOSO — due ponti: il nome grande e centrato, sotto un filetto e le voci.
   Il nome e l'apertura della pagina, non un logo in un angolo: a 56px il
   wordmark si legge, a 30px era un blocco.
   A SCROLL — la testa si chiude in una riga: nome piccolo a sinistra, voci a
   destra. Le pagine interne partono gia con .scrolled. */
.nav::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: -1;
  height: var(--banda-h, 8.4rem);
  /* 12/10: la carta del cervo, come il muro e la tela delle altre pagine
     (era var(--bg), il panna: una fascia di un altro colore sopra il muro) */
  background: #e3d6cc;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 10px 30px -26px rgba(74,12,27,0.35);
  transition: height 0.55s var(--ease);
}
/* A testa chiusa la fascia si stringe con lei, invece di restare alta come
   prima. Il muro continua a partire da --banda-h: sotto la fascia c'e la
   stessa carta crema, quindi il gradino non si vede. */
.nav.scrolled::before { height: var(--banda-compatta, 4.4rem); }
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 5000;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad-x);
  transition: padding 0.5s var(--ease);
}
.nav__row { position: relative; display: flex; align-items: center; justify-content: center;
  padding-block: 1.05rem 0; transition: padding 0.5s var(--ease); }

/* il lockup: nome e payoff impilati, come BOGGI / MILANO */
.brand { display: grid; justify-items: center; gap: 0.5rem;
  transition: transform 0.75s var(--ease); }
.brand__logo { height: 50px; width: auto; display: block; transition: height 0.5s var(--ease); }
.brand__tag {
  font-family: var(--serif); font-weight: 500; font-size: 0.625rem;
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--oro-deep);
  padding-left: 0.5em; white-space: nowrap;
  transition: font-size 0.5s var(--ease), letter-spacing 0.5s var(--ease);
}

.nav__tools { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; gap: 1.3rem; align-items: center; }
.nav__tools button { color: var(--ink-soft); transition: color 0.4s var(--ease); font-size: 1rem; }
.nav__tools button:hover { color: var(--bordeaux); }

/* le voci: lo stesso serif dei titoli, maiuscolo e spaziato. Niente Jost
   nella testa: un carattere solo. */
.nav__links {
  display: flex; justify-content: center; gap: clamp(1.4rem, 2.6vw, 2.9rem);
  margin-top: 1.2rem; padding-block: 0.8rem;
  transition: margin 0.75s var(--ease), padding 0.75s var(--ease), border-color 0.5s var(--ease);
}
.nav__links a {
  font-family: var(--serif); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  position: relative; padding: 0.2rem 0; white-space: nowrap;
  transition: color 0.4s var(--ease), font-size 0.5s var(--ease);
}
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -0.1rem; height: 1px; width: 100%;
  background: var(--bordeaux); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.nav__links a:hover, .nav__links a.active { color: var(--bordeaux); }
.nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); transform-origin: left; }

/* ---- lo stato compatto ----
   Il movimento e uno solo per elemento, e nessuno dei due si sposta di lato
   se non deve: le voci SALGONO (si stringono i margini sopra e sotto), il
   nome SCIVOLA A SINISTRA (una translateX misurata da main.js, perche in CSS
   la distanza dal centro al bordo non si sa). Le voci restano centrate. */
.nav.scrolled { background: none; }
.nav.scrolled .nav__inner { padding-block: 1rem 0.95rem; }
.nav.scrolled .nav__row { padding-block: 0; }
.nav.scrolled .brand { transform: translateX(var(--brand-x, 0px)); gap: 0.16rem; }
.nav.scrolled .brand__logo { height: 25px; }
.nav.scrolled .brand__tag { font-size: 0.4rem; letter-spacing: 0.3em; }
.nav.scrolled .nav__links {
  /* margine negativo: le voci finiscono sulla stessa riga del nome invece di
     restare su un secondo rigo. Sono centrate, il nome e a sinistra: non si
     toccano. */
  margin-top: -1.95rem; padding-block: 0; border-top-color: transparent;
}
.nav.scrolled .nav__links a { font-size: 0.82rem; letter-spacing: 0.22em; }

/* mentre main.js misura, niente transizioni: sennò si vede lo scatto */
.nav--misura, .nav--misura * { transition: none !important; }

/* il menu: vedi IL MENU LIQUIDO in fondo al file */

/* ============================================================
   Reveal animation base (only when JS active)
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(38px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: 0.1s; }
.js .reveal-d2 { transition-delay: 0.2s; }
.js .reveal-d3 { transition-delay: 0.3s; }
.js .reveal-d4 { transition-delay: 0.4s; }

.js .line-mask { overflow: hidden; }
.js .line-mask > * { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.js .line-mask.in > * { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .line-mask > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  body::after { animation: none; }
}

/* ============================================================
   Shared section primitives (home + inner pages)
   ============================================================ */
.shead { text-align: center; max-width: 64rem; margin: 0 auto clamp(3rem, 6vh, 5rem); }
.shead h2 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); margin-top: 1.3rem; }
.shead p { margin: 1.4rem auto 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split.rev .split__media { order: 2; }
.split__body h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin: 1.3rem 0; }
.split__body .lead { margin-bottom: 2.2rem; }
.split__stats { display: flex; gap: 2.5rem; margin: 2rem 0 2.4rem; }
.split__stats b { display: block; font-family: var(--serif); font-size: 2.2rem; color: var(--bordeaux); line-height: 1; }
.split__stats span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.fcard { position: relative; border: 1px solid var(--line-soft); padding: 2.4rem; background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.fcard::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.5s var(--ease);
  background: radial-gradient(120% 90% at 50% 0%, rgba(107,18,40,0.10), transparent 65%); }
.fcard > * { position: relative; z-index: 1; }
.fcard:hover { border-color: var(--bordeaux); box-shadow: var(--shadow-hover); animation: heartbeat 2.7s ease-in-out infinite; }
.fcard:hover::before { opacity: 1; }
.fcard__ico { width: 44px; height: 44px; display: grid; place-items: center; color: var(--bordeaux); border: 1px solid var(--line); border-radius: 50%; margin-bottom: 1.4rem; transition: background 0.5s var(--ease), color 0.5s var(--ease); }
.fcard:hover .fcard__ico { background: var(--bordeaux); color: var(--bianco); }
.fcard h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 0.6rem; color: var(--ink); }
.fcard p { color: var(--ink-soft); font-size: 0.9rem; }

.manifesto { text-align: center; background:
  radial-gradient(60% 55% at 50% 50%, rgba(107,18,40,0.07), transparent 70%); overflow: hidden; }
.manifesto h2 { font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1.02; margin-bottom: 2cm; }
.manifesto p { margin: 1.8rem auto 2.6rem; }

@media (max-width: 980px) {
  .split, .split.rev .split__media { grid-template-columns: 1fr; order: 0; }
  .split.rev .split__body { order: 2; }
  .feat { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer — bordeaux anchor (the thread's final knot)
   ============================================================ */
.footer { position: relative; z-index: 1; background: var(--bordeaux); color: var(--bianco);
  padding-block: clamp(3.5rem, 8vh, 6rem) 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 3rem; }
.footer__brand .brand__word { font-size: 2rem; color: var(--bianco); }
.footer__logo { height: 40px; width: auto; display: block; }
.footer__brand p { margin-top: 1.3rem; color: rgba(248,244,235,0.72); max-width: 30ch; font-size: 0.92rem; }
.footer h4 { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oro-light); margin-bottom: 1.3rem; }
.footer li { margin-bottom: 0.75rem; }
.footer li a { color: rgba(248,244,235,0.72); font-size: 0.92rem; transition: color 0.35s var(--ease); }
.footer li a:hover { color: var(--bianco); }
.newsletter { display: flex; border-bottom: 1px solid rgba(248,244,235,0.3); }
.newsletter input { flex: 1; background: none; border: none; color: var(--bianco); padding: 0.7rem 0; font-family: var(--sans); font-size: 0.9rem; outline: none; }
.newsletter input::placeholder { color: rgba(248,244,235,0.45); }
.newsletter button { color: var(--oro-light); font-size: 1.1rem; }
/* la nota sotto il campo era ink-faint: scuro su bordeaux, illeggibile */
.newsletter__note { color: rgba(248,244,235,0.55); font-size: 0.78rem; margin-top: 0.8rem; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 3.5rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(248,244,235,0.2); color: rgba(248,244,235,0.6); font-size: 0.75rem; letter-spacing: 0.06em; }
.footer__social { display: flex; gap: 1.4rem; }
.footer__social a { color: rgba(248,244,235,0.72); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.footer__social a:hover { color: var(--bianco); }
.footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.footer__legal a { color: rgba(248,244,235,0.6); font-size: 0.75rem; letter-spacing: 0.04em; }
.footer__legal a:hover { color: var(--bianco); text-decoration: underline; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .nav__links, .nav__tools .hide-sm { display: none; }
  .nav__burger { display: inline-flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ============================================================
   Carrello (drawer)
   ============================================================ */
.cart-overlay { position: fixed; inset: 0; z-index: 6000; background: rgba(36,20,26,0.4); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease); }
.cart-overlay.show { opacity: 1; visibility: visible; }
.cart { position: fixed; top: 0; right: 0; z-index: 6100; width: min(420px, 92vw); height: 100%; background: var(--bg);
  border-left: 1px solid var(--line-soft); box-shadow: -20px 0 60px -30px rgba(74,12,27,0.5);
  transform: translateX(100%); transition: transform 0.5s var(--ease); display: flex; flex-direction: column; }
.cart.open { transform: none; }
/* da chiuso il carrello sta fuori schermo, ma la sua ombra entrava lo stesso:
   era la fascia scura sul bordo destro di ogni pagina */
.cart:not(.open) { box-shadow: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line-soft); }
.cart__head h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.cart__close { font-size: 1.1rem; color: var(--ink-soft); }
.cart__close:hover { color: var(--bordeaux); }
.cart__items { flex: 1; overflow-y: auto; padding: 0.6rem 1.6rem; }
.cart__empty { color: var(--ink-faint); text-align: center; padding: 3rem 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.citem { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.8rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.citem__info strong { display: block; font-weight: 500; font-size: 0.95rem; }
.citem__info span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro-deep); }
.citem__qty { display: flex; align-items: center; gap: 0.4rem; }
.citem__qty button { width: 24px; height: 24px; border: 1px solid var(--line); color: var(--bordeaux); border-radius: 50%; line-height: 1; }
.citem__qty b { min-width: 1.2em; text-align: center; font-weight: 500; }
.citem__price { font-family: var(--serif); color: var(--bordeaux); font-weight: 600; }
.citem__del { color: var(--ink-faint); }
.citem__del:hover { color: var(--bordeaux); }
.cart__foot { padding: 1.4rem 1.6rem; border-top: 1px solid var(--line); }
.cart__sub { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.cart__sub b { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); }
.cart__note { font-size: 0.74rem; color: var(--ink-faint); margin-bottom: 1rem; }
.cart__checkout { width: 100%; justify-content: center; }
.cart-badge { position: absolute; top: -8px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--bordeaux); color: var(--bianco); font-size: 0.6rem; font-weight: 500; display: none; align-items: center; justify-content: center; line-height: 16px; }
.cart-badge.show { display: inline-flex; }

/* il caricamento vero (02/10): il numero conta i byte del muro arrivati */
.loader__num { margin-top: 1.4rem; font-family: var(--serif); font-weight: 500; font-size: clamp(3.4rem, 7vw, 5.6rem); line-height: 1;
  color: var(--bordeaux); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.loader__num small { font-size: 0.35em; margin-left: 0.15em; color: var(--oro-deep); vertical-align: super; }

/* IL LOGO SI RIEMPIE (02/10, scelto da Francesco): il logo e un ombra chiara
   e il bordeaux sale dal basso dentro le lettere, quanto il caricamento vero */
.loader--logo { display: grid; place-items: center; }
.loader__pila { position: relative; width: min(22rem, 70vw); aspect-ratio: 230 / 150; }
.loader__ombra, .loader__pieno { position: absolute; inset: 0;
  -webkit-mask: url(../assets/valoy-logo-stacked.svg) center / contain no-repeat;
  mask: url(../assets/valoy-logo-stacked.svg) center / contain no-repeat; }
.loader__ombra { background: rgba(107, 18, 40, 0.12); }
.loader__pieno { background: linear-gradient(to top, var(--bordeaux) var(--p, 0%), transparent var(--p, 0%)); }
.loader--logo .loader__num { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); margin: 0;
  font-size: 1.1rem; letter-spacing: 0.3em; color: var(--ink-soft); }
/* il numero subito sotto il logo, non in fondo allo schermo */
.loader--logo { grid-auto-flow: row; align-content: center; gap: 2.2rem; }
.loader--logo .loader__num { position: static; transform: none; text-align: center; }

/* SIPARIO (02/10): a caricamento finito il logo pieno svanisce e due ante
   panna si aprono ai lati: dietro c e gia il muro */
.loader--logo { background: transparent; }
.loader__anta { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--bg); z-index: 0;
  transition: transform 1.3s cubic-bezier(.76, 0, .24, 1); }
.loader__anta--s { left: 0; } .loader__anta--d { right: 0; }
.loader--logo .loader__pila, .loader--logo .loader__num { position: relative; z-index: 1; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.loader--logo.apri .loader__pila, .loader--logo.apri .loader__num { opacity: 0; transform: scale(.96); }
.loader--logo.apri .loader__anta--s { transform: translateX(-100%); transition-delay: .35s; }
.loader--logo.apri .loader__anta--d { transform: translateX(100%); transition-delay: .35s; }
.loader--logo.done { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .loader__anta { transition: none; } }

/* GIA ENTRATO (03/10): il logo che si riempie si vede una volta sola, all
   ingresso nel sito. Cambiando pagina resta solo il velo panna, che svanisce
   appena il muro e disegnato (i muri sono gia in cache, js/caricamento.js) */
.gia-entrato .loader--logo .loader__pila, .gia-entrato .loader--logo .loader__num { display: none; }
.gia-entrato .loader__anta { transition: opacity .55s var(--ease); }
.gia-entrato .loader--logo.apri .loader__anta--s, .gia-entrato .loader--logo.apri .loader__anta--d { transform: none; opacity: 0; transition-delay: 0s; }

/* LE FRASI DEL CARICAMENTO (03/10): sotto il logo, una alla volta */
.loader__frasi { position: relative; z-index: 1; width: min(36rem, 88vw); height: 5.6rem; display: grid; place-items: center;
  transition: opacity .5s var(--ease), transform .8s var(--ease); }
.loader--logo.apri .loader__frasi { opacity: 0; transform: scale(.96); }
.loader__frasi .frase { grid-area: 1 / 1; margin: 0; text-align: center; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--ink); }
.loader__frasi .riga { display: block; }
.loader__frasi em { font-style: italic; color: var(--bordeaux); }
.loader__frasi .parola { display: inline-block; overflow: hidden; padding: 0 .04em .14em; margin-bottom: -.14em; vertical-align: top; }
.loader__frasi .parola > span { display: inline-block; transform: translateY(105%); opacity: 0;
  transition: transform 1s cubic-bezier(.2, 1.15, .3, 1), opacity .6s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.loader__frasi .frase.entra .parola > span { transform: none; opacity: 1; }
.loader__frasi .frase.esce { transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease);
  opacity: 0; transform: translateY(-.5em); filter: blur(5px); }
.loader__frasi .frase.esce .parola > span { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .loader__frasi .parola > span { transform: none; transition: opacity .6s; transition-delay: 0s; }
  .loader__frasi .frase.esce { transform: none; filter: none; }
}
/* il numero tornava a destra: la vecchia regola left:50% restava attiva con position:relative */
.loader--logo .loader__num { left: auto; bottom: auto; }

/* TELEFONO, niente che sbordi (03/10): le colonne delle griglie possono
   stringersi sotto la larghezza del loro contenuto; prima la scheda prodotto,
   le lastre "Su misura" della home e il promemoria uscivano a destra */
@media (max-width: 980px) {
  .pdp__top, .cartellini, .split { grid-template-columns: minmax(0, 1fr) !important; }
  .pdp__top > *, .cartellini > *, .split > * { min-width: 0; max-width: 100%; }
  .pdp__media { margin-inline: auto; }
}
@media (max-width: 600px) { .cal__head { flex-wrap: wrap; gap: 0.8rem 1.2rem; } }

/* TELEFONO (03/10): footer su due colonne, il marchio e la newsletter larghi;
   le teste dei pannelli vanno a capo invece di schiacciarsi */
@media (max-width: 700px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.8rem 1.2rem !important; }
  .footer__brand, .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__bottom { gap: 0.8rem; }
  .card-panel__head { flex-direction: column; align-items: flex-start !important; gap: 0.35rem; }
  .scelto__azione { opacity: 1 !important; translate: 0 0 !important; }
}
@media (max-width: 700px) {
  .scelto__azione { white-space: normal !important; line-height: 1.35; letter-spacing: 0.06em !important; }
  .pdp__add { letter-spacing: 0.1em !important; }
}

/* CERCA (03/10): il velo panna con il campo grande e i risultati in lastre */
.cerca { position: fixed; inset: 0; z-index: 3000; background: rgba(248, 244, 235, 0.9);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0; transition: opacity .35s var(--ease); overflow-y: auto; }
.cerca.aperto { opacity: 1; }
html.cerca-aperta { overflow: hidden; }
.cerca__dentro { width: min(46rem, 100% - 2.5rem); margin: clamp(5rem, 14vh, 9rem) auto 4rem; font-family: var(--serif);
  transform: translateY(16px); transition: transform .6s cubic-bezier(.2, 1.1, .3, 1); }
.cerca.aperto .cerca__dentro { transform: none; }
.cerca__riga { display: flex; align-items: center; gap: 1rem; border-bottom: 1.5px solid var(--bordeaux); padding-bottom: 0.5rem; }
.cerca__campo { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: var(--serif); font-style: italic;
  font-size: clamp(2rem, 6vw, 3.4rem); color: var(--ink); padding: 0.2rem 0; }
.cerca__campo::placeholder { color: rgba(36, 20, 26, 0.45); }
.cerca__campo::-webkit-search-cancel-button { display: none; }
.cerca__chiudi { background: none; border: 0; cursor: pointer; font-family: var(--serif); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #765720; padding: 0.4rem 0; }
.cerca__chiudi:hover { color: var(--bordeaux); }
.cerca__lista { margin-top: 1.8rem; display: grid; gap: 0.6rem; }
.cerca__etichetta { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #765720; margin-bottom: 0.4rem; }
.cerca__suggerimenti { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cerca__suggerimenti a { font-size: 1.15rem; color: var(--bordeaux); border: 1.5px solid var(--bordeaux); border-radius: 999px; padding: 0.55em 1.2em;
  background: var(--bg-alt); transition: background .3s, color .3s; }
.cerca__suggerimenti a:hover { background: var(--bordeaux); color: var(--oro-light); }
.cerca__voce { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.6rem 1rem 0.6rem 0.6rem;
  background: rgba(255, 253, 248, 0.7); border: 1px solid rgba(107, 18, 40, 0.14); color: var(--ink);
  transition: border-color .3s, transform .45s cubic-bezier(.2, 1.1, .3, 1), box-shadow .4s; }
.cerca__voce:hover, .cerca__voce:focus-visible { border-color: var(--bordeaux); transform: translateX(4px); box-shadow: 0 14px 28px -20px rgba(74, 12, 27, 0.5); outline: none; }
.cerca__voce img, .cerca__segno { width: 4.2rem; height: 4.2rem; object-fit: cover; display: block; background: var(--bg-alt); }
.cerca__testo { display: flex; flex-direction: column; min-width: 0; }
.cerca__testo small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #765720; }
.cerca__testo b { font-size: 1.3rem; font-weight: 500; line-height: 1.15; }
.cerca__prezzo { font-size: 1.1rem; font-weight: 600; color: var(--bordeaux); white-space: nowrap; }
.cerca__vuoto { font-size: 1.2rem; color: rgba(36, 20, 26, 0.85); }
.cerca__vuoto a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .cerca__dentro { margin-top: 5.5rem; }
  .cerca__voce { grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 0.8rem; }
  .cerca__voce img, .cerca__segno { width: 3.4rem; height: 3.4rem; }
  .cerca__testo b { font-size: 1.1rem; }
  .cerca__prezzo { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .cerca, .cerca__dentro, .cerca__voce { transition: none; } }
.cerca__segno { display: grid !important; place-items: center; font-size: 1.8rem; color: var(--bordeaux); border: 1px solid rgba(107, 18, 40, 0.18); }

/* ============================================================
   LA NAVIGAZIONE A (03/10, scelta di Francesco dalla prova
   _rilievo/_studio/navigazione.html). Le voci in una pillola di vetro con
   il filo bordeaux; la voce attiva in velluto bordeaux che scivola a molla
   sotto la mano (js/main.js).
   COMPUTER: resta il movimento di prima. La home apre con il nome grande al
   centro e la pillola, lunga, sotto; scorrendo la pillola sale sulla riga del
   nome e il nome scivola a sinistra. Le pagine interne nascono gia chiuse.
   TELEFONO: una riga sola, nome a sinistra, Menu apre una lastra dall angolo.
   ============================================================ */
.nav__links, .nav.scrolled .nav__links { position: relative; padding: 0.35rem; gap: 0.3rem; border-radius: 999px; border: 1.5px solid var(--oro);   /* 10/10: contorno oro, non piu bordeaux */
  background: rgba(255, 253, 248, 0.6); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: none; }   /* 10/10: niente luce sotto la pillola */
.nav__links a, .nav.scrolled .nav__links a { position: relative; z-index: 1; padding: 0.6rem 1.55rem; border-radius: 999px;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
  color: var(--oro-deep, #765720); transition: color 0.35s; }
.nav__links a::after { display: none; }
.nav .nav__links a:hover, .nav.scrolled .nav__links a:hover { color: var(--bordeaux); }
.nav .nav__links a.active, .nav .nav__links a.sotto, .nav.scrolled .nav__links a.active, .nav.scrolled .nav__links a.sotto { color: var(--bordeaux); }
.nav .nav__links:hover a.active:not(.sotto), .nav.scrolled .nav__links:hover a.active:not(.sotto) { color: var(--oro-deep, #765720); }
/* 10/10, Francesco: al posto del velluto bordeaux una linea oro sotto la voce,
   che scivola a molla come prima */
.nav__scivola { position: absolute; top: 0.35rem; bottom: 0.35rem; left: 0; width: 0; pointer-events: none; opacity: 0;
  transition: transform 0.6s cubic-bezier(.2, 1.1, .3, 1), width 0.6s cubic-bezier(.2, 1.1, .3, 1), opacity 0.3s; }
.nav__links.pronta .nav__scivola { opacity: 1; }
.nav__scivola::after { content: ""; position: absolute; left: 1.3rem; right: 1.3rem; bottom: 0.32rem; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--oro-deep), var(--oro) 50%, var(--oro-deep)); }
.nav__tools button { font-size: 1.05rem; color: var(--ink); }

/* computer: la testa a due piani di prima, con la pillola al posto delle voci */
@media (min-width: 861px) {
  .nav::before { height: calc(var(--banda-h, 8.4rem) + 5.2rem); border-bottom: 0; box-shadow: none;
    background: linear-gradient(to bottom, rgba(227, 214, 204, 0.97) 0%, rgba(227, 214, 204, 0.85) 62%, rgba(227, 214, 204, 0) 100%); }
  .nav.scrolled::before { height: 6.6rem; }
  .nav__links { align-self: center; margin-top: 1.1rem; }
  /* chiusa: la pillola sale e si centra sulla riga del nome */
  .nav.scrolled .nav__inner { padding-block: 0.9rem 0.85rem; }
  .nav.scrolled .nav__links { margin-top: -2.75rem; }
}

/* telefono: una riga sola */
@media (max-width: 860px) {
  .nav::before, .nav.scrolled::before { height: 5rem; border-bottom: 0; box-shadow: none;
    background: linear-gradient(to bottom, rgba(227, 214, 204, 0.97) 0%, rgba(227, 214, 204, 0.78) 55%, rgba(227, 214, 204, 0) 100%); }
  .nav__inner, .nav.scrolled .nav__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding-block: 0.95rem; }
  .nav__row, .nav.scrolled .nav__row { display: contents; }
  .nav .brand, .nav.scrolled .brand { grid-column: 1; grid-row: 1; justify-self: start; justify-items: start; transform: none !important; gap: 0.18rem; }
  .nav .brand__logo, .nav.scrolled .brand__logo { height: 26px; }
  .nav .brand__tag, .nav.scrolled .brand__tag { font-size: 0.42rem; letter-spacing: 0.32em; padding-left: 0.1em; }
  .nav__tools { position: static; transform: none; grid-column: 2; grid-row: 1; justify-self: end; gap: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .nav__scivola { transition: opacity 0.2s; } }

/* ============================================================
   IL CARRELLO NELLO STILE NUOVO (03/10): una lastra di vetro panna che entra
   da destra a molla, con il filo bordeaux sul bordo; tutto nel carattere del
   sito; quantita in pillola; il bottone del checkout in velluto bordeaux.
   ============================================================ */
.cart-overlay { background: rgba(36, 20, 26, 0.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cart { background: rgba(251, 247, 240, 0.9); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-left: 1.5px solid var(--bordeaux); font-family: var(--serif); width: min(440px, 94vw);
  transition: transform 0.7s cubic-bezier(.2, 1.05, .3, 1) !important; }
.cart * { font-family: var(--serif); }
.cart__head { padding: 1.6rem 1.8rem 1.3rem; border-bottom: 1px solid rgba(107, 18, 40, 0.14); }
.cart__head h3 { font-size: 2rem; font-weight: 500; font-style: italic; color: var(--ink); }
.cart__close { font-size: 0.8rem !important; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #765720 !important; }
.cart__close:hover { color: var(--bordeaux) !important; }
.cart__items { padding: 0.4rem 1.8rem; }
.citem { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.9rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(107, 18, 40, 0.12); }
.citem__info strong { font-size: 1.15rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.citem__info span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; color: #765720; }
.citem__qty { gap: 0; border: 1.5px solid var(--bordeaux); border-radius: 999px; padding: 0.15rem; background: var(--bg-alt); }
.citem__qty button { width: 26px; height: 26px; border: 0; border-radius: 50%; font-size: 1rem; color: var(--bordeaux); transition: background .3s, color .3s; }
.citem__qty button:hover { background: var(--bordeaux); color: var(--oro-light); }
.citem__qty b { min-width: 1.6em; font-size: 1.05rem; font-weight: 600; }
.citem__price { font-size: 1.15rem; }
.citem__del { font-size: 0.9rem; color: rgba(36, 20, 26, 0.6); }
.cart__empty { padding: 3rem 0 1rem; display: grid; gap: 0.9rem; justify-items: center; font-style: normal; }
.cart__empty p { font-style: italic; font-size: 1.4rem; color: var(--ink); }
.cart__empty a { font-size: 1.05rem; color: var(--bordeaux); border: 1.5px solid var(--bordeaux); border-radius: 999px; padding: 0.55em 1.3em; background: var(--bg-alt); transition: background .3s, color .3s; }
.cart__empty a:hover { background: var(--bordeaux); color: var(--oro-light); }
.cart__foot { padding: 1.4rem 1.8rem 1.8rem; border-top: 1px solid rgba(107, 18, 40, 0.14); background: rgba(248, 244, 235, 0.6); }
.cart__sub span { font-size: 1.3rem; color: var(--ink); }
.cart__sub b { font-size: 1.7rem; font-weight: 600; color: var(--bordeaux); }
.cart__note { font-size: 0.98rem; color: rgba(36, 20, 26, 0.85); }
.cart__checkout { border-radius: 999px !important; justify-content: center; width: 100%; border: 0 !important; padding: 1.05em 1.6em !important;
  font-size: 0.9rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; color: var(--oro-light) !important;
  background: radial-gradient(120% 140% at 20% 0%, #8a2540 0%, var(--bordeaux) 45%, var(--bordeaux-deep) 100%) !important;
  box-shadow: 0 16px 30px -18px rgba(74, 12, 27, 0.6); }
.cart__checkout::before { display: none !important; }
.cart__checkout:hover { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cart { transition: none !important; } }
.cart.vuoto .cart__foot { display: none; }

/* 10/10, Francesco: nessuna luce o ombra sotto i bottoni, in tutto il sito.
   Restano il filo e il fondo; al clic solo un leggero incavo. */
.btn, main .btn, .con-muro main .btn, .apertura__btn, .fbtn, .con-muro .fbtn,
.btn:hover, main .btn:hover, .con-muro main .btn:hover, .apertura__btn:hover, .fbtn:hover, .con-muro .fbtn:hover,
.btn:focus-visible, main .btn:focus-visible { box-shadow: none !important; }

/* ============================================================
   IL MENU LIQUIDO (12/10) — js/menu-liquido.js
   Telefono: i due trattini accanto alla borsa. Computer: una goccia dello
   stesso inchiostro dietro lente e borsa. Passandoci
   sopra il bordeaux esce dall'angolo in alto a destra; col clic copre lo
   schermo e le voci entrano in carta.
   ============================================================ */
/* le icone: filo sottile, il colore del testo */
.nav__tools .icona { width: 1.2rem; height: 1.2rem; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.nav__tools button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; min-height: 2.2rem; }

/* i trattini solo sul telefono: sul computer il menu e la pillola */
.nav__tools .nav__burger { display: none; align-items: center; color: var(--ink); }
@media (max-width: 980px) { .nav__tools .nav__burger { display: inline-flex; } }
.nav__burger-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tratti { position: relative; display: block; width: 1.25rem; height: 0.55rem; }
.tratti i { position: absolute; left: 0; right: 0; height: 1.25px; border-radius: 1px; background: currentColor;
  transition: transform 0.6s cubic-bezier(.2, 1.3, .35, 1), top 0.6s cubic-bezier(.2, 1.3, .35, 1), background-color 0.4s; }
.tratti i:first-child { top: 0; }
.tratti i:last-child { top: calc(100% - 1.25px); }
/* passando: i due trattini si allontanano appena, come se qualcosa spingesse */
@media (hover: hover) { .nav__burger:hover .tratti i:first-child { transform: translateY(-1.5px); }
  .nav__burger:hover .tratti i:last-child { transform: translateY(1.5px); } }
/* aperto: diventano una croce */
.menu-aperto .tratti i:first-child { top: calc(50% - 0.6px); transform: rotate(45deg) !important; }
.menu-aperto .tratti i:last-child { top: calc(50% - 0.6px); transform: rotate(-45deg) !important; }

/* la tela del liquido: c'e solo mentre serve */
.liquido { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4950; pointer-events: none; display: none; }
.liquido-vivo .liquido { display: block; }
/* computer: la goccia vive nella testata, fra la fascia (dietro) e le icone (davanti) */
.nav > .liquido { z-index: 0; }
.nav__inner { position: relative; z-index: 1; }
/* mentre il liquido esce, la fascia si fa da parte (e dello stesso colore
   della tela: non si vede andare via, si vede il bordeaux arrivare) */
.nav::before { transition: height 0.55s var(--ease), opacity 0.5s var(--ease); }
.liquido-angolo .nav::before { opacity: 0; }
/* sul telefono il "mouse sopra" resta appiccicato dopo il tocco: niente colore di passaggio */
@media (hover: none) { .nav__tools button:hover { color: var(--ink); } }
/* computer: l icona sopra la goccia diventa carta, appena l inchiostro le arriva sotto */
.nav__tools button { position: relative; }
.nav__tools button.sul-liquido, .nav__tools button.sul-liquido:hover { color: var(--bianco); transition: color 0.3s 0.12s; }

/* a menu aperto della testa resta solo la croce, in carta.
   15/10: la dissolvenza si AGGIUNGE ai movimenti della testa: scritta da
   sola cancellava la scivolata del nome a sinistra e la salita delle voci */
.nav .brand { transition: transform 0.75s var(--ease), opacity 0.45s var(--ease); }
.nav__links { transition: margin 0.75s var(--ease), padding 0.75s var(--ease), border-color 0.5s var(--ease), opacity 0.45s var(--ease); }
.nav__tools > button:not(.nav__burger) { transition: opacity 0.45s var(--ease); }
.menu-aperto .nav .brand, .menu-aperto .nav__links, .menu-aperto .nav__tools > button:not(.nav__burger) { opacity: 0; pointer-events: none; }
.menu-aperto .nav__tools .nav__burger, .menu-aperto .nav__tools .nav__burger:hover,
.rientra .nav__tools .nav__burger, .rientra .nav__tools .nav__burger:hover { color: var(--bianco); }
/* da tastiera: un filo d oro, non il rettangolo di sistema */
.nav__tools button:focus-visible { outline: 1px solid var(--oro); outline-offset: 0.25rem; border-radius: 999px; }
.nav__tools button:focus:not(:focus-visible) { outline: none; }

/* il menu */
.menu { position: fixed; inset: 0; z-index: 4960; display: grid; place-items: center; align-content: center; gap: 3.2rem;
  padding: 6rem var(--pad-x) 3rem; visibility: hidden; pointer-events: none; }
.menu.open { visibility: visible; pointer-events: auto; }
.senza-liquido .menu { background: #4a0c1b; opacity: 0; transition: opacity 0.4s, visibility 0s 0.4s; }
.senza-liquido .menu.open { opacity: 1; transition: opacity 0.4s; }
.menu ul { display: grid; gap: 0.2rem; text-align: center; }
.menu li { overflow: hidden; }
.menu a { display: inline-block; font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1.12;
  letter-spacing: 0.01em; color: var(--bianco); text-transform: uppercase;
  transform: translateY(105%); transition: transform 0.9s cubic-bezier(.2, 1, .3, 1), color 0.4s; }
.menu.open a { transform: none; }
.menu.open li:nth-child(2) a { transition-delay: 0.06s; }
.menu.open li:nth-child(3) a { transition-delay: 0.12s; }
.menu.open li:nth-child(4) a { transition-delay: 0.18s; }
.menu.open li:nth-child(5) a { transition-delay: 0.24s; }
/* chiusura: le voci escono in alto, dalla prima, piu svelte di come sono entrate */
.menu.open.chiude a { transform: translateY(-105%); transition: transform 0.42s cubic-bezier(.5, 0, .75, 0); }
.menu.open.chiude li:nth-child(2) a { transition-delay: 0.03s; }
.menu.open.chiude li:nth-child(3) a { transition-delay: 0.06s; }
.menu.open.chiude li:nth-child(4) a { transition-delay: 0.09s; }
.menu.open.chiude li:nth-child(5) a { transition-delay: 0.12s; }
.menu.open.chiude .menu__piede { opacity: 0; transition: opacity 0.25s; }
/* a menu chiuso le voci tornano sotto senza farsi vedere */
.menu:not(.open) a { transition: none; }
.menu a:hover, .menu a:focus-visible { color: var(--oro-light); font-style: italic; }
.menu a.attiva { color: var(--oro); font-style: italic; }
.menu a:focus-visible { outline: 1px solid var(--oro); outline-offset: 0.3rem; }
.menu__piede { display: flex; gap: 2.2rem; justify-content: center; font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(248, 244, 235, 0.6); opacity: 0; transition: opacity 0.6s 0.35s; }
.menu.open .menu__piede { opacity: 1; }
.menu__piede a { font-size: inherit; text-transform: none; letter-spacing: 0.08em; color: inherit; transform: none; }
.menu__piede a:hover { color: var(--bianco); font-style: normal; }
@media (prefers-reduced-motion: reduce) { .menu a { transform: none; transition: color 0.3s; } }

/* 15/10: bottoni piu grandi (Francesco), circa +18% su testo e spazio */
.btn { font-size: 0.86rem; padding: 1.35em 3em; padding-right: calc(3em + 0.28em); }

/* ENTRATA DEL BACIO (16/10): il velo con il buco a forma di labbra, js/entrata-bacio.js */
.loader__bocca { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.loader--logo.apri--bacio .loader__pila, .loader--logo.apri--bacio .loader__num, .loader--logo.apri--bacio .loader__frasi { transition-duration: .45s; transition-delay: 0s; }