/* =============================================================
   FIGURA SOLUTIONS · personalizzazioni del sito
   Caricato dopo style.css (il modello base), che resta com'è.

   Brand (rifatto il 28/10/2026 con la skill pro-design):
   - nero puro come lo sfondo del logo, testi bianco-lilla;
   - Outfit per i titoli (geometrico come la scritta "figura"),
     Atkinson Hyperlegible Next per i testi (fatto per essere leggibile da tutti);
   - elemento firma: "la linea del prima/dopo", la riga luminosa con la
     sfumatura del logo. Compare solo nel telefono dell'apertura, nel filo
     dei 5 passi e come confine tra Sito web e Sito 3D nel confronto.
   Tutti i colori, i caratteri, le misure e i tempi sono variabili qui sotto.
   ============================================================= */

/* Font liberi (SIL Open Font License): vedi fonts/OFL-outfit.txt e fonts/OFL-atkinson.txt */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-variabile.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-variabile.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- colori (misurati sul logo) ---------- */
  --c-nero: #000000;
  --c-superficie: #0c0b16;
  --c-superficie-accesa: #141228;
  --c-testo: #e8eafa;
  --c-tenue: #a4a8c6;
  --c-bianco: #ffffff;
  --c-ciano: #37e2fa;
  --c-blu: #184cef;
  --c-indaco: #482ae9;
  --c-viola: #9b3eee;
  --c-magenta: #e151fb;
  --c-whatsapp: #25d366;
  --c-linea: rgb(255 255 255 / 0.12);
  --c-linea-forte: rgb(255 255 255 / 0.3);
  --c-velo: rgb(0 0 0 / 0.88);
  --c-alone-ciano: rgb(55 226 250 / 0.75);
  --c-alone-magenta: rgb(225 81 251 / 0.7);
  --c-tinta-3d: rgb(155 62 238 / 0.08);

  /* la linea del prima/dopo: la sfumatura del logo */
  --firma: linear-gradient(90deg, var(--c-ciano), var(--c-blu) 38%, var(--c-viola) 72%, var(--c-magenta));
  --firma-giu: linear-gradient(180deg, var(--c-ciano), var(--c-blu) 38%, var(--c-viola) 72%, var(--c-magenta));
  --firma-alone: 0 0 0.75rem rgb(55 226 250 / 0.7), 0 0 1.75rem rgb(225 81 251 / 0.5);

  /* ---------- caratteri ---------- */
  --f-titoli: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-testo: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.125rem;
  --t-l: 1.375rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --t-2xl: clamp(2.2rem, 1.3rem + 3vw, 3.7rem);
  --t-3xl: clamp(3rem, 1.3rem + 6.2vw, 6.4rem);
  --interlinea: 1.6;
  --interlinea-titoli: 1.02;

  /* ---------- spazi ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-sezione: clamp(4.5rem, 10vw, 8rem);
  --misura-testo: 38rem;

  /* ---------- forme ---------- */
  --r-s: 0.5rem;
  --r-m: 1rem;
  --r-l: 1.5rem;
  --r-pillola: 999px;
  --r-telefono: 2.75rem;

  /* ---------- movimento ---------- */
  --m-ui: 200ms;
  --m-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- variabili del modello base, ridefinite ---------- */
  --testo: var(--c-testo);
  --testo-tenue: var(--c-tenue);
  --sfondo: var(--c-nero);
  --sfondo-alt: var(--c-superficie);
  --bordo: var(--c-linea);
  --bordo-campi: var(--c-linea-forte);
  --scuro: var(--c-nero);
  --font-testo: var(--f-testo);
  --font-titoli: var(--f-titoli);
  --raggio: var(--r-l);
  --ombra: none;
  --larghezza: 75rem;
  --altezza-testata: 4.5rem;

  color-scheme: dark;
}

/* ---------------------------------------------------------- base */

body {
  font-size: var(--t-m);
  line-height: var(--interlinea);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  color: var(--c-bianco);
  font-family: var(--f-titoli);
}

h1 {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

h2 {
  font-size: var(--t-2xl);
  font-weight: 650;
  line-height: var(--interlinea-titoli);
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--t-l);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 3px solid var(--c-ciano);
  outline-offset: 3px;
}

::selection {
  background: var(--c-viola);
  color: var(--c-bianco);
}

.salta {
  border: 1px solid var(--c-linea-forte);
}

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

