/* =========================================================================
   Maranta — sito
   Palette e tipografia da docs/DESIGN_SYSTEM.md (tema Notte, firma del brand).
   Niente framework: i token qui sotto sono gli stessi dell'app, quindi se
   cambia la palette dell'app si cambia qui e il sito resta allineato.
   ========================================================================= */

:root {
  /* Tema Notte — gli stessi valori di DESIGN_SYSTEM.md */
  --bg: #0C120E;
  --surface: #141D16;
  --surface-alt: #1C2A1F;
  --border: #243226;
  --text: #F2EFE6;
  --text-2: #8FA694;
  --text-muted: #5F7A64;
  --gold: #C9B47C;
  --on-gold: #0C120E;
  --green: #6FA07A;
  --warning: #D08B5B;
  --danger: #C9605B;

  /* Spaziatura su griglia 4, come l'app */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s10: 40px; --s16: 64px; --s24: 96px; --s32: 128px;

  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-pill: 999px;

  --max: 1180px;
  --gutter: 24px;

  /* Movimento: breve e con uno scopo, mai decorativo continuo.
     --ease serve all'interfaccia (menù, bottoni) e resta reattiva.
     --ease-morbida serve alle comparse allo scorrimento: parte piano e si
     posa piano, senza lo scatto iniziale dell'altra. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-morbida: cubic-bezier(0.33, 0.1, 0.25, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-reveal: 980ms;
}

/* ---------- reset essenziale ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* l'intestazione fissa non deve coprire le ancore */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* ---------- tipografia ---------- */

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.2vw, 4.05rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

p { margin: 0; text-wrap: pretty; }

.occhiello {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}

.sottotitolo {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-2);
  max-width: 54ch;
}

.contenitore {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- striscia della lingua ----------
   Sta sopra l'intestazione e la spinge giù, invece di coprirla: una barra
   che galleggia sopra il menù è il modo più veloce per sembrare una pubblicità. */

.striscia-lingua {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  background: var(--gold);
  color: var(--on-gold);
}

.striscia-lingua[hidden] { display: none; }

.striscia-lingua .contenitore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  min-height: 44px;
  padding-block: 6px;
}

.striscia-lingua a {
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.striscia-lingua button {
  position: absolute;
  right: var(--gutter);
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.striscia-lingua button:hover { opacity: 1; background: rgba(12, 18, 14, 0.12); }

body.con-striscia .intestazione { top: 44px; }
body.con-striscia { padding-top: 44px; }

/* ---------- smistatore di lingua ----------
   Si vede solo se JavaScript non parte: altrimenti la pagina reindirizza
   prima che venga disegnata. */

.smistatore {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s10) var(--gutter);
  text-align: center;
}

.smistatore img { border-radius: 16px; border: 1px solid var(--border); }
.smistatore h1 { font-size: 2.2rem; }
.smistatore p { color: var(--text-2); margin-bottom: var(--s4); }

.smistatore ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
}

.smistatore li a {
  display: block;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.98rem;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.smistatore li a:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- intestazione ---------- */

.intestazione {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              backdrop-filter var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}

.intestazione.attaccata {
  background: rgba(12, 18, 14, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
}

.intestazione .contenitore {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: 72px;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* Il logo è l'icona vera dell'app: ha già il suo fondo, quindi va solo
   arrotondato come la vede chi ce l'ha sulla schermata home. */
.marchio-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
}

.nav-principale {
  display: flex;
  align-items: center;
  gap: var(--s6);
  margin-left: auto;
}

.nav-principale a {
  font-size: 0.95rem;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
  position: relative;
  padding-block: 4px;
}

.nav-principale a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}

.nav-principale a:hover { color: var(--text); }
.nav-principale a:hover::after { transform: scaleX(1); }

/* selettore lingua */

.lingue { position: relative; }

.lingue-bottone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--text-2);
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.lingue-bottone:hover { color: var(--text); background: var(--surface); }
.lingue-bottone svg { width: 16px; height: 16px; }

