/* ═══════════════════════════════════════════════════════════════════════════
   Storming Web — foglio di stile del sito vetrina

   I colori sono quelli del logo (vedi colori-logo.txt):
     blu notte  #0F2240   il fondo scuro e il testo
     verde petrolio #1A9E8F   l'accento: link, bordi attivi, icone
     oro        #D4A95A   il tocco caldo, usato con parsimonia

   Nessun font e nessuna libreria caricati da domini esterni: il sito non
   deve dipendere dalla rete di altri e non deposita cookie di terze parti.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy:        #0F2240;
  --navy-chiaro: #1B3860;
  --teal:        #1A9E8F;
  --teal-scuro:  #14806f;
  --oro:         #D4A95A;

  --testo:       #16263c;
  --testo-tenue: #5c6b7f;
  --bianco:      #ffffff;
  --nebbia:      #f4f7fa;
  --bordo:       #dde5ee;

  --larghezza:   1160px;
  --raggio:      16px;
  --ombra:       0 1px 2px rgba(15,34,64,.04), 0 8px 24px rgba(15,34,64,.06);
  --ombra-alta:  0 2px 6px rgba(15,34,64,.06), 0 18px 40px rgba(15,34,64,.12);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* La barra in alto e' fissa: senza questo, i link #ancora finirebbero
     sotto la barra e il titolo della sezione resterebbe coperto. */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-scuro); }

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 .5em;
  font-weight: 700;
}

p { margin: 0 0 1em; }

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 24px;
}

.contenitore-stretto { max-width: 760px; }

/* Il salto al contenuto: si vede solo arrivandoci col tasto Tab. */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.salta:focus { left: 0; }

/* ── Barra in alto ─────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.barra.compatta {
  border-bottom-color: var(--bordo);
  box-shadow: 0 4px 20px rgba(15,34,64,.06);
}

.barra-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.marchio img { width: 210px; }
.marchio { flex: none; }

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.menu > a {
  color: var(--navy);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}
.menu > a:not(.bottone)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--teal);
  transition: right .25s;
}
.menu > a:not(.bottone):hover::after { right: 0; }

/* Il bottone dentro la barra: la regola .menu > a qui sopra impone
   "padding: 6px 0" ed e' piu' specifica di .bottone-piccolo, percio' il
   testo finiva a toccare i bordi della pastiglia. Qui il padding glielo si
   ridà, con un selettore che pesa piu' di entrambi. */
.menu > a.bottone {
  padding: 10px 22px;
}

.lingue {
  display: flex;
  align-items: center;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  overflow: hidden;
}
.lingue a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 11px;
  color: var(--testo-tenue);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.lingue a:hover { color: var(--navy); background: var(--nebbia); }
.lingue a[aria-current] { background: var(--navy); color: #fff; }

.apri-menu {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.apri-menu span {
  display: block;
  width: 20px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Bottoni ───────────────────────────────────────────────────────────── */

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--teal);
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(26,158,143,.22);
}
.bottone:hover {
  background: var(--teal-scuro);
  border-color: var(--teal-scuro);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(26,158,143,.3);
}
.bottone .freccia { width: 18px; height: 18px; transition: transform .2s; }
.bottone:hover .freccia { transform: translateX(3px); }

.bottone-piccolo { padding: 9px 18px; font-size: 15px; }

.bottone-vuoto {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.4);
  box-shadow: none;
}
.bottone-vuoto:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  box-shadow: none;
}

/* ── Apertura ──────────────────────────────────────────────────────────── */

.eroe {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  padding: clamp(64px, 9vw, 116px) 0 clamp(56px, 7vw, 88px);
}

/* Lo sfondo dell'apertura, dal basso verso l'alto:
     1. le sfumature di colore, che tengono il blu dal restare piatto;
     2. una trama a griglia sottile, che si dissolve verso il basso;
     3. il simbolo del marchio in grande, appena accennato;
     4. tre curve che ne ripetono il movimento e si disegnano all'arrivo.   */

