/* ------------------------------------------------------------------
   Rationa — foglio di stile del sito.

   La struttura è quella dei siti dei grandi gestionali italiani — testata
   con la linguetta «Contattaci», apertura scura, riquadri delle soluzioni,
   approfondimenti per argomento, modulo diviso in due — perché è quella che
   chi compra un gestionale si aspetta di trovare. I colori sono quelli dei
   programmi: il navy della barra laterale, il blu di Flow, il verde
   acqua di Retail.
   ------------------------------------------------------------------ */

:root {
  --navy: #0c1c36;
  --navy-2: #13294d;
  --ardesia: #1f3349;
  --ardesia-2: #26405b;
  --ardesia-3: #31506f;
  --blu: #2563eb;
  --blu-chiaro: #3b82f6;
  --blu-tenue: #e8f0fe;
  --celeste: #d7e8fb;
  --retail: #0f9b8e;
  --retail-chiaro: #14b8a6;
  --retail-tenue: #def5f2;
  --testo: #18222f;
  --testo-medio: #4a5768;
  --testo-tenue: #7c8798;
  --grigio: #f1f3f6;
  --bordo: #dfe5ee;
  --bianco: #fff;
  --ombra: 0 1px 2px rgba(16, 30, 54, .06), 0 14px 34px rgba(16, 30, 54, .10);
  --larghezza: 1200px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bianco);
  color: var(--testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Ubuntu,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -.4px; }

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

section { scroll-margin-top: 130px; }

.occhiello {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blu);
  margin-bottom: 10px;
}

/* ---- I prezzi di Retail ---------------------------------------- */
.prezzi-retail { padding: 80px 0; background: var(--grigio); }
.prezzi-retail h2 { margin: 0 0 8px; text-align: center; font-size: clamp(26px, 3vw, 36px); }
.prezzi-retail .sottotitolo { margin: 0 auto 36px; text-align: center; color: var(--testo-medio); max-width: 56ch; }
.prezzi-retail .piani { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 860px; margin: 0 auto; }
.prezzi-retail .piano { background: #fff; border: 1px solid #dfe5ec; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; }
.prezzi-retail .piano.evidenza { border: 2px solid var(--retail); box-shadow: 0 10px 30px rgba(15, 155, 142, .14); }
.prezzi-retail .etichetta { align-self: flex-start; background: var(--retail-tenue); color: #0b7a70; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 99px; }
.prezzi-retail h3 { margin: 14px 0 6px; font-size: 22px; }
.prezzi-retail .cifra { font-size: 44px; font-weight: 800; line-height: 1.1; margin-bottom: 18px; }
.prezzi-retail .cifra small { display: block; font-size: 14px; font-weight: 500; color: var(--testo-medio); }
.prezzi-retail .spunte { margin: 0 0 24px; flex: 1; }
.prezzi-retail .bottone { align-self: flex-start; }
.prezzi-retail .a-parte { margin: 28px auto 0; text-align: center; color: var(--testo-medio); font-size: 14px; max-width: 70ch; }
@media (max-width: 760px) { .prezzi-retail .piani { grid-template-columns: 1fr; } .prezzi-retail { padding: 56px 0; } }

/* ================================================================
   TESTATA
   ================================================================ */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bianco);
  box-shadow: 0 1px 0 var(--bordo);
}

.servizio {
  display: flex;
  justify-content: flex-end;
  gap: 26px;
  font-size: 12.5px;
  padding: 6px 230px 0 0;
}

.servizio a { color: var(--testo-tenue); }

.testata .riga {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
  max-width: none;
  padding-right: 0;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--navy);
  text-decoration: none !important;
  line-height: 1.05;
}

.marchio img { width: 42px; height: 42px; border-radius: 11px; }
.marchio strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.marchio small { display: block; font-size: 11.5px; color: var(--testo-tenue); letter-spacing: .4px; }

.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; height: 100%; }

.menu > a, .menu .voce > button {
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--testo);
  background: none;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 8px;
}

.menu > a.linguetta { border-radius: 0; }

.menu > a:hover, .menu .voce > button:hover { background: var(--grigio); text-decoration: none; }
.menu > a.attiva { color: var(--blu); }

.voce { position: relative; }

.tendina {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 330px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  box-shadow: var(--ombra);
  padding: 8px;
  display: none;
}

/* Il ponte invisibile fra la voce e la tendina: senza, scendendo col mouse
   si passa sopra un vuoto e la tendina si chiude prima di arrivarci. */
.tendina::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.voce:hover .tendina, .voce.aperta .tendina, .voce:focus-within .tendina { display: block; }

.tendina a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--testo);
  text-decoration: none;
}

.tendina a:hover { background: var(--grigio); }
.tendina strong { display: block; font-size: 15px; }
.tendina small { display: block; color: var(--testo-tenue); font-size: 13px; }