.lingue-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              visibility var(--t-med);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.lingue[aria-expanded='true'] .lingue-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lingue-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lingue-menu a:hover { background: var(--surface-alt); color: var(--text); }
.lingue-menu a[aria-current='true'] { color: var(--gold); }

/* bottone menù su telefono */

.menu-telefono {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: var(--radius-btn);
}

.menu-telefono span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text);
  position: relative;
  transition: background var(--t-fast) var(--ease);
}

.menu-telefono span::before,
.menu-telefono span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: var(--text);
  transition: transform var(--t-med) var(--ease);
}

.menu-telefono span::before { top: -6px; }
.menu-telefono span::after { top: 6px; }

body.menu-aperto .menu-telefono span { background: transparent; }
body.menu-aperto .menu-telefono span::before { transform: translateY(6px) rotate(45deg); }
body.menu-aperto .menu-telefono span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- bottoni ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;           /* touch target minimo dell'app */
  padding: 0 24px;
  border-radius: var(--radius-btn);
  font-size: 0.98rem;
  font-weight: 700;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.bottone:active { transform: scale(0.97); }

.bottone-oro { background: var(--gold); color: var(--on-gold); }
.bottone-oro:hover { background: #D6C392; }

.bottone-fantasma {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
}
.bottone-fantasma:hover { border-color: var(--text-muted); }

/* badge degli store */

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.store-badge:hover { border-color: var(--text-muted); background: var(--surface-alt); }
.store-badge:active { transform: scale(0.98); }
.store-badge svg { width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; }

.store-badge-testo { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-badge-testo small { font-size: 0.68rem; color: var(--text-2); letter-spacing: 0.03em; }
.store-badge-testo strong { font-size: 1rem; font-weight: 700; }

/* Android non ancora rilasciato: resta visibile ma spento, e lo accendiamo
   togliendo questa classe e mettendo l'href. */
.store-badge.presto {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.store-badge.presto::after {
  content: attr(data-presto);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-left: 2px;
}

.gruppo-store { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- apertura ---------- */

.apertura {
  position: relative;
  padding-top: 132px;
  padding-bottom: var(--s16);
  overflow: hidden;
}

/* alone botanico: due luci morbide, nessuna animazione continua */
.apertura::before,
.apertura::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}

.apertura::before {
  width: 620px; height: 620px;
  top: -220px; left: -180px;
  background: rgba(111, 160, 122, 0.14);
}

.apertura::after {
  width: 520px; height: 520px;
  top: 90px; right: -200px;
  background: rgba(201, 180, 124, 0.10);
}

.apertura .contenitore {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: var(--s10);
  align-items: center;
}

.apertura h1 { margin-bottom: var(--s4); }
.apertura .sottotitolo { margin-bottom: var(--s6); }
.apertura .gruppo-store { margin-bottom: var(--s6); }

/* ---------- riconoscimenti (corona + stelle) ---------- */

.riconoscimenti {
  display: flex;
  align-items: center;
  gap: var(--s6);
  flex-wrap: wrap;
}

.corona {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.corona-ramo { width: 26px; height: 52px; color: var(--gold); opacity: 0.85; flex-shrink: 0; }
.corona-ramo.destra { transform: scaleX(-1); }

.corona-centro { text-align: center; line-height: 1.25; }

.corona-stelle {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 3px;
}

.corona-stelle svg { width: 15px; height: 15px; fill: var(--gold); }

.corona-voto {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 500;
  display: block;
}

.corona-etichetta {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* lo slogan: il numero in oro, la frase accanto in piccolo */
.slogan {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding-left: var(--s6);
  border-left: 1px solid var(--border);
}

.slogan strong {
  font-family: 'Fraunces', serif;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.01em;
}

.slogan span {
  font-size: 0.86rem;
  color: var(--text-2);
  max-width: 17ch;
  line-height: 1.35;
}

/* spazio pronto per il contatore, oggi vuoto */
.contatore { display: none; }
.contatore.visibile { display: block; }
.contatore-numero {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  display: block;
  line-height: 1;
}
.contatore-etichetta {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ---------- telefono ---------- */

.telefono {
  position: relative;
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(155deg, #41553F 0%, #253324 28%, #141D16 66%, #0C120E 100%);
  box-shadow:
    0 1px 0 rgba(242, 239, 230, 0.16) inset,
    0 0 0 1px rgba(90, 116, 90, 0.5),
    0 48px 100px -34px rgba(0, 0, 0, 0.95);
}

/* Alone dietro al telefono: senza, su fondo scuro la scocca scompare e lo
   schermo sembra una macchia. Non è decorazione, è leggibilità. */
.telefono::before {
  content: '';
  position: absolute;
  inset: -16% -22%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 42%, rgba(111, 160, 122, 0.16) 0%, transparent 62%);
  pointer-events: none;
}

.telefono-schermo {
  width: 100%;
  aspect-ratio: 390 / 844;   /* la tela degli schermi disegnati in schermi.mjs */
  border-radius: 36px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

.telefono-schermo img,
.telefono-schermo svg { width: 100%; height: 100%; object-fit: cover; }

.telefono-tacca {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 26px;
  background: #060907;
  border-radius: var(--radius-pill);
  z-index: 2;
}

/* ---------- striscia di fiducia ---------- */

.fiducia {
  border-block: 1px solid var(--border);
  background: var(--surface);
}

.fiducia .contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  padding-block: var(--s10);
}

.fiducia-voce { text-align: center; }
.fiducia-voce dt {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 2px;
}
.fiducia-voce dd { margin: 0; font-size: 0.92rem; color: var(--text-2); }

/* ---------- sezioni funzionalità ---------- */

.sezione { padding-block: var(--s24); }

.funzione .contenitore {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}

.funzione:nth-of-type(even) .funzione-testo { order: 2; }

.funzione-testo h2 { margin-bottom: var(--s4); }
.funzione-testo .sottotitolo { margin-bottom: var(--s6); }

.elenco-punti { display: grid; gap: var(--s3); }

.elenco-punti li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: 0.98rem;
  color: var(--text-2);
}

.elenco-punti svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.75;
}

/* ---------- recensioni ---------- */

.recensioni { background: var(--surface); border-block: 1px solid var(--border); }
.recensioni .intestazione-sezione { text-align: center; margin-bottom: var(--s16); }
.recensioni .sottotitolo { margin-inline: auto; }

.giostra {
  position: relative;
  overflow: hidden;
  /* sfumatura ai bordi: le schede entrano ed escono senza tagli netti */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.giostra-pista {
  display: flex;
  gap: var(--s4);
  width: max-content;
  animation: scorri 56s linear infinite;
}

.giostra:hover .giostra-pista,
.giostra:focus-within .giostra-pista { animation-play-state: paused; }

@keyframes scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.recensione {
  width: 330px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.recensione-stelle { display: flex; gap: 2px; }
.recensione-stelle svg { width: 14px; height: 14px; fill: var(--gold); }

/* Il titolo che la persona ha dato alla recensione: sta al posto del nome,
   ed è comunque parola sua. */
.recensione-titolo {
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.recensione-testo {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
  /* le recensioni hanno lunghezze molto diverse: oltre le sei righe si
     taglia, così le schede restano della stessa altezza */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recensione-autore {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: var(--s2);
}

/* Dichiarare la traduzione, senza gridarlo: deve leggersi, non dominare. */
.recensione-tradotta {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  opacity: 0.85;
}

/* ---------- promessa / niente sorprese ---------- */

.promessa .contenitore {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}

.promessa-scheda {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s10);
}

.promessa-scheda h3 { margin-bottom: var(--s4); }

/* ---------- chi siamo ---------- */

.chi-siamo { text-align: center; }
.chi-siamo .contenitore { max-width: 760px; }
.chi-siamo h2 { margin-bottom: var(--s6); }
.chi-siamo p {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  color: var(--text-2);
  line-height: 1.75;
}

/* ---------- chiusura ---------- */

.chiusura { text-align: center; position: relative; overflow: hidden; }

.chiusura::before {
  content: '';
  position: absolute;
  width: 760px; height: 760px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 180, 124, 0.09) 0%, transparent 68%);
  pointer-events: none;
}

.chiusura .contenitore { position: relative; z-index: 1; }
.chiusura h2 { margin-bottom: var(--s4); }
.chiusura .sottotitolo { margin-inline: auto; margin-bottom: var(--s10); }
.chiusura .gruppo-store { justify-content: center; }

/* ---------- pagine legali ----------
   Stessa casa della vetrina, registro diverso: niente effetti, colonna
   stretta, interlinea larga. Qui si legge, non si compra. */

.legale { padding-top: 128px; padding-bottom: var(--s24); }
.legale .contenitore { max-width: 760px; }

/* `flex` e non `inline-flex`: altrimenti le linguette qui sotto le si
   affiancano e sembrano parte della stessa riga. */
.legale-indietro {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--s6);
  font-size: 0.92rem;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
}

.legale-indietro:hover { color: var(--gold); }
.legale-indietro svg { width: 18px; height: 18px; }

/* Le due linguette: una voce sola nel menù, ma qui dentro si passa da
   Privacy a Termini con un tocco, senza scorrere fino in fondo. */
.legale-linguette {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--s10);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.legale-linguette a {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.legale-linguette a:hover { color: var(--text); }

.legale-linguette a[aria-current='page'] {
  background: var(--gold);
  color: var(--on-gold);
}

.legale-testo h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: var(--s2);
}

.legale-testo .updated {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-bottom: var(--s10);
}

.legale-testo .section { margin-bottom: var(--s10); }

.legale-testo h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s3);
}

.legale-testo p { color: var(--text-2); margin-bottom: var(--s3); }

.legale-testo ul { display: grid; gap: var(--s3); }

/* L'elenco arriva dalla pagina legale senza classi: il pallino lo mettiamo
   noi, in verde, invece del segno di spunta usato nella vetrina. */
.legale-testo li {
  position: relative;
  padding-left: var(--s6);
  color: var(--text-2);
  font-size: 0.98rem;
}

.legale-testo li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.legale-testo strong { color: var(--text); font-weight: 700; }

.legale-testo a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legale-testo .divider,
.legale-testo hr { display: none; }

.legale-altra {
  margin-top: var(--s16);
  padding-top: var(--s6);
  border-top: 1px solid var(--border);
}

.legale-altra a {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
}

@media (max-width: 760px) {
  .legale { padding-top: 108px; }
}

/* ---------- piè di pagina ---------- */

.pie {
  border-top: 1px solid var(--border);
  padding-block: var(--s16) var(--s10);
  background: var(--surface);
}

.pie-griglia {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s10);
  margin-bottom: var(--s16);
}

.pie-marchio { max-width: 34ch; }
.pie-marchio .marchio { margin-bottom: var(--s3); }
.pie-marchio p { font-size: 0.92rem; color: var(--text-2); }

.pie h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s4);
}