/* il bottone principale è un pannello bianco, come un'insegna accesa */
.btn,
.menu a.btn {
  background: var(--c-bianco);
  color: var(--c-nero);
  font-family: var(--f-titoli);
  font-weight: 600;
  transition: box-shadow var(--m-ui) var(--m-ease), background-color var(--m-ui) var(--m-ease), border-color var(--m-ui) var(--m-ease);
}

.btn:hover {
  background: var(--c-bianco);
}

/* "luce": il bagliore del logo, ciano a sinistra e magenta a destra */
.btn--luce,
.btn:hover {
  box-shadow: -0.5rem 0 1.4rem -0.4rem var(--c-alone-ciano), 0.5rem 0 1.4rem -0.4rem var(--c-alone-magenta);
}

.btn--contorno {
  border-color: var(--c-linea-forte);
  background: transparent;
  color: var(--c-bianco);
}

.btn--contorno:hover {
  border-color: var(--c-bianco);
  background: rgb(255 255 255 / 0.06);
  box-shadow: none;
}

.btn .icona {
  width: 1.1em;
  height: 1.1em;
}

.icona--whatsapp {
  color: var(--c-whatsapp);
}

/* ---------------------------------------------------------- testata */

.testata {
  background: var(--c-velo);
  border-bottom-color: var(--c-linea);
}

.logo img {
  height: 2.75rem;
}

.menu {
  background: var(--c-nero);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.7);
}

.menu a {
  color: var(--c-testo);
  font-family: var(--f-titoli);
}

.menu a:not(.btn):hover {
  color: var(--c-bianco);
  text-decoration-color: var(--c-ciano);
}

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

.apertura {
  padding: var(--s-6) 0 var(--s-sezione);
}

.apertura__griglia {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}

.apertura h1 {
  margin-bottom: 0.35em;
}

.apertura__frase {
  max-width: 34rem;
  font-size: var(--t-l);
  line-height: 1.5;
}

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.apertura__azioni .btn {
  flex: 1 1 15rem;
}

/* tre fatti rassicuranti accanto ai bottoni: niente promesse, solo come lavoriamo */
.apertura__fatti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-5) 0 0;
  padding: 0;
  color: var(--c-tenue);
  font-size: var(--t-s);
  list-style: none;
}

.apertura__fatti li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.apertura__fatti li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-ciano);
}

/* ---------------------------------------------------------- il telefono con il confronto prima/dopo */

.confronto {
  justify-self: center;
  width: min(100%, 18.5rem);
  margin: 0;
}

.confronto__etichette {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--s-3);
  padding-inline: var(--s-3);
  color: var(--c-tenue);
  font-family: var(--f-titoli);
  font-size: var(--t-s);
}

.telefono {
  padding: 0.55rem;
  border-radius: var(--r-telefono);
  background: linear-gradient(160deg, #2b2a3a, #0d0c16 45%, #1d1c2a);
  /* lo stesso alone del logo, sotto il telefono */
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 2.5rem 5.5rem -2rem rgb(55 226 250 / 0.42),
    0 3rem 7rem -2.5rem rgb(225 81 251 / 0.45);
}

/* Dentro lo schermo ci sono due siti inventati, con colori loro (non nostri):
   li teniamo in variabili a parte, così si capisce che sono un'illustrazione. */
.telefono__schermo {
  --taglio: 50%;
  --forno-carta: #f4f8ff;
  --forno-inchiostro: #1b2a4a;
  --forno-testo: #3c4a66;
  --forno-linea: #dfe5f2;
  --forno-bianco: #ffffff;
  --forno-grano: #d9821e;
  --forno-aperto: #dff2e6;
  --forno-aperto-testo: #12603a;
  --forno-verde: #1f9d55;
  --indirizzo-sfondo: rgb(27 42 74 / 0.07);
  --indirizzo-testo: #2c3a58;
  --vecchio-carta: #ece9d8;
  --vecchio-barra: #d4d0c8;
  --vecchio-allarme: #9e0000;
  --vecchio-rosso: #c00000;
  --vecchio-giallo: #ffff99;
  --vecchio-link: #0000ee;
  --vecchio-bianco: #ffffff;
  --vecchio-grigio: #c8c8c8;
  --vecchio-bottone: #c0c0c0;
  --vecchio-nastro: #ffd800;
  --vecchio-scuro: #222222;
  --vecchio-postit: #ffffcc;
  --vecchio-tratteggio: #999999;
  --vecchio-terminale: #000000;
  --vecchio-fosforo: #33ff33;
  --vecchio-tenue: #666666;
  --vecchio-testo: #333333;

  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 18.5;
  border-radius: 2.25rem;
  background: var(--forno-carta);
  container-type: inline-size;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.js .telefono__schermo {
  cursor: ew-resize;
}

/* la "pillola" in cima allo schermo */
.telefono__schermo::before {
  content: "";
  position: absolute;
  top: 3cqw;
  left: 50%;
  z-index: 4;
  width: 26cqw;
  height: 7cqw;
  border-radius: var(--r-pillola);
  background: var(--c-nero);
  translate: -50% 0;
}

.schermo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: 13cqw;
}

:where(.schermo) p {
  margin: 0;
}

.schermo__indirizzo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  margin: 0 4cqw 3cqw;
  padding: 1.9cqw 3cqw;
  border-radius: var(--r-pillola);
  background: var(--indirizzo-sfondo);
  color: var(--indirizzo-testo);
  font: 500 3.6cqw/1.2 var(--f-titoli);
}