.eroe-sfondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 78% 6%,   rgba(26,158,143,.34), transparent 62%),
    radial-gradient(560px 380px at 8% 96%,   rgba(212,169,90,.20), transparent 60%),
    radial-gradient(420px 300px at 42% 42%,  rgba(27,56,96,.55),   transparent 70%),
    linear-gradient(160deg, #0F2240 0%, #14294c 55%, #0b1a33 100%);
}

/* 2. La griglia. Due sole sfumature ripetute: nessuna immagine da scaricare. */
.eroe-griglia {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Sfuma verso il basso: in cima da trama, in fondo sparisce e lascia
     respirare il testo delle promesse. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%);
}

/* 3. Il simbolo del marchio, grande e quasi trasparente, mezzo fuori dal
      bordo destro: si riconosce senza mettersi in mezzo alla lettura. */
.eroe-segno {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(46vw, 620px);
  height: auto;
  transform: translateY(-52%) rotate(-8deg);
  opacity: .1;
  filter: saturate(1.6) drop-shadow(0 0 60px rgba(26,158,143,.5));
  animation: respiro 14s ease-in-out infinite;
}

@keyframes respiro {
  0%, 100% { transform: translateY(-52%) rotate(-8deg)   scale(1); }
  50%      { transform: translateY(-56%) rotate(-5.5deg) scale(1.035); }
}

/* 4. Le curve. Si disegnano da sinistra a destra quando la pagina arriva.

   La maschera e' la parte importante: senza, una curva passa dietro ai
   pulsanti e sembra che li tagli. Cosi' invece le curve nascono spente a
   sinistra, dove sta il testo, e prendono colore solo verso destra e in
   basso, dove non c'e' niente da leggere. */
.eroe-onde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 46%, #000 72%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 34%, #000 62%);
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 46%, #000 72%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 34%, #000 62%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.onda {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  /* 3000 e' piu' lungo di qualsiasi curva qui: cosi' il tratteggio parte
     chiuso e nessuna curva resta a meta'. */
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: traccia 2.6s cubic-bezier(.22,.61,.36,1) forwards;
}
.onda-1 { stroke: rgba(26,158,143,.55); animation-delay: .15s; }
.onda-2 { stroke: rgba(212,169,90,.34); animation-delay: .45s; stroke-width: 1.2; }
.onda-3 { stroke: rgba(255,255,255,.14); animation-delay: .3s;  stroke-width: 1; }

@keyframes traccia { to { stroke-dashoffset: 0; } }

.eroe-dentro { position: relative; }

.eroe h1 {
  color: #fff;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  max-width: 16ch;
  margin-bottom: .35em;
}

/* La seconda riga del titolo passa dal verde petrolio all'oro: gli stessi
   due colori del logo, nello stesso ordine in cui ci stanno dentro. */
.eroe h1 em {
  font-style: normal;
  color: #6fd6c6;                       /* se il ritaglio sul testo non c'e' */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .eroe h1 em {
    background: linear-gradient(100deg, #6fd6c6 0%, #2fb9a6 42%, var(--oro) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.eroe-testo {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: rgba(255,255,255,.82);
  max-width: 62ch;
  margin-bottom: 34px;
}

.eroe-bottoni { display: flex; flex-wrap: wrap; gap: 14px; }

.occhiello {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-scuro);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.occhiello::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--oro);
  flex: none;
}
.occhiello-chiaro { color: #6fd6c6; }

/* Le tre promesse: schede di vetro sul fondo scuro. Il bordo chiaro in
   cima le stacca dallo sfondo senza bisogno di un riquadro pieno. */
.promesse {
  list-style: none;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.promesse li {
  position: relative;
  padding: 24px 24px 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: border-color .3s, transform .3s, background .3s;
}
/* Un filo di luce sul bordo alto, come sul vetro illuminato di sbieco. */
.promesse li::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111,214,198,.7), transparent);
}
.promesse li:hover {
  transform: translateY(-3px);
  border-color: rgba(111,214,198,.32);
  background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
}
.promesse h2 {
  color: #fff;
  font-size: 1.03rem;
  margin-bottom: .4em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.promesse h2::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(26,158,143,.18);
  flex: none;
}
.promesse p {
  color: rgba(255,255,255,.68);
  font-size: 15px;
  margin: 0;
}