.pie-lista { display: grid; gap: 10px; }
.pie-lista a { font-size: 0.94rem; color: var(--text-2); transition: color var(--t-fast) var(--ease); }
.pie-lista a:hover { color: var(--gold); }

.pie-chiusura {
  border-top: 1px solid var(--border);
  padding-top: var(--s6);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* ---------- comparsa allo scorrimento ----------
   Una sola volta, breve, e mai al ritorno indietro: è la differenza fra un
   sito curato e un template che esplode a ogni scroll.

   Si parte da VISIBILE. Il nascondiglio iniziale lo mette solo `.js`, che
   viene aggiunto da uno script in testa alla pagina: se JavaScript non parte
   — bloccato, errore, crawler — il sito si legge tutto lo stesso invece di
   restare una pagina nera. */

.js .comparsa {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease-morbida),
              transform var(--t-reveal) var(--ease-morbida);
  will-change: opacity, transform;
}

.js .comparsa.dentro { opacity: 1; transform: none; }

.js .comparsa[data-ritardo='1'] { transition-delay: 120ms; }
.js .comparsa[data-ritardo='2'] { transition-delay: 240ms; }
.js .comparsa[data-ritardo='3'] { transition-delay: 360ms; }

/* L'apertura è già sullo schermo quando la pagina si carica: lì la lentezza
   non è eleganza, è attesa. Stesso movimento, tempi più stretti. */