.schermo__indirizzo .icona {
  width: 3.4cqw;
  height: 3.4cqw;
  stroke-width: 2.5;
}

/* dopo: il sito nuovo del forno */
.schermo--dopo {
  background: var(--forno-carta);
  color: var(--forno-inchiostro);
}

.forno {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 5.5cqw;
  font-family: var(--f-titoli);
}

.forno__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1cqw 0 6cqw;
}

.forno__marchio {
  font: 700 5.2cqw/1 Georgia, "Times New Roman", serif;
}

.forno__menu {
  width: 6cqw;
  height: 4.2cqw;
  background:
    linear-gradient(var(--forno-inchiostro) 0 0) top / 100% 0.8cqw no-repeat,
    linear-gradient(var(--forno-inchiostro) 0 0) center / 100% 0.8cqw no-repeat,
    linear-gradient(var(--forno-inchiostro) 0 0) bottom / 100% 0.8cqw no-repeat;
}

.forno__titolo {
  margin-bottom: 4.5cqw;
  font: 700 9.4cqw/1.03 Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}

.forno__stato {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 1.6cqw;
  margin-bottom: 5cqw;
  padding: 1.6cqw 3.2cqw;
  border-radius: var(--r-pillola);
  background: var(--forno-aperto);
  color: var(--forno-aperto-testo);
  font-size: 3.5cqw;
  font-weight: 600;
}

.forno__pallino {
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  background: var(--forno-verde);
}

.forno__pane {
  width: 100%;
  height: auto;
  margin-bottom: 4.5cqw;
  border-radius: 3cqw;
}

.forno__testo {
  color: var(--forno-testo);
  font-size: 3.9cqw;
  line-height: 1.45;
}

.forno__barra {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 2.6cqw 0 5cqw;
  border-top: 1px solid var(--forno-linea);
  background: var(--forno-bianco);
}

.forno__barra span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  font-size: 3cqw;
  font-weight: 600;
}

.forno__barra .icona {
  width: 5cqw;
  height: 5cqw;
  color: var(--forno-grano);
}

/* prima: il vecchio sito, una pagina da computer rimpicciolita sul telefono */
.schermo--prima {
  background: var(--vecchio-carta);
  color: var(--vecchio-terminale);
  font-family: "Times New Roman", Times, serif;
  clip-path: inset(0 calc(100% - var(--taglio)) 0 0);
}

.schermo__indirizzo--insicuro {
  border-radius: 0;
  background: var(--vecchio-barra);
  color: var(--vecchio-allarme);
  font-family: Tahoma, Verdana, sans-serif;
}

.vecchio {
  padding: 0 2cqw;
  font-size: 2.7cqw;
  line-height: 1.25;
}

.vecchio p {
  margin-bottom: 1.8cqw;
}

.vecchio__benvenuto {
  padding: 1cqw;
  border: 1px solid var(--vecchio-rosso);
  background: var(--vecchio-giallo);
  color: var(--vecchio-rosso);
  font: 700 3.3cqw/1.2 "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  text-align: center;
}

.vecchio__menu {
  color: var(--vecchio-link);
  text-align: center;
}

.vecchio__menu span {
  text-decoration: underline;
}