/* ── Apertura, versione 2: la vetrina ──────────────────────────────────────
   Due colonne. La decorazione vive tutta nella colonna di destra: non serve
   nessuna maschera per tenerla lontana dalle scritte, ci pensa la griglia.
   ------------------------------------------------------------------------ */

.eroe--vetrina { padding-bottom: clamp(48px, 6vw, 76px); }

.eroe-due {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}

.eroe--vetrina .eroe-parola { max-width: 34rem; }
.eroe--vetrina h1 { max-width: 14ch; }
.eroe--vetrina .eroe-testo { max-width: 46ch; }

/* Il simbolo del marchio si sposta dietro alla vetrina e cresce: fa da
   alone alle due schermate invece di stare per conto suo. */
.eroe--vetrina .eroe-segno {
  top: 46%;
  right: 2%;
  width: min(40vw, 520px);
  opacity: .13;
}

/* Un ventaglio di luce dietro alla vetrina, per staccarla dal fondo. */
.eroe-raggi {
  position: absolute;
  top: 50%;
  right: -8%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background:
    radial-gradient(closest-side, rgba(26,158,143,.3), transparent 72%),
    conic-gradient(from 200deg at 50% 50%,
      transparent 0deg, rgba(111,214,198,.16) 34deg, transparent 78deg,
      rgba(212,169,90,.14) 128deg, transparent 176deg);
  filter: blur(6px);
}

/* Le curve, qui, stanno solo nella meta' destra: il disegno stesso e' largo
   la meta', e la maschera spegne quel poco che sconfina. */
.eroe--vetrina .eroe-onde {
  left: auto;
  right: 0;
  width: 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  -webkit-mask-composite: source-over;
          mask-composite: add;
}

/* ── La vetrina: finestra e telefono ─────────────────────────────────────── */

.vetrina {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  /* Spazio in basso a sinistra per il telefono, che sborda dalla finestra. */
  padding: 0 0 70px 54px;
}

/* La finestra del browser. */
.vetrina-finestra {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(168deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(4,12,26,.55), 0 2px 0 rgba(255,255,255,.07) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: galleggia 9s ease-in-out infinite;
}

@keyframes galleggia {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.finestra-barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: rgba(8,20,38,.5);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pallino {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  flex: none;
}
.pallino:first-child { background: rgba(212,169,90,.55); }
.finestra-indirizzo {
  margin-left: 8px;
  flex: 1;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  padding: 4px 12px;
  text-align: center;
}

.finestra-corpo { padding: 22px 22px 24px; }
.finestra-logo {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: rgba(255,255,255,.9);
  padding: 5px;
  margin-bottom: 16px;
}

/* Le barre grigie che suggeriscono del testo senza scriverne di finto. */
.riga {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  margin-bottom: 9px;
}
.riga-titolo { width: 62%; height: 12px; background: rgba(255,255,255,.28); }
.riga-corta  { width: 38%; }

/* Le quattro risposte di un quiz: una sola e' quella giusta. */
.finestra-quiz {
  list-style: none;
  margin: 18px 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.finestra-quiz li {
  height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
}
.finestra-quiz .giusta {
  background: rgba(26,158,143,.22);
  border-color: rgba(111,214,198,.5);
  box-shadow: 0 0 0 3px rgba(26,158,143,.1);
}

.finestra-avanzamento {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.finestra-avanzamento span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), #6fd6c6);
  animation: riempi 2.4s .8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes riempi { to { width: 68%; } }

/* Il cartellino "online", con il pallino che pulsa piano. */
.pastiglia {
  position: absolute;
  top: 54px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d7f5ee;
  background: rgba(10,26,44,.9);
  border: 1px solid rgba(111,214,198,.36);
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 10px 24px rgba(4,12,26,.5);
}
.pastiglia i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade9f;
  box-shadow: 0 0 0 0 rgba(74,222,159,.6);
  animation: batte 2.2s ease-out infinite;
}
@keyframes batte {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,159,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(74,222,159,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,159,0); }
}

/* Il telefono, appoggiato sull'angolo in basso a sinistra della finestra. */
.vetrina-telefono {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 148px;
  border-radius: 20px;
  padding: 8px;
  background: linear-gradient(170deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 50px rgba(4,12,26,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Sfasato rispetto alla finestra: si muovono, ma non all'unisono. */
  animation: galleggia 9s ease-in-out -4.5s infinite;
}
.telefono-tacca {
  display: block;
  width: 42px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  margin: 2px auto 9px;
}
.telefono-corpo {
  background: rgba(8,20,38,.55);
  border-radius: 14px;
  padding: 14px 13px 16px;
}
.telefono-logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  padding: 3px;
  margin-bottom: 12px;
}
.telefono-corpo .riga-titolo { width: 78%; height: 9px; margin-bottom: 14px; }

/* Tre passi di una pratica: due gia' fatti, uno ancora da fare. */
.telefono-passi {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 7px;
}
.telefono-passi li {
  height: 16px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  position: relative;
  padding-left: 22px;
}
.telefono-passi li::before {
  content: "";
  position: absolute;
  left: 5px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
}
.telefono-passi .fatto::before {
  background: var(--oro);
  border-color: var(--oro);
}
.telefono-bottone {
  display: block;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--teal-scuro));
  box-shadow: 0 6px 14px rgba(26,158,143,.3);
}

