/* Boosted v4 · bozza E — pagina «Siti e scheda Google» (siti-web.html + pagine/siti-web.js).
   Usa e.css (colori, cromo, titoli che salgono), tasti/tasti.css (il metallo) e parti/menu.css (testata e menu).
   Le schermate d'esempio sono HTML/CSS: dentro ai telefoni 1em = larghezza del telefono / 25, così tutto scala insieme.
   Google, Maps, Fogli e Safari usano i loro colori; il resto è nei colori del brand.
   Pagina corta: apertura coi tre siti, il problema, il metodo (sul telefono sei schede da scorrere di lato),
   la scheda Google, cinque domande e in fondo il contatto (la chiusura della home, stili in e.css).
   Si muove solo con transform, opacity e clip-path. Movimento ridotto e html.fermo = stato finale. Mobile first. */

.sw-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
main { display: block; }
:root { --molla: cubic-bezier(0.34, 1.5, 0.64, 1); --largo: 1296px; }

.etichetta-esempio {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--lilla-chiaro);
  background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35);
}
.sfoca { filter: blur(max(0.32em, 3.5px)); user-select: none; }
/* «Esempio» on each screen of the method (phone); on the computer the side phone has its own */
.me__esempio { display: flex; width: fit-content; margin: 0 auto 10px; }
.me__palco .me__esempio { display: none; }

/* reveal once (siti-web.js adds .rv only when it can also add .visto) */
html.js .rv { transition: opacity 700ms ease-out, transform 900ms var(--curva); transition-delay: calc(var(--c, 0) * 90ms); }
html.js .rv:not(.visto) { opacity: 0; transform: translateY(26px); }

/* ══ Sezioni e testi ═════════════════════════════════════════ */
.sw-sez { position: relative; padding: 88px var(--g) 0; }
.sw-testa { max-width: var(--largo); margin: 0 auto; }
.sw-etichetta { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; font-weight: 650; letter-spacing: 0.01em; color: var(--lilla); }
.sw-etichetta::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--cromo); background-size: 240% 100%; }
.sw-titolo { font-size: clamp(38px, 10.4vw, 88px); line-height: 1.02; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; max-width: 11em; }
.sw-titolo--medio { font-size: clamp(32px, 8.4vw, 60px); }
.sw-paragrafi { margin-top: 24px; display: grid; gap: 14px; max-width: 34em; }
.sw-paragrafi p { color: var(--sec); font-size: 17px; line-height: 1.6; }
.sw-paragrafi .sw-cose, .sw-cose { color: var(--testo); font-size: clamp(18.5px, 4.9vw, 22px); line-height: 1.42; font-weight: 600; letter-spacing: -0.012em; }
.sw-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 18px;
  color: var(--lilla-chiaro); font-weight: 650; font-size: 16.5px; line-height: 1.35;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.sw-link svg { width: 18px; height: 18px; flex: none; transition: transform 300ms var(--curva); }
.sw-link:active { color: var(--testo); }
@media (hover: hover) { .sw-link:hover svg { transform: translateX(4px); } }

/* text + visual, side by side on the computer */
.sw-due { max-width: var(--largo); margin: 0 auto; display: grid; gap: 40px; }
.sw-due__vista { position: relative; }
@media (min-width: 1024px) {
  .sw-sez { padding-top: 140px; }
  .sw-due { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; }
  .sw-due--rov .sw-due__testo { order: 2; }
  .sw-due__testo { max-width: 34em; }
  .sw-due .sw-titolo { font-size: clamp(48px, 4.5vw, 70px); }
  .sw-due__vista.sc { justify-self: center; width: min(100%, 460px); }
}

/* ══ Il telefono delle schermate ═══════════════════════════════ */
.tel {
  --tel-w: 240px;
  position: relative; flex: none; display: block; width: var(--tel-w); height: calc(var(--tel-w) * 2.06);
  padding: calc(var(--tel-w) * 0.03); border-radius: calc(var(--tel-w) * 0.165);
  background: linear-gradient(165deg, #3a3c43 0%, #17191c 18%, #0c0d0f 58%, #1c1e23 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 44px 80px -30px rgba(0, 0, 0, 0.95);
  font-family: 'Inter', -apple-system, system-ui, sans-serif; letter-spacing: -0.01em; text-align: left;
}
.tel__schermo {
  --u: calc(var(--tel-w) / 25);
  position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--tel-w) * 0.137);
  font-size: var(--u); line-height: 1.3; color: #F5F5F7; background: #000;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.tel__schermo::before {
  content: ''; position: absolute; z-index: 40; top: calc(var(--u) * 1.05); left: 50%;
  width: calc(var(--u) * 7.4); height: calc(var(--u) * 2.15); margin-left: calc(var(--u) * -3.7); border-radius: 999px; background: #000;
}
.tel__stato {
  position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: calc(var(--u) * 4.3);
  display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 0.4) calc(var(--u) * 2) 0 calc(var(--u) * 2.5);
  pointer-events: none;
}
.tel__stato b { font-size: 1.22em; font-weight: 600; letter-spacing: -0.01em; }
.tel__stato--scuro { color: #000; background: var(--fondo, #fff); }
.tel__icone { width: calc(var(--u) * 5.4); height: calc(var(--u) * 0.95); fill: currentColor; }
.tel__barra { position: absolute; z-index: 35; bottom: calc(var(--u) * 0.55); left: 50%; width: calc(var(--u) * 8.6); height: calc(var(--u) * 0.36); margin-left: calc(var(--u) * -4.3); border-radius: 999px; background: rgba(255, 255, 255, 0.82); }
.tel__barra--scura { background: rgba(0, 0, 0, 0.82); }
.tel svg { fill: currentColor; }
.ritaglio { position: relative; display: block; overflow: hidden; background: #2a2a2a; }
.ritaglio img { width: 100%; height: 100%; object-fit: cover; object-position: var(--o, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%); }

/* the replay: classes f1…f6 are the steps of each example; .azzera puts it back to the start without animating */
.azzera, .azzera *, .azzera *::before, .azzera *::after { transition: none !important; animation: none !important; }

/* the stage of a timed example: «Esempio», the visual, and the button to play it again */
.sc { position: relative; }
.sc__palco { position: relative; display: grid; place-items: center; padding: 52px 0 12px; isolation: isolate; cursor: pointer; }
.sc__palco::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(130%, 640px); aspect-ratio: 1.1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(139, 111, 184, 0.26), rgba(139, 111, 184, 0.06) 60%, rgba(139, 111, 184, 0)); }
.sc__esempio { position: absolute; z-index: 5; top: 9px; left: 0; pointer-events: none; }
.sc__ancora { position: absolute; z-index: 5; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; color: var(--sec); background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px var(--riga-2); transition: transform 160ms ease-out, color 200ms ease-out; touch-action: manipulation; }
.sc__ancora svg { width: 18px; height: 18px; transition: transform 500ms var(--curva); }
.sc__ancora:active { transform: scale(0.94); color: var(--lilla); }
.sc__ancora:active svg { transform: rotate(-200deg); }
@media (hover: hover) { .sc__ancora:hover { color: var(--testo); } }