.vecchio__colonne {
  display: grid;
  grid-template-columns: 1fr 36%;
  gap: 2cqw;
  margin-bottom: 2cqw;
  padding: 2cqw;
  border: 2px outset var(--vecchio-grigio);
  background: var(--vecchio-bianco);
}

.vecchio__lavori {
  padding: 1.4cqw;
  border: 1.4cqw solid;
  border-image: repeating-linear-gradient(-45deg, var(--vecchio-nastro) 0 1.4cqw, var(--vecchio-scuro) 1.4cqw 2.8cqw) 10;
  background: var(--vecchio-nastro);
  font-weight: 700;
  text-align: center;
}

.vecchio__laterale {
  align-self: start;
  padding: 1.5cqw;
  border: 1px dashed var(--vecchio-tratteggio);
  background: var(--vecchio-postit);
  color: var(--vecchio-testo);
  font-size: 2.5cqw;
}

.vecchio__contatore {
  padding: 1cqw;
  background: var(--vecchio-terminale);
  color: var(--vecchio-fosforo);
  font-family: "Courier New", Courier, monospace;
  text-align: center;
}

.vecchio__bollini {
  display: flex;
  justify-content: center;
  gap: 1.5cqw;
}

.vecchio__bollini span {
  padding: 0.8cqw 1.2cqw;
  border: 2px outset var(--vecchio-grigio);
  background: var(--vecchio-bottone);
  font: 700 2.1cqw/1 Verdana, Tahoma, sans-serif;
}

.vecchio__piede {
  color: var(--vecchio-tenue);
  font-size: 2.3cqw;
  font-style: italic;
  text-align: center;
}

/* l'elemento firma: la linea che si trascina */
.confronto__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--taglio);
  z-index: 3;
  width: 4px;
  background: var(--firma-giu);
  box-shadow: var(--firma-alone);
  translate: -50% 0;
  pointer-events: none;
}

.confronto__maniglia {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.9rem;
  height: 2.9rem;
  border: 2px solid var(--c-bianco);
  border-radius: 50%;
  background: var(--c-nero);
  box-shadow: 0 0 1.25rem rgb(55 226 250 / 0.55);
  translate: -50% -50%;
}

.confronto__maniglia::before,
.confronto__maniglia::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.45rem;
  height: 0.75rem;
  background: var(--c-bianco);
  translate: 0 -50%;
}

