/* =========================================================
   pres.css — la presentazione del progetto.
   Stessa famiglia grafica del prodotto: crema, vermiglio,
   Alfa Slab per i titoli. I mockup contengono le app vere.
   ========================================================= */

:root{
  --crema:   #fff6ed;
  --crema-2: #fdeede;
  --crema-3: #f7e3ce;
  --carta:   #fffbf5;
  --rosso:   #c32c04;
  --rosso-2: #e2551f;
  --ink:     #201c19;
  --ink-2:   #6e5b50;
  --ink-3:   #a08d7f;
  --linea:   #f0e4d5;
  --linea-2: #e2d1bb;
  --verde:   #4a7a3f;
  --r:    16px;
  --r-lg: 24px;
  --font: 'Inter', system-ui, sans-serif;
  --head: 'Archivo', system-ui, sans-serif;
  --display: 'Alfa Slab One', Georgia, serif;
  --sh: 0 2px 4px rgba(32,28,25,.04), 0 12px 40px rgba(32,28,25,.10);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 82px; }
body{
  margin: 0; font-family: var(--font); background: var(--crema); color: var(--ink);
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul{ margin: 0; }
button{ font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a{ color: inherit; text-decoration: none; }
[hidden]{ display: none !important; }

.wrap{ width: min(1180px, 100% - 44px); margin: 0 auto; }

/* ---------- barra ---------- */

.nav{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea);
}
.nav__m{
  width: 118px; height: 24px; background: var(--rosso); flex: none;
  -webkit-mask: url(/assets/logo.svg) left center / contain no-repeat;
  mask: url(/assets/logo.svg) left center / contain no-repeat;
}
/* In alto: a sinistra il prodotto, in mezzo le sezioni, a destra chi lo propone. */
.nav__v{
  display: flex; align-items: center; gap: clamp(13px, 1.6vw, 22px);
  flex-wrap: nowrap; min-width: 0;
}
.nav__meg{ display: flex; align-items: center; gap: 8px; color: var(--ink-3); flex: none; }
.nav__meg span{
  font-family: var(--head); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.nav__meg img{ height: 22px; width: auto; display: block; opacity: .9; }
.nav__meg:hover{ color: var(--ink); }
.nav__meg:hover img{ opacity: 1; }
.nav__v a{
  font-family: var(--head); font-size: 13px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.nav__v a:hover{ color: var(--rosso); }
.nav__cta{
  padding: 9px 18px; border-radius: 999px; background: var(--rosso); color: var(--crema) !important;
  text-transform: uppercase; letter-spacing: .06em; font-size: 12px !important; font-weight: 700;
}

/* ---------- testi ---------- */

.occhiello{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rosso); margin-bottom: 14px;
}
.occhiello::before{ content:''; width: 22px; height: 2px; background: var(--rosso); }

.titolone{
  font-family: var(--display); font-size: clamp(42px, 7.4vw, 86px); line-height: 1.02;
  letter-spacing: -.01em; margin-bottom: 22px;
}
.titolone em{ font-style: normal; color: var(--rosso); }
.titolo{
  font-family: var(--display); font-size: clamp(28px, 3.9vw, 46px); line-height: 1.12;
  margin-bottom: 16px;
}
.guida{ font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 66ch; }
.tiny{ font-size: 14px; color: var(--ink-3); margin-top: 10px; }
.mt{ margin-top: 34px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 999px; border: 1px solid var(--linea-2);
  background: var(--carta);
  font-family: var(--head); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.btn:hover{ border-color: var(--ink-3); }
.btn--p{ background: var(--rosso); border-color: var(--rosso); color: var(--crema); }
.btn--p:hover{ background: #9c2203; border-color: #9c2203; }
.azioni{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

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

.apertura{ padding: clamp(48px, 8vw, 96px) 0 0; }
.sez{ padding: clamp(64px, 9vw, 120px) 0; }
.sez--crema{ background: var(--crema-2); }
/* Il blocco che stacca è rosso come il marchio, non nero. */
.sez--scura{ background: var(--rosso); color: var(--crema); }
.sez--scura .titolo{ color: var(--crema); }
.sez--scura .guida{ color: #f7d8c9; }
.sez--scura .occhiello{ color: #ffd9c6; }
.sez--scura .occhiello::before{ background: #ffd9c6; }
.sez--scura .tiny{ color: #f7d8c9; }

.griglia{ display: grid; gap: 20px; margin-top: 36px; }
.g2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.carta{
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 26px; box-shadow: 0 1px 2px rgba(32,28,25,.03);
}
.carta h3{ font-family: var(--head); font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.carta p{ font-size: 16px; color: var(--ink-2); }
.carta p + p{ margin-top: 10px; }

.elenco{ list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 26px; }
.elenco li{
  padding-left: 18px; position: relative; color: #f7d8c9; font-size: 16.5px;
}
.elenco li::before{
  content:''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--crema-3);
}
.elenco b{ color: var(--crema); }

/* ---------- blocchi alternati ---------- */

/* La colonna del testo ha sempre la stessa larghezza, in tutti i blocchi: il
   riquadro sta nello spazio che resta e non si sposta mai, qualunque cosa dica
   la didascalia. */
.alterna{
  display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center; margin-top: 60px;
}
.alterna--gira{ grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); }
.alterna > :not(.alterna__t){ min-width: 0; justify-self: center; }
/* Il gestionale grande ha bisogno di tutta la larghezza: il testo gli sta
   accanto solo su schermi molto larghi, altrimenti va sopra. */
.alterna--largo{ grid-template-columns: 1fr; margin-top: 44px; justify-items: center; }
.alterna--largo .alterna__t{ max-width: 72ch; }
.alterna--largo .alterna__t p{ font-size: 17.5px; }
@media (min-width: 1480px){
  /* Il testo sta di fianco solo se il computer ci sta davvero: dentro a 1180px
     di colonna, il riquadro prende la misura media. */
  .alterna--largo{
    grid-template-columns: minmax(300px, 360px) 1fr; gap: 44px;
    justify-items: start; align-items: center;
  }
  .alterna--largo .mock--grande.mock--mac .mock__schermo{ width: 700px; height: 440px; padding: 11px 11px 13px; }
  .alterna--largo .mock--grande.mock--mac iframe{ transform: scale(.4708); }
  .alterna--largo .mock--grande.mock--mac .mock__base{ width: 748px; height: 13px; }
  .alterna--largo .palco{ justify-self: center; }
}

/* Il computer è largo: se accanto al testo non ci sta più, va sopra. */
@media (max-width: 1320px){
  .alterna--mac, .alterna--mac.alterna--gira{ grid-template-columns: 1fr; justify-items: center; }
  .alterna--mac .alterna__t{ order: 0; max-width: 72ch; }
}

/* due mockup affiancati dentro un blocco */
.coppia{ display: flex; gap: clamp(14px, 2vw, 26px); align-items: flex-end; justify-content: center; }
.coppia--misto{ align-items: center; flex-wrap: wrap; }
.alterna--gira .alterna__t{ order: 2; }
.alterna__t h3{
  font-family: var(--head); font-size: clamp(21px, 2.4vw, 27px); font-weight: 700;
  margin-bottom: 12px;
}
.alterna__t p{ color: var(--ink-2); margin-bottom: 12px; }
.sez--scura .alterna__t p{ color: #f7d8c9; }

/* ---------- i mockup ---------- */

.mock{ margin: 0; display: flex; flex-direction: column; align-items: center; }
.mock figcaption{
  font-family: var(--head); font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  margin-top: 14px; text-align: center;
}
.sez--scura .mock figcaption{ color: #f7d8c9; }
/* Sul rosso non resta niente di scuro, tranne il pulsante Play che ha
   il suo fondo chiaro. */
.sez--scura .dida{ color: #f7d8c9; }
.sez--scura .dida b{ color: var(--crema); }
.sez--scura .dida__barra{ background: rgba(255,246,237,.32); }
.sez--scura .dida__barra.is-va::after{ background: var(--crema); }
.sez--scura .link{ color: var(--crema); }
.sez--scura .carta{ background: rgba(255,246,237,.08); border-color: rgba(255,246,237,.22); }
.sez--scura .carta h3{ color: var(--crema); }
.sez--scura .carta p{ color: #f7d8c9; }
.mock__schermo{ position: relative; overflow: hidden; background: var(--crema); }
.mock iframe{ border: 0; display: block; transform-origin: 0 0; }

/* Telefono. Sopra c'è la barra di stato con ora e batteria, come su un telefono
   vero: l'applicazione comincia sotto, e il notch non copre più niente. */
.mock--tel .mock__schermo{
  --barra: 30px;
  width: 342px; height: 752px; border-radius: 46px;
  padding: 12px 12px 12px; padding-top: calc(12px + var(--barra));
  background: #1b1714; box-shadow: var(--sh), inset 0 0 0 2px #37302a;
}
.mock--tel iframe{ width: 390px; height: 844px; border-radius: 0 0 34px 34px; transform: scale(.815); }

.stato{
  position: absolute; left: 12px; right: 12px; top: 12px; height: var(--barra);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; z-index: 2; color: var(--crema);
  font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .01em;
  border-radius: 34px 34px 0 0; background: var(--crema-2); color: var(--ink);
}
.stato__ora{ font-variant-numeric: tabular-nums; }
.stato__tacca{
  position: absolute; left: 50%; top: 3px; transform: translateX(-50%);
  width: 78px; height: 22px; border-radius: 12px; background: #1b1714;
}
.stato__dx{ display: flex; align-items: center; gap: 4px; }
.stato__pila{
  width: 20px; height: 10px; border-radius: 3px; border: 1.4px solid currentColor;
  position: relative; opacity: .9;
}
.stato__pila::before{
  content:''; position: absolute; inset: 1.6px; width: 62%; border-radius: 1px;
  background: currentColor;
}
.stato__pila::after{
  content:''; position: absolute; right: -3.4px; top: 3px; width: 2px; height: 4px;
  border-radius: 0 1px 1px 0; background: currentColor;
}
.stato__rete{
  width: 14px; height: 10px; opacity: .9;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect x='0' y='12' width='4' height='6' rx='1'/%3E%3Crect x='6' y='8' width='4' height='10' rx='1'/%3E%3Crect x='12' y='4' width='4' height='14' rx='1'/%3E%3Crect x='18' y='0' width='4' height='18' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect x='0' y='12' width='4' height='6' rx='1'/%3E%3Crect x='6' y='8' width='4' height='10' rx='1'/%3E%3Crect x='12' y='4' width='4' height='14' rx='1'/%3E%3Crect x='18' y='0' width='4' height='18' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* tablet */
.mock--tab .mock__schermo{
  width: 430px; height: 590px; border-radius: 26px; padding: 14px;
  background: #1b1714; box-shadow: var(--sh), inset 0 0 0 2px #37302a;
}
.mock--tab iframe{ width: 820px; height: 1100px; border-radius: 12px; transform: scale(.49); }

/* portatile */
.mock--mac .mock__schermo{
  width: 620px; height: 390px; border-radius: 14px 14px 2px 2px; padding: 12px 12px 14px;
  background: #1b1714; box-shadow: var(--sh), inset 0 0 0 2px #37302a;
}
.mock--mac .mock__schermo::before{
  content:''; position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #3f3831;
}
.mock--mac iframe{ width: 1440px; height: 900px; border-radius: 4px; transform: scale(.4136); }
.mock--mac .mock__base{
  width: 700px; height: 13px; border-radius: 0 0 12px 12px;
  background: linear-gradient(#cfc3b6, #a9998a);
  position: relative; box-shadow: 0 10px 24px rgba(32,28,25,.18);
}
.mock--mac .mock__base::after{
  content:''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 110px; height: 5px; border-radius: 0 0 8px 8px; background: #8e7f72;
}

/* --- tre misure, con le proporzioni vere fra gli apparecchi ---
   Il telefono è largo 390, il tablet 820, il portatile 1440: se si riducono
   tutti della stessa quantità il portatile diventa illeggibile, quindi si
   riduce meno lui e più il tablet. --- */

/* minuscola: i due apparecchi da mano accanto al computer, in apertura */
.mock--mini.mock--tel .mock__schermo{
  --barra: 15px; width: 170px; height: 374px; border-radius: 24px;
  padding: 7px; padding-top: 22px;
}
.mock--mini.mock--tel iframe{ transform: scale(.4); border-radius: 0 0 19px 19px; }
.mock--mini .stato{ left: 7px; right: 7px; top: 7px; font-size: 7px; padding: 0 8px; border-radius: 19px 19px 0 0; }
.mock--mini .stato__tacca{ width: 40px; height: 11px; top: 2px; border-radius: 6px; }
.mock--mini .stato__pila{ width: 11px; height: 6px; border-width: 1px; }
.mock--mini .stato__rete{ width: 8px; height: 6px; }
.mock--mini.mock--tab .mock__schermo{ width: 190px; height: 281px; border-radius: 16px; padding: 8px; }
.mock--mini.mock--tab iframe{ transform: scale(.2122); }

/* piccola: la fila d'apertura */
.mock--sm.mock--tel .mock__schermo{
  --barra: 17px; width: 196px; height: 431px; border-radius: 28px;
  padding: 8px; padding-top: 25px;
}
.mock--sm.mock--tel iframe{ transform: scale(.4615); border-radius: 0 0 22px 22px; }
.mock--sm .stato{ left: 8px; right: 8px; top: 8px; font-size: 8px; padding: 0 10px; border-radius: 22px 22px 0 0; }
.mock--sm .stato__tacca{ width: 46px; height: 12px; top: 2px; border-radius: 7px; }
.mock--sm .stato__pila{ width: 12px; height: 7px; border-width: 1px; }
.mock--sm .stato__rete{ width: 9px; height: 7px; }
.mock--sm.mock--tab .mock__schermo{ width: 218px; height: 322px; border-radius: 18px; padding: 9px; }
.mock--sm.mock--tab iframe{ transform: scale(.2439); }
.mock--sm.mock--mac .mock__schermo{ width: 560px; height: 352px; padding: 10px 10px 12px; }
.mock--sm.mock--mac iframe{ transform: scale(.375); }
.mock--sm.mock--mac .mock__base{ width: 634px; height: 11px; }

/* media: le sezioni e la dimostrazione */
.mock--medio.mock--tel .mock__schermo{
  --barra: 24px; width: 288px; height: 632px; border-radius: 38px;
  padding: 10px; padding-top: 34px;
}
.mock--medio.mock--tel iframe{ transform: scale(.6872); border-radius: 0 0 28px 28px; }
.mock--medio .stato{ left: 10px; right: 10px; top: 10px; font-size: 9.5px; padding: 0 13px; border-radius: 28px 28px 0 0; }
.mock--medio .stato__tacca{ width: 64px; height: 17px; top: 3px; border-radius: 9px; }
.mock--medio .stato__pila{ width: 16px; height: 8px; }
.mock--medio .stato__rete{ width: 11px; height: 8px; }
.mock--medio.mock--tab .mock__schermo{ width: 312px; height: 462px; border-radius: 22px; padding: 11px; }
.mock--medio.mock--tab iframe{ transform: scale(.3537); }
.mock--medio.mock--mac .mock__schermo{ width: 700px; height: 440px; padding: 11px 11px 13px; }
.mock--medio.mock--mac iframe{ transform: scale(.4708); }
.mock--medio.mock--mac .mock__base{ width: 748px; height: 13px; }

/* grande: il gestionale quando è il protagonista */
.mock--grande.mock--tel .mock__schermo{
  --barra: 28px; width: 350px; height: 768px; border-radius: 46px;
  padding: 12px; padding-top: 40px;
}
.mock--grande.mock--tel iframe{ transform: scale(.8359); border-radius: 0 0 36px 36px; }
.mock--grande .stato{ left: 12px; right: 12px; top: 12px; font-size: 11px; padding: 0 16px; border-radius: 36px 36px 0 0; }
.mock--grande.mock--tab .mock__schermo{ width: 430px; height: 640px; padding: 13px; }
.mock--grande.mock--tab iframe{ transform: scale(.4951); }
.mock--grande.mock--mac .mock__schermo{ width: 900px; height: 566px; padding: 13px 13px 16px; }
.mock--grande.mock--mac iframe{ transform: scale(.6069); }
.mock--grande.mock--mac .mock__base{ width: 1010px; height: 15px; }

.mock--largo{ margin-top: 44px; }

/* le vetrine non si toccano: sono lì per farsi guardare */
.vetrina{ pointer-events: none; }

/* In apertura il computer è il protagonista: sta a destra ed è grande, i due
   apparecchi da mano gli stanno accanto, più piccoli. */
.trio{
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; margin-top: clamp(40px, 6vw, 80px);
}
.trio__piccoli{ display: flex; align-items: flex-end; gap: clamp(12px, 1.6vw, 22px); }
.trio{ align-items: flex-end; }
@media (max-width: 1080px){
  .trio{ flex-direction: column-reverse; align-items: center; }
}

/* ---------- la dimostrazione dal vivo ---------- */

/* Il cursore vive dentro lo schermo del mockup: si muove con lui, resta
   ritagliato dai bordi, e non scappa quando si scorre la pagina. */
.cursore{
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 26px; height: 26px; pointer-events: none;
  transition: transform .8s cubic-bezier(.4,.1,.2,1);
  filter: drop-shadow(0 3px 5px rgba(32,28,25,.45));
}
.cursore::before{
  content:''; position: absolute; inset: 0;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.2 19.4 12.4l-6.7 1.2L9.8 20.4Z' fill='%23fffbf5' stroke='%23201c19' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cursore.is-clic::after{
  content:''; position: absolute; left: 2px; top: 2px; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; border-radius: 50%;
  border: 2px solid var(--rosso); animation: tocco .5s ease-out;
}

/* Il pulsante che avvia la simulazione, sopra al riquadro. */
.palco{ position: relative; }
.avvia{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 4; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px 14px 16px; border-radius: 999px;
  background: var(--carta); border: 1px solid var(--linea-2);
  box-shadow: 0 10px 34px rgba(32,28,25,.22);
  font-family: var(--head); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.avvia:hover{ background: var(--crema); border-color: var(--ink-3); }
/* il pulsante ha il fondo chiaro: la scritta resta scura anche sul rosso */
.avvia, .sez--scura .avvia{ color: var(--ink); }
.avvia__p{
  width: 34px; height: 34px; border-radius: 50%; background: var(--rosso); flex: none;
  position: relative;
}
.avvia__p::after{
  content:''; position: absolute; left: 53%; top: 50%; transform: translate(-50%,-50%);
  border-left: 11px solid var(--crema);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.palco.is-va .avvia{ display: none; }
/* Finito il giro, lo stesso pulsante invita a rivederlo. */
.palco.is-finita .avvia__p::after{
  border: 0; width: 17px; height: 17px; background: var(--crema);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 3.4V8h-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 3.4V8h-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
  left: 50%; transform: translate(-50%, -50%);
}
.palco:not(.is-va) .mock{ filter: saturate(.92) brightness(.99); }

@keyframes tocco{
  from{ transform: scale(.2); opacity: 1 }
  to{ transform: scale(1.6); opacity: 0 }
}

/* la scena mostra un apparecchio alla volta, o due quando servono */
.palco .mock{ transition: opacity .35s ease; }
.palco .mock[hidden]{ display: none !important; }

.regia{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 30px 0 10px; padding: 18px 22px;
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-lg);
}
.regia__passo{ font-size: 16px; color: var(--ink-2); flex: 1; min-width: 240px; }
.regia__passo b{ color: var(--ink); }

/* ---------- i palchi delle simulazioni ---------- */

.palco{
  display: flex; flex-direction: column; align-items: center; margin-top: 24px;
  /* spazio riservato alla didascalia: è fuori dal flusso, così il suo testo
     non sposta né allarga il riquadro mentre la simulazione va */
  --spazio-dida: 96px;
  padding-bottom: var(--spazio-dida);
}
/* Gli apparecchi stanno in un contenitore loro: il pulsante Play è centrato
   su di loro, non sul riquadro che li ospita. */
.palco__mocks{
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(16px, 2.6vw, 38px); flex-wrap: wrap; width: 100%;
}
/* Chi scambia apparecchio tiene un'altezza fissa: altrimenti la pagina
   si sposta sotto gli occhi di chi guarda. */
.palco--solo .palco__mocks{ min-height: 700px; }
/* Nella dimostrazione grande il racconto sta nel suo riquadro, fuori dal palco:
   qui sotto agli apparecchi non serve riservare spazio. */
#palco{ margin-top: 30px; --spazio-dida: 0px; }
#palco .palco__mocks{ min-height: 700px; align-items: flex-start; gap: 28px; }
.palco .mock[hidden]{ display: none !important; }

/* la didascalia dice che cosa sta succedendo, e la barra che sta per ricominciare */
.dida{
  position: relative; max-width: 52ch; text-align: center;
  font-size: 15px; color: var(--ink-2); line-height: 1.45;
  padding-bottom: 12px;
}
.palco > .dida{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% - var(--spazio-dida) + 14px);   /* appena sotto agli apparecchi */
  width: min(90vw, 52ch); max-width: none; margin: 0; padding-bottom: 10px;
}
.dida b{ color: var(--ink); }
.dida--grande{
  max-width: 68ch; margin: 26px auto 0; font-size: 16.5px; min-height: 96px;
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 18px 24px 22px;
}

/* La dimostrazione grande: il racconto di fianco agli apparecchi, con le
   stesse distanze degli altri blocchi. */
.affianco{
  display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: 60px;
}
/* il computer, qui, sta nello spazio che resta accanto al racconto — ma solo
   finché il racconto gli sta davvero di fianco */
@media (min-width: 1181px){
  .affianco .mock--medio.mock--mac .mock__schermo{ width: 660px; height: 415px; }
  .affianco .mock--medio.mock--mac iframe{ transform: scale(.4444); }
  .affianco .mock--medio.mock--mac .mock__base{ width: 706px; }
}
.affianco .dida--grande{
  margin: 0; max-width: none; text-align: left; min-height: 160px;
  display: flex; flex-direction: column; gap: 10px;
}
.dida__et{
  font-family: var(--head); font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em;
}
.dida--grande p{ font-size: 16.5px; }
.affianco .dida--grande .dida__barra{ left: 24px; transform: none; }
.affianco #palco{ margin-top: 0; justify-self: center; }
@media (max-width: 1180px){
  .affianco{ grid-template-columns: 1fr; justify-items: center; }
  /* Sotto agli apparecchi: se il testo cresce, il riquadro non si muove. */
  .affianco .dida--grande{
    order: 2; margin-top: 26px; min-height: 0;
    max-width: 68ch; text-align: center;
  }
  /* gli apparecchi prendono l'altezza che serve, senza vuoti sotto */
  #palco .palco__mocks{ min-height: 0; gap: 20px; }
  #palco{ margin-top: 10px; }
  .affianco .dida--grande .dida__barra{ left: 50%; transform: translateX(-50%); }
}
.dida__barra{
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 120px; height: 3px; border-radius: 3px; background: var(--linea-2); overflow: hidden;
  opacity: 0; transition: opacity .3s;
}
.dida__barra.is-va{ opacity: 1; }
.dida__barra.is-va::after{
  content:''; display: block; height: 100%; width: 100%; background: var(--rosso);
  transform-origin: left; animation: carica 2.6s linear;
}
@keyframes carica{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }

/* nella dimostrazione grande gli apparecchi stanno in fila */


/* ---------- moduli ---------- */

.moduli{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.modulo{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 14px; border-radius: 999px;
  border: 1px solid var(--linea-2); background: var(--carta); color: var(--ink-3);
  font-family: var(--head); font-size: 14px; font-weight: 600;
}
.modulo::before{
  content:''; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--linea-2);
}
.modulo.is-on{ color: var(--ink); border-color: var(--rosso); background: var(--crema); }
.modulo.is-on::before{
  border-color: var(--rosso); background: var(--rosso);
  box-shadow: inset 0 0 0 3px var(--crema);
}

/* ---------- parte esplorabile ---------- */

.scelta{ display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 26px; }
.scelta__b{
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--linea-2);
  background: var(--carta); font-family: var(--head); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.scelta__b.is-on{ background: var(--ink); border-color: var(--ink); color: var(--crema); }
/* Di fianco al mockup: che cosa si sta guardando e come aprirlo per davvero.
   Stessa impaginazione del resto della pagina, testo allineato in alto. */
.esplora{
  display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: 40px;
}
.esplora__t{ padding-top: 6px; }
.esplora__t .scelta{ gap: 6px; }
.esplora__t .scelta__b{ padding: 9px 13px; font-size: 11.5px; letter-spacing: .04em; }
.esplora__t h3{
  font-family: var(--head); font-size: clamp(19px, 2.1vw, 23px); font-weight: 700;
  margin-bottom: 12px;
}
.esplora__t p{ color: var(--ink-2); margin-bottom: 18px; }
.esplora__t .btn{ margin-bottom: 4px; }
.scena{ display: flex; justify-content: center; }
.scena .link{
  color: var(--rosso); font-weight: 700; text-decoration: underline; font-family: inherit;
}

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

.chat{
  margin-top: 34px; background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh);
  max-width: 820px;
}
.chat__righe{
  display: flex; flex-direction: column; gap: 12px;
  max-height: 420px; overflow-y: auto; padding-right: 4px;
}
.bolla{
  max-width: 86%; padding: 13px 17px; border-radius: 18px; font-size: 15.5px;
  line-height: 1.5; white-space: pre-wrap;
}
.bolla--lui{ background: var(--crema-2); border-bottom-left-radius: 6px; align-self: flex-start; }
.bolla--mio{
  background: var(--rosso); color: var(--crema); align-self: flex-end;
  border-bottom-right-radius: 6px;
}
.bolla--pensa{ display: flex; gap: 5px; align-items: center; }
.bolla--pensa span{
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3);
  animation: pensa 1.1s infinite ease-in-out;
}
.bolla--pensa span:nth-child(2){ animation-delay: .16s }
.bolla--pensa span:nth-child(3){ animation-delay: .32s }
@keyframes pensa{
  0%, 80%, 100%{ transform: translateY(0); opacity: .45 }
  40%{ transform: translateY(-4px); opacity: 1 }
}

.chat__spunti{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.spunto{
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--linea-2);
  background: var(--crema); font-size: 14px; color: var(--ink-2); text-align: left;
}
.spunto:hover{ border-color: var(--rosso); color: var(--rosso); }

.chat__scrivi{ display: flex; gap: 10px; }
.chat__campo{
  flex: 1; min-width: 0; padding: 14px 16px; border-radius: 999px; font: inherit;
  border: 1px solid var(--linea-2); background: var(--crema); color: var(--ink);
}
.chat__campo:focus{ outline: 2px solid color-mix(in srgb, var(--rosso) 40%, transparent); }
.chat__scrivi .btn{ padding-inline: 24px; }

/* ---------- l'avviso prima di aprire il gestionale ---------- */

.avviso{
  border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 26px 24px 22px;
  width: min(420px, calc(100vw - 40px)); background: var(--carta); color: var(--ink);
  box-shadow: 0 24px 70px rgba(32,28,25,.28);
}
.avviso::backdrop{ background: rgba(32,28,25,.45); backdrop-filter: blur(2px); }
.avviso h3{
  font-family: var(--head); font-size: 20px; font-weight: 700; margin-bottom: 10px;
}
.avviso p{ color: var(--ink-2); font-size: 15.5px; }
.avviso__b{ display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.avviso__b .btn{ flex: 1; justify-content: center; text-align: center; }

/* ---------- piede ---------- */

.piede{ padding: 44px 0; border-top: 1px solid var(--linea); }
.piede__in{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 40px; flex-wrap: wrap;
}
/* marchio e frase sulla stessa linea di base, con la stessa aria a destra */
.piede__sx{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.piede__m{
  width: 96px; height: 19px; background: var(--ink-3); flex: none;
  -webkit-mask: url(/assets/logo.svg) left center / contain no-repeat;
  mask: url(/assets/logo.svg) left center / contain no-repeat;
}
.piede p{ font-size: 14px; color: var(--ink-3); margin: 0; }
.firma{ display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); }
.firma__t{
  font-family: var(--head); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.firma__m{ height: 28px; width: auto; display: block; opacity: .95; }
.firma:hover{ color: var(--ink); }
.firma:hover .firma__m{ opacity: 1; }

/* ---------- schermi stretti ---------- */

/* Quando il testo scenderebbe sotto una larghezza leggibile, il mockup va sotto
   invece di stringere la colonna: immagini e parole non si accavallano mai. */
@media (max-width: 1180px){
  .alterna, .alterna--gira{ grid-template-columns: 1fr; justify-items: center; }
  /* Prima si sceglie, poi si guarda, poi si apre: il cartello con il pulsante
     va sotto al mockup, non sopra. */
  .esplora{ display: flex; flex-direction: column; align-items: center; }
  .esplora__t{ display: contents; }
  .esplora__t > .dida__et{ order: 1; text-align: center; }
  .esplora__t > .scelta{ order: 2; justify-content: center; }
  .scena{ order: 3; }
  .esplora__t > .apri{
    order: 4; max-width: 68ch; text-align: center; margin-top: 30px;
  }
  .alterna__t{ max-width: 72ch; }
  .alterna--gira .alterna__t{ order: 0; }
  .coppia{ flex-wrap: wrap; }
  .g3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mock--largo, .alterna .mock{ justify-self: center; }
}
/* Prima si accorcia la firma, poi — se proprio non ci stanno — spariscono le
   voci: i due marchi restano sempre, uno per lato. */
@media (max-width: 1180px){
  .nav__meg span{ display: none; }
}
@media (max-width: 880px){
  .nav__v{ display: none; }
}

@media (max-width: 720px){
  body{ font-size: 16px; }
  /* Due telefoni accostati restano accostati: uno sotto l'altro sarebbero due
     schermate lunghissime e si perderebbe il confronto. */
  .coppia{ flex-wrap: nowrap; gap: 12px; align-items: flex-start; }
  .coppia .mock--medio.mock--tel .mock__schermo{
    --barra: 15px; width: 160px; height: 352px; border-radius: 24px;
    padding: 7px; padding-top: 22px;
  }
  .coppia .mock--medio.mock--tel iframe{ transform: scale(.3744); border-radius: 0 0 17px 17px; }
  .coppia .mock--medio .stato{ left: 7px; right: 7px; top: 7px; font-size: 7px; padding: 0 8px; border-radius: 22px 22px 0 0; }
  .coppia .mock--medio .stato__tacca{ width: 40px; height: 11px; top: 2px; border-radius: 6px; }
  .coppia .mock--medio .stato__pila{ width: 11px; height: 6px; border-width: 1px; }
  .coppia .mock--medio .stato__rete{ width: 8px; height: 6px; }
  .coppia figcaption{ font-size: 12px; }
  .avvia{ padding: 10px 18px 10px 12px; gap: 9px; font-size: 11.5px; }
  .avvia__p{ width: 26px; height: 26px; }
  .avvia__p::after{ border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
  .palco{ --spazio-dida: 104px; }
  .g2, .g3{ grid-template-columns: 1fr; }
  .mock--grande.mock--tel .mock__schermo{ width: 330px; height: 700px; }
  .mock--grande.mock--tel iframe{ transform: scale(.7794); }
  .mock--grande.mock--mac .mock__schermo{ width: 330px; height: 208px; }
  .mock--grande.mock--mac iframe{ transform: scale(.2222); }
  .mock--grande.mock--mac .mock__base{ width: 370px; }
  .mock--grande.mock--tab .mock__schermo{ width: 330px; height: 452px; }
  .mock--grande.mock--tab iframe{ transform: scale(.3780); }
}

/* I riquadri del computer sono larghi: man mano che lo schermo si stringe
   rimpiccioliscono, invece di uscire dalla pagina. */
@media (max-width: 1100px){
  .mock--grande.mock--mac .mock__schermo{ width: 700px; height: 440px; }
  .mock--grande.mock--mac iframe{ transform: scale(.4722); }
  .mock--grande.mock--mac .mock__base{ width: 786px; height: 13px; }
}
@media (max-width: 880px){
  .mock--medio.mock--mac .mock__schermo{ width: 520px; height: 328px; padding: 9px 9px 11px; }
  .mock--medio.mock--mac iframe{ transform: scale(.3486); }
  .mock--medio.mock--mac .mock__base{ width: 556px; height: 11px; }
  .mock--grande.mock--mac .mock__schermo{ width: 560px; height: 352px; padding: 10px 10px 12px; }
  .mock--grande.mock--mac iframe{ transform: scale(.375); }
  .mock--grande.mock--mac .mock__base{ width: 598px; height: 12px; }
}
@media (max-width: 640px){
  .mock--medio.mock--mac .mock__schermo,
  .mock--grande.mock--mac .mock__schermo{ width: 400px; height: 252px; padding: 8px 8px 10px; }
  .mock--medio.mock--mac iframe,
  .mock--grande.mock--mac iframe{ transform: scale(.2667); }
  .mock--medio.mock--mac .mock__base,
  .mock--grande.mock--mac .mock__base{ width: 428px; height: 10px; }
}
/* Su telefono i margini della pagina si stringono: il computer ci guadagna. */
@media (max-width: 520px){
  .wrap{ width: min(1180px, 100% - 32px); }
  .mock--medio.mock--mac .mock__schermo,
  .mock--grande.mock--mac .mock__schermo{ width: 372px; height: 240px; padding: 7px 7px 9px; }
  .mock--medio.mock--mac iframe,
  .mock--grande.mock--mac iframe{ transform: scale(.2486); }
  .mock--medio.mock--mac .mock__base,
  .mock--grande.mock--mac .mock__base{ width: 398px; height: 9px; }
}
/* schermi di telefono: il computer resta il più grande che ci sta nei margini */
@media (max-width: 430px){
  .mock--medio.mock--mac .mock__schermo,
  .mock--grande.mock--mac .mock__schermo{ width: 344px; height: 222px; padding: 6px 6px 8px; }
  .mock--medio.mock--mac iframe,
  .mock--grande.mock--mac iframe{ transform: scale(.2306); }
  .mock--medio.mock--mac .mock__base,
  .mock--grande.mock--mac .mock__base{ width: 368px; height: 8px; }
}
@media (max-width: 400px){
  .mock--medio.mock--mac .mock__schermo,
  .mock--grande.mock--mac .mock__schermo{ width: 316px; height: 204px; padding: 6px 6px 8px; }
  .mock--medio.mock--mac iframe,
  .mock--grande.mock--mac iframe{ transform: scale(.2111); }
  .mock--medio.mock--mac .mock__base,
  .mock--grande.mock--mac .mock__base{ width: 338px; height: 8px; }
}
@media (max-width: 370px){
  .trio__piccoli{ gap: 10px; }
  .coppia{ gap: 10px; }
  .coppia .mock--medio.mock--tel .mock__schermo{
    --barra: 12px; width: 128px; height: 275px; border-radius: 19px;
    padding: 6px; padding-top: 18px;
  }
  .coppia .mock--medio.mock--tel iframe{ transform: scale(.2974); border-radius: 0 0 13px 13px; }
  .coppia .mock--medio .stato{ left: 6px; right: 6px; top: 6px; font-size: 6px; padding: 0 6px; border-radius: 18px 18px 0 0; }
  .coppia .mock--medio .stato__tacca{ width: 32px; height: 9px; }
  .coppia figcaption{ font-size: 11px; }
  .mock--mini.mock--tel .mock__schermo{ width: 132px; height: 286px; }
  .mock--mini.mock--tel iframe{ transform: scale(.3128); }
  .mock--medio.mock--mac .mock__schermo,
  .mock--grande.mock--mac .mock__schermo{ width: 270px; height: 175px; padding: 5px 5px 7px; }
  .mock--medio.mock--mac iframe,
  .mock--grande.mock--mac iframe{ transform: scale(.1806); }
  .mock--medio.mock--mac .mock__base,
  .mock--grande.mock--mac .mock__base{ width: 289px; height: 7px; }
}

/* sotto i 340px anche il telefono si stringe */
@media (max-width: 360px){
  .mock--medio.mock--tel .mock__schermo{
    --barra: 21px; width: 250px; height: 542px; border-radius: 33px;
    padding: 9px; padding-top: 29px;
  }
  .mock--medio.mock--tel iframe{ transform: scale(.5949); border-radius: 0 0 24px 24px; }
  .mock--medio .stato{ left: 9px; right: 9px; top: 9px; font-size: 8.5px; padding: 0 11px; border-radius: 24px 24px 0 0; }
  .mock--medio .stato__tacca{ width: 54px; height: 14px; }
}