/* ── La vetrina sugli schermi piccoli ────────────────────────────────────── */

@media (max-width: 1040px) {
  .eroe-due { grid-template-columns: 1fr; gap: 44px; }
  .eroe--vetrina .eroe-parola { max-width: none; }
  .eroe--vetrina h1 { max-width: 16ch; }
  .vetrina { max-width: 460px; justify-self: start; }
  .eroe--vetrina .eroe-segno { opacity: .08; }
  .eroe--vetrina .eroe-onde { width: 100%; }
}

@media (max-width: 560px) {
  /* Sotto questa misura la vetrina diventa un francobollo illeggibile:
     meglio toglierla e lasciare respirare il titolo. */
  .vetrina { display: none; }
  .eroe-due { gap: 0; }
}

/* ── Sezioni ───────────────────────────────────────────────────────────── */

.sezione { padding: clamp(64px, 8vw, 104px) 0; }
.sezione-chiara { background: var(--nebbia); }
.sezione-scura  { background: var(--navy); color: rgba(255,255,255,.75); }
.sezione-scura .titolo-sezione { color: #fff; }

.testa-sezione { max-width: 660px; margin-bottom: clamp(38px, 5vw, 56px); }
.titolo-sezione { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.sottotitolo-sezione {
  font-size: 1.08rem;
  color: var(--testo-tenue);
  margin: 0;
}
.sezione-scura .sottotitolo-sezione { color: rgba(255,255,255,.68); }

/* ── Chi siamo ─────────────────────────────────────────────────────────── */

.chi-griglia {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.chi-segno img {
  width: 100%;
  opacity: .9;
  filter: drop-shadow(0 18px 34px rgba(15,34,64,.14));
}
.chi-testo p { color: var(--testo-tenue); font-size: 1.05rem; }

/* ── Servizi ───────────────────────────────────────────────────────────── */

.servizi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.scheda {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 30px 28px;
  box-shadow: var(--ombra);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.scheda:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombra-alta);
  border-color: #bfe3dd;
}
.scheda h3 { font-size: 1.12rem; margin-bottom: .45em; }
.scheda p { color: var(--testo-tenue); font-size: 15.5px; margin: 0; }

.scheda-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 13px;
  background: rgba(26,158,143,.1);
  color: var(--teal-scuro);
  margin-bottom: 18px;
}
.scheda-icona .icona { width: 26px; height: 26px; }

/* ── Progetti ──────────────────────────────────────────────────────────── */

.progetti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.progetto {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 32px 30px;
  box-shadow: var(--ombra);
  transition: transform .25s, box-shadow .25s;
}
.progetto:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); }
.progetto > p { color: var(--testo-tenue); font-size: 15.5px; }