.confronto__maniglia::before {
  left: 0.6rem;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.confronto__maniglia::after {
  right: 0.6rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* cursore per tastiera e lettori di schermo: invisibile ma raggiungibile con Tab */
.confronto__cursore {
  display: none;
}

.js .confronto__cursore {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.confronto:has(.confronto__cursore:focus-visible) .confronto__maniglia {
  outline: 3px solid var(--c-ciano);
  outline-offset: 3px;
}

.confronto figcaption {
  max-width: 17rem;
  margin: var(--s-5) auto 0;
  color: var(--c-tenue);
  font-size: var(--t-s);
  line-height: 1.45;
  text-align: center;
}

/* ---------------------------------------------------------- sezioni */

.sezione {
  padding-block: var(--s-sezione);
  border-top: 1px solid var(--c-linea);
}

.sezione__intro {
  max-width: var(--misura-testo);
  margin-bottom: var(--s-7);
  color: var(--c-tenue);
  font-size: var(--t-l);
  line-height: 1.5;
}

.affianco__testa .sezione__intro {
  margin-bottom: var(--s-6);
}

/* ---------------------------------------------------------- cosa c'è in ogni sito */

.vantaggi {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vantaggi li {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-linea);
}

.vantaggi li:last-child {
  border-bottom: 1px solid var(--c-linea);
}

.vantaggi h3 {
  margin: 0;
}

.vantaggi p {
  max-width: 36rem;
  margin: 0;
  color: var(--c-tenue);
}

/* ---------------------------------------------------------- come lavoriamo: il filo dei 5 passi */

.percorso {
  --punto-lato: 2.4rem;
  --percorso-spazio: 1.75rem;
  position: relative;
  display: grid;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

/* l'elemento firma, in verticale su telefono e in orizzontale su computer */
.percorso::before {
  content: "";
  position: absolute;
  top: calc(var(--punto-lato) / 2);
  bottom: calc(var(--punto-lato) / 2);
  left: calc(var(--punto-lato) / 2 - 1px);
  width: 2px;
  background: var(--firma-giu);
  box-shadow: var(--firma-alone);
}

.passo {
  position: relative;
  padding-left: calc(var(--punto-lato) + var(--s-4));
  counter-increment: passo;
}

.passo:nth-child(1) { --punto: var(--c-ciano); }
.passo:nth-child(2) { --punto: #2a97f4; }
.passo:nth-child(3) { --punto: #4a5cf6; }
.passo:nth-child(4) { --punto: var(--c-viola); }
.passo:nth-child(5) { --punto: var(--c-magenta); }

.passo__punto {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--punto-lato);
  height: var(--punto-lato);
  border: 2px solid var(--punto);
  border-radius: 50%;
  background: var(--c-nero);
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-size: var(--t-s);
  font-weight: 600;
}

.passo__punto::before {
  content: counter(passo);
}

.passo h3 {
  margin: var(--s-2) 0;
}

.passo p {
  margin: 0;
  color: var(--c-tenue);
}

/* ---------------------------------------------------------- opinioni dei clienti */

.opinioni {
  display: grid;
  gap: var(--s-5);
}

/* finché non ci sono opinioni: una cornice vuota che invita a farsi avanti */
.opinioni__vuoto {
  max-width: 44rem;
  margin: 0;
  padding: clamp(var(--s-5), 4vw, var(--s-6));
  border: 1.5px dashed var(--c-linea-forte);
  border-radius: var(--r-l);
  color: var(--c-tenue);
  font-size: var(--t-l);
  line-height: 1.5;
}

.opinioni__vuoto a {
  display: inline-block;
  margin-top: var(--s-2);
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-weight: 600;
  text-decoration-color: var(--c-ciano);
}

.opinione {
  margin: 0;
  padding: var(--s-6);
  border: 1px solid var(--c-linea);
  border-radius: var(--r-l);
  background: var(--c-superficie);
}

.opinione blockquote {
  margin: 0 0 var(--s-5);
  color: var(--c-bianco);
  font-size: var(--t-l);
  line-height: 1.5;
}

.opinione blockquote p {
  margin: 0;
}

.opinione figcaption {
  color: var(--c-tenue);
  font-size: var(--t-s);
}

.opinione figcaption strong {
  color: var(--c-testo);
}

/* ---------------------------------------------------------- confronto sito web / sito 3D */

.paragone {
  --col-sito: 30%;
  position: relative;
  max-width: 60rem;
  border: 1px solid var(--c-linea);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--c-superficie);
}

/* l'elemento firma: il confine tra Sito web e Sito 3D */
.paragone::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--col-sito);
  bottom: 0;
  width: 2px;
  background: var(--firma-giu);
  box-shadow: var(--firma-alone);
  translate: 50% 0;
  pointer-events: none;
}

.paragone__tabella {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.paragone__col-sito {
  width: var(--col-sito);
}

.paragone__tabella th,
.paragone__tabella td {
  padding: var(--s-4) var(--s-3);
  border-top: 1px solid var(--c-linea);
  font-size: var(--t-s);
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}

.paragone__tabella thead th,
.paragone__tabella thead td {
  padding-block: var(--s-5);
  border-top: 0;
  vertical-align: bottom;
}

.paragone__tabella tbody th {
  color: var(--c-testo);
  font-weight: 400;
}

.paragone__tabella td,
.paragone__tabella thead th {
  padding-inline: var(--s-2);
  color: var(--c-tenue);
  text-align: center;
}

/* le icone del modello sono "a blocco": qui devono stare al centro della cella */
.paragone__tabella td .icona {
  display: inline-block;
}

/* la colonna del 3D è "accesa" */
.paragone__3d {
  background: var(--c-tinta-3d);
}

.paragone__figura {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--s-3);
  perspective: 30rem;
}

.paragone__nome {
  display: block;
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-size: var(--t-m);
  white-space: nowrap;
  font-weight: 650;
  text-align: center;
}

.paragone__si {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--c-ciano);
  stroke-width: 2.5;
  vertical-align: middle;
}

.paragone__no {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--c-linea-forte);
  vertical-align: middle;
}

.paragone__prezzo th,
.paragone__prezzo td {
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-weight: 600;
}

/* sito web: una finestra piatta, in 2D */
.finestra {
  position: relative;
  display: block;
  width: 3.25rem;
  height: 2.5rem;
  border: 2px solid var(--c-ciano);
  border-radius: var(--r-s);
  background: linear-gradient(var(--c-ciano), var(--c-ciano)) top / 100% 0.5rem no-repeat;
}

