/* ============================================================
   Lavora con noi · La macchinetta del caffè
   In ogni ufficio le chiacchiere vere si fanno lì, davanti alla
   macchinetta. Il colloquio comincia allo stesso modo: si sceglie
   il caffè che ci somiglia (ogni tasto è un punto di partenza,
   dall'espresso di chi ha già venduto al deca di chi ci sta
   ancora pensando), il bicchiere cade, il caffè scende, e dalla
   fessura esce uno scontrino con la risposta: come si comincia da
   lì. Sotto lo scontrino c'è il buono per il caffè vero, cioè il
   modulo.
   La macchinetta è disegnata, non fotografata: colori pieni, niente
   marchi veri. Il prezzo è zero, e sulla gettoniera c'è scritto chi
   offre.
   ============================================================ */

.spina { overflow-x: clip; }

.cf-griglia {
  display: grid;
  /* il testo prende al massimo quello che gli serve; la scena sta al
     centro dello spazio che resta, così sui portatili larghi e bassi
     (dove la macchinetta la decide l'altezza) non resta un buco */
  grid-template-columns: minmax(0, 560px) 1fr;
  column-gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
}

/* ---------- il testo e il banco ---------- */
.cf-testo { position: relative; z-index: 4; padding-top: clamp(14px, 3vw, 48px); }
.cf-titolo {
  margin-top: 16px;
  font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 830; font-stretch: 112%; letter-spacing: -.03em; line-height: .98;
  max-width: 13ch;
}
.cf-titolo em {
  display: block; margin-top: .16em;
  font-style: normal; color: var(--green-deep);
  font-size: .64em; line-height: 1.04; max-width: 15ch;
  text-wrap: balance;
}
.cf-sotto { margin-top: 20px; font-size: 17.5px; color: var(--soft); max-width: 42ch; }

/* la candidatura a un tasto: chi non ha voglia di caffè ci va dritto */
.cf-subito { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cf-subito .btn-dark { padding: 15px 30px; }
.cf-subito span { font-size: 14.5px; font-weight: 650; color: var(--soft); }

.cf-banco { margin-top: clamp(18px, 3.2vh, 30px); }
.cf-invito {
  display: flex; align-items: center; gap: 13px;
  max-width: 44ch;
  font-size: 15px; line-height: 1.45; color: var(--soft);
}
.cf-invito b { color: var(--ink); font-weight: 800; }
.cf-invito-segno {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sun-soft); color: #9a6a0c;
}
.cf-invito-segno svg { width: 22px; height: 22px; }
.cf-banco.pieno .cf-invito { display: none; }

/* ---------- la scena: la macchinetta, il mobiletto, Seven ----------
   --mw è la larghezza della macchinetta: tutto il resto si misura
   su di lei (cqi dentro, multipli di --mw fuori). Sul computer la
   decide l'altezza dello schermo, perché la macchinetta intera sta
   nella prima schermata anche sui portatili bassi */
.cf-scena {
  --mw: clamp(300px, min(calc((94.6vh - 100px) / 1.47), calc((100vw - 64px - 380px - 56px) / 1.54)), 460px);
  position: relative; z-index: 1;
  justify-self: center;
  width: calc(var(--mw) * 1.54);
  padding-top: clamp(10px, 2.4vh, 26px);
}

/* ---------- la macchinetta ----------
   Una macchinetta vera da ufficio, non un disegno piatto: accanto a
   Seven, che è un personaggio 3D lucido, deve avere materiali e luce
   credibili. La scocca è metallo verniciato nel verde del marchio,
   con la grana della vernice e la luce che gira sugli spigoli; la
   porta è acciaio spazzolato con le viti; la vetrina ha il suo
   riflesso, il display fa luce intorno, i tasti sono in rilievo su
   un pannello nero e si abbassano quando li premi. Si vede un poco
   il fianco sinistro e il tetto, così la macchina ha spessore.
   Tutte le misure stanno sulla larghezza (cqi) */
.cf-macchina {
  --grana: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --spazzolato: repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .035) 1px 2px, rgba(255, 255, 255, 0) 2px 3px);
  --acciaio: linear-gradient(90deg, #a9b3af 0%, #dfe5e2 16%, #c3cbc8 34%, #f0f3f2 54%, #c8cfcc 76%, #a3ada9 100%);
  container-type: inline-size;
  position: relative;
  width: var(--mw);
  display: flex; flex-direction: column;
  border-radius: 2.6cqi 2.6cqi 1.2cqi 1.2cqi;
  background:
    /* la luce dell'insegna che scende sulla vernice */
    radial-gradient(60% 18% at 50% 0%, rgba(255, 214, 130, .28), rgba(255, 214, 130, 0) 100%),
    /* gli spigoli arrotondati: luce a sinistra, ombra a destra */
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .16) 1.6%, rgba(255, 255, 255, .05) 7%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .1) 94%, rgba(0, 0, 0, .34) 100%),
    /* la luce morbida dall'alto */
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 26%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .16)),
    var(--grana),
    linear-gradient(180deg, #33855e, #2b744f);
  /* lo spessore: la stessa sagoma ripetuta dietro, un passo alla
     volta verso sinistra e sempre più scura, come un'estrusione vera.
     Segue gli stessi raggi della faccia, quindi lo spigolo gira tondo;
     la macchina è più alta dei nostri occhi, il tetto non si vede */
  --passo: calc(var(--mw) * -.0024);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .38),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    inset 1.5px 0 0 rgba(255, 255, 255, .22),
    calc(var(--passo) * 1) 0 0 #2a6d4b,
    calc(var(--passo) * 2) 0 0 #286a49,
    calc(var(--passo) * 3) 0 0 #266646,
    calc(var(--passo) * 4) 0 0 #246244,
    calc(var(--passo) * 5) 0 0 #225e41,
    calc(var(--passo) * 6) 0 0 #20593e,
    calc(var(--passo) * 7) 0 0 #1e553b,
    calc(var(--passo) * 8) 0 0 #1c5038,
    calc(var(--passo) * 9) 0 0 #1a4c35,
    calc(var(--passo) * 10) 0 0 #184732,
    calc(var(--passo) * 11) 0 0 #16432f,
    calc(var(--passo) * 12) 0 0 #143f2c,
    calc(var(--passo) * 12.6) 0 0 rgba(8, 30, 20, .55),
    0 50px 60px -44px rgba(8, 36, 26, .75),
    0 16px 26px -18px rgba(8, 36, 26, .45);
}
/* il pavimento: un'ombra lunga sotto macchinetta, mobiletto e Seven */
.cf-macchina::after {
  content: ""; position: absolute; z-index: -2;
  left: -8%; width: 164%; bottom: -5cqi; height: 9cqi;
  background: radial-gradient(closest-side, rgba(34, 58, 60, .24), rgba(34, 58, 60, 0));
  pointer-events: none;
}
.cf-piede {
  position: absolute; z-index: -1; bottom: -1.6cqi; left: 6cqi;
  width: 9cqi; height: 2.2cqi; border-radius: 0 0 1cqi 1cqi;
  background: linear-gradient(180deg, #2a2f2e, #121615);
  box-shadow: 0 .8cqi 1cqi rgba(0, 0, 0, .35);
}
.cf-piede-d { left: auto; right: 6cqi; }

/* l'insegna in cima, retroilluminata dietro il vetro */
.cf-insegna {
  position: relative;
  margin: 2.8cqi 2.8cqi 0;
  height: 9.2cqi;
  display: grid; place-items: center;
  border-radius: 1.8cqi;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, 0) 47%),
    radial-gradient(70% 120% at 50% 55%, #fff4cf 0%, #ffd97c 55%, #f4b93f 100%);
  box-shadow:
    0 0 0 .55cqi #c9d1ce,
    0 0 0 .8cqi rgba(0, 0, 0, .25),
    inset 0 0 1.4cqi rgba(179, 110, 10, .35),
    0 0 5cqi rgba(255, 196, 80, .45);
}
.cf-insegna-luce {
  font-size: 4.8cqi; font-weight: 870; font-stretch: 118%;
  letter-spacing: .06em; text-transform: uppercase; color: #1e3c33;
  text-shadow: 0 .15cqi 0 rgba(255, 255, 255, .7), 0 0 1.6cqi rgba(255, 240, 200, .8);
}
.cf-seven-seduto { display: none; }