.progetto-testa {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.progetto-testa img {
  width: 54px; height: 54px;
  border-radius: 13px;
  flex: none;
  object-fit: contain;
  background: var(--nebbia);
  padding: 6px;
}
.progetto-testa h3 { font-size: 1.24rem; margin: 0 0 2px; }
.progetto-sotto {
  margin: 0;
  font-size: 13.5px;
  color: var(--testo-tenue);
  line-height: 1.4;
}

.etichette {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
}
.etichette li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-chiaro);
  background: var(--nebbia);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 4px 12px;
}

.progetto-link {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.progetto-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
}
.progetto-link a:hover { text-decoration: underline; }
.progetto-link .freccia { width: 17px; height: 17px; transition: transform .2s; }
.progetto-link a:hover .freccia { transform: translateX(3px); }
.link-secondario { color: var(--testo-tenue); }

/* ── Come lavoriamo ────────────────────────────────────────────────────── */

.passi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.passi li {
  padding-top: 22px;
  border-top: 2px solid rgba(255,255,255,.16);
  transition: border-color .3s;
}
.passi li:hover { border-top-color: var(--oro); }
.passo-numero {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--oro);
  margin-bottom: 10px;
}
.passi h3 { color: #fff; font-size: 1.15rem; }
.passi p { color: rgba(255,255,255,.68); font-size: 15.5px; margin: 0; }

/* ── Contatti ──────────────────────────────────────────────────────────── */

.contatti-griglia {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.contatti-dati {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--bordo);
}
.contatti-dati h3 { font-size: 1rem; margin-bottom: .6em; }
.contatti-dati p { font-size: 15px; color: var(--testo-tenue); margin: 12px 0 0; }
.contatti-email {
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(26,158,143,.3);
}
.contatti-email:hover { border-bottom-color: var(--teal); }

.modulo-scatola {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--ombra-alta);
}

.modulo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0;
}
.campo { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.campo-largo { grid-column: 1 / -1; }

.campo label {
  font-size: 14px;
  font-weight: 650;
  color: var(--navy);
}
.obb { color: var(--teal-scuro); }
.facolt { font-weight: 400; color: var(--testo-tenue); font-size: 13px; }

.campo input[type="text"],
.campo input[type="email"],
.campo select,
.campo textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--testo);
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(26,158,143,.16);
}
.campo [aria-invalid="true"] { border-color: #d05a4a; }

.errore { font-size: 13.5px; color: #b8402f; }

.consenso label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--testo-tenue);
  cursor: pointer;
}
.consenso input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--teal); flex: none; }
.consenso a { font-weight: 600; }

/* Il campo trappola per i robot: fuori dallo schermo, mai letto ad alta voce. */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.modulo-fondo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 4px;
}
.nota { font-size: 13px; color: var(--testo-tenue); }