.finestra::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0.45rem;
  left: 0.4rem;
  height: 0.25rem;
  border-radius: var(--r-pillola);
  background: var(--c-linea-forte);
  box-shadow: 0 -0.55rem 0 var(--c-linea-forte);
}

/* sito 3D: un cubo vero in 3D (solo CSS). Gira di una faccia quando ci passi sopra o lo tocchi */
.cubo {
  --lato: 2.5rem;
  --meta: calc(var(--lato) / 2);
  position: relative;
  display: block;
  width: var(--lato);
  height: var(--lato);
  transform: rotateX(-24deg) rotateY(-38deg);
  transform-style: preserve-3d;
  transition: transform 250ms var(--m-ease);
}

.paragone:hover .cubo,
.paragone.girato .cubo {
  transform: rotateX(-24deg) rotateY(-128deg);
}

.cubo__faccia {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgb(255 255 255 / 0.6);
}

.cubo__faccia--fronte { background: linear-gradient(135deg, var(--c-blu), var(--c-indaco)); transform: translateZ(var(--meta)); }
.cubo__faccia--retro { background: linear-gradient(135deg, var(--c-viola), var(--c-magenta)); transform: rotateY(180deg) translateZ(var(--meta)); }
.cubo__faccia--destra { background: linear-gradient(135deg, var(--c-indaco), var(--c-viola)); transform: rotateY(90deg) translateZ(var(--meta)); }
.cubo__faccia--sinistra { background: linear-gradient(135deg, var(--c-ciano), var(--c-blu)); transform: rotateY(-90deg) translateZ(var(--meta)); }
.cubo__faccia--sopra { background: linear-gradient(135deg, var(--c-ciano), #7aeaff); transform: rotateX(90deg) translateZ(var(--meta)); }
.cubo__faccia--sotto { background: var(--c-magenta); transform: rotateX(-90deg) translateZ(var(--meta)); }

/* come decidiamo il prezzo: i 5 fattori */
.come-prezzo {
  margin-top: var(--s-8);
}

.come-prezzo .affianco__testa p {
  max-width: 30rem;
  color: var(--c-tenue);
}

.fattori {
  margin: 0;
}

.fattori div {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-linea);
}

.fattori div:last-child {
  border-bottom: 1px solid var(--c-linea);
}

.fattori dt {
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-size: var(--t-m);
  font-weight: 600;
}

.fattori dd {
  margin: 0;
  color: var(--c-tenue);
}

/* ---------------------------------------------------------- domande */

.domande details {
  border-top: 1px solid var(--c-linea);
}

.domande details:last-child {
  border-bottom: 1px solid var(--c-linea);
}

.domande summary {
  position: relative;
  padding: var(--s-5) var(--s-7) var(--s-5) 0;
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-size: var(--t-l);
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color var(--m-ui) var(--m-ease);
}

.domande summary::-webkit-details-marker {
  display: none;
}

/* il + diventa una x quando la risposta è aperta */
.domande summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s-2);
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  translate: 0 -50%;
  transition: rotate var(--m-ui) var(--m-ease);
}

.domande details[open] summary::after {
  rotate: 45deg;
}

.domande summary:hover {
  color: var(--c-ciano);
}

.domande details p {
  max-width: 40rem;
  margin: 0 0 var(--s-5);
  color: var(--c-tenue);
}

/* ---------------------------------------------------------- contatti */

.contatti h2 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.6rem);
  line-height: 1;
}

.contatti__griglia {
  display: grid;
  gap: var(--s-7);
}

.contatti__blocco h3 {
  margin-bottom: var(--s-4);
  color: var(--c-tenue);
  font-size: var(--t-m);
  font-weight: 500;
}

.numeri {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ogni numero: chiamata (grande) e WhatsApp (pillola accanto) */
.numeri li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
}

.numeri__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-size: var(--t-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* numeri larghi uguali: le pillole WhatsApp restano in colonna */
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--m-ui) var(--m-ease);
}

.numeri__tel:hover {
  color: var(--c-ciano);
}

.numeri__tel .icona {
  width: 0.8em;
  height: 0.8em;
  color: var(--c-ciano);
}

.numeri__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-linea-forte);
  border-radius: var(--r-pillola);
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-size: var(--t-s);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--m-ui) var(--m-ease);
}

.numeri__wa:hover {
  border-color: var(--c-whatsapp);
}