.pastiglia {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

.pastiglia.business { background: linear-gradient(135deg, var(--blu-chiaro), var(--blu)); }
.pastiglia.retail { background: linear-gradient(135deg, var(--retail-chiaro), var(--retail)); }
.pastiglia.misura { background: linear-gradient(135deg, #6b7c93, var(--ardesia)); }

/* La linguetta «Contattaci», tagliata in obliquo come una scheda. */
.menu > a.linguetta, .linguetta {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-top: -26px;
  padding: 26px 34px 0 46px;
  background: linear-gradient(135deg, var(--blu-chiaro), var(--blu));
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none !important;
}

.menu > a.linguetta:hover, .linguetta:hover { background: linear-gradient(135deg, #4f8ff8, #1d4ed8); }

.apri-menu { display: none; }

/* ================================================================
   BOTTONI
   ================================================================ */

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15.5px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.bottone:hover { transform: translateY(-1px); }
.bottone::after { content: "›"; font-size: 22px; line-height: 0; margin-top: -2px; }
.bottone.senza-freccia::after { content: none; }

.bottone.primario { background: var(--blu); box-shadow: 0 6px 18px rgba(37, 99, 235, .3); }
.bottone.primario:hover { background: #1d4ed8; }
.bottone.retail { background: var(--retail); box-shadow: 0 6px 18px rgba(15, 155, 142, .3); }
.bottone.retail:hover { background: #0b7a70; }
.bottone.scuro { background: var(--ardesia); }
.bottone.scuro:hover { background: var(--ardesia-2); }
.bottone.chiaro { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); }

/* ================================================================
   HOME — APERTURA
   ================================================================ */

.apertura {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  min-height: 520px;
  background: var(--navy);
  overflow: hidden;
}

.apertura .testo {
  position: relative;
  z-index: 2;
  padding: 70px 70px 56px max(28px, calc((100vw - var(--larghezza)) / 2 + 28px));
  background:
    radial-gradient(600px 300px at 0% 100%, rgba(37, 99, 235, .25), transparent 70%),
    linear-gradient(160deg, #0d2140, #0c1c36);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  margin-right: -60px;
}

.apertura h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.12;
  font-weight: 800;
}

.apertura p { margin: 0 0 28px; color: #c7d6ef; font-size: 17.5px; max-width: 46ch; }

.punti-forza {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 230px));
  gap: 20px 30px;
}

.punto-forza {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9cc0f5;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.25;
}

.punto-forza svg { width: 28px; height: 28px; flex: none; color: #8fb6f2; }
.punto-forza span { color: #dbe7fa; display: block; }

/* La giostra a destra: una schermata per prodotto, con il cartiglio sopra. */
.giostra { position: relative; min-height: 520px; background: #e9eef5; }

.diapositiva {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
  display: grid;
  place-items: center;
  padding: 40px 40px 40px 100px;
}

.diapositiva.attiva { opacity: 1; visibility: visible; }

.diapositiva::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 300px at 70% 30%, rgba(59, 130, 246, .25), transparent 70%),
    linear-gradient(135deg, #dfe8f4, #eef3f9);
}

.diapositiva.retail::before {
  background:
    radial-gradient(500px 300px at 70% 30%, rgba(20, 184, 166, .25), transparent 70%),
    linear-gradient(135deg, #dcefec, #eef6f5);
}

/* Il portatile: cornice scura, schermo, base. */
.portatile { position: relative; width: min(640px, 100%); }

.portatile .schermo {
  background: #0d1424;
  border-radius: 16px 16px 6px 6px;
  padding: 14px 14px 18px;
  box-shadow: 0 30px 60px rgba(9, 20, 40, .35);
}

.portatile .schermo img { border-radius: 4px; }

.portatile .base {
  height: 16px;
  margin: 0 -7%;
  background: linear-gradient(#c9d2de, #9aa6b6);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 16px 24px rgba(9, 20, 40, .25);
}

.cartiglio {
  position: absolute;
  z-index: 2;
  top: 64px;
  left: 110px;
  max-width: 320px;
  background: rgba(16, 32, 58, .9);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 18px 22px;
  border-radius: 6px;
}

.cartiglio small {
  display: block;
  color: #8fb6f2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.retail .cartiglio small { color: #6fe3d5; }
.cartiglio strong { display: block; font-size: 22px; line-height: 1.2; margin: 4px 0 10px; }
.cartiglio a { color: #fff; font-weight: 600; font-size: 14.5px; }

.frecce {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 20px;
  display: flex;
  gap: 8px;
}

.frecce button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 32, 58, .75);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.frecce button:hover { background: var(--navy); }

/* ================================================================
   HOME — SOLUZIONI
   ================================================================ */

.soluzioni { background: var(--grigio); padding: 90px 0; position: relative; overflow: hidden; }

.soluzioni::before, .soluzioni::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background: #e4e8ee;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  left: -60px;
  top: 40px;
}

.soluzioni::after { width: 140px; height: 140px; left: 30px; top: 330px; }

.soluzioni .contenitore {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.soluzioni h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; margin: 0 0 16px; }
.soluzioni p { color: var(--testo-medio); margin: 0; max-width: 42ch; }

.riquadri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.riquadri.tre { grid-template-columns: repeat(3, 1fr); }

.riquadro {
  display: block;
  background: var(--ardesia);
  border-left: 4px solid var(--blu-chiaro);
  padding: 20px 22px;
  color: #fff;
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease;
}

.riquadro:hover { transform: translateY(-2px); background: var(--ardesia-2); }
.riquadro.retail { border-left-color: var(--retail-chiaro); }
.riquadro.misura { border-left-color: #94a3b8; }

.riquadro .nome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}

.riquadro .nome { gap: 12px; }
.riquadro .nome img, .riquadro .nome .icona-svg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* Le due voci che non sono un'app hanno un'icona disegnata, su un quadrato
   colorato come le icone dei programmi. */
.icona-svg {
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
}
.icona-svg svg { width: 58%; height: 58%; }
.icona-svg.misura { background: linear-gradient(145deg, #64748b, #1e293b); }
.icona-svg.insieme { background: linear-gradient(145deg, #3b82f6 0%, #14b8a6 50%, #7c3aed 100%); }

img.pastiglia { object-fit: cover; }
.riquadro .per { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #cfdcef; }
.riquadro .descr { display: block; margin-top: 8px; font-size: 13.5px; color: #9fb2cc; line-height: 1.45; }

/* ================================================================
   PER INFO E PREZZI
   ================================================================ */

.info-prezzi { padding: 0 0 70px; background: linear-gradient(var(--grigio) 50%, #dde9f3 50%); }

.info-prezzi .scatola {
  max-width: 900px;
  margin: 0 auto;
  background: #e9edf2;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 36px;
  position: relative;
  overflow: hidden;
}

.info-prezzi .nuvola { width: 90px; height: 70px; color: #cfd6df; }
.info-prezzi h3 { margin: 0 0 4px; font-size: 24px; }
.info-prezzi p { margin: 0; color: var(--testo-medio); font-size: 15px; }
.info-prezzi .azioni { display: grid; gap: 8px; }
.info-prezzi .bottone { justify-content: space-between; min-width: 250px; padding: 9px 18px; font-size: 15px; }

/* ================================================================
   NOVITÀ
   ================================================================ */

.novita { background: #dde9f3; padding: 30px 0 80px; text-align: center; }
.novita h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 0 0 40px; }

.carte-novita { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }

.carta-novita {
  background: #cfdce7;
  display: flex;
  flex-direction: column;
  color: var(--testo);
  text-decoration: none !important;
  transition: transform .15s ease;
}

.carta-novita:hover { transform: translateY(-3px); }
.carta-novita img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; width: 100%; }
.carta-novita .corpo { padding: 14px 16px 20px; }

.etichette { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--testo-medio); margin-bottom: 8px; }
.tag { background: #5d7a8f; color: #fff; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.tag.business { background: var(--blu); }
.tag.retail { background: var(--retail); }
.carta-novita h3 { margin: 0 0 8px; font-size: 16.5px; line-height: 1.3; }
.carta-novita p { margin: 0; font-size: 13.5px; color: var(--testo-medio); line-height: 1.5; }

/* ================================================================
   APPROFONDIMENTI
   ================================================================ */

/* Fondo navy come la barra dei programmi; ogni gruppo ha il colore del suo
   prodotto — blu le imprese, verde acqua i negozi, ardesia per tutti — così
   si capisce a colpo d'occhio dove porta una voce. Le voci sono tessere
   chiare su fondo scuro: prima erano azzurro su azzurro, e si confondevano. */
.approfondimenti {
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(59, 130, 246, .22), transparent 65%),
    radial-gradient(600px 320px at 0% 100%, rgba(20, 184, 166, .14), transparent 65%),
    linear-gradient(160deg, #0b1830 0%, #10264a 60%, #0c1c36 100%);
  color: #fff;
  padding: 80px 0 96px;
}

.approfondimenti .occhiello { color: #93b4f8; }
.approfondimenti h2 { font-size: clamp(26px, 3vw, 38px); margin: 18px 0 8px; }
.approfondimenti .contenitore > p { margin: 0 0 44px; color: #b9cbe6; }

.gruppi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }

.gruppo {
  --tinta: var(--blu-chiaro);
  --tinta-tenue: rgba(59, 130, 246, .16);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-top: 3px solid var(--tinta);
  border-radius: 12px;
  padding: 22px 20px 22px;
}

.gruppo.retail { --tinta: var(--retail-chiaro); --tinta-tenue: rgba(20, 184, 166, .16); }
.gruppo.largo { grid-column: 1 / -1; --tinta: #94a3b8; --tinta-tenue: rgba(148, 163, 184, .16); }

.gruppo h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #fff;
}

.gruppo h3::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tinta);
  box-shadow: 0 0 0 4px var(--tinta-tenue);
}

.argomenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gruppo.largo .argomenti { grid-template-columns: repeat(6, 1fr); }

.argomenti a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  background: #fff;
  border-radius: 8px;
  border-left: 4px solid var(--tinta);
  color: var(--testo);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  line-height: 1.3;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(3, 10, 24, .25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.argomenti a::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
  color: var(--tinta);
  font-weight: 700;
  transition: transform .15s ease;
}

.argomenti a:hover {
  transform: translateY(-2px);
  background: #f4f8ff;
  box-shadow: 0 8px 20px rgba(3, 10, 24, .35);
}

.gruppo.retail .argomenti a:hover { background: #f0fbf9; }
.argomenti a:hover::after { transform: translateX(3px); }

/* ================================================================
   METODO (al posto delle storie di successo: quelle si raccontano
   quando ci sono, con nome e cognome)
   ================================================================ */

.metodo { background: #4f6461; color: #fff; padding: 70px 0 84px; }
.metodo .occhiello { color: #cde3dc; }
.metodo h2 { font-size: clamp(26px, 3vw, 36px); margin: 18px 0 40px; max-width: 26ch; line-height: 1.2; }

.passi { counter-reset: passo; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.passo {
  counter-increment: passo;
  background: rgba(255, 255, 255, .08);
  border-top: 3px solid #cde3dc;
  padding: 22px 20px;
}

.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: rgba(255, 255, 255, .35);
  line-height: 1;
  margin-bottom: 10px;
}

.passo h3 { margin: 0 0 6px; font-size: 18px; }
.passo p { margin: 0; color: #dbe9e4; font-size: 14.5px; }

/* ================================================================
   CONTATTI (modulo diviso in due)
   ================================================================ */

.contatti { display: grid; grid-template-columns: 1fr 1fr; }

.contatti .lato {
  position: relative;
  overflow: hidden;
  background: var(--ardesia);
  color: #fff;
  padding: 70px 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contatti .lato::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  top: -120px;
  right: -160px;
}

.contatti .lato > * { position: relative; }
.contatti .lato .occhiello { color: #cfe0f4; }
.contatti .lato h2 { font-size: clamp(28px, 3vw, 38px); margin: 26px 0 10px; }
.contatti .lato p { color: #d3e1f2; max-width: 44ch; margin: 0 0 34px; font-size: 15.5px; }
.contatti .lato h3 { font-size: 18px; margin: 0 0 14px; }
.contatti .lato .bottone { min-width: 250px; justify-content: space-between; margin-bottom: 10px; }
.contatti .lato .copiato { font-size: 13px; color: #9fe3b8; min-height: 18px; }

.modulo { background: var(--bianco); display: flex; flex-direction: column; }
.modulo .campi { padding: 44px 54px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.modulo .pieno { grid-column: 1 / -1; }

.campo { display: grid; gap: 2px; }

.campo > span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--testo);
}

.campo em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--testo-tenue); }

.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: 15.5px;
  border: 0;
  border-bottom: 1px solid #b9c3cf;
  padding: 8px 0;
  background: transparent;
  color: var(--testo);
  outline: none;
  border-radius: 0;
}

.campo select {
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2318222f' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center;
}

.campo textarea { resize: vertical; min-height: 60px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-bottom-color: var(--blu); }
.campo input:user-invalid, .campo select:user-invalid { border-bottom-color: #dc2626; }

.privacy { background: var(--grigio); padding: 22px 54px 26px; font-size: 13.5px; color: var(--testo-medio); }
.privacy h4 { margin: 0 0 10px; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; color: var(--testo); }
.privacy label { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.privacy input { margin-top: 3px; accent-color: var(--blu); }

.invia {
  border: 0;
  background: #3e6680;
  color: #fff;
  font: inherit;
  font-size: 20px;
  letter-spacing: 1px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.invia:hover { background: #335871; }
.invia[disabled] { opacity: .7; cursor: default; }
.invia svg { width: 20px; height: 20px; }

.esito { margin: 0; padding: 0 54px 14px; font-size: 14px; }
.esito:empty { display: none; }
.esito.fallito { color: #b91c1c; padding-top: 12px; }
.esito a { font-weight: 600; }

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.grazie { background: var(--bianco); padding: 70px 54px; text-align: center; display: grid; place-items: center; align-content: center; gap: 10px; }
.grazie .segno { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 32px; display: grid; place-items: center; }
.grazie h3 { margin: 6px 0 0; font-size: 26px; }
.grazie p { margin: 0; color: var(--testo-medio); max-width: 42ch; }
.grazie button { font: inherit; margin-top: 10px; background: none; border: 1px solid var(--bordo); padding: 9px 16px; border-radius: 6px; cursor: pointer; }

/* ================================================================
   PIÈ DI PAGINA
   ================================================================ */

.chiusura { background: #2e3237; color: #d6dbe2; padding: 44px 0 36px; font-size: 14px; }
.chiusura .contenitore { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 40px; align-items: start; }
.chiusura .marchio { color: #fff; }
.chiusura .marchio small { color: #aab3bf; }
.chiusura h4 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #8fb6f2; }
.chiusura a { color: #fff; font-weight: 600; }
.chiusura ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chiusura .legale { font-size: 12.5px; color: #aab3bf; line-height: 1.6; }
.chiusura .legale p { margin: 0 0 10px; }

/* ================================================================
   PAGINE DI PRODOTTO
   ================================================================ */

.sotto-menu {
  position: sticky;
  top: 89px;
  z-index: 40;
  background: var(--grigio);
  border-bottom: 1px solid var(--bordo);
}

.sotto-menu .contenitore { display: flex; align-items: center; gap: 30px; height: 56px; }

.sotto-menu .prodotto-nome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--blu);
  text-transform: uppercase;
  margin-right: auto;
  text-decoration: none !important;
}

.sotto-menu .prodotto-nome img { width: 32px; height: 32px; border-radius: 8px; }
.pagina-retail .sotto-menu .prodotto-nome { color: var(--retail); }
.sotto-menu nav { display: flex; gap: 26px; }
.sotto-menu nav a { color: var(--testo); font-size: 14.5px; font-weight: 600; }
.sotto-menu nav a.attiva { color: var(--blu); }
.pagina-retail .sotto-menu nav a.attiva { color: var(--retail); }

.testa-prodotto {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: right top;
  color: #fff;
}

.testa-prodotto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 24, 46, .98) 0%, rgba(10, 24, 46, .95) 48%, rgba(10, 24, 46, .55) 75%, rgba(10, 24, 46, .25) 100%);
}

.pagina-retail .testa-prodotto::before {
  background: linear-gradient(90deg, rgba(6, 40, 44, .98) 0%, rgba(6, 40, 44, .95) 48%, rgba(6, 40, 44, .55) 75%, rgba(6, 40, 44, .25) 100%);
}

.testa-prodotto .contenitore { position: relative; }
.testa-prodotto h1 { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.12; margin: 0 0 16px; max-width: 18ch; font-weight: 800; }
.testa-prodotto p { margin: 0 0 26px; color: #d3e1f2; font-size: 18px; max-width: 50ch; }
.testa-prodotto .azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.testa-prodotto .nota-scarica { margin: 14px 0 0; font-size: 14px; color: #a9bdd6; }

/* La fascia «pensato per», al posto dei loghi dei clienti. */
.fascia-pensato { background: #3d4a57; color: #fff; }
.fascia-pensato .contenitore { display: grid; grid-template-columns: 260px 1fr; align-items: stretch; padding: 0; }

.fascia-pensato .titolo {
  background: #2f3a45;
  padding: 18px 28px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

.fascia-pensato .titolo small { display: block; font-size: 13px; font-weight: 500; color: #c3cfdc; margin-top: 4px; }
.fascia-pensato ul { list-style: none; margin: 0; padding: 0 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 10px 26px; }
.fascia-pensato li { font-size: 15px; font-weight: 600; letter-spacing: .5px; color: #e8eef6; display: flex; align-items: center; gap: 8px; }
.fascia-pensato li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blu-chiaro); }
.pagina-retail .fascia-pensato li::before { background: var(--retail-chiaro); }

/* Vantaggi: tre carte celesti e l'elenco di spunte accanto. */
.vantaggi { background: var(--grigio); padding: 70px 0; }
.vantaggi .contenitore { display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 20px; align-items: start; }

.carta-vantaggio { background: var(--celeste); padding: 22px 20px 26px; height: 100%; }
.pagina-retail .carta-vantaggio { background: var(--retail-tenue); }
.carta-vantaggio .spunta { color: var(--blu); font-size: 22px; font-weight: 800; line-height: 1; }
.pagina-retail .carta-vantaggio .spunta { color: var(--retail); }
.carta-vantaggio h3 { margin: 6px 0 12px; font-size: 20px; line-height: 1.2; }
.carta-vantaggio p { margin: 0; font-size: 14.5px; color: var(--testo-medio); }

.spunte { list-style: none; margin: 0; padding: 0 0 0 10px; display: grid; gap: 14px; }
.spunte li { display: flex; gap: 12px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.spunte li::before { content: "✓"; color: var(--blu); font-weight: 800; }
.pagina-retail .spunte li::before { color: var(--retail); }

/* A chi si rivolge, accanto alla descrizione lunga. */
.chi-e { display: grid; grid-template-columns: .75fr 1.25fr; }

.chi-e .lato {
  background: #5c6670;
  color: #fff;
  padding: 70px 40px 60px max(28px, calc((100vw - var(--larghezza)) / 2 + 28px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chi-e .lato h3 { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #dbe7f5; margin: 0 0 18px; font-weight: 600; }
.chi-e .lato ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.chi-e .lato li { border-left: 2px solid #fff; padding-left: 10px; font-weight: 700; font-size: 15.5px; line-height: 1.2; }

.chi-e .descrizione { background: var(--celeste); padding: 64px max(28px, calc((100vw - var(--larghezza)) / 2 + 28px)) 64px 60px; }
.pagina-retail .chi-e .descrizione { background: var(--retail-tenue); }
.chi-e h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; margin: 0 0 22px; }
.chi-e .descrizione p { margin: 0 0 16px; color: #2a3646; font-size: 16.5px; padding-left: 50px; }

/* Funzionalità: colonne di voci che si aprono. */
.funzionalita { background: var(--ardesia); color: #fff; padding: 80px 0 90px; }
.funzionalita h2 { text-align: center; font-size: clamp(28px, 3vw, 38px); margin: 0 0 12px; }
.funzionalita .sottotitolo { text-align: center; color: #c3d3e6; margin: 0 auto 46px; max-width: 60ch; }

.colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.colonna { background: #1a2b3e; padding: 14px 14px 10px; }

.colonna h3 {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #dbe7f5;
}

.colonna details { background: var(--ardesia-3); border-left: 3px solid #bcd3ee; margin-bottom: 8px; }
.pagina-retail .colonna details { border-left-color: #6fe3d5; }
.colonna summary { list-style: none; cursor: pointer; padding: 9px 12px; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.colonna summary::-webkit-details-marker { display: none; }
.colonna summary::after { content: "+"; color: #9fb7d3; font-weight: 700; }
.colonna details[open] summary::after { content: "–"; }
.colonna details p { margin: 0; padding: 0 12px 12px; font-size: 14px; color: #d3e1f2; line-height: 1.5; }

/* Blocchi con la schermata: immagine e testo affiancati. */
.blocco { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.blocco .immagine { background: var(--navy); padding: 50px 40px; display: grid; place-items: center; }
.pagina-retail .blocco .immagine { background: #0a2e33; }
.blocco .immagine img { border-radius: 6px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); cursor: zoom-in; }
.blocco .parole { padding: 60px max(28px, calc((100vw - var(--larghezza)) / 2 + 28px)) 60px 60px; align-self: center; }
.blocco.inverso .immagine { order: 2; }
.blocco.inverso .parole { padding: 60px 60px 60px max(28px, calc((100vw - var(--larghezza)) / 2 + 28px)); }
.blocco h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 0 0 14px; line-height: 1.2; }
.blocco p { margin: 0 0 12px; color: var(--testo-medio); }
.blocco.chiaro { background: #e3ecf3; }
.pagina-retail .blocco.chiaro { background: #e2f1ef; }

/* Videate. */
.videate { background: var(--grigio); padding: 80px 0; }
.videate h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 0 0 8px; }
.videate .contenitore > p { color: var(--testo-medio); margin: 0 0 34px; }
.griglia-videate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.griglia-videate figure { margin: 0; background: var(--bianco); border: 1px solid var(--bordo); padding: 10px; }
.griglia-videate img { cursor: zoom-in; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; width: 100%; }
.griglia-videate figcaption { font-size: 13.5px; color: var(--testo-medio); padding: 10px 4px 2px; }
.griglia-videate figcaption strong { color: var(--testo); }

/* Utility e domande. */
.utility-faq { display: grid; grid-template-columns: 1fr 1fr; }
.utility-faq .utility { padding: 60px 50px 60px max(28px, calc((100vw - var(--larghezza)) / 2 + 28px)); background: var(--bianco); }
.utility-faq .faq { padding: 60px max(28px, calc((100vw - var(--larghezza)) / 2 + 28px)) 60px 50px; background: #e6e8eb; }
.utility-faq h2 { margin: 0 0 22px; font-size: 26px; }

.utili { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.utili a, .utili button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ardesia);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 12px;
  border: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1.25;
}

.utili a::after, .utili button::after { content: "›"; font-size: 18px; }
.utili a:hover, .utili button:hover { background: var(--ardesia-2); }

.requisiti { margin-top: 22px; background: var(--grigio); padding: 18px 20px; font-size: 14.5px; }
.requisiti h3 { margin: 0 0 8px; font-size: 16px; }
.requisiti ul { margin: 0; padding-left: 18px; color: var(--testo-medio); }

.faq details { background: #c9d6e1; margin-bottom: 8px; }
.pagina-retail .faq details { background: #c4e3de; }
.faq summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--testo-medio); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 14px 14px; font-size: 14.5px; color: #2a3646; }

/* Completa con gli altri prodotti. */
.completa { background: var(--grigio); padding: 70px 0; }
.completa .contenitore { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.completa h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 0; line-height: 1.25; }

/* ================================================================
   GLI ALTRI PRODOTTI: stessi elementi di Retail, con il colore della loro app.
   ================================================================ */

/* ---- Horeca: viola, come la sua app ---- */
.pastiglia.horeca { background: linear-gradient(135deg, #845ef7, #6741d9); }
.bottone.horeca { background: #6741d9; box-shadow: 0 6px 18px rgba(103, 65, 217, .3); }
.bottone.horeca:hover { background: #5f3dc4; }
.diapositiva.horeca::before {
  background:
    radial-gradient(500px 300px at 70% 30%, rgba(132, 94, 247, .25), transparent 70%),
    linear-gradient(135deg, #e6defa, #f3effd);
}
.horeca .cartiglio small { color: #c4b5fd; }
.riquadro.horeca { border-left-color: #845ef7; }
.riquadro.horeca .nome img { box-shadow: 0 0 0 2px #845ef7, 0 4px 14px rgba(132, 94, 247, .45); }
.tag.horeca { background: #6741d9; }
.gruppo.horeca { --tinta: #845ef7; --tinta-tenue: rgba(132, 94, 247, .16); }
.gruppo.horeca .argomenti a:hover { background: #f6f3ff; }
.pagina-horeca .sotto-menu .prodotto-nome { color: #6741d9; }
.pagina-horeca .sotto-menu nav a.attiva { color: #6741d9; }
.pagina-horeca .testa-prodotto::before {
  background: linear-gradient(90deg, rgba(28, 16, 60, .98) 0%, rgba(28, 16, 60, .95) 48%, rgba(28, 16, 60, .55) 75%, rgba(28, 16, 60, .25) 100%);
}
.pagina-horeca .fascia-pensato li::before { background: #845ef7; }
.pagina-horeca .carta-vantaggio { background: #efe9ff; }
.pagina-horeca .carta-vantaggio .spunta { color: #6741d9; }
.pagina-horeca .spunte li::before { color: #6741d9; }
.pagina-horeca .chi-e .descrizione { background: #efe9ff; }
.pagina-horeca .colonna details { border-left-color: #c4b5fd; }
.pagina-horeca .blocco .immagine { background: #1f1442; }
.pagina-horeca .blocco.chiaro { background: #ece6fb; }
.pagina-horeca .faq details { background: #d8ccf7; }

/* ---- Host: arancio, come la sua icona ---- */
.pastiglia.host { background: linear-gradient(135deg, #fd7e14, #e8590c); }
.bottone.host { background: #e8590c; box-shadow: 0 6px 18px rgba(232, 89, 12, .3); }
.bottone.host:hover { background: #c2410c; }
.diapositiva.host::before {
  background:
    radial-gradient(500px 300px at 70% 30%, rgba(253, 126, 20, .25), transparent 70%),
    linear-gradient(135deg, #f8e6da, #fbf3ee);
}
.host .cartiglio small { color: #ffb38a; }
.riquadro.host { border-left-color: #fd7e14; }
.riquadro.host .nome img { box-shadow: 0 0 0 2px #fd7e14, 0 4px 14px rgba(253, 126, 20, .45); }
.tag.host { background: #e8590c; }
.gruppo.host { --tinta: #fd7e14; --tinta-tenue: rgba(253, 126, 20, .16); }
.gruppo.host .argomenti a:hover { background: #fff6f0; }
.pagina-host .sotto-menu .prodotto-nome { color: #e8590c; }
.pagina-host .sotto-menu nav a.attiva { color: #e8590c; }
.pagina-host .testa-prodotto::before {
  background: linear-gradient(90deg, rgba(60, 22, 6, .98) 0%, rgba(60, 22, 6, .95) 48%, rgba(60, 22, 6, .55) 75%, rgba(60, 22, 6, .25) 100%);
}
.pagina-host .fascia-pensato li::before { background: #fd7e14; }
.pagina-host .carta-vantaggio { background: #fff0e6; }
.pagina-host .carta-vantaggio .spunta { color: #e8590c; }
.pagina-host .spunte li::before { color: #e8590c; }
.pagina-host .chi-e .descrizione { background: #fff0e6; }
.pagina-host .colonna details { border-left-color: #ffb38a; }
.pagina-host .blocco .immagine { background: #4a1a08; }
.pagina-host .blocco.chiaro { background: #fbeee5; }
.pagina-host .faq details { background: #f5d5c1; }

/* ---- Personal: rosso, come la sua icona ---- */
.pastiglia.personal { background: linear-gradient(135deg, #fa5252, #c92a2a); }
.bottone.personal { background: #c92a2a; box-shadow: 0 6px 18px rgba(201, 42, 42, .3); }
.bottone.personal:hover { background: #a51d1d; }
.diapositiva.personal::before {
  background:
    radial-gradient(500px 300px at 70% 30%, rgba(250, 82, 82, .25), transparent 70%),
    linear-gradient(135deg, #f8e0e0, #fbf1f1);
}
.personal .cartiglio small { color: #ffa8a8; }
.riquadro.personal { border-left-color: #fa5252; }
.riquadro.personal .nome img { box-shadow: 0 0 0 2px #fa5252, 0 4px 14px rgba(250, 82, 82, .45); }
.tag.personal { background: #c92a2a; }
.gruppo.personal { --tinta: #fa5252; --tinta-tenue: rgba(250, 82, 82, .16); }
.gruppo.personal .argomenti a:hover { background: #fff5f5; }
.pagina-personal .sotto-menu .prodotto-nome { color: #c92a2a; }
.pagina-personal .sotto-menu nav a.attiva { color: #c92a2a; }
.pagina-personal .testa-prodotto::before {
  background: linear-gradient(90deg, rgba(48, 8, 8, .98) 0%, rgba(48, 8, 8, .95) 48%, rgba(48, 8, 8, .55) 75%, rgba(48, 8, 8, .25) 100%);
}
.pagina-personal .fascia-pensato li::before { background: #fa5252; }
.pagina-personal .carta-vantaggio { background: #fff0f0; }
.pagina-personal .carta-vantaggio .spunta { color: #c92a2a; }
.pagina-personal .spunte li::before { color: #c92a2a; }
.pagina-personal .chi-e .descrizione { background: #fff0f0; }
.pagina-personal .colonna details { border-left-color: #ffa8a8; }
.pagina-personal .blocco .immagine { background: #3a0b0b; }
.pagina-personal .blocco.chiaro { background: #f8e6e6; }
.pagina-personal .faq details { background: #f2c9c9; }

/* ---- Fiscale: oro, il colore dei conti ---- */
.pastiglia.fiscale { background: linear-gradient(135deg, #f59f00, #c98a00); }
.bottone.fiscale { background: #c98a00; box-shadow: 0 6px 18px rgba(201, 138, 0, .3); }
.bottone.fiscale:hover { background: #a86f00; }
.diapositiva.fiscale::before {
  background:
    radial-gradient(500px 300px at 70% 30%, rgba(245, 159, 0, .25), transparent 70%),
    linear-gradient(135deg, #f8eed6, #fbf6ea);
}
.fiscale .cartiglio small { color: #ffd8a8; }
.riquadro.fiscale { border-left-color: #f59f00; }
.riquadro.fiscale .nome img { box-shadow: 0 0 0 2px #f59f00, 0 4px 14px rgba(245, 159, 0, .45); }
.tag.fiscale { background: #c98a00; }
.gruppo.fiscale { --tinta: #f59f00; --tinta-tenue: rgba(245, 159, 0, .16); }
.gruppo.fiscale .argomenti a:hover { background: #fffaf0; }
.pagina-fiscale .sotto-menu .prodotto-nome { color: #c98a00; }
.pagina-fiscale .sotto-menu nav a.attiva { color: #c98a00; }
.pagina-fiscale .testa-prodotto::before {
  background: linear-gradient(90deg, rgba(40, 30, 8, .98) 0%, rgba(40, 30, 8, .95) 48%, rgba(40, 30, 8, .55) 75%, rgba(40, 30, 8, .25) 100%);
}
.pagina-fiscale .fascia-pensato li::before { background: #f59f00; }
.pagina-fiscale .carta-vantaggio { background: #fff6e0; }
.pagina-fiscale .carta-vantaggio .spunta { color: #c98a00; }
.pagina-fiscale .spunte li::before { color: #c98a00; }
.pagina-fiscale .chi-e .descrizione { background: #fff6e0; }
.pagina-fiscale .colonna details { border-left-color: #ffd8a8; }
.pagina-fiscale .blocco .immagine { background: #2e2208; }
.pagina-fiscale .blocco.chiaro { background: #f8f0dc; }
.pagina-fiscale .faq details { background: #f1ddb0; }

/* ================================================================
   LA LENTE SULLE SCHERMATE
   ================================================================ */

.lente {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 14, 30, .88);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 32px;
  cursor: zoom-out;
}

.lente figure { margin: 0; max-width: min(1440px, 100%); cursor: default; }
.lente img { max-height: calc(100vh - 140px); width: auto; margin: 0 auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lente figcaption { color: #d5e2f7; font-size: 15px; text-align: center; margin-top: 14px; }
.lente figcaption strong { color: #fff; }

.lente-chiudi {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

body.lente-aperta { overflow: hidden; }

/* ================================================================
   SCHERMI STRETTI
   ================================================================ */

/* ================================================================
   L'APP PER IL TELEFONO (Flow e Retail)
   ================================================================ */

.app-telefono { background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; padding: 80px 0; overflow: hidden; }
.pagina-retail .app-telefono { background: linear-gradient(135deg, #0d4a50, #0a2e33); }
.app-telefono .contenitore { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.app-telefono .occhiello { color: #9cc2ff; }
.pagina-retail .app-telefono .occhiello { color: #7fe3d6; }
.app-telefono h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 0 0 14px; line-height: 1.2; color: #fff; }
.app-telefono p { color: rgba(255, 255, 255, .78); margin: 0 0 22px; }
.app-telefono .spunte { padding: 0; margin: 0 0 30px; }
.app-telefono .spunte li { color: #fff; font-size: 15.5px; }
.app-telefono .spunte li::before { color: #7fb0ff; }
.pagina-retail .app-telefono .spunte li::before { color: #5fe0cf; }

/* Tre telefoni a ventaglio: quello al centro davanti. */
.telefoni { display: flex; justify-content: center; align-items: center; }
.telefoni img {
  width: 31%;
  max-width: 220px;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  object-position: top;
  border-radius: 26px;
  border: 6px solid #0b0f17;
  background: #0b0f17;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .45);
  cursor: zoom-in;
}
.telefoni img:nth-child(1) { transform: translateX(14%) rotate(-5deg) scale(.92); }
.telefoni img:nth-child(2) { position: relative; z-index: 2; }
.telefoni img:nth-child(3) { transform: translateX(-14%) rotate(5deg) scale(.92); }

/* Nelle novità: due telefoni sul colore del prodotto, tagliati in basso. */
.telefoni-carta { aspect-ratio: 16 / 9; display: flex; justify-content: center; align-items: flex-start; gap: 14px; padding-top: 16px; overflow: hidden; background: linear-gradient(135deg, var(--navy-2), var(--navy)); }
.telefoni-carta.retail { background: linear-gradient(135deg, #0d4a50, #0a2e33); }
.telefoni-carta img { width: 30%; aspect-ratio: auto; border-radius: 14px; border: 4px solid #0b0f17; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }

@media (max-width: 900px) {
  .app-telefono .contenitore { grid-template-columns: 1fr; }
  .telefoni { margin-top: 10px; }
}

@media (max-width: 1100px) {
  .servizio { display: none; }
  .menu > a, .menu .voce > button { padding: 10px 9px; font-size: 14.5px; }
  .vantaggi .contenitore { grid-template-columns: 1fr 1fr; }
  .carte-novita { grid-template-columns: repeat(2, 1fr); }
  .gruppo.largo .argomenti { grid-template-columns: repeat(3, 1fr); }
  .menu > a.linguetta { margin-top: 0; padding-top: 0; }
  .sotto-menu { top: 64px; }
}

@media (max-width: 900px) {
  .apri-menu {
    display: block;
    margin-left: auto;
    margin-right: 16px;
    background: none;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    height: auto;
    background: var(--bianco);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 16px;
    box-shadow: var(--ombra);
  }

  .testata.menu-aperto .menu { display: flex; }
  .tendina { position: static; box-shadow: none; border: 0; display: block; padding: 0 0 0 10px; min-width: 0; }
  .menu > a.linguetta { display: none; }

  .apertura, .soluzioni .contenitore, .contatti, .chi-e, .blocco, .utility-faq, .completa .contenitore,
  .fascia-pensato .contenitore { grid-template-columns: 1fr; }

  .apertura .testo { clip-path: none; padding: 50px 24px; margin-right: 0; }
  .giostra { min-height: 360px; }
  .diapositiva { padding: 24px; }
  .cartiglio { top: 16px; left: 16px; }

  .riquadri, .gruppi, .argomenti, .gruppo.largo .argomenti, .passi, .colonne, .griglia-videate,
  .carte-novita, .vantaggi .contenitore, .modulo .campi, .utili { grid-template-columns: 1fr; }

  .info-prezzi .scatola { grid-template-columns: 1fr; }
  .info-prezzi .nuvola { display: none; }

  .chi-e .lato, .chi-e .descrizione, .blocco .parole, .blocco.inverso .parole,
  .utility-faq .utility, .utility-faq .faq { padding: 44px 24px; }

  .chi-e .descrizione p { padding-left: 0; }
  .blocco.inverso .immagine { order: 0; }
  .modulo .campi, .privacy { padding-left: 24px; padding-right: 24px; }
  .esito { padding-left: 24px; padding-right: 24px; }
  .contatti .lato { padding: 50px 24px; }
  .sotto-menu nav { display: none; }
  .fascia-pensato .titolo { clip-path: none; }
  .fascia-pensato ul { padding: 16px 24px; justify-content: flex-start; }
  .chiusura .contenitore { grid-template-columns: 1fr; }
}

/* Il bordo dell'icona nel colore del prodotto: Flow, Retail e Horeca hanno
   la stessa «R» e cambiano solo il fondo, che sul riquadro scuro si perde. */
.riquadro .nome img { box-shadow: 0 0 0 2px var(--blu-chiaro), 0 4px 14px rgba(59, 130, 246, .45); }
.riquadro.retail .nome img { box-shadow: 0 0 0 2px var(--retail-chiaro), 0 4px 14px rgba(20, 184, 166, .45); }
.riquadro .nome .icona-svg.misura { box-shadow: 0 0 0 2px #94a3b8, 0 4px 14px rgba(148, 163, 184, .35); }
.riquadro .nome .icona-svg.insieme { box-shadow: 0 0 0 2px #93c5fd, 0 4px 14px rgba(59, 130, 246, .4); }

/* ---- Contatta operatore (WhatsApp) ------------------------------------- */

.whatsapp-subito {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(18, 140, 76, .35), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.whatsapp-subito svg { width: 24px; height: 24px; flex: none; }
.whatsapp-subito:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18, 140, 76, .4), 0 2px 6px rgba(0, 0, 0, .12); }
.whatsapp-subito:focus-visible { outline: 3px solid #0c1c36; outline-offset: 3px; }

/* Sul telefono resta il tondo con l'icona: la scritta coprirebbe la pagina. */
@media (max-width: 640px) {
  .whatsapp-subito { right: 16px; bottom: 16px; padding: 14px; }
  .whatsapp-subito span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-subito { transition: none; }
  .whatsapp-subito:hover { transform: none; }
}