/* la porta: acciaio spazzolato, quattro viti, un filo d'ombra sotto */
.cf-fronte {
  position: relative;
  margin: 2.6cqi 2.8cqi 0;
  padding: 3cqi;
  display: flex; flex-direction: column; gap: 2.4cqi;
  border-radius: 2cqi;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 14%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, .1)),
    var(--spazzolato),
    var(--acciaio);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 0 0 .3cqi rgba(0, 0, 0, .18),
    0 .8cqi 1.4cqi rgba(0, 0, 0, .3);
}
.cf-fronte::before {
  content: ""; position: absolute; inset: 1cqi; pointer-events: none;
  --vite: radial-gradient(circle at 40% 35%, #fbfcfb 0 .25cqi, #b7c0bc .55cqi, #7d8884 .8cqi, rgba(0, 0, 0, .25) .9cqi, rgba(0, 0, 0, 0) 1.05cqi);
  background: var(--vite) top left / 2.2cqi 2.2cqi no-repeat, var(--vite) top right / 2.2cqi 2.2cqi no-repeat, var(--vite) bottom left / 2.2cqi 2.2cqi no-repeat, var(--vite) bottom right / 2.2cqi 2.2cqi no-repeat;
}

.cf-alto { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 2.4cqi; min-height: 23cqi; }

/* la vetrina col manifesto: il vetro ha la guarnizione nera, un'ombra
   dentro e due riflessi di traverso */
.cf-manifesto {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: center; justify-items: center; gap: .6cqi;
  padding: 1.2cqi 1.6cqi 1.6cqi;
  border-radius: 1.4cqi;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(246, 183, 60, .2) 0 9deg, rgba(246, 183, 60, 0) 9deg 18deg),
    linear-gradient(180deg, #fff6df, #fbe6b8);
  box-shadow: inset 0 0 0 .55cqi #1d2927, inset 0 0 0 .75cqi rgba(255, 255, 255, .25), inset 0 1.6cqi 2.4cqi rgba(0, 0, 0, .22);
  text-align: center;
}
.cf-manifesto::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 0 30%, rgba(255, 255, 255, .42) 30.5% 38%, rgba(255, 255, 255, 0) 38.5% 46%, rgba(255, 255, 255, .18) 46.5% 49%, rgba(255, 255, 255, 0) 49.5%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%);
  border-radius: inherit;
}
.cf-manifesto-tazza { width: 58%; height: auto; filter: drop-shadow(0 1.2cqi 1cqi rgba(90, 50, 10, .25)); }
.cf-manifesto-frase {
  font-size: 2.8cqi; font-weight: 830; font-stretch: 108%; line-height: 1.1;
  color: var(--green-deep); letter-spacing: -.01em;
}

.cf-cassa { display: grid; grid-template-rows: 1fr auto; gap: 1.8cqi; }

/* il display: vetro scuro retroilluminato, le righe dell'LCD, il
   riflesso in alto e la luce ambra che bagna l'acciaio intorno */
.cf-display {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d1 prezzo" "d2 d2" "barra barra";
  align-content: center; column-gap: 2cqi; row-gap: .7cqi;
  padding: 1.8cqi 2.2cqi;
  border-radius: 1.3cqi;
  background:
    radial-gradient(90% 90% at 30% 20%, rgba(246, 183, 60, .12), rgba(246, 183, 60, 0) 70%),
    linear-gradient(180deg, #16211f, #0d1514);
  box-shadow:
    0 0 0 .5cqi #1a2322,
    0 0 0 .8cqi #cfd6d3,
    0 0 0 1cqi rgba(0, 0, 0, .2),
    0 0 4.6cqi rgba(246, 183, 60, .32),
    inset 0 .6cqi 1.4cqi rgba(0, 0, 0, .6);
}
.cf-display::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 3px);
}
.cf-display::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02));
  border-radius: inherit;
}
.cf-d1 {
  grid-area: d1;
  font-size: 2.6cqi; font-weight: 800; font-stretch: 80%;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sun);
  text-shadow: 0 0 1.2cqi rgba(246, 183, 60, .7);
}
.cf-d2 {
  grid-area: d2;
  font-size: 3.7cqi; font-weight: 780; line-height: 1.12; color: #fff3d6;
  text-shadow: 0 0 1.2cqi rgba(255, 214, 140, .55);
}
.cf-d-prezzo {
  grid-area: prezzo; align-self: start;
  font-size: 2.8cqi; font-weight: 850; color: var(--sun); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 1.2cqi rgba(246, 183, 60, .7);
}
.cf-avanza { grid-area: barra; display: block; height: 1cqi; border-radius: 1cqi; background: rgba(255, 255, 255, .1); overflow: hidden; opacity: 0; transition: opacity .2s; }
.cf-avanza i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sun); box-shadow: 0 0 1cqi var(--sun); }
.cf-macchina.prepara .cf-avanza { opacity: 1; }