.contatti__email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-6);
  font-family: var(--f-titoli);
  font-size: var(--t-xl);
  font-weight: 600;
}

.contatti__email a {
  color: var(--c-bianco);
  text-decoration-color: var(--c-ciano);
  overflow-wrap: anywhere;
}

.copia {
  border-color: var(--c-linea-forte);
  background: transparent;
  color: var(--c-testo);
  font-family: var(--f-titoli);
  font-size: var(--t-xs);
}

.copia:hover {
  border-color: var(--c-bianco);
  color: var(--c-bianco);
}

.copia.copiato {
  border-color: var(--c-ciano);
  color: var(--c-ciano);
}

.contatti__zona {
  max-width: var(--misura-testo);
  margin: var(--s-8) 0 0;
  color: var(--c-tenue);
}

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

.piede {
  border-top: 1px solid var(--c-linea);
  background: var(--c-nero);
  color: var(--c-tenue);
}

.piede a {
  color: var(--c-testo);
  text-decoration: none;
}

.piede a:hover {
  color: var(--c-bianco);
  text-decoration: underline;
  text-decoration-color: var(--c-ciano);
}

.piede__nome,
.piede__link {
  font-family: var(--f-titoli);
}

.piede__marchio img {
  width: 7rem;
  height: auto;
  margin-bottom: var(--s-4);
}

.piede__fondo {
  border-top-color: var(--c-linea);
  color: var(--c-tenue);
}

/* ---------------------------------------------------------- barra contatti su smartphone */

.barra-mobile {
  border-top-color: var(--c-linea);
  background: var(--c-velo);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.barra-mobile a {
  color: var(--c-bianco);
  font-family: var(--f-titoli);
  font-size: var(--t-s);
}

.barra-mobile a + a {
  border-left-color: var(--c-linea);
}

.barra-mobile .icona {
  color: var(--c-ciano);
}

.barra-mobile .icona--whatsapp {
  color: var(--c-whatsapp);
}

/* ---------------------------------------------------------- privacy e 404 */

.testata__torna {
  white-space: nowrap;
}

.testo-lungo h1 {
  font-size: var(--t-2xl);
  letter-spacing: -0.03em;
}

.testo-lungo h2 {
  font-size: var(--t-l);
}

.testo-lungo a {
  text-decoration-color: var(--c-ciano);
}

.testo-lungo li::marker {
  color: var(--c-ciano);
}

.pagina-errore__codice {
  width: fit-content;
  margin-inline: auto;
  background: var(--firma);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--f-titoli);
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* ---------------------------------------------------------- schermi medi e grandi */

@media (min-width: 600px) {
  .apertura__azioni .btn {
    flex: 0 0 auto;
  }

  .paragone {
    --col-sito: 26%;
  }

  .paragone__tabella th,
  .paragone__tabella td {
    padding-inline: var(--s-5);
    font-size: var(--t-m);
  }

  .paragone__nome {
    font-size: var(--t-l);
  }
}

@media (min-width: 800px) {
  .contatti__griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opinioni:has(.opinione) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fattori div {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--s-5);
  }
}

@media (min-width: 900px) {
  .logo img {
    height: 3rem;
  }

  .menu {
    background: none;
    box-shadow: none;
  }

  .menu a:not(.btn) {
    color: var(--c-tenue);
    font-size: var(--t-s);
  }

  .menu a:not(.btn):hover {
    color: var(--c-bianco);
  }

  .affianco {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-8);
    align-items: start;
  }

  .affianco__testa {
    position: sticky;
    top: calc(var(--altezza-testata) + var(--s-6));
  }
}

@media (min-width: 960px) {
  .apertura {
    padding-top: var(--s-8);
  }

  .apertura__griglia {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .confronto {
    width: 18.5rem;
    margin-right: clamp(0rem, 4vw, 3rem);
  }
}

@media (min-width: 1040px) {
  /* i 5 passi in fila: il filo va dal centro del primo al centro dell'ultimo pallino */
  .percorso {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--percorso-spazio);
  }

  .percorso::before {
    top: calc(var(--punto-lato) / 2 - 1px);
    right: calc((100% - 4 * var(--percorso-spazio)) / 5 - var(--punto-lato) / 2);
    bottom: auto;
    left: calc(var(--punto-lato) / 2);
    width: auto;
    height: 2px;
    background: var(--firma);
  }

  .passo {
    padding: calc(var(--punto-lato) + var(--s-5)) 0 0;
  }
}