/* ══ Safari: la barra in basso, chiara, come sull'iPhone ════════ */
.sf { background: var(--fondo, #fff); }
.sf__scorre { position: absolute; inset: 0; background: var(--fondo, #fff); transform: translate3d(var(--x, 0px), 0, 0); }
.sf__pagina { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--u) * 4.3); bottom: 0; overflow: hidden; background: var(--fondo, #fff); }
.sf__img { display: block; width: 100%; height: auto; transform: translate3d(0, var(--y, 0px), 0); will-change: transform; }
.sf__barra {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; padding: 0.55em 0.75em 0;  height: 7.6em;
  background: rgba(247, 247, 249, 0.94); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  color: #000; font-family: -apple-system, 'Inter', system-ui, sans-serif;
  transition: transform 450ms var(--curva);
}
.sf__pillola { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5em; height: 2.75em; padding: 0 0.85em; border-radius: 0.95em; background: rgba(118, 118, 128, 0.14); transition: transform 450ms var(--curva); transform-origin: 50% 0; }
.sf__aa { font-size: 0.98em; font-weight: 600; letter-spacing: -0.04em; }
.sf__dominio { display: inline-flex; align-items: center; gap: 0.3em; min-width: 0; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf__lucchetto { width: 0.85em; height: 0.85em; flex: none; color: #3c3c43; }
.sf__ricarica { width: 1.15em; height: 1.15em; flex: none; color: #000; }
.sf__icone { display: flex; justify-content: space-between; padding: 0.85em 0.6em 0; color: #0a7aff; transition: opacity 300ms ease-out, transform 450ms var(--curva); }
.sf__icone svg { width: 1.55em; height: 1.55em; }
.sf__spento { opacity: 0.3; }
/* scrolling down, Safari makes the bar small and shows only the address */
.sf--giu .sf__barra { transform: translate3d(0, 3.9em, 0); }
.sf--giu .sf__pillola { transform: scale(0.78); background: transparent; }
.sf--giu .sf__icone { opacity: 0; }

/* ══ Apertura ══════════════════════════════════════════════════ */
.sw-eroe { position: relative; padding: calc(var(--testa) + env(safe-area-inset-top) + 36px) var(--g) 0; isolation: isolate; overflow-x: clip; }
.sw-eroe__luce {
  position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 22%;
  width: 150vw; max-width: 1400px; aspect-ratio: 1.3; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 40% 50%, rgba(139, 111, 184, 0.30), rgba(139, 111, 184, 0) 70%),
    radial-gradient(closest-side at 66% 44%, rgba(201, 169, 233, 0.13), rgba(201, 169, 233, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) .sw-eroe__luce { animation: sw-respira 9s ease-in-out infinite alternate; } }
@keyframes sw-respira { to { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }
.sw-eroe__sopra { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--lilla); margin-bottom: 18px; }
.sw-eroe__sopra::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--cromo); background-size: 240% 100%; }
.sw-eroe__titolo { font-size: clamp(40px, 11.4vw, 104px); line-height: 1; font-weight: 760; letter-spacing: -0.034em; text-wrap: balance; max-width: 10em; }
.sw-eroe__sotto { margin-top: 22px; max-width: 30em; color: var(--sec); font-size: clamp(17.5px, 4.6vw, 20px); line-height: 1.5; }
.sw-eroe__azione { margin-top: 28px; }
.sw-eroe__azione .cta { width: 100%; justify-content: space-between; }
.sw-eroe__azione .nota { margin-top: 12px; max-width: 26em; }
@media (min-width: 768px) { .sw-eroe__azione .cta { width: auto; min-width: 330px; } }

/* the three real sites */
.ve { position: relative; margin-top: 40px; }
.ve__palco { position: relative; }
.ve__segni { display: none; }
.ve__telefoni { display: flex; justify-content: center; gap: 10px; }
.ve__sito { margin: 0; display: grid; justify-items: center; align-content: start; gap: 12px; }
.ve__tel { --tel-w: calc((100vw - 2 * var(--g) - 20px) / 3); }
.ve__sito:nth-child(2) { transform: translateY(26px); }
.ve__dida { display: grid; gap: 2px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--sec); max-width: 12em; }
.ve__dida b { color: var(--testo); font-weight: 650; font-size: 13.5px; }
@media (max-width: 1023px) { .ve:not([data-modo="giro"]) .ve__dida span { display: none; } }

/* phone, pinned: one phone stands still and the three sites pass in it while you scroll */
.ve[data-modo="giro"] { height: calc(100svh + 3 * 40svh); margin: 8px calc(-1 * var(--g)) 0; }
.ve[data-modo="giro"] .ve__palco {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; align-content: center; justify-items: center; gap: 16px;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 6px) var(--g) calc(14px + env(safe-area-inset-bottom));
}
.ve[data-modo="giro"] .ve__segni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: var(--tel-w-giro); }
.ve__segni i { display: block; height: 3px; border-radius: 3px; background: rgba(247, 248, 248, 0.18); overflow: hidden; }
.ve__segni b { display: block; height: 100%; background: linear-gradient(90deg, #F4EAFF, #C9A9E9); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.ve[data-modo="giro"] { --tel-w-giro: clamp(210px, min(78vw, calc((100svh - var(--testa) - 158px) / 2.06)), 340px); }
.ve[data-modo="giro"] .ve__telefoni { display: grid; grid-template-areas: "s"; justify-items: center; }
.ve[data-modo="giro"] .ve__sito { grid-area: s; transform: none; gap: 16px; }
.ve[data-modo="giro"] .ve__tel { --tel-w: var(--tel-w-giro); }
/* only the first phone shows its frame: the other two are just screens that slide in over it.
   Every screen keeps its Dynamic Island in the same place, so the island stays on top whatever site is passing */
.ve[data-modo="giro"] .ve__sito + .ve__sito .tel { background: none; box-shadow: none; }
.ve[data-modo="giro"] .ve__sito + .ve__sito .tel__schermo { background: transparent; }
.ve[data-modo="giro"] .ve__dida { max-width: none; font-size: 15px; opacity: 0; transform: translateY(6px); transition: opacity 300ms ease-out, transform 400ms var(--curva); }
.ve[data-modo="giro"] .ve__dida b { font-size: 18px; letter-spacing: -0.015em; }
.ve[data-modo="giro"] .ve__sito.qui .ve__dida { opacity: 1; transform: none; }

@media (min-width: 1024px) {
  .sw-eroe { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-bottom: 72px; max-width: calc(var(--largo) + 2 * var(--g)); margin: 0 auto; }
  .sw-eroe__titolo { font-size: clamp(58px, 5vw, 80px); max-width: 9.5em; }
  .ve { margin: 0; }
  .ve__telefoni { gap: 22px; justify-content: flex-end; }
  .ve__tel { --tel-w: clamp(170px, min(calc((min(100vw, 1440px) - 2 * var(--g)) * 0.58 / 3 - 22px), calc((100vh - var(--testa) - 150px) / 2.06)), 244px); }
  .ve__sito:nth-child(1) { transform: translateY(-22px); }
  .ve__sito:nth-child(2) { transform: translateY(34px); }
  .ve__sito:nth-child(3) { transform: translateY(-6px); }
  .ve__dida { font-size: 13.5px; max-width: 18em; }
  .ve__dida b { font-size: 15px; }
}

/* ══ Il problema: Google Maps, elenco delle schede ══════════════ */
.mp__tel { --tel-w: min(70vw, 290px); }
.mp { background: #1f1f1f; color: #e3e3e3; }
.mp .tel__stato { background: #1f1f1f; }
.mp__testa { position: absolute; z-index: 6; top: calc(var(--u) * 4.3); left: 0; right: 0; padding: 0.35em 0.85em 0.75em; background: #1f1f1f; box-shadow: 0 1px 0 #3c4043; }
.mp__cerca { display: flex; align-items: center; gap: 0.65em; height: 3.2em; padding: 0 0.55em 0 0.9em; border-radius: 999px; background: #303134; }
.mp__ic { width: 1.45em; height: 1.45em; flex: none; color: #c4c7c5; }
.mp__ic--x { width: 1.25em; height: 1.25em; }
.mp__q { flex: 1; font-size: 1.14em; color: #e3e3e3; }
.mp__io { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: #8B6FB8; color: #fff; font-size: 0.95em; font-weight: 600; }
.mp__chips { display: flex; gap: 0.45em; margin-top: 0.7em; overflow: hidden; white-space: nowrap; }
.mp__chips i { font-style: normal; flex: none; padding: 0.42em 0.8em; border-radius: 0.6em; box-shadow: inset 0 0 0 1px #5f6368; font-size: 0.88em; font-weight: 500; color: #e3e3e3; }
.mp__finestra { position: absolute; z-index: 1; top: calc(var(--u) * 13.1); left: 0; right: 0; bottom: 0; overflow: hidden; }
.mp__lista { transition: transform 1100ms var(--curva); }
.mp__ris { position: relative; padding: 0.95em 1.05em 1.05em; border-bottom: 1px solid #3c4043; }
.mp__ris::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.09); opacity: 0; transition: opacity 250ms ease-out; }
.mp__ris > * { position: relative; }
.mp__nome { font-size: 1.26em; font-weight: 500; letter-spacing: -0.005em; color: #e3e3e3; }
.mp__voto { display: flex; align-items: center; gap: 0.3em; margin-top: 0.2em; font-size: 0.96em; color: #c4c7c5; }
.mp__stelle { display: inline-flex; gap: 0.06em; }
.mp__stelle svg { width: 0.95em; height: 0.95em; fill: #fbbc04; }
.mp__stelle .mp__spenta, svg.mp__spenta { fill: #5f6368; }
.mp__punto { margin: 0 0.1em; }
.mp__tipo, .mp__orari { margin-top: 0.12em; font-size: 0.96em; color: #c4c7c5; }
.mp__aperto { color: #6dd58c; font-weight: 500; }
.mp__chiuso { color: #f28b82; font-weight: 500; }
.mp__orari--no { color: #9aa0a6; }
.mp__foto { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.3em; height: 6.4em; margin-top: 0.7em; }
.mp__foto .ritaglio:first-child { border-radius: 0.7em 0.2em 0.2em 0.7em; }
.mp__foto .ritaglio:last-child { border-radius: 0.2em 0.7em 0.7em 0.2em; }
.mp__foto--una { grid-template-columns: 8.4em; }
.mp__foto--una .ritaglio:first-child { border-radius: 0.7em; }
.mp__scura img { filter: brightness(0.3) saturate(0.35) contrast(0.85); }
.mp__tasti { display: flex; gap: 0.42em; margin-top: 0.8em; }
.mp__tasto { position: relative; display: inline-flex; align-items: center; gap: 0.35em; height: 2.45em; padding: 0 0.85em; border-radius: 999px; box-shadow: inset 0 0 0 1px #5f6368; color: #a8c7fa; font-size: 0.92em; font-weight: 500; white-space: nowrap; }
.mp__tasto svg { width: 1.15em; height: 1.15em; }
.mp__tasto--pieno { background: #a8c7fa; color: #062e6f; box-shadow: none; }
.mp__dito {
  position: absolute; z-index: 9; left: 64%; top: calc(var(--u) * 41); width: 3.1em; height: 3.1em; margin: -1.55em 0 0 -1.55em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.34); box-shadow: 0 0 0 0.16em rgba(255, 255, 255, 0.55), 0 0.4em 1em rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translate3d(0, 0, 0) scale(1); transition: transform 1100ms var(--curva), opacity 300ms ease-out;
}
[data-scena="mappa"].f1 .mp__dito { opacity: 1; }
[data-scena="mappa"].f2 .mp__lista { transform: translate3d(0, -14em, 0); }
[data-scena="mappa"].f2 .mp__dito { transform: translate3d(0, -14em, 0); }
[data-scena="mappa"].f3 .mp__lista, [data-scena="mappa"].f3 .mp__dito { transform: none; transition-duration: 1000ms; }
[data-scena="mappa"].f4 .mp__dito { transform: translate3d(-4.5em, -22.5em, 0); transition-duration: 900ms; }
[data-scena="mappa"].f5 .mp__dito { transform: translate3d(-4.5em, -22.5em, 0) scale(0.78); transition-duration: 160ms; }
[data-scena="mappa"].f5 .mp__ris--primo::before { opacity: 1; }
[data-scena="mappa"].f6 .mp__dito { opacity: 0; transform: translate3d(-4.5em, -22.5em, 0) scale(1.3); transition-duration: 500ms; }
@media (min-width: 1024px) { .mp__tel { --tel-w: 300px; } .sw-problema .sc__palco { padding-top: 60px; } }

/* ══ Il metodo: sei passi su un filo, un telefono che cambia schermata ═ */
.me { position: relative; max-width: var(--largo); margin: 48px auto 0; }
.me__passi { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.me__passi::before, .me__passi::after { content: ''; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; border-radius: 2px; }
.me__passi::before { background: var(--riga-2); }
.me__passi::after { background: linear-gradient(180deg, #F4EAFF, #C9A9E9 40%, #8B6FB8); transform-origin: 50% 0; transform: scaleY(var(--linea, 0)); }
.me__passo { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 18px; scroll-margin-top: calc(var(--testa) + 20px); }
.me__nodo { position: relative; z-index: 1; grid-row: 1; width: 18px; height: 18px; margin-top: 7px; border-radius: 50%; background: var(--nero); box-shadow: inset 0 0 0 2px var(--riga-2); transition: box-shadow 400ms ease-out; }
.me__nodo::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--cromo); background-size: 240% 100%; transform: scale(0); transition: transform 450ms var(--molla); }
.me__passo.acceso .me__nodo { box-shadow: inset 0 0 0 2px rgba(201, 169, 233, 0.7), 0 0 14px rgba(201, 169, 233, 0.45); }
.me__passo.acceso .me__nodo::after { transform: scale(1); }
.me__testo { grid-column: 2; }
.me__nome { font-size: clamp(26px, 7vw, 40px); line-height: 1.08; font-weight: 740; letter-spacing: -0.024em; color: rgba(247, 248, 248, 0.6); transition: color 400ms ease-out; text-wrap: balance; }
.me__passo.acceso .me__nome { color: var(--testo); }
.me__testo p { margin-top: 10px; max-width: 34em; color: var(--sec); font-size: 17px; line-height: 1.6; }
.me__vista { grid-column: 2; position: relative; margin-top: 24px; cursor: pointer; }
.me__tel { --tel-w: min(calc(100vw - 2 * var(--g) - 36px), 290px); }
/* phone column: each step shows the top of its screen, fading out at the bottom */
.me__passi .me__vista { height: calc(var(--tel-w-me, 290px) * 1.62); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%); mask-image: linear-gradient(180deg, #000 80%, transparent 99%); }
.me__passi { --tel-w-me: min(calc(100vw - 2 * var(--g) - 36px), 290px); }
.me__lato, .me__punti { display: none; }
/* phone and tablet: the six steps are cards side by side, you swipe them (the page stays short) */
@media (max-width: 1023px) {
  .me { margin-top: 28px; }
  .me__passi {
    --carta: min(80vw, 330px); --tel-w-me: min(calc(var(--carta) - 64px), 236px);
    display: flex; gap: 12px; margin: 0 calc(-1 * var(--g)); padding: 2px var(--g) 6px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g);
    scrollbar-width: none; counter-reset: passo;
  }
  .me__passi::-webkit-scrollbar { display: none; }
  .me__passi::before, .me__passi::after { display: none; }
  .me__passo {
    flex: 0 0 var(--carta); display: flex; flex-direction: column; padding: 20px 20px 0; overflow: hidden;
    border-radius: 24px; background: rgba(247, 248, 248, 0.035); box-shadow: inset 0 0 0 1px var(--riga-2);
    scroll-snap-align: start; counter-increment: passo;
  }
  .me__nodo { display: none; }
  .me__nome { font-size: 25px; color: var(--testo); }
  .me__nome::before { content: counter(passo) " di 6"; display: block; margin-bottom: 8px; font-size: 13px; font-weight: 650; letter-spacing: 0.01em; color: var(--lilla); }
  .me__testo p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
  .me__passi .me__vista { align-self: center; margin-top: auto; padding-top: 20px; height: calc(var(--tel-w-me) * 1.42 + 20px); }
  .me__passi .me__tel { --tel-w: var(--tel-w-me); }
  .me__punti { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .me__punti i { width: 16px; height: 3px; border-radius: 3px; background: rgba(247, 248, 248, 0.18); transition: width 300ms var(--curva), background-color 300ms ease-out; }
  .me__punti i.qui { width: 30px; background: var(--lilla); }
}
@media (min-width: 1024px) {
  .me { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; margin-top: 72px; }
  .me__passi { gap: 0; padding-bottom: 8vh; }
  .me__passo { min-height: 44vh; align-content: center; padding: 28px 0; }
  .me__passi::before, .me__passi::after { top: 22vh; bottom: 22vh; }
  .me__nome { font-size: clamp(30px, 2.8vw, 42px); }
  .me[data-modo="lato"] .me__lato { display: grid; justify-items: center; gap: 14px; position: sticky; align-self: start; top: calc(var(--testa) + (100vh - var(--testa) - var(--tel-w-lato) * 2.06 - 40px) / 2); }
  .me { --tel-w-lato: clamp(230px, calc((100vh - var(--testa) - 130px) / 2.06), 300px); }
  .me__palco { display: grid; grid-template-areas: "t"; }
  .me__palco .me__vista { grid-area: t; margin: 0; cursor: default; clip-path: inset(0 0 0 0 round calc(var(--tel-w-lato) * 0.165)); transition: clip-path 750ms var(--curva); }
  .me__palco .me__vista.dopo { clip-path: inset(100% 0 0 0 round calc(var(--tel-w-lato) * 0.165)); }
  .me__palco .me__tel { --tel-w: var(--tel-w-lato); }
  .me__lato .etichetta-esempio { justify-self: center; }
}

/* ── Fogli: il foglio delle parole chiave ── */
.gs { background: #fff; color: #202124; }
.gs__barra { position: absolute; z-index: 5; top: calc(var(--u) * 4.3); left: 0; right: 0; display: flex; align-items: center; gap: 0.8em; height: 3.4em; padding: 0 1em; background: #fff; }
.gs__ok { width: 1.6em; height: 1.6em; color: #188038; }
.gs__titolo { flex: 1; display: flex; align-items: center; gap: 0.45em; font-size: 1.08em; font-weight: 500; }
.gs__icona { width: 1.35em; height: 1.35em; }
.gs__ic { width: 1.4em; height: 1.4em; color: #5f6368; }
.gs__fx { position: absolute; z-index: 5; top: calc(var(--u) * 7.7); left: 0; right: 0; display: flex; align-items: center; gap: 0.8em; height: 2.6em; padding: 0 1em; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #c7c7c7; background: #fff; font-size: 0.95em; }
.gs__fx i { color: #80868b; font-style: italic; font-family: Georgia, serif; }
.gs__fx-testo { position: relative; display: grid; }
.gs__fx-testo > span { grid-area: 1 / 1; transition: opacity 200ms ease-out; white-space: nowrap; }
.gs__fx-2 { opacity: 0; }
.gs__griglia { position: absolute; top: calc(var(--u) * 10.35); left: 0; right: 0; }
.gs__riga { display: grid; grid-template-columns: calc(var(--u) * 1.9) calc(var(--u) * 12.6) calc(var(--u) * 5.1) calc(var(--u) * 8); height: calc(var(--u) * 2.35); box-shadow: inset 0 -1px 0 #e2e2e2; font-size: calc(var(--u) * 0.8); }
.gs__riga > span { display: flex; align-items: center; padding: 0 calc(var(--u) * 0.4); white-space: nowrap; overflow: hidden; box-shadow: inset -1px 0 0 #e2e2e2; }
.gs__riga > span:first-child { justify-content: center; padding: 0; background: #f8f9fa; color: #5f6368; font-size: calc(var(--u) * 0.68); }
.gs__riga > span:nth-child(3) { justify-content: flex-end; }
.gs__riga--lettere { height: calc(var(--u) * 1.8); background: #f8f9fa; }
.gs__riga--lettere > span { justify-content: center; color: #5f6368; font-size: calc(var(--u) * 0.72); }
.gs__riga--intesta { height: calc(var(--u) * 3.1); font-weight: 600; }
.gs__riga--intesta > span:not(:first-child) { background: #e6f4ea; white-space: normal; line-height: 1.15; }
.gs__riga--intesta > span:nth-child(3) { justify-content: flex-start; }
.gs__riga[style] > span:not(:first-child) { transition: opacity 260ms ease-out; transition-delay: calc(var(--r, 0) * 170ms); }
[data-scena="fogli"]:not(.f1) .gs__riga[style] > span:not(:first-child) { opacity: 0; }
.gs__cella { position: absolute; left: calc(var(--u) * 1.9); top: calc(var(--u) * 4.9); width: calc(var(--u) * 12.6); height: calc(var(--u) * 2.35); box-shadow: inset 0 0 0 calc(var(--u) * 0.16) #1a73e8; transition: transform 500ms var(--curva), width 0ms; }
.gs__cella::after { content: ''; position: absolute; right: calc(var(--u) * -0.3); bottom: calc(var(--u) * -0.3); width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); border-radius: 50%; background: #1a73e8; box-shadow: 0 0 0 calc(var(--u) * 0.12) #fff; }
[data-scena="fogli"].f2 .gs__cella { transform: translate3d(calc(var(--u) * 17.7), 0, 0); }
[data-scena="fogli"].f2 .gs__fx-1 { opacity: 0; }
[data-scena="fogli"].f2 .gs__fx-2 { opacity: 1; }
.gs__fogli { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1.2em; height: 4.4em; padding: 0 1em 1.2em; background: #f8f9fa; box-shadow: 0 -1px 0 #dadce0; font-size: 0.92em; color: #5f6368; }
.gs__piu { width: 1.3em; height: 1.3em; }
.gs__foglio--su { color: #188038; font-weight: 600; box-shadow: inset 0 -0.18em 0 #188038; padding: 0.5em 0; }

/* ── Modifica profilo (Profilo dell'attività su Google) ── */
.pf { background: #fff; color: #1f1f1f; }
.pf__barra { position: absolute; z-index: 5; top: calc(var(--u) * 4.3); left: 0; right: 0; display: flex; align-items: center; gap: 1em; height: 3.4em; padding: 0 1em; background: #fff; }
.pf__barra > span:first-of-type { flex: 1; font-size: 1.18em; font-weight: 500; }
.pf__ic { width: 1.4em; height: 1.4em; color: #444746; }
.pf__salva { padding: 0.45em 1em; border-radius: 999px; font-size: 0.92em; font-weight: 600; color: #8e918f; background: #e3e3e3; transition: background-color 300ms ease-out, color 300ms ease-out; }
[data-scena="profilo"].f4 .pf__salva { background: #0b57d0; color: #fff; }
.pf__schede { position: absolute; z-index: 5; top: calc(var(--u) * 7.7); left: 0; right: 0; display: flex; gap: 1.2em; height: 2.6em; padding: 0 1em; align-items: stretch; box-shadow: inset 0 -1px 0 #e3e3e3; background: #fff; font-size: 0.9em; color: #444746; white-space: nowrap; overflow: hidden; }
.pf__schede span { display: flex; align-items: center; }
.pf__su { color: #0b57d0; font-weight: 600; box-shadow: inset 0 -0.22em 0 #0b57d0; }
.pf__corpo { position: absolute; top: calc(var(--u) * 10.3); left: 0; right: 0; }
.pf__campo { position: relative; padding: 0.65em 3em 0.7em 1.1em; box-shadow: inset 0 -1px 0 #e9e9e9; }
.pf__campo small { display: block; font-size: 0.78em; color: #444746; }
.pf__campo p { margin-top: 0.12em; font-size: 1em; }
.pf__matita { position: absolute; right: 1.1em; top: 50%; width: 1.25em; height: 1.25em; margin-top: -0.62em; color: #444746; }
.pf__campo--cat p { display: flex; align-items: center; gap: 0.4em; font-weight: 500; }
.pf__scritto { white-space: nowrap; clip-path: inset(0 -2px 0 0); }
.pf__ok { width: 1.15em; height: 1.15em; color: #146c2e; transition: opacity 300ms ease-out 200ms, transform 400ms var(--molla) 200ms; }
.pf__chips { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.3em !important; }
.pf__chips i { font-style: normal; padding: 0.22em 0.6em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px #c4c7c5; font-size: 0.84em; transition: opacity 300ms ease-out, transform 400ms var(--molla); }
.pf__chips i + i { transition-delay: 150ms; }
.pf__ora { display: flex; justify-content: space-between; gap: 0.6em; font-size: 0.88em !important; padding: 0.18em 0; transition: opacity 300ms ease-out, transform 500ms var(--curva); }
.pf__ora span:last-child { color: #444746; }
.pf__ora:nth-of-type(2) { transition-delay: 140ms; }
.pf__ora--festa { margin: 0.2em -0.5em 0; padding: 0.3em 0.5em; border-radius: 0.5em; background: #d3e3fd; transition-delay: 280ms; }
.pf__ora--festa span:last-child { color: #0b57d0; font-weight: 600; }
.pf__foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; margin-top: 0.35em !important; }
.pf__foto > span { height: 3.9em; border-radius: 0.5em; transition: opacity 300ms ease-out, transform 450ms var(--molla); }
.pf__foto > span:nth-child(2) { transition-delay: 150ms; }
.pf__foto > span:nth-child(3) { transition-delay: 300ms; }
.pf__aggiungi { display: grid; place-items: center; box-shadow: inset 0 0 0 1px #c4c7c5; color: #0b57d0; }
.pf__aggiungi svg { width: 1.4em; height: 1.4em; }
[data-scena="profilo"]:not(.f1) .pf__scritto { clip-path: inset(0 100% 0 0); }
[data-scena="profilo"].f1 .pf__scritto { transition: clip-path 600ms steps(8, end); }
[data-scena="profilo"]:not(.f1) .pf__ok { opacity: 0; transform: scale(0.4); }
[data-scena="profilo"]:not(.f2) .pf__chips i { opacity: 0; transform: scale(0.8); }
[data-scena="profilo"]:not(.f3) .pf__ora { opacity: 0; transform: translateX(-0.6em); }
[data-scena="profilo"]:not(.f4) .pf__foto > span:not(.pf__aggiungi) { opacity: 0; transform: scale(0.6); }

/* ── Il sito d'esempio «Il tuo locale» (testi e cookie) ── */
.ts__pagina { position: absolute; left: 0; right: 0; top: calc(var(--u) * 4.3); bottom: 0; padding: 0 1.3em; background: var(--fondo); color: #1d2a22; font-family: 'Inter', system-ui, sans-serif; }
.ts__testa { display: flex; align-items: center; justify-content: space-between; height: 3.8em; margin: 0 -1.3em 1.2em; padding: 0 1.3em; box-shadow: inset 0 -1px 0 rgba(29, 42, 34, 0.1); }
.ts__logo { font-family: Georgia, serif; font-style: italic; font-size: 1.35em; color: #23412f; }
.ts__menu { width: 1.5em; height: 1.5em; color: #23412f; }
.ts__sopra { font-size: 0.78em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a5a2b; }
.ts__titolo { margin-top: 0.35em; font-size: 2.05em; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; color: #16241b; text-wrap: balance; }
.ts__sotto { margin-top: 0.55em; font-size: 1em; color: #55524b; }
.ts__chiama, .ts__wa { display: flex; align-items: center; justify-content: center; gap: 0.5em; height: 3.3em; margin-top: 1.1em; border-radius: 999px; font-size: 1.05em; font-weight: 650; }
.ts__chiama { position: relative; background: #23412f; color: #fff; box-shadow: 0 0.5em 1.2em -0.5em rgba(35, 65, 47, 0.7); transition: transform 160ms ease-out; }
.ts__chiama svg, .ts__wa svg { width: 1.2em; height: 1.2em; }
.ts__wa { margin-top: 0.6em; box-shadow: inset 0 0 0 1.5px #23412f; color: #23412f; }
.ts__foto { height: 10em; margin-top: 1.2em; border-radius: 0.9em; }
.ts__dito { position: absolute; z-index: 25; left: 58%; top: calc(var(--u) * 26.4); width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 0.16em rgba(0, 0, 0, 0.22), 0 0.3em 0.9em rgba(0, 0, 0, 0.25); opacity: 0; transform: translate3d(1.5em, 4em, 0); transition: opacity 300ms ease-out, transform 700ms var(--curva); }
/* the phone asks: call this number? */
.ts__foglio { position: absolute; z-index: 30; left: 50%; top: calc(var(--u) * 19); width: 17em; margin-left: -8.5em; border-radius: 1.1em; background: rgba(242, 242, 247, 0.97); color: #000; text-align: center; font-family: -apple-system, 'Inter', system-ui, sans-serif; box-shadow: 0 1em 3em rgba(0, 0, 0, 0.35); overflow: hidden; transition: opacity 250ms ease-out, transform 400ms var(--molla); }
.ts__numero { display: flex; align-items: center; justify-content: center; gap: 0.4em; padding: 1.15em 0.8em; font-size: 1.08em; font-weight: 600; color: #0a7aff; box-shadow: inset 0 -1px 0 rgba(60, 60, 67, 0.2); }
.ts__numero svg { width: 1.05em; height: 1.05em; }
.ts__annulla { display: block; padding: 0.9em; font-size: 1.05em; color: #0a7aff; }
.ts::after { content: ''; position: absolute; z-index: 24; inset: 0; background: rgba(0, 0, 0, 0.32); opacity: 0; transition: opacity 300ms ease-out; pointer-events: none; }
[data-scena="testi"].f1 .ts__chiama { box-shadow: 0 0 0 0.35em rgba(35, 65, 47, 0.22), 0 0.5em 1.2em -0.5em rgba(35, 65, 47, 0.7); }
[data-scena="testi"].f2 .ts__dito { opacity: 1; transform: none; }
[data-scena="testi"].f3 .ts__dito { opacity: 0; transform: scale(0.8); transition-duration: 200ms; }
[data-scena="testi"].f3 .ts__chiama { transform: scale(0.97); }
[data-scena="testi"]:not(.f3) .ts__foglio { opacity: 0; transform: scale(1.12); }
[data-scena="testi"].f3 .ts::after { opacity: 1; }

/* ── Il codice dei dati strutturati (nei colori del brand) ── */
.cd { background: #0c0d0f; color: #E6E8EC; }
.cd .tel__stato { background: #0c0d0f; }
.cd__schede { position: absolute; top: calc(var(--u) * 4.3); left: 0; right: 0; display: flex; height: 2.6em; background: #15171a; box-shadow: inset 0 -1px 0 #23262b; font-family: 'Inter', sans-serif; font-size: 0.86em; }
.cd__scheda { display: flex; align-items: center; padding: 0 1.1em; color: #6f7580; }
.cd__scheda--su { color: #F7F8F8; background: #0c0d0f; box-shadow: inset 0 0.16em 0 #C9A9E9; }
.cd__percorso { position: absolute; top: calc(var(--u) * 7.1); left: 1em; right: 1em; height: 2em; display: flex; align-items: center; font-family: 'Inter', sans-serif; font-size: 0.74em; color: #6f7580; white-space: nowrap; }
.cd__codice { position: absolute; top: calc(var(--u) * 9.3); left: 0; right: 0; margin: 0; padding: 0.3em 0; font: 400 calc(var(--u) * 0.8)/1.62 ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; white-space: normal; overflow: hidden; letter-spacing: 0; }
.cd__codice code { display: block; font: inherit; }
.cd__r { display: block; white-space: pre; padding-right: 0.6em; transition: opacity 250ms ease-out, transform 400ms var(--curva), background-color 400ms ease-out; transition-delay: calc(var(--l, 0) * 70ms); }
.cd__r i { display: inline-block; width: 2.6em; margin-right: 1em; text-align: right; font-style: normal; color: #4a4f58; }
.k-t { color: #8B6FB8; }
.k-a { color: #DFC9F0; }
.k-s { color: #C9A9E9; }
.k-k { color: #F4EAFF; }
[data-scena="codice"]:not(.f1) .cd__r { opacity: 0; transform: translateX(-0.6em); }
[data-scena="codice"].f2 .cd__r--su { background: rgba(201, 169, 233, 0.13); box-shadow: inset 0.18em 0 0 #C9A9E9; transition-delay: 0ms; }

/* ── Il banner dei cookie, a norma ── */
.ck .ts__pagina { filter: none; }
.ck__velo { position: absolute; z-index: 18; inset: 0; background: rgba(0, 0, 0, 0.38); transition: opacity 400ms ease-out; }
.ck__banner { position: absolute; z-index: 22; left: 0.9em; right: 0.9em; top: calc(var(--u) * 15.5); padding: 1.3em 1.2em 0.9em; border-radius: 1.2em; background: #fff; color: #1d2a22; box-shadow: 0 1.2em 3em rgba(0, 0, 0, 0.35); font-family: 'Inter', system-ui, sans-serif; transition: opacity 300ms ease-out, transform 600ms var(--molla); }
.ck__titolo { font-size: 1.2em; font-weight: 750; letter-spacing: -0.015em; }
.ck__testo { margin-top: 0.45em; font-size: 0.9em; line-height: 1.42; color: #4b4b47; }
.ck__tasti { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin-top: 1.9em; }
.ck__tasto { display: grid; place-items: center; height: 2.9em; border-radius: 0.75em; background: #23412f; color: #fff; font-weight: 650; font-size: 1em; transition: box-shadow 400ms ease-out; }
.ck__misura { position: absolute; left: 0; right: 0; top: -1.15em; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; pointer-events: none; }
.ck__misura i { position: relative; height: 0.7em; border-top: 0.13em solid #8B6FB8; margin-top: 0.3em; transform-origin: 50% 0; transition: transform 600ms var(--curva); }
.ck__misura i::before, .ck__misura i::after { content: ''; position: absolute; top: -0.4em; width: 0.13em; height: 0.75em; background: #8B6FB8; }
.ck__misura i::before { left: 0; }
.ck__misura i::after { right: 0; }
.ck__link { display: block; margin-top: 0.75em; text-align: center; font-size: 0.86em; color: #23412f; text-decoration: underline; text-underline-offset: 0.2em; }
[data-scena="cookie"]:not(.f1) .ck__banner { opacity: 0; transform: translate3d(0, 3em, 0); }
[data-scena="cookie"]:not(.f1) .ck__velo { opacity: 0; }
[data-scena="cookie"]:not(.f2) .ck__misura i { transform: scaleX(0); }
[data-scena="cookie"].f3 .ck__tasto { box-shadow: 0 0 0 0.25em rgba(139, 111, 184, 0.35); }

/* ── Rendimento della scheda ── */
.rd__chi { position: absolute; top: calc(var(--u) * 7.8); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.5em 1.1em; font-size: 1em; }
.rd__chi b { font-size: 1.12em; font-weight: 600; }
.rd__periodo { display: inline-flex; align-items: center; gap: 0.25em; padding: 0.35em 0.75em; border-radius: 0.55em; box-shadow: inset 0 0 0 1px #c4c7c5; font-size: 0.82em; color: #444746; }
.rd__periodo svg { width: 0.9em; height: 0.9em; transform: rotate(90deg); }
.rd__corpo { position: absolute; top: calc(var(--u) * 11); left: 0; right: 0; padding: 0 1.1em; }
.rd__totale { padding: 0.9em 1em; border-radius: 1em; background: #f0f4f9; }
.rd__totale small { display: block; font-size: 0.82em; color: #444746; }
.rd__totale b { display: inline-block; margin-top: 0.1em; font-size: 2.1em; font-weight: 500; letter-spacing: -0.02em; }
.rd__righe { list-style: none; margin: 0.6em 0 0; padding: 0; }
.rd__righe li { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; align-items: center; gap: 0.7em; height: 3em; box-shadow: inset 0 -1px 0 #e9e9e9; font-size: 0.95em; transition: opacity 300ms ease-out, transform 500ms var(--curva); transition-delay: calc(var(--r) * 130ms); }
.rd__ic { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #d3e3fd; color: #0b57d0; }
.rd__ic svg { width: 1.15em; height: 1.15em; }
.rd__righe b { font-weight: 600; font-size: 1.05em; }
.rd__ricerche { margin-top: 0.9em; }
.rd__ricerche small { display: block; font-size: 0.82em; color: #444746; margin-bottom: 0.3em; }
.rd__ricerche ol { margin: 0; padding: 0 0 0 1.2em; font-size: 0.92em; }
.rd__ricerche li { padding: 0.35em 0; transition: opacity 300ms ease-out, transform 500ms var(--curva); transition-delay: calc(var(--r) * 130ms); }
.rd__ricerche li::marker { color: #444746; }
.rd__ricerche li span { display: inline-block; width: 70%; }
.rd__ricerche li b { float: right; font-weight: 600; }
[data-scena="rendimento"]:not(.f1) .rd__righe li { opacity: 0; transform: translateY(0.6em); }
[data-scena="rendimento"]:not(.f2) .rd__ricerche li { opacity: 0; transform: translateY(0.6em); }

/* ══ La scheda Google che si completa ══════════════════════════ */
.sg-vista { display: grid; justify-items: center; gap: 14px; }
.sg__esempio { justify-self: center; }
.sg__tappe { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 5px; }
.sg__tappe li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: clamp(11.5px, 3.3vw, 13px); white-space: nowrap; font-weight: 650; color: var(--sec); box-shadow: inset 0 0 0 1px var(--riga-2); transition: color 300ms ease-out, box-shadow 300ms ease-out, background-color 300ms ease-out; }
.sg__tappe li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--riga-2); transition: background-color 300ms ease-out, box-shadow 300ms ease-out; }
.sg-vista.s1 .sg__tappe li:nth-child(1), .sg-vista.s2 .sg__tappe li:nth-child(2), .sg-vista.s3 .sg__tappe li:nth-child(3), .sg-vista.s4 .sg__tappe li:nth-child(4) { color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.09); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35); }
.sg-vista.s1 .sg__tappe li:nth-child(1)::before, .sg-vista.s2 .sg__tappe li:nth-child(2)::before, .sg-vista.s3 .sg__tappe li:nth-child(3)::before, .sg-vista.s4 .sg__tappe li:nth-child(4)::before { background: var(--lilla); box-shadow: 0 0 8px rgba(201, 169, 233, 0.9); }
.sg__tel { --tel-w: min(66vw, 280px); }
.sg { background: #1f1f1f; color: #e3e3e3; }
.sg .tel__stato { background: #1f1f1f; }
.sg__testa { position: absolute; z-index: 6; top: calc(var(--u) * 4.3); left: 0; right: 0; display: flex; align-items: center; gap: 0.7em; height: 3.7em; padding: 0 0.9em; background: #1f1f1f; }
.sg__ic { width: 1.45em; height: 1.45em; flex: none; color: #c4c7c5; }
.sg__cerca { flex: 1; display: flex; align-items: center; height: 2.8em; padding: 0 1em; border-radius: 999px; background: #303134; font-size: 1.05em; }
.sg__finestra { position: absolute; top: calc(var(--u) * 8); left: 0; right: 0; bottom: 0; overflow: hidden; }
.sg__contenuto { transform: translate3d(0, var(--sy, 0px), 0); will-change: transform; padding-bottom: 2em; }
.sg__chi { padding: 0.5em 1.1em 0.6em; }
.sg__nome { font-size: 1.7em; font-weight: 400; letter-spacing: -0.01em; }
.sg__voto { display: flex; align-items: center; gap: 0.3em; margin-top: 0.15em; font-size: 0.96em; color: #c4c7c5; }
.sg__cat { position: relative; display: flex; align-items: center; margin-top: 0.2em; font-size: 0.98em; color: #c4c7c5; }
.sg__cat-prima, .sg__cat-dopo { transition: opacity 300ms ease-out, transform 450ms var(--curva), background-color 600ms ease-out; border-radius: 0.3em; }
.sg__cat-dopo { position: absolute; left: 0; padding: 0 0.2em; margin-left: -0.2em; color: #e3e3e3; font-weight: 500; white-space: nowrap; }
.sg__resto { transition: transform 450ms var(--curva); }
.sg__schede { display: flex; gap: 1.25em; padding: 0 1.1em; height: 2.7em; align-items: stretch; box-shadow: inset 0 -1px 0 #3c4043; font-size: 0.92em; color: #c4c7c5; white-space: nowrap; overflow: hidden; }
.sg__schede span { display: flex; align-items: center; }
.sg__su { color: #a8c7fa; font-weight: 500; box-shadow: inset 0 -0.2em 0 #a8c7fa; }
.sg__azioni { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.95em 0.6em 0.8em; box-shadow: inset 0 -1px 0 #3c4043; }
.sg__azione { display: grid; justify-items: center; gap: 0.35em; font-size: 0.82em; color: #a8c7fa; font-weight: 500; }
.sg__azione i { display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 50%; background: #004a77; color: #c2e7ff; }
.sg__azione--piena i { background: #a8c7fa; color: #062e6f; }
.sg__azione svg { width: 1.45em; height: 1.45em; }
.sg__riga { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 1.1em; align-items: start; padding: 0.8em 1.1em; box-shadow: inset 0 -1px 0 #2f3133; font-size: 0.96em; }
.sg__ric { width: 1.4em; height: 1.4em; color: #a8c7fa; }
.sg__blu { color: #a8c7fa; }
.sg__oggi { line-height: 1.4; }
.sg__settimana { display: grid; gap: 0.15em; margin-top: 0.4em; font-size: 0.92em; color: #c4c7c5; transform-origin: 0 0; transition: opacity 350ms ease-out, transform 500ms var(--curva); }
.sg__settimana p { display: flex; justify-content: space-between; gap: 0.6em; }
.sg__settimana small { display: block; font-size: 0.82em; color: #9aa0a6; }
.sg__festa { margin: 0.2em -0.45em; padding: 0.3em 0.45em; border-radius: 0.45em; background: rgba(253, 214, 99, 0.12); color: #fdd663; }
.sg__festa span:last-child { text-align: right; }
.sg__festa small { color: #fdd663; opacity: 0.85; }
.sg__sezione { padding: 0.9em 1.1em 0.4em; }
.sg__titoletto { font-size: 1.12em; font-weight: 500; margin-bottom: 0.6em; }
.sg__foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; }
.sg__ft { height: 5.6em; border-radius: 0.5em; transition: clip-path 600ms var(--curva), opacity 300ms ease-out; transition-delay: calc(var(--f) * 220ms); clip-path: inset(0 0 0 0 round 0.5em); }
.sg__rec { transition: opacity 400ms ease-out, transform 600ms var(--curva); }
.sg__autore { display: flex; align-items: center; gap: 0.55em; font-size: 0.96em; }
.sg__autore small { color: #9aa0a6; font-size: 0.85em; margin-left: auto; }
.sg__avatar { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: #5e35b1; color: #fff; font-weight: 600; font-size: 0.9em; }
.sg__stelle { display: flex; gap: 0.08em; margin-top: 0.5em; }
.sg__stelle svg { width: 0.95em; height: 0.95em; fill: #fbbc04; }
.sg__stelle svg.mp__spenta { fill: #5f6368; }
.sg__parole { margin-top: 0.35em; font-size: 0.94em; line-height: 1.4; }
.sg__risposta { margin-top: 0.7em; padding: 0.65em 0.8em; border-radius: 0.7em; background: #2a2b2e; font-size: 0.9em; line-height: 1.4; color: #c4c7c5; transition: opacity 400ms ease-out 350ms, transform 600ms var(--curva) 350ms; }
.sg__chi-risp { color: #e3e3e3; font-weight: 500; margin-bottom: 0.2em; }
.sg__chi-risp small { color: #9aa0a6; font-weight: 400; margin-left: 0.3em; }
/* the four steps, set by how far you have scrolled */
.sg-vista:not(.s1) .sg__cat-dopo { opacity: 0; transform: translateY(0.4em); }
.sg-vista.s1 .sg__cat-prima { opacity: 0; transform: translateY(-0.4em); }
.sg-vista.s1 .sg__cat-dopo { background: rgba(168, 199, 250, 0.16); }
.sg-vista.s1 .sg__resto { transform: translateX(var(--dx, -1.5em)); }
.sg-vista:not(.s2) .sg__settimana { opacity: 0; transform: scaleY(0.6); }
.sg-vista:not(.s3) .sg__ft { clip-path: inset(0 0 100% 0 round 0.5em); opacity: 0.2; }
.sg-vista:not(.s4) .sg__rec, .sg-vista:not(.s4) .sg__risposta { opacity: 0; transform: translateY(1em); }
@media (min-width: 1024px) { .sg__tel { --tel-w: 300px; } }

/* ══ Domande frequenti ═════════════════════════════════════════ */
.fq { max-width: var(--largo); margin: 0 auto; display: grid; gap: 28px; }
.fq__lista { border-bottom: 1px solid var(--riga); }
.fq__voce { border-top: 1px solid var(--riga); }
.fq__voce summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 16px; min-height: 68px; padding: 14px 0; cursor: pointer; list-style: none; font-size: clamp(18px, 4.8vw, 21px); font-weight: 680; letter-spacing: -0.012em; line-height: 1.3; touch-action: manipulation; transition: color 200ms ease-out; }
.fq__voce summary::-webkit-details-marker { display: none; }
.fq__voce summary:focus-visible { outline-offset: 2px; }
.fq__segno { position: relative; width: 22px; height: 22px; }
.fq__segno::before, .fq__segno::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--lilla); transition: transform 350ms var(--curva); }
.fq__segno::after { transform: rotate(90deg); }
.fq__voce[open] .fq__segno::after { transform: rotate(0deg); }
.fq__voce[open] summary { color: var(--lilla-chiaro); }
.fq__risposta { padding: 0 40px 24px 0; }
.fq__risposta p { max-width: 38em; font-size: 17px; line-height: 1.62; color: var(--sec); }
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) .fq__voce[open] .fq__risposta { animation: fq-apre 450ms var(--curva) both; } }
@keyframes fq-apre { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) { .fq__voce summary:hover { color: var(--lilla-chiaro); } }
@media (min-width: 1024px) {
  .fq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
  .fq h2 { position: sticky; top: calc(var(--testa) + 48px); }
}

/* ══ Contatto: la chiusura della home, più la riga dell'email ═══ */
.chiusura__mail { margin-top: 4px; }
.nota.chiusura__mail .collegamento { margin-left: 0; }

/* ══ Movimento ridotto o fermato ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1 !important; transform: none !important; }
}
html.fermo .rv { opacity: 1 !important; transform: none !important; }