/* la gettoniera cromata con l'adesivo, e il lettore di carte */
.cf-soldi { display: flex; align-items: stretch; gap: 1.6cqi; min-height: 8.6cqi; }
.cf-gettoniera {
  position: relative; flex: 1;
  display: flex; align-items: center; gap: 1.6cqi;
  padding: 1cqi 1.6cqi;
  border-radius: 1.2cqi;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .08)),
    var(--spazzolato),
    linear-gradient(90deg, #c4ccc9, #eef1f0 45%, #bfc8c4);
  box-shadow: inset 0 0 0 .25cqi rgba(0, 0, 0, .18), 0 .4cqi .8cqi rgba(0, 0, 0, .18);
}
.cf-g-fessura {
  flex: none; width: 1.3cqi; height: 5.2cqi; border-radius: 1cqi;
  background: linear-gradient(90deg, #070b0a, #26302e);
  box-shadow: 0 0 0 .45cqi #9ca7a3, 0 0 0 .6cqi rgba(255, 255, 255, .7);
}
.cf-g-resto {
  flex: none; width: 3.2cqi; height: 3.2cqi; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #c5cdca 45%, #8e9995 100%);
  box-shadow: 0 .3cqi .5cqi rgba(0, 0, 0, .3), inset 0 -.3cqi .4cqi rgba(0, 0, 0, .2);
}
.cf-adesivo {
  margin-left: auto;
  padding: .8cqi 1.4cqi;
  border-radius: .9cqi;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0) 0 55%, rgba(255, 255, 255, .28) 56% 64%, rgba(255, 255, 255, 0) 65%),
    var(--green);
  color: #fff;
  font-size: 2.3cqi; font-weight: 820; line-height: 1.1; text-align: center;
  rotate: -3deg;
  box-shadow: 0 .25cqi .5cqi rgba(0, 0, 0, .25);
}
.cf-lettore {
  position: relative; flex: none;
  width: 8.6cqi; display: grid; place-items: center;
  border-radius: 1.2cqi;
  background: linear-gradient(160deg, #2a3634, #0f1716);
  color: rgba(255, 255, 255, .78);
  box-shadow: 0 0 0 .3cqi #9ca7a3, 0 .4cqi .8cqi rgba(0, 0, 0, .25), inset 0 .3cqi .6cqi rgba(255, 255, 255, .08);
}
.cf-lettore svg { width: 4.4cqi; height: 4.4cqi; }
.cf-lettore i { position: absolute; right: 1cqi; top: 1cqi; width: 1cqi; height: 1cqi; border-radius: 50%; background: #5de08f; box-shadow: 0 0 1cqi #5de08f; }

/* ---------- i tasti ----------
   Un pannello nero con cinque righe: in ogni riga il tasto tondo in
   rilievo (cornice cromata, il colore del caffè sul cappuccio, la
   spia sopra) e l'etichetta retroilluminata con il caffè e da dove
   parti. Premuto, il tasto scende; scelto, la spia si accende ambra
   e l'etichetta si scalda */
.cf-tasti {
  display: grid; gap: 1cqi;
  padding: 1.3cqi;
  border-radius: 1.6cqi;
  background: linear-gradient(180deg, #1f2a28, #141c1b);
  box-shadow: inset 0 .6cqi 1.2cqi rgba(0, 0, 0, .55), 0 0 0 .3cqi rgba(255, 255, 255, .5), 0 0 0 .5cqi rgba(0, 0, 0, .18);
}
.cf-tasto {
  --caffe: #4a2c1d;
  position: relative;
  display: grid; grid-template-columns: 6.4cqi minmax(0, 1fr) auto; align-items: center; gap: 2.4cqi;
  min-height: 9.4cqi;
  padding: .9cqi 2cqi .9cqi 1.4cqi;
  border: 0; border-radius: 1.1cqi;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #f7f5ee, #e9e5d9);
  box-shadow: inset 0 0 0 .2cqi rgba(0, 0, 0, .12), inset 0 -.4cqi .8cqi rgba(0, 0, 0, .06);
  font: inherit; color: var(--ink); text-align: left;
  cursor: pointer;
  transition: background .25s, box-shadow .25s;
}
.cf-tasto[data-i="1"] { --caffe: #7a4d31; }
.cf-tasto[data-i="2"] { --caffe: #b5835a; }
.cf-tasto[data-i="3"] { --caffe: #8a5a3b; }
.cf-tasto[data-i="4"] { --caffe: #5b3a27; }
.cf-tasto:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #fffdf6, #f1eee4); }
.cf-tasto:focus-visible { outline: .7cqi solid var(--sun); outline-offset: .3cqi; }
/* il tasto: cappuccio convesso col colore del caffè, cornice cromata */
.cf-led {
  position: relative;
  width: 6.4cqi; height: 6.4cqi; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 55%, var(--caffe) 0 52%, color-mix(in srgb, var(--caffe) 62%, #000) 100%);
  box-shadow:
    0 0 0 .5cqi #e9edeb,
    0 0 0 .8cqi #8e9995,
    0 .7cqi .9cqi .4cqi rgba(0, 0, 0, .32),
    inset 0 -.5cqi .7cqi rgba(0, 0, 0, .35);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.cf-tasto:active .cf-led, .cf-tasto.premuto .cf-led {
  transform: translateY(.35cqi) scale(.97);
  box-shadow:
    0 0 0 .5cqi #dfe4e2,
    0 0 0 .8cqi #8e9995,
    0 .2cqi .3cqi rgba(0, 0, 0, .3),
    inset 0 .5cqi .8cqi rgba(0, 0, 0, .45);
}
/* la spia sopra il tasto */
.cf-led::after {
  content: ""; position: absolute; right: -1.1cqi; top: -1.1cqi;
  width: 1.6cqi; height: 1.6cqi; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b9c0bd, #6f7976);
  box-shadow: 0 0 0 .25cqi #f4f6f5;
  transition: background .25s, box-shadow .25s;
}
.cf-tasto.scelto .cf-led::after {
  background: radial-gradient(circle at 40% 35%, #fff6d6, var(--sun) 55%, #d8900f);
  box-shadow: 0 0 0 .25cqi #f4f6f5, 0 0 1.6cqi .4cqi rgba(246, 183, 60, .95);
}
.cf-tasto.scelto {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #fff6df, #ffe7b0);
  box-shadow: inset 0 0 0 .25cqi rgba(214, 150, 30, .55), 0 0 2.4cqi rgba(246, 183, 60, .35);
}
.cf-etichetta { display: grid; gap: .25cqi; min-width: 0; }
.cf-bevanda {
  font-size: 2.5cqi; font-weight: 820; letter-spacing: .14em; text-transform: uppercase;
  color: #9a7a5c; line-height: 1.1;
}
.cf-chi { font-size: 3.85cqi; font-weight: 780; letter-spacing: -.01em; line-height: 1.15; }
/* il codice del tasto, inciso */
.cf-numero {
  display: grid; place-items: center;
  min-width: 4.4cqi; height: 4.4cqi; padding: 0 .8cqi;
  border-radius: .9cqi;
  background: linear-gradient(180deg, #e3e0d6, #f3f1ea);
  box-shadow: inset 0 .25cqi .4cqi rgba(0, 0, 0, .18);
  font-size: 2.4cqi; font-weight: 850; color: #8e9894; font-variant-numeric: tabular-nums;
}

/* il risveglio: una volta sola, all'arrivo, le spie si accendono in
   fila come quando la macchinetta si accende. Dice «si premono» */
.cf-macchina.sveglia .cf-led::after { animation: cf-sveglia .5s var(--ease) both; }
.cf-macchina.sveglia .cf-tasto[data-i="1"] .cf-led::after { animation-delay: .12s; }
.cf-macchina.sveglia .cf-tasto[data-i="2"] .cf-led::after { animation-delay: .24s; }
.cf-macchina.sveglia .cf-tasto[data-i="3"] .cf-led::after { animation-delay: .36s; }
.cf-macchina.sveglia .cf-tasto[data-i="4"] .cf-led::after { animation-delay: .48s; }
@keyframes cf-sveglia {
  0%, 100% { background: radial-gradient(circle at 40% 35%, #b9c0bd, #6f7976); box-shadow: 0 0 0 .25cqi #f4f6f5; }
  40% { background: radial-gradient(circle at 40% 35%, #fff6d6, var(--sun) 55%, #d8900f); box-shadow: 0 0 0 .25cqi #f4f6f5, 0 0 1.6cqi .4cqi rgba(246, 183, 60, .95); }
}

/* ---------- il vano ----------
   Cornice d'acciaio, dentro il buio con la striscia di luce in alto,
   la griglia forata in basso e lo sportellino di plexiglas davanti:
   il bicchiere si vede attraverso */
.cf-vano {
  position: relative; overflow: hidden;
  align-self: center;
  width: 62%; height: 21cqi;
  border-radius: 1.8cqi;
  background:
    radial-gradient(55% 80% at 50% 0%, rgba(255, 226, 170, .16), rgba(255, 226, 170, 0) 70%),
    linear-gradient(180deg, #0f1918 0%, #1c2927 65%, #26332f 100%);
  box-shadow:
    inset 0 1.4cqi 2.4cqi rgba(0, 0, 0, .7),
    inset 0 -.4cqi .8cqi rgba(255, 255, 255, .06),
    0 0 0 .8cqi #d7dddb,
    0 0 0 1cqi #8e9995,
    0 0 0 1.25cqi rgba(255, 255, 255, .6);
}
.cf-luce-vano {
  position: absolute; left: 10%; right: 10%; top: 0; height: 90%;
  background: radial-gradient(50% 85% at 50% 0%, rgba(255, 222, 160, .6), rgba(255, 222, 160, 0) 72%);
  opacity: .35; transition: opacity .4s;
}
.cf-striscia {
  position: absolute; left: 14%; right: 14%; top: .7cqi; height: .8cqi; border-radius: 1cqi;
  background: #fff3d6; opacity: .45;
  box-shadow: 0 0 1.4cqi .3cqi rgba(255, 222, 160, .8);
  transition: opacity .4s;
}
.cf-macchina.prepara .cf-luce-vano, .cf-macchina.pronto .cf-luce-vano,
.cf-foglio .cf-vano .cf-luce-vano { opacity: 1; }
.cf-macchina.prepara .cf-striscia, .cf-macchina.pronto .cf-striscia,
.cf-foglio .cf-vano .cf-striscia { opacity: 1; }
.cf-ugello {
  position: absolute; left: 50%; top: 1.8cqi; translate: -50% 0;
  width: 7cqi; height: 2.6cqi;
  border-radius: .6cqi .6cqi 1.4cqi 1.4cqi;
  background: linear-gradient(90deg, #7f8b87, #e6ebe9 42%, #aab4b0 70%, #7a8682);
  box-shadow: 0 .4cqi .6cqi rgba(0, 0, 0, .4);
}
.cf-ugello::after {
  content: ""; position: absolute; left: 50%; bottom: -1cqi; translate: -50% 0;
  width: 2cqi; height: 1.2cqi; border-radius: 0 0 .8cqi .8cqi;
  background: linear-gradient(90deg, #6d7874, #c9d0cd, #6d7874);
}
.cf-getto {
  position: absolute; left: 50%; top: 5.2cqi; translate: -50% 0;
  width: .9cqi; height: 0; border-radius: 1cqi;
  background: var(--caffe, #4a2c1d);
  box-shadow: inset .2cqi 0 .2cqi rgba(255, 255, 255, .25);
}
.cf-grata {
  position: absolute; left: 8%; right: 8%; bottom: 1.2cqi; height: 2.8cqi;
  border-radius: .6cqi;
  background:
    radial-gradient(circle, #121a19 0 .4cqi, rgba(0, 0, 0, 0) .5cqi) 0 0 / 1.3cqi 1.3cqi,
    linear-gradient(180deg, #c9d0cd, #8e9995);
  box-shadow: 0 -.3cqi .6cqi rgba(0, 0, 0, .35), inset 0 .15cqi 0 rgba(255, 255, 255, .7);
}
/* il bicchiere vero (disegno 3D), visto appena dall'alto: nella bocca
   il caffè sale, cioè la sua superficie viene su dal fondo */
.cf-bicchiere {
  --livello: 0%;
  position: absolute; left: 50%; bottom: 2.7cqi; translate: -50% 0;
  width: 8.2cqi; aspect-ratio: 448 / 542;
  opacity: 0;
}
.cf-bicchiere img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .6cqi .5cqi rgba(0, 0, 0, .45)); }
.cf-bocca {
  position: absolute; left: 5.6%; width: 89.3%; top: 1.5%; height: 22.3%;
  border-radius: 50%; overflow: hidden;
}
.cf-liquido, .cf-schiuma {
  position: absolute; left: 5%; right: 5%; height: 100%;
  top: calc(100% - var(--livello) * 1.34);
  border-radius: 50%;
}
.cf-liquido {
  background:
    radial-gradient(60% 55% at 42% 40%, color-mix(in srgb, var(--caffe, #4a2c1d) 45%, #e0a45c) 0, color-mix(in srgb, var(--caffe, #4a2c1d) 75%, #b87332) 45%, var(--caffe, #4a2c1d) 85%);
}
.cf-schiuma {
  /* la schiuma di latte, col bordo che lascia vedere il caffè */
  background: radial-gradient(58% 58% at 46% 42%, #fbf1e1 0, #efd9b8 48%, #c99a68 78%, var(--caffe, #6b4029) 100%);
  opacity: 0;
}
.cf-vapore {
  position: absolute; left: 50%; bottom: 13cqi; translate: -50% 0;
  width: 8cqi; height: auto;
  fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2.6; stroke-linecap: round;
  opacity: 0;
}
/* lo sportellino: plexiglas fumé incernierato in alto, con un
   riflesso di traverso e il bordo che prende luce */
.cf-sportello {
  position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 3;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 0 18%, rgba(255, 255, 255, .22) 18.5% 26%, rgba(255, 255, 255, 0) 26.5% 60%, rgba(255, 255, 255, .1) 60.5% 64%, rgba(255, 255, 255, 0) 64.5%),
    linear-gradient(180deg, rgba(200, 225, 218, .2), rgba(200, 225, 218, .08));
  border-bottom: .35cqi solid rgba(255, 255, 255, .45);
  box-shadow: 0 .5cqi 1cqi rgba(0, 0, 0, .25);
}
.cf-sportello::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.2cqi;
  background: linear-gradient(180deg, #d7dddb, #8e9995);
}

/* ---------- lo zoccolo: lamiera forata, la fessura dello scontrino
   e la targhetta col marchio ---------- */
.cf-zoccolo {
  position: relative;
  margin: 2.4cqi 2.8cqi 2.4cqi;
  height: 10cqi;
  display: flex; align-items: center; justify-content: center; gap: 2cqi;
  border-radius: 1.2cqi;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .25)),
    radial-gradient(circle, rgba(0, 0, 0, .55) 0 .38cqi, rgba(0, 0, 0, 0) .45cqi) 0 0 / 1.4cqi 1.4cqi,
    linear-gradient(90deg, #26302e, #3a4744 50%, #26302e);
  box-shadow: inset 0 .4cqi .8cqi rgba(0, 0, 0, .5), 0 0 0 .3cqi rgba(255, 255, 255, .18);
}
.cf-fessura {
  position: absolute; left: 50%; top: 2cqi; translate: -50% 0;
  width: 30cqi; height: 3.4cqi; border-radius: 1.2cqi;
  background:
    linear-gradient(#070b0a, #070b0a) center / calc(100% - 2.4cqi) 1.1cqi no-repeat,
    linear-gradient(180deg, #f1f4f3, #b3bdb9 55%, #8e9995);
  box-shadow: 0 .4cqi .7cqi rgba(0, 0, 0, .45);
}
.cf-fessura-luce {
  position: absolute; right: -3cqi; top: 50%; translate: 0 -50%;
  width: 1.4cqi; height: 1.4cqi; border-radius: 50%;
  background: #5b6a66; box-shadow: 0 0 0 .25cqi rgba(255, 255, 255, .25);
}
.cf-macchina.stampa .cf-fessura-luce { background: var(--sun); box-shadow: 0 0 0 .25cqi rgba(255, 255, 255, .25), 0 0 1.6cqi var(--sun); }
.cf-z-offre { display: none; }
.cf-zoccolo small {
  position: absolute; left: 50%; bottom: 1cqi; translate: -50% 0;
  font-size: 1.8cqi; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); text-shadow: 0 -.1cqi 0 rgba(0, 0, 0, .6);
}
.cf-targa {
  position: absolute; left: 3.4cqi; top: 50%; translate: 0 -50%;
  width: 17cqi; height: auto; opacity: .88;
  filter: drop-shadow(0 .15cqi 0 rgba(0, 0, 0, .6));
}

/* ---------- il mobiletto e Seven ----------
   Seven è alto il 94% della larghezza della macchinetta, coi piedi
   sullo stesso pavimento. Il mobiletto arriva esattamente al suo
   gomito: il piano sta al 40,5% della sua altezza dall'alto (misurato
   sul ritaglio), e il gomito ci poggia vicino al bordo destro */
.cf-mobiletto {
  position: absolute; left: 100%; bottom: -1.6cqi;
  width: 17cqi; height: calc(94cqi * .595);
  border-radius: .8cqi .8cqi .6cqi .6cqi;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .12)),
    linear-gradient(180deg, #e9ddc2 0 2.2cqi, #d7c7a3 2.2cqi 2.8cqi, #eadfc6 2.8cqi);
  box-shadow: 0 30px 40px -34px rgba(34, 58, 60, .6);
}
/* le due ante e le maniglie */
.cf-mobiletto::before {
  content: ""; position: absolute; left: 2cqi; right: 2cqi; top: 5cqi; bottom: 3cqi;
  border: .35cqi solid rgba(120, 94, 52, .28); border-radius: .8cqi;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) calc(50% - .2cqi), rgba(120, 94, 52, .28) calc(50% - .2cqi) calc(50% + .2cqi), rgba(0, 0, 0, 0) calc(50% + .2cqi));
}
.cf-mobiletto::after {
  content: ""; position: absolute; top: 10cqi; left: calc(50% - 3cqi); width: 6cqi; height: 1cqi;
  background:
    linear-gradient(#9d8558, #9d8558) left / 1cqi 100% no-repeat,
    linear-gradient(#9d8558, #9d8558) right / 1cqi 100% no-repeat;
}
/* sul piano: una pila di bicchierini e un barattolo di palette */
.cf-pila {
  position: absolute; left: 1.8cqi; bottom: 100%;
  width: 5.4cqi; height: 11cqi;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .08) 0 .35cqi, rgba(0, 0, 0, 0) .35cqi 1.5cqi),
    linear-gradient(90deg, #e3dfd3, #fff 40%, #e8e4d8);
}
.cf-palette {
  position: absolute; left: 8.2cqi; bottom: 100%;
  width: 3.8cqi; height: 4.6cqi;
  border-radius: .4cqi .4cqi .8cqi .8cqi;
  background: linear-gradient(90deg, #cfe4d8, #eef7f1 45%, #cfe4d8);
  box-shadow: inset 0 0 0 .3cqi rgba(47, 122, 87, .35);
}
.cf-palette::before {
  content: ""; position: absolute; left: .7cqi; right: .7cqi; bottom: 3cqi; height: 4.6cqi;
  background:
    linear-gradient(#b89668, #b89668) 0 0 / .45cqi 100% no-repeat,
    linear-gradient(#c9a878, #c9a878) 50% 30% / .45cqi 90% no-repeat,
    linear-gradient(#b89668, #b89668) 100% 60% / .45cqi 80% no-repeat;
  transform: rotate(4deg);
}
.cf-seven {
  position: absolute; bottom: -1.6cqi;
  left: calc(100% + 17cqi - 94cqi * .4458 * .12);
  width: calc(94cqi * .4458); height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 14px rgba(34, 58, 60, .16));
}

/* ---------- lo scontrino ---------- */
.cf-scontrino { position: relative; z-index: 6; width: min(100%, 420px); }
.cf-scontrino[hidden] { display: none; }
.cf-sc-carta {
  --dente: 7px;
  position: relative;
  padding: 18px 20px 16px;
  background: #fff;
  color: var(--ink);
  /* i dentini dello strappo, sopra e sotto */
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--dente) * 2) var(--dente) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--dente) * 2) var(--dente) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--dente) * 2) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--dente) * 2) var(--dente) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--dente) * 2) var(--dente) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--dente) * 2) no-repeat;
}
.cf-scontrino { filter: drop-shadow(0 18px 22px rgba(34, 58, 60, .2)) drop-shadow(0 1px 1px rgba(34, 58, 60, .12)); }
.cf-sc-testa { display: grid; justify-items: center; gap: 1px; padding-bottom: 10px; border-bottom: 1.5px dashed #cdd5d0; text-align: center; }
.cf-sc-testa b { font-size: 13px; font-weight: 850; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; }
.cf-sc-testa small { font-size: 11.5px; font-weight: 600; color: var(--soft); }
.cf-sc-voce {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0 0;
  font-size: 13.5px; color: var(--soft); font-variant-numeric: tabular-nums;
}
.cf-sc-voce b { color: var(--ink); font-weight: 800; }
.cf-sc-prezzo { flex: none; font-weight: 800; color: var(--ink); }
.cf-sc-risposta { margin-top: 10px; font-size: 16.5px; font-weight: 560; line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.cf-sc-buono { margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed #cdd5d0; }
.cf-sc-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 100px;
  background: var(--sun); color: var(--ink);
  font-size: 15px; font-weight: 800; text-decoration: none;
  box-shadow: 0 12px 24px -16px rgba(179, 124, 20, .9);
  transition: transform .3s var(--ease);
}
.cf-sc-cta:hover { transform: translateY(-2px); }
.cf-sc-saluto { margin-top: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #9aa8a1; text-align: center; }

/* sul banco del computer lo scontrino sta un filo storto, come
   appoggiato; sotto la macchinetta pende dritto dalla fessura */
.cf-banco .cf-scontrino { rotate: -1.6deg; transform-origin: 30% 0; }
.cf-uscita { display: none; }

.cf-annuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- computer ---------- */
@media (min-width: 941px) {
  .spina { padding-top: clamp(14px, 3vh, 44px); padding-bottom: clamp(40px, 7vh, 80px); }
  .cf-testo { padding-top: clamp(8px, 4vh, 56px); }
  .cf-titolo { font-size: clamp(40px, min(5.2vw, 8.4vh), 66px); margin-top: clamp(8px, 1.6vh, 16px); }
  .cf-sotto { margin-top: clamp(10px, 2vh, 20px); font-size: clamp(16px, 2.5vh, 17.5px); }
  /* la seconda metà del titolo sta su una riga: lascia posto al
     tasto della candidatura e allo scontrino che arriva sotto */
  .cf-titolo { max-width: none; }
  .cf-titolo em { max-width: none; }
  .cf-subito { margin-top: clamp(14px, 2.8vh, 26px); }
  .cf-banco { margin-top: clamp(14px, 2.6vh, 28px); }
}
/* sui portatili bassi lo scontrino si stringe: la testata sta su una
   riga e il saluto finale salta, così il tasto resta nello schermo */
@media (min-width: 941px) and (max-height: 800px) {
  .cf-sc-carta { padding: 14px 18px 12px; }
  .cf-sc-testa { grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; padding-bottom: 8px; }
  .cf-sc-voce { padding-top: 7px; }
  .cf-scontrino { width: min(100%, 460px); }
  .cf-sc-risposta { font-size: 15.5px; line-height: 1.4; margin-top: 7px; }
  .cf-sc-buono { margin-top: 10px; padding-top: 10px; }
  .cf-sc-cta { padding: 10px 18px; }
  .cf-sc-saluto { display: none; }
}
@media (min-width: 941px) and (max-height: 700px) {
  .cf-testo { padding-top: 6px; }
  .cf-subito { margin-top: 12px; }
  .cf-subito .btn-dark { padding: 12px 26px; }
  .cf-banco { margin-top: 14px; }
  .cf-sc-voce { padding-top: 5px; }
}

/* ---------- tablet: una colonna, la scena al centro ---------- */
@media (max-width: 940px) {
  .cf-griglia { grid-template-columns: 1fr; }
  .cf-titolo { max-width: 16ch; }
  .cf-banco { display: none; }
  .cf-scena {
    --mw: min(400px, calc((100vw - 64px) / 1.54));
    justify-self: center;
    margin-top: 34px;
  }
  /* sotto il computer lo scontrino pende dalla fessura: la fessura
     è larga quanto la carta, e la carta parte dal suo centro */
  .cf-uscita { display: block; position: relative; z-index: 6; width: var(--mw); }
  .cf-uscita .cf-scontrino { width: 80%; margin: calc(var(--mw) * -.066) auto 0; }
  .cf-zoccolo { background: rgba(0, 0, 0, .14); }
  .cf-fessura { width: 82cqi; }
  .cf-uscita ~ * .cf-targa, .cf-scena:has(.cf-uscita .cf-scontrino) .cf-targa { display: none; }
  .cf-fessura-luce { right: auto; left: -3cqi; }
  .cf-sc-cta { display: block; width: 100%; text-align: center; text-wrap: balance; }
}

/* ---------- il foglio che sale dal basso ----------
   Al telefono (e col telefono di traverso) il caffè e lo scontrino
   non si cercano scorrendo: salgono in un foglio, come la bocca della
   macchinetta vista da vicino. Sopra c'è il vano col bicchiere, sotto
   la fessura da cui esce lo scontrino. La pagina resta ferma, e per
   cambiare caffè il foglio riscende. spina.js ci sposta dentro il vano
   e lo scontrino, e segna la griglia con .a-foglio */
.cf-velo {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(20, 38, 40, .42);
  opacity: 0; transition: opacity .32s var(--ease);
}
.cf-velo.su { opacity: 1; }
.cf-velo[hidden], .cf-foglio[hidden] { display: none; }
.cf-foglio {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  max-height: calc(100dvh - 12px);
  display: flex; flex-direction: column;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, .12)),
    var(--green-deep);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -24px 60px -24px rgba(10, 30, 25, .6), inset 0 2px 0 rgba(255, 255, 255, .16);
  transform: translateY(105%);
  transition: transform .4s var(--ease);
  outline: none;
}
.cf-foglio.su { transform: none; }
.cf-foglio.tira { transition: none; }
.cf-foglio-testa { flex: none; padding: 10px 20px 12px; cursor: grab; touch-action: none; }
.cf-foglio-maniglia { display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 5px; background: rgba(255, 255, 255, .45); }
.cf-foglio-stato { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.cf-fs1 { font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); }
.cf-fs2 { font-size: 15px; font-weight: 750; color: #f4f7f2; }
.cf-foglio-dentro {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
/* il vano da vicino: le misure dei pezzi vanno sulla sua larghezza */
.cf-foglio .cf-vano {
  container-type: inline-size;
  flex: none; width: 100%; height: clamp(132px, 19dvh, 168px);
  margin-top: 6px;
  border-radius: 16px;
  box-shadow:
    inset 0 14px 24px rgba(0, 0, 0, .65),
    0 0 0 5px #d7dddb,
    0 0 0 6.5px #8e9995,
    0 0 0 8px rgba(255, 255, 255, .3);
}
.cf-foglio .cf-luce-vano { left: 22%; right: 22%; }
.cf-foglio .cf-striscia { left: 28%; right: 28%; top: 2.2cqi; height: 1.2cqi; }
.cf-foglio .cf-ugello { top: 3.4cqi; width: 12cqi; height: 4.4cqi; }
.cf-foglio .cf-ugello::after { width: 3.6cqi; height: 2cqi; bottom: -1.8cqi; }
.cf-foglio .cf-getto { width: 1.6cqi; top: 9cqi; }
.cf-foglio .cf-bicchiere { width: 16cqi; bottom: 3.4cqi; }
.cf-foglio .cf-vapore { width: 11cqi; bottom: 24cqi; stroke-width: 3; }
.cf-foglio .cf-grata { left: 26%; right: 26%; height: 3.4cqi; bottom: 2.4cqi; background: radial-gradient(circle, #121a19 0 .55cqi, rgba(0, 0, 0, 0) .65cqi) 0 0 / 1.8cqi 1.8cqi, linear-gradient(180deg, #c9d0cd, #8e9995); }
.cf-foglio .cf-sportello::before { height: 1.6cqi; }

.cf-foglio-uscita { position: relative; flex: none; padding-top: 16px; }
.cf-foglio-fessura {
  position: absolute; z-index: 2; left: 6%; right: 6%; top: 10px;
  height: 10px; border-radius: 6px;
  background: #13201f; box-shadow: 0 2px 0 rgba(255, 255, 255, .14);
}
.cf-foglio .cf-scontrino { width: 86%; margin: 0 auto; }
.cf-foglio .cf-sc-cta { display: block; width: 100%; text-align: center; text-wrap: balance; }
.cf-foglio-altro[hidden] { display: none; }
.cf-foglio-altro {
  flex: none; align-self: center;
  margin-top: 14px; min-height: 48px; padding: 12px 26px;
  border: 2px solid rgba(255, 255, 255, .38); border-radius: 100px;
  background: transparent; color: #fff;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: border-color .25s, background .25s;
}
.cf-foglio-altro:hover, .cf-foglio-altro:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .08); }
html.cf-fermo, html.cf-fermo body { overflow: hidden; }

/* quando vano e scontrino stanno nel foglio, la macchinetta ha solo
   la gettoniera in basso */
.a-foglio .cf-fessura, .a-foglio .cf-zoccolo small { display: none; }

/* il telefono di traverso: il foglio si divide in due, il vano a
   sinistra e lo scontrino a destra, così sta tutto nell'altezza */
@media (max-width: 940px) and (max-height: 500px) {
  .cf-foglio { left: 50%; right: auto; width: min(100%, 780px); translate: -50% 0; }
  .cf-foglio-testa { padding: 8px 20px 8px; }
  .cf-foglio-maniglia { margin-bottom: 6px; }
  /* a sinistra il vano col tasto per un altro caffè sotto, a destra
     lo scontrino intero */
  .cf-foglio-dentro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: 1fr auto; column-gap: 20px; }
  .cf-foglio-vano { grid-column: 1; grid-row: 1; display: flex; min-height: 170px; }
  .cf-foglio .cf-vano { height: auto; flex: 1; align-self: stretch; }
  .cf-foglio-altro { grid-column: 1; grid-row: 2; align-self: end; width: 100%; margin-top: 10px; min-height: 44px; }
  .cf-foglio-uscita { grid-column: 2; grid-row: 1 / 3; padding-top: 12px; }
  .cf-foglio-fessura { top: 4px; }
  .cf-foglio .cf-scontrino { width: 100%; }
  .cf-foglio .cf-sc-carta { padding: 14px 18px 12px; }
  .cf-foglio .cf-sc-testa { grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; padding-bottom: 8px; }
  .cf-foglio .cf-sc-voce { padding-top: 6px; }
  .cf-foglio .cf-sc-risposta { font-size: 15.5px; line-height: 1.4; margin-top: 6px; }
  .cf-foglio .cf-sc-buono { margin-top: 10px; padding-top: 10px; }
  .cf-foglio .cf-sc-cta { padding: 11px 18px; }
  .cf-foglio .cf-sc-saluto { display: none; }
}

/* ---------- telefono: la macchinetta vista da vicino ----------
   Al telefono non si guarda la macchinetta da lontano: ci si sta
   davanti. In cima il titolo corto e il tasto per candidarsi, con
   Seven seduto sull'insegna accanto, la tazzina in mano; subito
   sotto il display e i cinque tasti, grandi e a portata di pollice.
   Il vano e lo scontrino non stanno sulla macchinetta: salgono nel
   foglio quando si sceglie */
@media (max-width: 720px) {
  .spina { padding-top: 18px; padding-bottom: 34px; }
  .cf-testo { padding-top: 0; }
  .cf-titolo { margin-top: 12px; font-size: clamp(34px, 10vw, 44px); }
  .cf-titolo em { font-size: .62em; margin-top: .14em; }
  /* al telefono la frase la dice il display: «Quale ti somiglia?» */
  .cf-sotto { display: none; }
  .cf-subito {
    margin-top: 16px; gap: 6px 14px;
    /* a destra resta il posto per Seven seduto sull'insegna */
    max-width: calc(100% - (100vw - 32px) * .26);
  }
  .cf-subito .btn-dark { padding: 13px 24px; font-size: 15px; min-height: 48px; display: inline-flex; align-items: center; }
  .cf-subito span { font-size: 13.5px; }

  .cf-scena { --mw: calc(100vw - 32px); width: 100%; margin-top: 16px; padding-top: 0; }
  .cf-macchina::after { left: 4%; width: 92%; }
  .cf-macchina { width: 100%; border-radius: 22px 22px 14px 14px; }
  /* di fronte e da vicino il fianco non si vede: resta la luce sugli
     spigoli a dare spessore */
  .cf-mobiletto, .cf-seven { display: none; }
  .cf-macchina {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, .38),
      inset 0 -2px 0 rgba(0, 0, 0, .28),
      0 40px 50px -38px rgba(8, 36, 26, .7),
      0 14px 22px -16px rgba(8, 36, 26, .4);
  }
  .cf-seven-seduto {
    display: block; position: absolute; right: 5cqi; bottom: 100%;
    width: 19cqi; height: auto; translate: 0 35%;
    pointer-events: none;
    filter: drop-shadow(0 10px 10px rgba(34, 58, 60, .18));
  }
  .cf-insegna { height: 10.5cqi; margin: 3cqi 3cqi 0; justify-items: start; padding-left: 5cqi; }
  .cf-insegna-luce { font-size: 5.4cqi; }

  .cf-fronte { margin: 2.4cqi 3cqi 0; padding: 3cqi; gap: 2.6cqi; }
  .cf-alto { display: block; min-height: 0; }
  .cf-manifesto, .cf-soldi { display: none; }
  .cf-cassa { display: block; }
  /* il display prende tutta la riga: a sinistra il saluto, a destra
     il prezzo, sotto la barra quando prepara */
  .cf-display {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d1 prezzo" "d2 prezzo" "barra barra";
    column-gap: 3cqi; row-gap: .8cqi; padding: 2.6cqi 3.6cqi;
  }
  .cf-d1 { grid-area: d1; font-size: 3.2cqi; }
  .cf-d2 { grid-area: d2; font-size: 4.9cqi; }
  .cf-d-prezzo {
    grid-area: prezzo; display: block; align-self: center;
    font-size: 5cqi; font-weight: 850; color: var(--sun); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 1.2cqi rgba(246, 183, 60, .5);
  }
  .cf-avanza { grid-area: barra; height: 1.4cqi; }
  .cf-macchina:not(.prepara) .cf-avanza { display: none; }

  .cf-tasti { gap: 1.8cqi; }
  .cf-tasto {
    grid-template-columns: 8cqi minmax(0, 1fr); gap: 3.2cqi;
    min-height: max(48px, 13.6cqi); padding: 1.4cqi 3.4cqi 1.4cqi 2.8cqi;
    border-radius: 3.2cqi; border-width: .5cqi; box-shadow: 0 .9cqi 0 #d9d2bd;
  }
  .cf-tasto:active, .cf-tasto.premuto { transform: translateY(.7cqi); box-shadow: 0 .2cqi 0 #d9d2bd; }
  .cf-led { width: 8cqi; height: 8cqi; }
  .cf-led::after { right: -1.3cqi; top: -1.3cqi; width: 2.2cqi; height: 2.2cqi; }
  .cf-bevanda { font-size: 3cqi; }
  .cf-chi { font-size: 4.6cqi; }
  .cf-numero { display: none; }

  /* se lo script non c'è, il vano resta sulla macchinetta */
  .cf-fronte > .cf-vano { width: 60%; height: 30cqi; }

  .cf-zoccolo { height: 9cqi; margin: 2.4cqi 3cqi 3cqi; }
  .cf-z-offre {
    display: inline-flex; align-items: center; gap: 2cqi;
    font-size: 3.1cqi; font-weight: 800; letter-spacing: .02em; color: rgba(255, 255, 255, .78);
  }
  .cf-z-offre i { width: 1.6cqi; height: 5cqi; border-radius: 1cqi; background: #13201f; box-shadow: 0 0 0 .6cqi rgba(255, 255, 255, .22); }

  .cf-sc-carta { padding: 18px 16px 14px; }
  .cf-sc-risposta { font-size: 16px; }
  .cf-sc-cta { padding: 13px 16px; font-size: 15px; }
  /* la voce resta su una riga: il «da dove parti» lo dice già il
     tasto acceso, e la risposta subito sotto */
  .cf-sc-chi-riga { display: none; }
}
/* i telefoni bassi: il foglio si stringe un poco per stare intero */
@media (max-width: 720px) and (max-height: 700px) {
  .cf-foglio .cf-vano { height: 118px; }
  .cf-foglio .cf-sc-saluto { display: none; }
  .cf-foglio .cf-sc-carta { padding: 14px 14px 12px; }
  .cf-foglio .cf-sc-risposta { font-size: 15.5px; margin-top: 8px; }
  .cf-foglio .cf-sc-buono { margin-top: 10px; padding-top: 10px; }
  .cf-foglio-altro { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-tasto, .cf-led::after, .cf-sc-cta { transition: none; }
  .cf-macchina.sveglia .cf-led::after { animation: none; }
  .cf-foglio, .cf-velo { transition: none; }
}

/* il livello del caffè si anima davvero solo se il browser sa che
   è una percentuale */
@property --livello { syntax: '<percentage>'; inherits: true; initial-value: 0%; }