/* Inter ospitato sul sito (licenza OFL), niente Google Fonts */
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("font/inter-300.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("font/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("font/inter-700.woff2") format("woff2")}
/* OVUNQR – landing ristoranti. Solo linea FOOD della moodboard. */
:root {
  --nero: #121212;
  --crema: #f7f3eb;
  --arancio: #ff673d;   /* solo forme e fondi, o testo grande su nero: su crema non regge il testo piccolo */
  --rosa: #ffd2d6;
  --bianco-o: #ffffff;  /* la grande "O" della moodboard */

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-xl: clamp(2rem, 1.1rem + 4.2vw, 5rem);        /* titolo principale */
  --t-l: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);       /* titoli di sezione */
  --t-m: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);   /* titoletti e testo d'apertura */
  --t-s: 1.0625rem;                                 /* testo */
  --t-xs: .875rem;                                  /* note */

  --m: clamp(20px, 4vw, 56px);      /* margini esterni, uguali ovunque */
  --gap-sezione: clamp(96px, 12vw, 176px);
  --pillola: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--nero);
  font-family: var(--font);
  font-size: var(--t-s);
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--nero); outline-offset: 3px; }
::selection { background: var(--nero); color: var(--crema); }

.wrap { width: min(100% - 2 * var(--m), 1320px); margin-inline: auto; }

.salta {
  position: absolute; left: var(--m); top: -100px; z-index: 10;
  background: var(--nero); color: var(--crema); padding: 12px 18px; border-radius: var(--pillola);
}
.salta:focus { top: 12px; }