.js .apertura .comparsa { transition-duration: 720ms; }
.js .apertura .comparsa[data-ritardo='1'] { transition-delay: 70ms; }
.js .apertura .comparsa[data-ritardo='2'] { transition-delay: 140ms; }
.js .apertura .comparsa[data-ritardo='3'] { transition-delay: 210ms; }

/* Il telefono entra dal lato su cui sta. Spostamento corto e scala quasi
   impercettibile: deve sembrare che si posi, non che venga lanciato. */
.js .comparsa-lato { transform: translateX(30px) scale(0.988); }
.js .comparsa-lato.da-sinistra { transform: translateX(-30px) scale(0.988); }
.js .comparsa-lato.dentro { transform: none; }

/* I punti dell'elenco si accendono uno dopo l'altro, 110 ms di scarto:
   l'occhio li legge in ordine invece di trovarli tutti già lì. */
.js .elenco-punti li {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 700ms var(--ease-morbida), transform 700ms var(--ease-morbida);
}

.js .dentro .elenco-punti li { opacity: 1; transform: none; }
.js .dentro .elenco-punti li:nth-child(1) { transition-delay: 220ms; }
.js .dentro .elenco-punti li:nth-child(2) { transition-delay: 330ms; }
.js .dentro .elenco-punti li:nth-child(3) { transition-delay: 440ms; }
.js .dentro .elenco-punti li:nth-child(4) { transition-delay: 550ms; }
.js .dentro .elenco-punti li:nth-child(5) { transition-delay: 660ms; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .apertura .contenitore,
  .funzione .contenitore,
  .promessa .contenitore {
    grid-template-columns: 1fr;
    gap: var(--s16);
  }

  .apertura { padding-top: 124px; text-align: center; }
  .apertura .sottotitolo { margin-inline: auto; }
  .apertura .gruppo-store,
  .riconoscimenti { justify-content: center; }

  .funzione:nth-of-type(even) .funzione-testo { order: 0; }
  .funzione-media { order: 2; }

  .telefono { max-width: 290px; }

  .pie-griglia { grid-template-columns: 1fr 1fr; }
  .pie-marchio { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --s24: 72px; --s16: 48px; }

  body { font-size: 16px; }

  .menu-telefono { display: flex; }

  .nav-principale {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(12, 18, 14, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: var(--s4) var(--gutter) var(--s6);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                visibility var(--t-med);
  }

  body.menu-aperto .nav-principale {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-principale a { padding-block: var(--s3); font-size: 1.05rem; }
  .nav-principale a::after { display: none; }

  .lingue { margin-top: var(--s2); }
  .lingue-bottone { padding-inline: 0; }
  .lingue-menu { right: auto; left: 0; }

  .fiducia .contenitore { grid-template-columns: 1fr; gap: var(--s6); }

  .recensione { width: 268px; }
  .giostra-pista { animation-duration: 42s; }

  .promessa-scheda { padding: var(--s6); }

  .pie-griglia { grid-template-columns: 1fr; gap: var(--s6); }
  .pie-chiusura { flex-direction: column; gap: var(--s2); }
}

/* ---------- chi preferisce meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .comparsa,
  .js .comparsa-lato,
  .js .elenco-punti li { opacity: 1; transform: none; }
  .giostra-pista { animation: none; transform: none; }
  .giostra { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}