.avviso {
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 15px;
}
.avviso p { margin: 4px 0 0; }
.avviso-ok { background: #e6f5f1; border: 1px solid #a9dfd3; color: #14624f; }
.avviso-ko { background: #fdecea; border: 1px solid #f2bfb8; color: #97331f; }

/* ── Pagine di solo testo ──────────────────────────────────────────────── */

.testo-lungo h1 { margin-bottom: .3em; }
.testo-lungo h2 { font-size: 1.25rem; margin: 2em 0 .5em; }
.testo-lungo p  { color: var(--testo-tenue); }
.testo-lungo .nota { display: block; margin-bottom: 2.4em; }
.torna { margin-top: 3em; }
.torna a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  text-decoration: none;
}
.torna .freccia { width: 17px; height: 17px; }

/* ── Piede ─────────────────────────────────────────────────────────────── */

.piede {
  background: var(--navy);
  color: rgba(255,255,255,.66);
  padding: clamp(48px, 6vw, 72px) 0 28px;
  font-size: 15px;
}
.piede-griglia {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: 36px;
}
.piede h3 {
  color: #fff;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1em;
}
.piede a {
  display: block;
  color: rgba(255,255,255,.66);
  text-decoration: none;
  padding: 3px 0;
  transition: color .2s;
}
.piede a:hover { color: #fff; }
.piede p { color: rgba(255,255,255,.6); }

.marchio-scuro { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.marchio-scuro img { width: 46px; flex: none; }
.marchio-scuro-testo { display: block; }
.marchio-nome {
  display: block;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
}
.marchio-nome em { font-style: normal; color: var(--teal); }
.marchio-claim {
  display: block;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oro);
  margin-top: 3px;
}

.piede-azienda p { line-height: 1.6; margin-bottom: 14px; }
.piede-azienda strong { color: rgba(255,255,255,.85); }

.piede-fondo {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 13.5px;
  color: rgba(255,255,255,.5);
}
.piede-fondo-link { display: flex; gap: 22px; }
.piede-fondo a { display: inline; }

/* ── Comparsa allo scorrimento ─────────────────────────────────────────── */

/* Il nascondino iniziale vale solo se lo script c'e' davvero (la classe .js
   la mette lui nel <head>). Senza JavaScript il contenuto si vede e basta:
   l'animazione e' un di piu', non la condizione per poter leggere. */
.js .animato {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .animato.visibile { opacity: 1; transform: none; }

/* ── Schermi piccoli ───────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .chi-griglia { grid-template-columns: 1fr; }
  .chi-segno { max-width: 170px; }
  .contatti-griglia { grid-template-columns: 1fr; }
  .promesse { grid-template-columns: 1fr; gap: 22px; }
  .piede-griglia { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 76px; }
  .apri-menu { display: flex; }

  .menu {
    position: fixed;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--bordo);
    box-shadow: 0 18px 40px rgba(15,34,64,.14);
    padding: 10px 24px 24px;
    /* Chiuso: non si vede e non si raggiunge nemmeno col tasto Tab. */
    display: none;
  }
  .menu.aperto { display: flex; }
  .menu > a { padding: 14px 0; border-bottom: 1px solid var(--bordo); }
  .menu > a::after { display: none; }
  .menu .bottone { justify-content: center; margin-top: 18px; border-bottom: 0; }
  .lingue { align-self: flex-start; margin-top: 18px; }

  .marchio img { width: 175px; }
  .barra-dentro { min-height: 68px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Sullo stretto il simbolo finirebbe dietro al testo: si sposta in alto,
     si rimpicciolisce e si fa ancora piu' tenue. */
  .eroe-segno {
    top: 16%;
    right: -22%;
    width: 72vw;
    opacity: .07;
  }
  .eroe-griglia { background-size: 44px 44px; }
  .modulo { grid-template-columns: 1fr; }
  .piede-griglia { grid-template-columns: 1fr; }
  .eroe-bottoni .bottone { width: 100%; justify-content: center; }
}

/* ── Pagina del sito vetrina statico ───────────────────────────────────────
   La pagina dei prezzi (/sito-vetrina/). L'apertura qui e' chiara, non scura
   come quella della home: chi arriva da una ricerca tipo "quanto costa un
   sito" deve vedere subito la cifra, e su fondo bianco il numero si stacca
   senza bisogno di decorazioni. */

.sv-apertura {
  background: linear-gradient(180deg, var(--nebbia) 0%, #fff 100%);
  padding-top: clamp(48px, 7vw, 86px);
  text-align: center;
}
.sv-apertura .occhiello { justify-content: center; }

.sv-titolo {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  margin: 0 0 18px;
}
/* La seconda riga prende i colori del logo, come il titolo della home, ma
   nelle versioni scure: qui il fondo e' chiaro. */
.sv-titolo em {
  font-style: normal;
  color: var(--teal-scuro);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .sv-titolo em {
    background: linear-gradient(100deg, var(--teal) 0%, var(--teal-scuro) 45%, var(--oro) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.sv-intro {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--testo-tenue);
  max-width: 64ch;
  margin: 0 auto 26px;
}

/* La promozione: si vede, ma non urla come un adesivo di saldi. */
.sv-promo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 30px;
  padding: 10px 18px;
  font-size: .95rem;
  font-weight: 600;
  color: #7a5611;
  background: #fdf6e7;
  border: 1px solid #f0dcae;
  border-radius: 999px;
}
.sv-promo::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oro);
  flex: none;
}

.sv-apertura .eroe-bottoni { justify-content: center; }
/* Il bottone vuoto nasce per il fondo scuro dell'apertura della home: qui
   sarebbe bianco su bianco. */
.sv-apertura .bottone-vuoto {
  color: var(--navy);
  border-color: var(--bordo);
  background: #fff;
}
.sv-apertura .bottone-vuoto:hover {
  background: var(--nebbia);
  border-color: var(--teal);
}

/* ── La scheda del prezzo ──────────────────────────────────────────────── */

.sv-prezzo {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  overflow: hidden;
}

.sv-prezzo-testa {
  background: var(--navy);
  color: rgba(255,255,255,.76);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sv-prezzo-testa h3 {
  color: #fff;
  font-size: 1.22rem;
  margin: 0 0 18px;
}
.sv-prezzo-da {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6fd6c6;
  margin: 0 0 2px;
}
.sv-prezzo-cifra {
  font-size: clamp(3rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 10px;
}
.sv-prezzo-cifra span {
  font-size: .5em;
  font-weight: 600;
  color: #6fd6c6;
  margin-left: 2px;
}
.sv-prezzo-iva {
  font-size: .92rem;
  margin: 0 0 20px;
}
.sv-prezzo-sotto {
  font-size: .88rem;
  color: rgba(255,255,255,.62);
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 16px;
  margin: 0;
}

.sv-prezzo-corpo { padding: 36px 34px; }
.sv-prezzo-corpo h4 {
  font-size: 1.02rem;
  color: var(--navy);
  margin: 0 0 16px;
}

.sv-incluso {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 11px 26px;
}
.sv-incluso li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .97rem;
  line-height: 1.5;
}
.sv-incluso .icona {
  width: 19px; height: 19px;
  flex: none;
  margin-top: 2px;
  color: var(--teal);
}

/* I costi che tornano ogni anno: dentro un riquadro, perche' e' la domanda
   che tutti fanno per seconda e non va cercata in mezzo al testo. */
.sv-ricorrenti {
  background: var(--nebbia);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 28px;
}
.sv-ricorrenti h4 { margin-bottom: 8px; }
.sv-ricorrenti p {
  margin: 0;
  font-size: .95rem;
  color: var(--testo-tenue);
}

/* ── Perche' il prezzo varia ───────────────────────────────────────────── */

.sv-fattori {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.sv-fattore {
  background: #fff;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--teal);
  border-radius: var(--raggio);
  padding: 26px 26px 22px;
  box-shadow: var(--ombra);
}
.sv-fattore-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.sv-fattore h3 {
  font-size: 1.08rem;
  margin: 0;
}
.sv-fattore p {
  margin: 0;
  font-size: .97rem;
  color: var(--testo-tenue);
}
/* La cifra accanto al fattore: e' il punto della pagina, quindi si legge
   come un'etichetta e non come una nota a margine. */
.sv-quanto {
  flex: none;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--teal-scuro);
  background: #eaf7f5;
  border-radius: 999px;
  padding: 5px 12px;
}

.sv-chiusa {
  max-width: 70ch;
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-size: 1.04rem;
  color: var(--testo);
  border-left: 3px solid var(--oro);
  padding-left: 20px;
}

/* ── Le voci che non si pagano (sezione scura) ─────────────────────────── */

.sv-no {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.sv-no li {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--raggio);
  padding: 26px 24px;
}
.sv-no h3 {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.sv-no p {
  margin: 0;
  font-size: .96rem;
  color: rgba(255,255,255,.7);
}

/* ── Quando non va bene ────────────────────────────────────────────────── */

.sv-limiti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.sv-limiti li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: .99rem;
}
/* Un segno di divieto, disegnato col bordo: niente immagini da caricare. */
.sv-limiti li::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  margin-top: 4px;
  border: 2px solid #d9a3a3;
  border-radius: 50%;
  background: linear-gradient(45deg, transparent 44%, #d9a3a3 44%, #d9a3a3 56%, transparent 56%);
}

/* ── Domande frequenti ─────────────────────────────────────────────────── */

.sv-faq {
  display: grid;
  gap: 12px;
}
.sv-faq details {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 0 22px;
  transition: border-color .2s;
}
.sv-faq details[open] { border-color: #bfe3dd; }
.sv-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  position: relative;
  font-weight: 650;
  color: var(--navy);
}
.sv-faq summary::-webkit-details-marker { display: none; }
/* Il piu' che diventa meno: due righe, una delle quali ruota di 90 gradi. */
.sv-faq summary::after,
.sv-faq summary::before {
  content: "";
  position: absolute;
  right: 4px;
  top: calc(50% - 1px);
  width: 13px; height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transition: transform .2s;
}
.sv-faq summary::before { transform: rotate(90deg); }
.sv-faq details[open] summary::before { transform: rotate(0deg); }
.sv-faq summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.sv-faq details p {
  margin: 0;
  padding: 0 0 20px;
  font-size: .98rem;
  color: var(--testo-tenue);
  max-width: 68ch;
}

/* ── Schermi piccoli ───────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .sv-prezzo { grid-template-columns: 1fr; }
  .sv-prezzo-testa { padding: 30px 26px; text-align: center; }
  .sv-prezzo-corpo { padding: 28px 24px; }
  .sv-fattore-testa { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 560px) {
  .sv-apertura .eroe-bottoni { flex-direction: column; }
  .sv-apertura .eroe-bottoni .bottone { width: 100%; justify-content: center; }
  .sv-promo { border-radius: 14px; }
}

/* ── Chi ha chiesto meno movimento ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* Senza questo le animazioni a ciclo continuo (il respiro del simbolo)
       ripartirebbero all'infinito ogni centesimo di millisecondo. */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .animato { opacity: 1; transform: none; }
}

/* ── Stampa ────────────────────────────────────────────────────────────── */

@media print {
  .barra, .eroe-bottoni, .modulo-scatola, .apri-menu, .salta,
  .eroe-sfondo, .vetrina { display: none; }
  .eroe h1 em { color: #000 !important; -webkit-text-fill-color: #000; }
  .promesse li { border-color: #ccc; background: none; }
  .eroe, .sezione-scura, .piede { background: #fff !important; color: #000 !important; }
  .eroe h1, .sezione-scura .titolo-sezione, .passi h3 { color: #000 !important; }
  .animato { opacity: 1 !important; transform: none !important; }
}

/* ── Il richiamo alla pagina dei prezzi, in fondo ai servizi ─────────────── */
/* Non e' una scheda come quelle sopra: ha il fondo colorato e sta su una
   riga sola, cosi' si legge come un'uscita dalla sezione e non come un
   settimo servizio. */

.richiamo-vetrina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 28px 32px;
  background: linear-gradient(100deg, #eaf7f5 0%, var(--nebbia) 100%);
  border: 1px solid #cfe9e4;
  border-radius: var(--raggio);
}
.richiamo-vetrina h3 {
  font-size: 1.14rem;
  margin: 0 0 6px;
}
.richiamo-vetrina p {
  margin: 0;
  color: var(--testo-tenue);
  max-width: 62ch;
}
.richiamo-vetrina .bottone { flex: none; }

@media (max-width: 560px) {
  .richiamo-vetrina { padding: 24px 22px; }
  .richiamo-vetrina .bottone { width: 100%; justify-content: center; }
}