/* Pulsanti: un'unica forma, la pillola (il cerchio del marchio allungato) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px;
  background: var(--nero); color: var(--crema);
  border: 2px solid var(--nero); border-radius: var(--pillola);
  font: 700 1.0625rem/1 var(--font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--crema); color: var(--nero); }
.btn:active { background: var(--rosa); color: var(--nero); }

/* ---------- Barra ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 20px; position: relative; z-index: 2;
}
.barra-logo { display: block; padding-block: 4px; }
.barra-logo img { width: clamp(104px, 9vw, 132px); height: auto; }
.barra-azione {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; line-height: 1; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.barra-azione:hover { text-decoration-color: var(--arancio); }

/* ---------- 1. Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
/* La grande "O": disco arancio con il bordo sfumato verso il rosa, come le sfocature della moodboard (scelta voluta). */
.disco {
  position: absolute; z-index: -1; border-radius: 50%;
  width: min(84vh, 780px); aspect-ratio: 1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side, var(--arancio) 0 62%, color-mix(in srgb, var(--arancio) 55%, #ffd2d6) 76%, rgba(255, 210, 214, .55) 88%, rgba(255, 210, 214, 0) 100%);
}
.hero-griglia {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; gap: 32px;
  min-height: min(calc(100svh - 92px), 760px);
  padding-block: 24px 64px;
}
.hero-testo { max-width: 680px; position: relative; z-index: 1; }
h1 {
  font-size: var(--t-xl); font-weight: 700; line-height: 1.02; letter-spacing: -.035em;
  margin-left: -.04em; /* compensa il margine interno della "I" grande: bordo sinistro allineato al testo */
  max-width: 13ch;
}
.hero-sotto { font-size: var(--t-m); font-weight: 400; line-height: 1.4; margin-top: 36px; max-width: 34ch; }
.hero-testo .btn { margin-top: 40px; }

.hero-claim { margin-top: 48px; font-size: var(--t-m); line-height: 1.2; display: flex; align-items: center; flex-wrap: wrap; column-gap: .3em; }
.hero-claim .claim-linea { width: 72px; height: 2px; vertical-align: middle; margin-right: .2em; }
.claim-forte { font-weight: 700; letter-spacing: -.06em; }

/* ---------- Titoli di sezione ---------- */
.titolo-sezione { font-size: var(--t-l); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; margin-left: -.03em; }

/* ---------- 2. Cosa ti proponiamo: vedi in fondo (telefoni e animazioni) ---------- */

/* ---------- 3. Come funziona: i cerchi della moodboard su nero ---------- */
.come { background: var(--nero); color: var(--crema); padding-block: var(--gap-sezione); overflow: hidden; }
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
.passo {
  aspect-ratio: 1; border-radius: 50%; color: var(--nero);
  display: grid; place-items: center; padding: 16%;
}
.passo + .passo { margin-left: -6%; }
.passo-arancio { background: var(--arancio); }
.passo-rosa { background: var(--rosa); }
.passo-crema { background: var(--crema); }
.passo-testo { max-width: 24ch; }
.passo h3 { font-size: var(--t-m); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.passo p { margin-top: 10px; }

/* ---------- 4. Modulo: il tagliando ---------- */
.modulo { padding-block: var(--gap-sezione) 0; }
.tagliando {
  --tacca: 22px; --taglio: 40%;
  position: relative; background: var(--rosa);
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  /* le due tacche a semicerchio sopra e sotto, sulla linea di taglio */
  -webkit-mask:
    radial-gradient(circle var(--tacca) at var(--taglio) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--tacca) at var(--taglio) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle var(--tacca) at var(--taglio) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--tacca) at var(--taglio) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.tagliando-testa { position: relative; overflow: hidden; padding: clamp(32px, 4vw, 56px); padding-right: 40px; min-height: 100%; }
.tagliando-riga { font-size: var(--t-m); line-height: 1.4; margin-top: 24px; max-width: 22ch; position: relative; z-index: 1; }
.tagliando .titolo-sezione { position: relative; z-index: 1; max-width: 7ch; }
.tagliando-disco {
  position: absolute; width: 620px; aspect-ratio: 1; border-radius: 50%;
  background: var(--arancio); left: -170px; bottom: -300px;
}
/* la linea tratteggiata del taglio */
.tagliando-corpo {
  padding: clamp(32px, 4vw, 56px);
  border-left: 5px dotted var(--crema);
}

form { display: grid; gap: 4px; }
.campo { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo > label, .fasce legend { font-weight: 700; font-size: 1rem; line-height: 1.3; padding: 0; }
input[type="text"], input[type="tel"] {
  width: 100%; min-height: 54px; padding: 0 16px;
  background: var(--crema); color: var(--nero);
  border: 2px solid var(--nero); border-radius: 0;
  font: 400 1.0625rem/1.2 var(--font);
}
input[type="text"]:hover, input[type="tel"]:hover { background: #fff; }
input:focus-visible { outline: 3px solid var(--nero); outline-offset: 2px; background: #fff; }
input[aria-invalid="true"] { background: #fff; border-style: dashed; }

.errore, .esito-errore { min-height: 1.6em; font-size: .9375rem; font-weight: 700; line-height: 1.35; display: flex; align-items: center; gap: 8px; }
.errore:not(:empty)::before, .esito-errore:not(:empty)::before {
  content: ""; flex: 0 0 12px; height: 12px; border-radius: 50%; background: var(--arancio); outline: 2px solid var(--nero); outline-offset: -1px;
}
.esito-errore:empty { display: none; }
.esito-errore { margin-top: 14px; align-items: flex-start; }
.esito-errore::before { margin-top: .3em; }

.fasce legend { margin-bottom: 8px; }
.fasce-scelte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fascia { position: relative; display: block; }
.fascia input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fascia span {
  display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 8px;
  border: 2px solid var(--nero); border-radius: var(--pillola); background: var(--crema);
  font-weight: 700; line-height: 1; white-space: nowrap;
}
.fascia:hover span { background: #fff; }
.fascia input:checked + span { background: var(--nero); color: var(--crema); }
.fascia input:focus-visible + span { outline: 3px solid var(--nero); outline-offset: 3px; }

.caselle { display: grid; margin-top: 4px; }
.casella { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; }
.casella input { width: 26px; height: 26px; margin: -1px 0 0; accent-color: var(--nero); cursor: pointer; }
.casella label { font-size: 1rem; line-height: 1.45; cursor: pointer; }
.casella label a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.casella label a:hover { text-decoration-color: var(--arancio); }
.casella + .errore { margin-left: 40px; margin-bottom: 8px; }
.nota { font-size: .9375rem; margin: 8px 0 0 40px; }

.esca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.btn-invia { width: 100%; margin-top: 28px; }
.btn-invia[disabled], .btn-invia[aria-busy="true"] { cursor: progress; background: var(--nero); color: var(--crema); opacity: .75; }

.conferma { outline: none; display: grid; gap: 24px; align-content: center; min-height: 100%; }
.conferma[hidden] { display: none; }
.conferma-testo { font-size: var(--t-m); font-weight: 700; line-height: 1.35; max-width: 30ch; }
.conferma-firma { font-size: var(--t-s); }

/* ---------- 5. Chiusura: il claim della moodboard ---------- */
.chiusura { overflow: hidden; }
.claim-fascia { position: relative; overflow: hidden; padding-block: var(--gap-sezione) clamp(96px, 11vw, 168px); isolation: isolate; }
.claim-o {
  position: absolute; z-index: -1; right: -0.08em; top: 50%; transform: translateY(-46%);
  font-size: clamp(22rem, 52vw, 50rem); font-weight: 300; line-height: .8; color: var(--bianco-o);
  letter-spacing: 0; user-select: none;
}
.claim { font-size: clamp(2.75rem, 1rem + 7.6vw, 8.5rem); line-height: .98; }
.claim-linea { display: inline-block; width: clamp(64px, 18vw, 300px); height: .035em; min-height: 2px; background: var(--nero); vertical-align: .22em; margin-right: .18em; }
.claim-sottile { font-weight: 300; letter-spacing: -.055em; }  /* misure della moodboard (Daniele, 28/10/2026) */
.claim-pieno { display: block; font-weight: 700; letter-spacing: -.06em; margin-top: .12em; margin-left: -.03em; }

.piede { background: var(--nero); color: var(--crema); padding-block: 48px 40px; }
.piede-marchio { display: flex; align-items: center; gap: 20px; }
.piede-linea { flex: 1; height: 2px; background: var(--crema); }
.piede-marchio img { width: clamp(120px, 12vw, 160px); height: auto; }
.piede-legale { margin-top: 28px; font-size: .9375rem; }
.piede-legale a { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.piede-legale a:hover { color: var(--arancio); }
.piede :focus-visible { outline-color: var(--crema); }
.come :focus-visible { outline-color: var(--crema); }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .hero-griglia { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 32px 0; gap: 48px; }
  h1 { max-width: 16ch; }
  :root { --t-xl: clamp(1.95rem, 8vw, 5rem); }
  h1 { max-width: none; }
  .hero-sotto { max-width: 40ch; }
  .disco { width: min(130vw, 900px); top: 50%; }
  .passi { grid-template-columns: 1fr; margin-top: 48px; justify-items: start; }
  .passo { width: min(64%, 420px); padding: 15%; }
  .passo + .passo { margin-left: 0; margin-top: -8%; }
  .passi .passo:nth-child(2) { justify-self: end; }
  .tagliando { grid-template-columns: 1fr; --taglio: 50%; }
  .tagliando {
    -webkit-mask:
      radial-gradient(circle var(--tacca) at 0 var(--taglio-y, 200px), transparent 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--tacca) at 100% var(--taglio-y, 200px), transparent 98%, #000) right / 51% 100% no-repeat;
            mask:
      radial-gradient(circle var(--tacca) at 0 var(--taglio-y, 200px), transparent 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--tacca) at 100% var(--taglio-y, 200px), transparent 98%, #000) right / 51% 100% no-repeat;
  }
  .tagliando-testa { padding-right: clamp(32px, 4vw, 56px); height: var(--taglio-y, 200px); min-height: 0; }
  .tagliando .titolo-sezione { max-width: none; }
  .tagliando-riga { max-width: 32ch; }
  .tagliando-disco { width: 260px; left: auto; right: -70px; bottom: -150px; }
  .tagliando-corpo { border-left: 0; border-top: 5px dotted var(--crema); }
}

/* ---------- Telefono ---------- */
@media (max-width: 760px) {
  :root { --t-xl: clamp(1.95rem, 8.6vw, 2.6rem); }
  .barra { padding-block: 14px; }
  .hero-griglia { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 20px 0; gap: 40px; }
  h1 { max-width: none; }
  .hero-sotto { margin-top: 20px; font-size: 1.125rem; }
  .hero-testo .btn { margin-top: 28px; width: 100%; }
  .disco { width: 175vw; top: 58%; }

  .passi { margin-top: 40px; }
  .passo { width: 86%; }
  .passo + .passo { margin-top: -9%; }
  .tagliando-disco { display: none; }

  .tagliando { --taglio-y: 236px; }
  .tagliando-testa { padding: 32px 24px; }
  .tagliando-corpo { padding: 32px 20px 28px; }
  .fasce-scelte { gap: 6px; }
  .claim-o { font-size: 30rem; right: -.3em; }
  .piede-legale { line-height: 1.7; }
}
@media (max-width: 440px) {
  .fasce-scelte { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .tagliando { --taglio-y: 268px; }
}

/* =====================================================================
   TELEFONI DISEGNATI IN CODICE (approvati da Daniele il 28/10/2026)
   Misure di progetto: telefono 300x612, schermo 282x594. Si scala con --k.
   ===================================================================== */
.tel-box { width: calc(300px * var(--k)); height: calc(612px * var(--k)); }
.k74 { --k: .74; } .k84 { --k: .84; } .k90 { --k: .9; } .k92 { --k: .92; }
.tel {
  width: 300px; height: 612px; padding: 9px; border-radius: 44px; position: relative;
  background: var(--nero); transform: scale(var(--k)); transform-origin: top left;
  box-shadow: 0 24px 48px rgba(18, 18, 18, .28);   /* ombra solo sui telefoni, che "fluttuano" */
}
.tel::before { content: ""; position: absolute; top: 17px; left: 50%; width: 78px; height: 22px; margin-left: -39px; border-radius: 12px; background: var(--nero); z-index: 7; }
.schermo {
  width: 282px; height: 594px; border-radius: 35px; overflow: hidden; position: relative;
  background: var(--crema); color: var(--nero); font-size: 13px; line-height: 1.3; text-align: left;
}
.schermo p { margin: 0; }
.lg { display: grid; place-items: center; border-radius: 50%; background: var(--arancio); color: var(--nero); font-weight: 700; }

/* menu */
.cop { height: 110px; position: relative; background: radial-gradient(circle at 30% 35%, var(--arancio) 0 26%, transparent 62%), radial-gradient(circle at 78% 72%, var(--rosa) 0 18%, transparent 56%), var(--nero); }
.cop .lg { position: absolute; left: 50%; bottom: -28px; width: 56px; height: 56px; margin-left: -28px; font-size: 24px; box-shadow: 0 0 0 4px var(--nero); z-index: 2; }
.testa { background: var(--nero); color: var(--crema); text-align: center; padding: 36px 12px 12px; }
.nome { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sotto { font-size: 11.5px; opacity: .75; margin-top: 2px !important; }
.cat { display: flex; gap: 5px; margin-top: 12px; }
.cat > * {
  flex: 1 1 auto; min-height: 32px; padding: 0 6px; border-radius: var(--pillola);
  border: 1.5px solid rgba(247, 243, 235, .4); background: transparent; color: var(--crema);
  font: 700 10.5px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.cat button { cursor: pointer; }
.cat button:hover { border-color: var(--crema); }
.cat button:focus-visible { outline: 3px solid var(--crema); outline-offset: 2px; }
.cat .on, .cat button[aria-pressed="true"] { background: var(--arancio); border-color: var(--arancio); color: var(--nero); }
.lista { padding: 2px 14px 70px; }
.sez-tit { font-size: 15px; font-weight: 700; margin: 12px 0 2px !important; display: flex; align-items: center; gap: 8px; }
.sez-tit::after { content: ""; flex: 1; height: 3px; background: var(--arancio); }
.p { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(18, 18, 18, .12); }
.p b { display: block; font-size: 13px; font-weight: 700; }
.p small { display: block; font-size: 11px; opacity: .72; margin-top: 1px; }
.pr { font-weight: 700; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--arancio); color: var(--nero); border-radius: var(--pillola); padding: 11px; text-align: center; font-weight: 700; font-size: 12.5px; }

/* testata delle schermate */
.testata { background: var(--nero); color: var(--crema); display: flex; align-items: center; gap: 10px; padding: 46px 14px 12px; }
.testata.chiara { background: var(--crema); color: var(--nero); border-bottom: 1px solid rgba(18, 18, 18, .12); }
.lg-s { width: 34px; height: 34px; font-size: 15px; flex: none; }
.testata b { display: block; font-size: 14.5px; font-weight: 700; }
.testata small { display: block; font-size: 11px; opacity: .75; }

/* prenotazione del cliente */
.k { padding: 6px 14px; }
.lab { font-size: 11px; font-weight: 700; opacity: .72; margin: 10px 0 6px !important; }
.chips { display: flex; gap: 5px; }
.ch { position: relative; flex: 1 1 auto; text-align: center; padding: 8px 3px; border-radius: 8px; background: #fff; border: 1.5px solid rgba(18, 18, 18, .15); font-weight: 700; font-size: 11.5px; transition: background-color .25s, border-color .25s; }
.ch.on { background: var(--arancio); border-color: var(--arancio); }
.pers { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid rgba(18, 18, 18, .15); border-radius: 8px; padding: 6px 8px; }
.pm { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--nero); color: var(--crema); display: grid; place-items: center; font-weight: 700; font-size: 17px; }
.num { font-size: 19px; font-weight: 700; }
.campo-s { position: relative; background: #fff; border: 1.5px solid rgba(18, 18, 18, .15); border-radius: 8px; padding: 9px 10px; font-size: 12px; font-weight: 700; }
.campo-s.vuoto { font-weight: 400; opacity: .7; }
.invia, .salva { transition: transform .15s; }
.premuto { transform: scale(.95); }
.tap::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(18, 18, 18, .28); pointer-events: none; animation: tocco .55s ease-out forwards;
}
@keyframes tocco { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* WhatsApp del ristoratore: fumetto verde generico, nessun logo */
.conv { padding: 14px; display: grid; gap: 10px; justify-items: start; }
.giorno { justify-self: center; font-size: 10.5px; font-weight: 700; background: rgba(18, 18, 18, .08); padding: 4px 10px; border-radius: var(--pillola); }
.fum { background: #d9fdd3; color: var(--nero); border-radius: 14px 14px 14px 4px; padding: 9px 11px 6px; max-width: 86%; font-size: 12.5px; line-height: 1.35; transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.fum small { display: block; text-align: right; font-size: 10px; opacity: .6; margin-top: 2px; }
.fum.via { opacity: 0; transform: translateY(12px); }
.notifica { position: absolute; left: 8px; right: 8px; top: 40px; z-index: 6; background: #fff; color: var(--nero); border-radius: 16px; padding: 10px 12px; box-shadow: 0 10px 24px rgba(18, 18, 18, .25); opacity: 0; transform: translateY(-130%); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.notifica small { display: flex; align-items: center; gap: 6px; font-size: 10px; opacity: .72; }
.notifica small::before { content: ""; width: 13px; height: 13px; border-radius: 4px; background: #d9fdd3; box-shadow: inset 0 0 0 1.5px rgba(18, 18, 18, .3); }
.notifica b { display: block; font-size: 12.5px; margin-top: 3px; }
.notifica.giu { opacity: 1; transform: none; }

/* gestione */
.tabs { display: flex; gap: 6px; padding: 10px 12px 2px; }
.tabs span { position: relative; font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: var(--pillola); background: rgba(18, 18, 18, .08); transition: background-color .25s, color .25s; }
.tabs .on { background: var(--nero); color: var(--arancio); }
.pann { position: absolute; left: 0; right: 0; top: 136px; transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.pann-pren { opacity: 0; transform: translateX(30px); }
.storico .pann-piatti { opacity: 0; transform: translateX(-30px); }
.storico .pann-pren { opacity: 1; transform: none; }
.pann-tit { font-size: 12px; font-weight: 700; margin: 8px 14px 0 !important; }
.r { display: flex; align-items: center; gap: 9px; margin: 8px 12px 0; background: #fff; border: 1.5px solid rgba(18, 18, 18, .12); border-radius: 10px; padding: 7px; transition: border-color .25s, box-shadow .25s; }
.th { width: 42px; height: 42px; border-radius: 7px; flex: none; }
.th1 { background: radial-gradient(circle at 30% 35%, var(--arancio) 0 26%, transparent 62%), var(--nero); }
.th2 { background: radial-gradient(circle at 60% 45%, var(--arancio) 0 24%, transparent 60%), radial-gradient(circle at 20% 80%, var(--rosa) 0 18%, transparent 50%), var(--nero); }
.th3 { background: radial-gradient(circle at 70% 30%, var(--rosa) 0 24%, transparent 60%), radial-gradient(circle at 30% 75%, var(--arancio) 0 20%, transparent 55%), var(--nero); }
.t { flex: 1; min-width: 0; }
.t b { display: block; font-size: 12.5px; line-height: 1.2; }
.t small { font-size: 10.5px; opacity: .72; }
.in { font-weight: 700; font-size: 12.5px; border: 1.5px solid rgba(18, 18, 18, .15); border-radius: 6px; padding: 5px 7px; white-space: nowrap; display: inline-flex; align-items: center; min-width: 66px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cur { width: 2px; height: 13px; background: var(--arancio); margin-left: 2px; opacity: 0; }
.r.ed { border-color: var(--arancio); box-shadow: 0 0 0 3px rgba(255, 103, 61, .35); }
.r.ed .in { border-color: var(--nero); }
.r.ed .cur { opacity: 1; animation: cursore 1s steps(1) infinite; }
@keyframes cursore { 50% { opacity: 0; } }
.agg { margin: 10px 12px 0; border: 1.5px dashed rgba(18, 18, 18, .3); border-radius: 10px; padding: 9px; text-align: center; font-size: 11.5px; font-weight: 700; opacity: .75; }
.rp { padding: 9px 10px; }
.rp .ok { font-size: 10.5px; font-weight: 700; background: var(--rosa); padding: 4px 8px; border-radius: var(--pillola); }
.salva { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--nero); color: var(--arancio); border-radius: var(--pillola); padding: 11px; text-align: center; font-weight: 700; font-size: 12.5px; }
.salvato { position: absolute; left: 50%; bottom: 62px; background: var(--nero); color: var(--crema); padding: 7px 14px; border-radius: var(--pillola); font-weight: 700; font-size: 12px; opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.salvato.su { opacity: 1; transform: translate(-50%, 0); }
.storico .salva, .storico .salvato { opacity: 0; }

/* ---------- Hero: tre telefoni ---------- */
.hero-tel { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.tre-fuori { --kt: .84; width: 100%; height: calc(640px * var(--kt)); }
.tre { position: relative; width: 600px; height: 640px; margin-left: calc(50% - 300px); transform: scale(var(--kt)); transform-origin: top center; }
.tre-centro { position: absolute; left: 162px; top: 14px; z-index: 3; }
.tre-sx, .tre-dx { position: absolute; top: 88px; z-index: 1; }
.tre-sx { left: 6px; transform: rotate(-8deg); }
.tre-dx { right: 6px; transform: rotate(8deg); }
.hero-tel figcaption { max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; position: relative; z-index: 4; }
.hero-tel figcaption span { font-size: var(--t-xs); font-weight: 700; background: var(--crema); padding: 4px 12px; border-radius: var(--pillola); }
.ferma { min-height: 44px; padding: 0 16px; border: 2px solid var(--nero); border-radius: var(--pillola); background: var(--crema); color: var(--nero); font: 700 .875rem/1 var(--font); cursor: pointer; }
.ferma:hover { background: #fff; }

/* galleggiamento lento dei telefoni (6-8 s) */
[data-galleggia] { animation: galleggia 7s ease-in-out infinite alternate; }
[data-galleggia="1"] { animation-duration: 6.5s; animation-delay: -2s; }
[data-galleggia="3"] { animation-duration: 8s; animation-delay: -4s; }
@keyframes galleggia { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ---------- 2. Cosa ti proponiamo ---------- */
.proposta { background: var(--rosa); padding-block: var(--gap-sezione); }
.demo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.demo.rovescia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.demo.rovescia .palco { order: 2; }
.palco { display: flex; justify-content: center; align-items: center; padding: 44px 10px; overflow: hidden; min-width: 0; }
.palco-arancio { background: var(--arancio); }
.palco-nero { background: var(--nero); }
.palco-crema { background: var(--crema); }
.scala { --ks: 1; flex: none; width: calc(var(--w) * var(--ks)); height: calc(var(--h) * var(--ks)); }
.scala > .scena { position: relative; width: var(--w); height: var(--h); transform: scale(var(--ks)); transform-origin: top left; }
.scala-foto { --w: 480px; --h: 540px; }
.scala-pren { --w: 600px; --h: 560px; }
.scala-gest { --w: 270px; --h: 551px; }
.demo-testo h3 { font-size: var(--t-m); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.demo-testo p { margin-top: 12px; max-width: 36ch; }
.demo-testo .h3-dopo { margin-top: 40px; }
.demo-testo .demo-forte { font-size: var(--t-m); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin-top: 24px; max-width: 24ch; }
.in-piu { margin-top: clamp(56px, 7vw, 96px); display: flex; align-items: center; gap: 20px; background: var(--crema); padding: 28px clamp(24px, 4vw, 48px); font-size: var(--t-m); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.in-piu-segno { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--arancio); display: grid; place-items: center; }
.in-piu-segno::before { content: "+"; font-size: 30px; font-weight: 300; line-height: 1; color: var(--nero); }

/* foto del menu di carta -> menu digitale */
.carta { position: absolute; left: 125px; top: 105px; width: 230px; height: 320px; background: var(--crema); padding: 18px 20px; transform: rotate(-3deg); box-shadow: 0 18px 36px rgba(18, 18, 18, .25); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.carta p { font-size: 24px; font-weight: 700; text-align: center; letter-spacing: -.02em; margin: 6px 0 16px; }
.carta li { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; margin-bottom: 14px; color: var(--nero); }
.carta li i { flex: 1; border-bottom: 2px dotted rgba(18, 18, 18, .35); }
.mirino { position: absolute; left: 100px; top: 82px; width: 280px; height: 366px; opacity: 0; transition: opacity .3s; }
.mirino i { position: absolute; width: 30px; height: 30px; border: 0 solid var(--crema); }
.mirino i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; }
.mirino i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; }
.mirino i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; }
.mirino i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; }
.lampo { position: absolute; inset: -60px; background: #fff; opacity: 0; pointer-events: none; }
.lampo.scatta { animation: lampo .5s ease-out; }
@keyframes lampo { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
.foto-tel { position: absolute; right: 0; top: 0; transition: opacity .6s, transform .8s cubic-bezier(.2, .7, .2, 1); }
.foto-tel .p { transition: opacity .35s, transform .35s; }
/* stato finale (anche senza JavaScript): carta di lato, menu sul telefono */
.scena-foto .carta { transform: translateX(-125px) rotate(-8deg) scale(.82); }
.scena-foto.inizio .carta { transform: rotate(-3deg); }
.scena-foto.inizio .foto-tel { opacity: 0; transform: translateY(30px); }
.scena-foto.inizio .foto-tel .p { opacity: 0; transform: translateY(8px); }
.scena-foto.mira .mirino { opacity: 1; }
.foto-tel .p:nth-child(2) { transition-delay: .12s; }
.foto-tel .p:nth-child(3) { transition-delay: .24s; }
.foto-tel .p:nth-child(4) { transition-delay: .36s; }

/* prenotazione: due telefoni */
.pren-cliente { position: absolute; left: 0; top: 0; }
.palco-nero .tel { box-shadow: 0 0 0 2px rgba(247, 243, 235, .28), 0 24px 48px rgba(0, 0, 0, .4); }
.pren-locale { position: absolute; right: 0; top: 0; }
.vola { --vx: 348px; --vy: -420px; position: absolute; left: 118px; top: 474px; width: 18px; height: 18px; border-radius: 50%; background: var(--arancio); opacity: 0; z-index: 8; }
.vola.via { animation: vola .7s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes vola { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--vx), var(--vy)) scale(.6); } }
.didasc { position: absolute; top: 528px; width: 252px; text-align: center; color: var(--crema); font-size: 15px; font-weight: 700; margin: 0; }
.didasc-sx { left: 0; } .didasc-dx { right: 0; }

/* fermo: preferenza di sistema o pulsante "Ferma le animazioni" */
html.fermo [data-galleggia], html.fermo .r.ed .cur { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-galleggia], .r.ed .cur, .vola.via, .lampo.scatta { animation: none !important; }
  .tap::after { content: none; }
  .fum, .notifica, .carta, .foto-tel, .foto-tel .p, .pann, .salvato, .ch, .tabs span, .r, .mirino { transition: none !important; }
}

@media (max-width: 1240px) {
  .tre-fuori { --kt: .74; }
  .scala-pren { --ks: .88; }
}
@media (max-width: 1080px) {
  .tre-fuori { --kt: 1; }
  .hero-tel { padding-bottom: 56px; }
  .demo, .demo.rovescia { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .demo.rovescia .palco { order: 0; }
  .scala-pren { --ks: 1; }
}
@media (max-width: 760px) {
  .tre-fuori { --kt: .8; }
  /* prenotazione da telefono: i due telefoni uno sopra l'altro, tagliati alla parte che conta, più grandi */
  .palco-nero { padding-inline: 0; }
  .scala-pren { --w: 260px; --h: 760px; --ks: 1.3; }
  .scena-pren .invia { position: static; margin: 16px 14px 0; }
  .pren-cliente, .pren-locale { left: 4px; right: auto; overflow: hidden; }
  .pren-cliente { top: 34px; height: 372px; }
  .pren-locale { top: 486px; height: 274px; }
  .didasc { width: 260px; left: 0; right: auto; }
  .didasc-sx { top: 0; } .didasc-dx { top: 452px; }
  .vola { --vx: 0px; --vy: 170px; left: 120px; top: 373px; }
  .hero-tel { padding-bottom: 40px; }
  .palco { padding: 28px 10px; }
  .scala-foto { --ks: .68; }
  .scala-gest { --ks: .85; }
  .in-piu { gap: 16px; padding: 22px 20px; }
  .in-piu-segno { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  .tre-fuori { --kt: .68; }
  .scala-foto { --ks: .54; }
  .scala-pren { --ks: 1.07; }
  .scala-gest { --ks: .8; }
}

/* ---------- Pagina dell'informativa ---------- */
.informativa { max-width: 760px; padding-block: 40px 120px; }
.informativa h1 { font-size: var(--t-l); max-width: 20ch; }
.informativa-apertura { font-size: var(--t-m); margin-top: 24px; }
.informativa h2 { font-size: var(--t-m); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 48px; }
.informativa p, .informativa ul { margin-top: 14px; max-width: 68ch; }
.informativa ul { list-style: disc; padding-left: 1.3em; }
.informativa li + li { margin-top: 6px; }
.informativa a:not(.btn) { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.da-decidere { background: var(--rosa); padding: 0 4px; font-weight: 700; }
.informativa-torna { margin-top: 56px; }

/* Cloudflare Turnstile: compare solo se serve un controllo (interaction-only) */
.cf-turnstile { margin-top: 12px; min-height: 0; }
.cf-turnstile:empty { margin-top: 0; }