/* =========================================================
   UNA CHE FA SITI — stile
   Le slide sono costruite su una "tavola" 824.88 × 375
   (le misure di Canva): --u è 1 unità di Canva in pixel.
   ========================================================= */

/* Milkbutter non è più servito come carattere: le scritte del marchio sono
   disegni (vedi "SCRITTE DISEGNATE" più sotto). La licenza di Creative Fabrica
   permette di usarlo per produrre grafiche, non di darlo da scaricare. */

/* Raleway servito dal sito, non da Google: nessuna chiamata esterna */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/font/raleway-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/font/raleway-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/font/raleway-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/font/raleway-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/font/raleway-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/font/raleway-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --giallo: #FBDA7D;
  --arancione: #EE9958;
  --blu: #454ADE;
  --lilla: #C9BCF3;
  --azzurro: #7CD1E5;
  --ink: #333333;
  --bianco: #FFFFFF;
  --font: "Raleway", system-ui, sans-serif;
  --font-titoli: "Raleway", system-ui, sans-serif;   /* di scorta: i titoli veri sono disegnati */
  --u: min(calc(100vw / 824.88), calc(100vh / 375));
}

@supports (height: 100svh) {
  :root { --u: min(calc(100vw / 824.88), calc(100svh / 375)); }
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--blu);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- MENU ---------- */
.menu {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 48px);
  transform: translateY(-110%);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.menu.visibile { transform: translateY(0); }
.menu.aperto { transform: translateY(0); }

.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blu);
  box-shadow: 0 10px 30px -18px rgba(34, 31, 53, .5);
  opacity: 0;
  transition: opacity .3s ease;
}

.menu.pieno::before { opacity: 1; }
.menu.pieno { transform: translateY(0); }

.menu-logo { display: block; }

/* logo completo: pittogramma animato + scritta, nelle proporzioni dell'originale */
.logo-completo {
  position: relative;
  display: block;
  height: 46px;
  aspect-ratio: 677.59 / 286.4;
}

.logo-completo .picto {
  position: absolute;
  left: 0;
  top: 0;
  width: 39.67%;
  height: 100%;
}

.logo-testo {
  position: absolute;
  left: 44.55%;
  top: 9.96%;
  width: 55.45%;
  height: 75.42%;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
}

.menu-link a {
  color: var(--bianco);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.menu-link a:hover { text-decoration: underline; text-underline-offset: 4px; }

.menu-link .menu-cta {
  background: var(--giallo);
  color: var(--blu);
  padding: 10px 18px;
  border-radius: 999px;
}

.menu-link .menu-cta:hover { text-decoration: none; background: var(--bianco); }

.menu-azioni {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-link .menu-wa {
  background: var(--lilla);
  color: var(--blu);
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.menu-link .menu-wa:hover { text-decoration: none; background: var(--bianco); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 10px;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 3px;
  margin: 5px 0;
  background: var(--bianco);
  border-radius: 3px;
}

/* ---------- INTRO / PALCO ---------- */
.intro {
  position: relative;
  height: 320vh;
}

.palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: none;
}

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.slide-blu {
  background: var(--blu);
  color: var(--bianco);
  /* respiro sopra (c'è anche il menu) e sotto */
  --respiro-su: clamp(84px, 12vh, 140px);
  --respiro-giu: clamp(48px, 9vh, 110px);
  --u: min(calc((100vw - 48px) / 824.88), calc((100vh - var(--respiro-su) - var(--respiro-giu)) / 375));
}

@supports (height: 100svh) {
  .slide-blu {
    --u: min(calc((100vw - 48px) / 824.88), calc((100svh - var(--respiro-su) - var(--respiro-giu)) / 375));
  }
}

.slide-blu .design {
  top: calc(50% + (var(--respiro-su) - var(--respiro-giu)) / 2);
}
.slide-gialla { background: var(--giallo); }

/* la tavola di Canva, centrata e scalata */
.design {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(824.88 * var(--u));
  height: calc(375 * var(--u));
  transform: translate(-50%, -50%);
}

.design > * { position: absolute; }

/* ---------- SLIDE GIALLA ---------- */
.titolo-svg { margin: 0; inset: 0; pointer-events: none; }
.titolo-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.titolo-svg path { fill: var(--bianco); }

.testo-hero {
  margin: 0;
  left: calc(37.5 * var(--u));
  top: calc(286 * var(--u));
  width: calc(318 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: calc(19.5 * var(--u));
  font-weight: 400;
}

.testo-hero strong { font-weight: 700; }

.picto-hero {
  left: calc(442.8 * var(--u));
  top: calc(17.6 * var(--u));
  width: calc(334.6 * var(--u));
  height: calc(356.4 * var(--u));
}

/* effetto scrittura: una lettera per volta, solo in entrata */
.lettera {
  clip-path: inset(-20% 100% -20% -20%);
  opacity: 0;
}

.scrive .lettera {
  animation: scrivi .5s cubic-bezier(.35, .1, .25, 1) forwards;
  animation-delay: calc(var(--i) * 110ms + var(--parti, 250ms));
}

.scritto .lettera {
  animation: none;
  clip-path: none;
  opacity: 1;
}

@keyframes scrivi {
  0%   { clip-path: inset(-20% 100% -20% -20%); opacity: 1; }
  100% { clip-path: inset(-20% -20% -20% -20%); opacity: 1; }
}

/* ---------- SLIDE BLU ---------- */
.foto {
  left: calc(125.6 * var(--u));
  top: calc(35.4 * var(--u));
  width: calc(231.2 * var(--u));
  height: calc(231.2 * var(--u));
  border-radius: 50%;
  overflow: hidden;
  background: #b9ab9b;
}

.foto img {
  position: absolute;
  left: calc(-21.8 * var(--u));
  top: calc(-42.1 * var(--u));
  width: calc(268.2 * var(--u));
  max-width: none;
}

.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(6.75 * var(--u)) var(--bianco);
}

.stella {
  left: calc(300 * var(--u));
  top: calc(46 * var(--u));
  width: calc(43 * var(--u));
  height: calc(45 * var(--u));
  overflow: visible;
}

.stella-gira {
  transform-box: fill-box;
  transform-origin: center;
  animation: gira 9s linear infinite;
}

@keyframes gira { to { transform: rotate(360deg); } }

.picto-blu {
  left: calc(272.1 * var(--u));
  top: calc(248.6 * var(--u));
  width: calc(83 * var(--u));
  height: auto;
}

.mac-posto {
  left: calc(21.16 * var(--u));
  top: calc(145.06 * var(--u));
  width: calc(227.97 * var(--u));
  height: calc(216.72 * var(--u));
}

.titolo-chi { --parti: 0ms; }

.testo-chi {
  left: calc(415.7 * var(--u));
  top: calc(102 * var(--u));
  width: calc(356 * var(--u));
  font-size: calc(13 * var(--u) - 3px);
  line-height: calc(19.5 * var(--u));
}

.testo-chi p { margin: 0; }
.testo-chi strong { font-weight: 700; }

/* pulsante pieno lilla con testo blu; in hover diventa bianco */
.bottone {
  display: inline-block;
  margin-top: calc(12 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u));
  border-radius: 999px;
  background: var(--lilla);
  color: var(--blu);
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: calc(15 * var(--u));
  line-height: 1.1;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.bottone:hover,
.bottone:focus-visible {
  background: var(--bianco);
  color: var(--blu);
}

.bottone:focus-visible {
  outline: 2px solid var(--giallo);
  outline-offset: 3px;
}

/* elementi che compaiono con lo scroll (opacità e movimento li imposta lo script) */
.appare {
  opacity: 0;
  will-change: opacity, transform;
}

/* ---------- MAC + SCHERMO (trasformati dallo script) ---------- */
.mac,
.schermo {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.mac {
  width: 608px;
  height: 577px;
  max-width: none;
  opacity: 0;
}

.schermo {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  backface-visibility: hidden;
}

.schermo-dentro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--giallo);
}

/* cornice scura dello schermo: si anima solo l'opacità */
.cornice {
  position: absolute;
  inset: -3.2%;
  border-radius: 4.5% / 7%;
  background: #1d1d1f;
  opacity: 0;
  will-change: opacity;
}

/* retino "giornale" sullo schermo del mac (dimensione fissata dallo script al resize) */
.retino {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='1.8' fill='%23281e0a' fill-opacity='.35'/%3E%3C/svg%3E");
  background-size: var(--punto, 16px) var(--punto, 16px);
  will-change: opacity;
}

/* ---------- PITTOGRAMMA ANIMATO (vettoriale) ----------
   corpo, gambe, occhio e braccio sono curve vere: nitide a ogni ingrandimento */
.picto {
  display: block;
  overflow: visible;               /* il braccio esce dal riquadro mentre saluta */
  --tratto: #000000;
  --spessore: 4.252;
}

.picto-chiaro {                     /* su fondo blu: gambe e braccio bianchi e un po' più spessi */
  --tratto: #FFFFFF;
  --spessore: 5.6;
}

.picto-gambe,
.picto-braccio,
.picto-faccia,
.picto-palpebra {
  fill: none;
  stroke: #000000;
  stroke-width: 4.252;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.picto-gambe,
.picto-braccio {
  stroke: var(--tratto);
  stroke-width: var(--spessore);
}

.picto-corpo line { stroke-width: 116.2205; stroke-linecap: round; }
.picto-faccia circle { fill: #000000; stroke: none; }

.picto-braccio {
  transform-box: view-box;
  transform-origin: 300px 288px;    /* la spalla */
  animation: picto-saluta 3s ease-in-out infinite;
}

.picto-occhio {
  transform-box: view-box;
  transform-origin: 187.11px 240.85px;
  animation: picto-occhio 6.5s linear infinite;
}

.picto-palpebra {
  opacity: 0;
  animation: picto-palpebra 6.5s step-end infinite;
}

@keyframes picto-saluta {
  0%, 58%, 100% { transform: rotate(0deg); }
  64% { transform: rotate(13deg); }
  72% { transform: rotate(-4deg); }
  80% { transform: rotate(13deg); }
  88% { transform: rotate(-3deg); }
  94% { transform: rotate(5deg); }
}

@keyframes picto-occhio {
  0%, 38%, 44%, 83%, 86.5%, 90%, 100% { transform: scaleY(1); }
  40.5%, 41.8%, 84.5%, 85%, 88%, 88.5% { transform: scaleY(0); }
}

@keyframes picto-palpebra {
  0%    { opacity: 0; }
  40.5% { opacity: 1; }
  41.8% { opacity: 0; }
  84.5% { opacity: 1; }
  85%   { opacity: 0; }
  88%   { opacity: 1; }
  88.5% { opacity: 0; }
}

.stella-gira { will-change: transform; }

.scorri {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  animation: saltella 1.6s ease-in-out infinite;
}

@keyframes saltella {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- PAROLE CHIAVE CHE SCORRONO ---------- */
.parole {
  position: relative;
  background: var(--arancione);
  color: var(--bianco);
  padding-block: 28px;
  overflow: hidden;
}

.nastro-scorre {
  display: flex;
  width: max-content;
  animation: nastro 38s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.parole:hover .nastro-scorre { animation-play-state: paused; }

.nastro-giro {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0 22px 0 0;
  list-style: none;
}

.nastro-giro li {
  font-family: var(--font-titoli);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nastro-giro .sep svg {
  display: block;
  width: .9em;
  height: .94em;
  animation: gira 9s linear infinite;
  will-change: transform;
}

@keyframes nastro {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- COME FUNZIONA ---------- */
.come-funziona {
  position: relative;
  overflow: hidden;
  --crema: #F7F1E7;
  /* stessa unità della slide blu: il titolo ha la stessa misura di "Chi sono?" */
  --respiro-su: clamp(84px, 12vh, 140px);
  --respiro-giu: clamp(48px, 9vh, 110px);
  --u: min(calc((100vw - 48px) / 824.88), calc((100vh - var(--respiro-su) - var(--respiro-giu)) / 375));
  background: var(--crema);
  color: var(--ink);
  padding-block: clamp(72px, 12vh, 150px);
  padding-inline: 24px;
}

.sezione-dentro {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.5vw, 34px);
  text-align: center;
}

.titolo-sezione {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  color: var(--lilla);
  text-wrap: balance;
}

.intro-sezione {
  margin: 0;
  max-width: calc(530 * var(--u));
  font-size: calc(13 * var(--u) - 3px);
  line-height: calc(19.5 * var(--u));
  text-wrap: pretty;
}

/* ---------- PACCHETTI ---------- */
.pacchetti {
  --carta: #FFFDF8;
  width: 100%;
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  text-align: left;
}

.pacchetto {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px 28px;
  background: var(--carta);
  border: 2px solid var(--lilla);
  border-radius: 28px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.pacchetto > * { margin: 0; }

/* il Doppio espresso: lilla, più alto, al centro */
.pacchetto.consigliato {
  position: relative;
  background: var(--lilla);
  margin-top: -24px;
  padding-top: 44px;
  box-shadow: 0 18px 40px -22px rgba(69, 74, 222, .45);
}

.etichetta {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--blu);
  color: var(--bianco);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pacchetto-nome {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: clamp(34px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--blu);
}

.pacchetto-per { color: #4a4658; text-wrap: pretty; }
.consigliato .pacchetto-per { color: #2f2c3d; }

.pacchetto-prezzo {
  font-weight: 800;
  font-size: clamp(44px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--blu);
  font-variant-numeric: tabular-nums;
}

.pacchetto-info {
  display: grid;
  gap: 8px;
  padding-block: 14px;
  border-block: 1px solid rgba(69, 74, 222, .18);
}

.pacchetto-info div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: baseline;
}

.pacchetto-info dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blu);
}

.pacchetto-info dd { margin: 0; font-size: 14px; line-height: 1.4; }

.incluso-base { margin: 0 0 8px; font-weight: 700; }

.incluso-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.incluso-lista li {
  position: relative;
  padding-left: 22px;
}

.incluso-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 10px;
  height: 6px;
  border-left: 2.5px solid var(--blu);
  border-bottom: 2.5px solid var(--blu);
  rotate: -45deg;
}

/* toggle: il resto dell'elenco si apre in altezza */
.incluso-altro {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.incluso-altro > .incluso-lista {
  overflow: hidden;
  min-height: 0;
}

.incluso-altro.aperto { grid-template-rows: 1fr; }
.incluso-altro.aperto > .incluso-lista { padding-top: 8px; }

.incluso-toggle {
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--blu);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.incluso-toggle::after { content: " ↓"; display: inline-block; transition: rotate .3s ease; }
.incluso-toggle[aria-expanded="true"]::after { rotate: 180deg; }

/* extra */
.extra-titolo {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blu);
}

.extra-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.extra-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--blu);
  border-radius: 999px;
  background: transparent;
  color: var(--blu);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.extra-chip:hover { background: rgba(69, 74, 222, .08); }
.consigliato .extra-chip:hover { background: rgba(255, 255, 255, .45); }

.extra-prezzo { font-weight: 800; white-space: nowrap; }
.extra-segno { font-weight: 800; }

.extra-chip[aria-pressed="true"] {
  background: var(--blu);
  color: var(--bianco);
}

/* suggerimento per passare al pacchetto successivo */
.suggerimento {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--giallo);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  animation: suggerimento-entra .35s ease;
}

.suggerimento strong { font-weight: 800; }

.suggerimento button {
  display: inline;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 800;
  color: var(--blu);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@keyframes suggerimento-entra {
  from { opacity: 0; transform: translateY(-6px); }
}

.pacchetto-cta {
  margin-top: 4px;
  display: block;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--blu);
  color: var(--bianco);
  font-family: var(--font-titoli);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.pacchetto-cta:hover { background: var(--ink); }
.consigliato .pacchetto-cta:hover { background: var(--bianco); color: var(--blu); }

.pacchetto-wa {
  display: block;
  margin-top: -4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blu);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pacchetto-wa:hover { text-decoration-thickness: 2px; }

.pacchetto-wa:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 3px;
  border-radius: 6px;
}

.pacchetto.evidenziato { animation: pacchetto-evidenzia 1.2s ease; }

@keyframes pacchetto-evidenzia {
  0%, 100% { box-shadow: 0 18px 40px -22px rgba(69, 74, 222, .45); }
  30%      { box-shadow: 0 0 0 6px var(--giallo), 0 18px 40px -22px rgba(69, 74, 222, .45); }
}

.incluso-toggle:focus-visible,
.extra-chip:focus-visible,
.suggerimento button:focus-visible,
.pacchetto-cta:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 3px;
}

.pacchetti-note {
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #6b6475;
  text-align: center;
}

@media (max-width: 960px) {
  .pacchetti {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
    gap: 36px;
  }
  .pacchetto.consigliato { order: -1; margin-top: 0; }
}

/* decorazioni: forme del brand attorno al contenuto.
   Entrano ingrandendosi quando la sezione arriva sullo schermo. */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  scale: .3;
  transition: scale .9s cubic-bezier(.2, .85, .25, 1);
}

.deco.entra { scale: 1; }

.deco-azzurro,
.deco-giallo {
  border-radius: 50%;
  aspect-ratio: 1;
}

.deco-azzurro {
  width: clamp(170px, 20vw, 260px);
  left: clamp(-120px, -6vw, -50px);
  top: 8%;
  background: var(--azzurro);
  opacity: .42;
}

.deco-giallo {
  width: clamp(160px, 20vw, 270px);
  width: clamp(160px, 18vw, 250px);
  right: clamp(-110px, -5.5vw, -50px);
  top: 25%;                          /* poco sopra il testo introduttivo */
  background: var(--giallo);
  opacity: .5;
}

.sezione-dentro { position: relative; z-index: 1; }

/* su telefono e tablet la macchia azzurra finirebbe sotto alla timeline */
@media (max-width: 900px) {
  .deco-azzurro { display: none; }
}


/* ---------- SCRITTE DISEGNATE ----------
   Le scritte del marchio non sono testo ma disegni: il file del carattere non
   viene servito (la licenza non lo permette) e la resa è identica al pixel.
   Il testo vero resta nel tag, nascosto, per Google e per i lettori vocali. */
.magazzino-lettere {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.disegnato .parola { display: inline-block; }
.disegnato .segno::before {
  content: attr(data-segno);        /* i segni che Milkbutter non ha, come il · */
  font-family: var(--font);
}
.disegnato .spazio { display: inline-block; width: .2949em; }

.disegnato .disegno svg {
  display: inline-block;
  vertical-align: -.5245em;        /* la pancia delle lettere sotto la riga */
  overflow: visible;
  fill: currentColor;              /* prende il colore del testo, anche in hover */
}

/* ---------- TIMELINE DELLE 4 TAPPE ---------- */
.timeline {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.tappa {
  position: relative;
  padding: 0 10px;
}

/* contenitore di sentiero + tappe: il sentiero si posiziona su questo */
.timeline-zona {
  --pallino: 20px;
  --tinta: var(--lilla);              /* colore di sentiero, pallini e numeri */
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: clamp(26px, 4vw, 52px) auto clamp(24px, 3.4vw, 46px);
}

/* il sentiero disegnato a mano e il personaggio che ci cammina sopra */
.percorso {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pallino) / 2 - 60px);
  height: 120px;
  pointer-events: none;
}

.percorso-linea {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.percorso-linea path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.camminatore {
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  will-change: transform;
}


.camminatore .picto {
  width: 100%;
  height: auto;
  display: block;
}

/* mentre cammina il braccio sta giù; arrivato in fondo si gira e saluta */
.camminatore .picto-braccio,
.camminatore .picto-occhio,
.camminatore .picto-palpebra { animation: none; }

.percorso.arrivato .picto-braccio { animation: picto-saluta 3s ease-in-out infinite; }
.percorso.arrivato .picto-occhio { animation: picto-occhio 6.5s linear infinite; }
.percorso.arrivato .picto-palpebra { animation: picto-palpebra 6.5s step-end infinite; }

/* su mobile il sentiero diventa una linea verticale semplice */
.tappa:not(:last-child)::before {
  display: none;
  content: "";
  position: absolute;
  left: calc(50% + var(--pallino) / 2 + 6px);
  right: calc(-50% + var(--pallino) / 2 + 6px);
  top: calc(var(--pallino) / 2 - 1.5px);
  height: 3px;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left center;
}

.tappa > a,
.tappa-finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.tappa-pallino {
  width: var(--pallino);
  height: var(--pallino);
  margin-bottom: 10px;                /* aria tra pallino e numero */
  border-radius: 50%;
  background: var(--crema);
  border: 3px solid var(--tinta);
  transition: background-color .25s ease, border-color .25s ease, scale .25s ease;
}

.tappa.raggiunta .tappa-pallino {
  background: var(--blu);
  border-color: var(--blu);
}

.tappa-numero {
  font-family: var(--font-titoli);
  font-size: 34px;
  line-height: 1;
  color: var(--tinta);
  transition: color .25s ease;
}

.tappa-titolo {
  font-family: var(--font-titoli);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* la chiamata all'azione è un pulsante: col mouse scivola fuori,
   ma lo spazio è già riservato, così niente saltelli */
.tappa-cta {
  margin-top: 0;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--blu);
  color: var(--bianco);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity .25s ease, translate .25s ease, max-height .28s ease,
              padding .28s ease, margin-top .28s ease;
}

.tappa > a:hover .tappa-cta,
.tappa > a:focus-visible .tappa-cta {
  opacity: 1;
  translate: 0 0;
  max-height: 44px;
  padding-block: 9px;
  margin-top: 12px;
}

.tappa > a:hover .tappa-pallino,
.tappa > a:focus-visible .tappa-pallino {
  background: var(--azzurro);
  border-color: var(--azzurro);
  scale: 1.15;
}

.tappa > a:hover .tappa-numero,
.tappa > a:focus-visible .tappa-numero { color: var(--blu); }

.tappa > a:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 8px;
  border-radius: 12px;
}

@media (hover: none) {
  .tappa-cta {
    opacity: 1;
    translate: 0 0;
    max-height: 44px;
    padding-block: 9px;
    margin-top: 12px;
  }
}

@media (max-width: 760px) {
  /* in colonna: pallino a sinistra, testo a destra, sentiero verticale */
  .percorso {
    inset: 0;
    top: 0;
    height: auto;
  }

  .timeline {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 100%;
    padding-left: 0;
  }

  .tappa { padding: 0; }

  /* pallino allineato e testi centrati nella loro colonna: resta spazio
     a sinistra perché il personaggio cammini senza toccare il bordo */
  .tappa > a,
  .tappa-finale {
    display: grid;
    grid-template-columns: var(--pallino) minmax(0, 200px);
    justify-content: center;
    align-items: start;
    column-gap: 16px;
    row-gap: 4px;
    text-align: center;
  }

  .tappa-pallino { grid-row: 1 / 4; margin-top: 6px; margin-bottom: 0; }
  .tappa-numero { grid-column: 2; font-size: 30px; }
  .tappa-titolo { grid-column: 2; font-size: 22px; }
  .tappa-cta { grid-column: 2; justify-self: center; }

  .camminatore { width: 44px; }

  /* più respiro sotto la timeline e sotto il testo, prima dei pacchetti;
     sopra, lo spazio serve al pittogramma che parte accanto al primo pallino */
  .timeline-zona { padding-top: 30px; margin-bottom: clamp(30px, 6vh, 52px); }
  .come-funziona .intro-sezione { margin-bottom: clamp(20px, 4vh, 36px); }
  .pacchetti { margin-top: clamp(10px, 2vh, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .tappa:not(:last-child)::before { transform: none; }
  .tappa-cta, .picto { transition: none; }
}

/* titoli HTML con effetto scrittura (lettere create dallo script) */
.titolo-sezione .parola {
  display: inline-block;
  white-space: nowrap;
}

.titolo-sezione .lettera {
  display: inline-block;
  white-space: pre;
}

/* ---------- TEMPLATE ---------- */
.template-sezione .sezione-dentro { max-width: 1320px; }

.template-sezione {
  --respiro-su: clamp(84px, 12vh, 140px);
  --respiro-giu: clamp(48px, 9vh, 110px);
  --u: min(calc((100vw - 48px) / 824.88), calc((100vh - var(--respiro-su) - var(--respiro-giu)) / 375));
  position: relative;
  overflow: hidden;
  background-color: var(--lilla);
  background-image: radial-gradient(rgba(255, 255, 255, .32) 1.3px, transparent 1.4px);
  background-size: 16px 16px;
  color: var(--ink);
  padding-block: clamp(92px, 12vh, 150px) clamp(92px, 11vh, 130px);
  padding-inline: 24px;
}

/* il bordo alto della sezione è un'onda color crema, come la sezione sopra */
.onda-cima {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(26px, 3vw, 44px);
  display: block;
}

/* anche il bordo basso è un'onda, verso il blu della pagina */
.onda-fondo {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: clamp(26px, 3vw, 44px);
  display: block;
}

/* due macchie più chiare, per movimento dietro alle card */
.deco-morbida {
  border-radius: 50%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .34);
}

.deco-morbida-1 {
  width: clamp(240px, 30vw, 420px);
  left: clamp(-180px, -10vw, -80px);
  top: 22%;
}

.deco-morbida-2 {
  width: clamp(200px, 26vw, 360px);
  right: clamp(-160px, -9vw, -70px);
  bottom: 12%;
}

@supports (height: 100svh) {
  .template-sezione {
    --u: min(calc((100vw - 48px) / 824.88), calc((100svh - var(--respiro-su) - var(--respiro-giu)) / 375));
  }
}

.template-sezione .titolo-sezione { color: var(--bianco); }

.template-griglia {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin-top: clamp(18px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  text-align: left;
}

.template {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 14px;
  background: #FFFDF8;
  border-radius: 24px;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* l'ultima card, se resta da sola sulla riga, resta della stessa misura
   delle altre ma si mette al centro */
.template:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - clamp(7px, .8vw, 11px));
}

@media (max-width: 900px) {
  .template:last-child:nth-child(odd) { width: 100%; }
}

.template-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-right: 8px;
}

.template:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px -20px rgba(34, 31, 53, .45);
}

.template > * { margin: 0; }

/* anteprima finta: una finestrella di browser con le righe della pagina */
.template-anteprima {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  place-items: stretch;
  overflow: hidden;
}

.tinta-lilla     { background: #E4DDF8; }
.tinta-giallo    { background: #FDEFC6; }
.tinta-azzurro   { background: #D6F1F8; }
.tinta-arancione { background: #F9DCC6; }
.tinta-verde     { background: #DDEFE2; }

.finestra {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  background: var(--bianco);
  border-radius: 10px;
  height: 100%;
}

.pallini { display: flex; gap: 4px; margin-bottom: 2px; }
.pallini i { width: 6px; height: 6px; border-radius: 50%; background: #d8d4e4; }

.finta-riga {
  height: 7px;
  border-radius: 4px;
  background: #e7e3f0;
  width: 70%;
}

.finta-riga.lunga { width: 88%; background: #cfc7e6; height: 10px; }
.finta-riga.corta { width: 45%; }

.finta-foto {
  flex: 1;
  border-radius: 8px;
  background: #efecf7;
}

.template-nome {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--blu);
}

.template-per {
  font-size: 14px;
  line-height: 1.4;
  color: #4a4658;
}

.template-voci {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.template-voci li {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(69, 74, 222, .09);
  font-size: 12px;
  font-weight: 700;
  color: var(--blu);
}

.template-cta {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a84a0;
}

.template-sezione .pacchetti-note {
  position: relative;
  z-index: 1;
  margin-top: clamp(18px, 2vw, 28px);
  color: #3f3a52;
}

.template-sezione .intro-sezione { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .template { transition: none; }
  .deco { scale: 1; transition: none; }
}

@media (max-width: 900px) {
  .template-griglia { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .template {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .template-testo { padding-right: 0; }
}

/* ---------- FOOTER ---------- */
.pie {
  background: var(--blu);
  color: var(--bianco);
  padding: clamp(40px, 6vh, 72px) 24px clamp(28px, 4vh, 44px);
}

.pie-dentro {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.pie-logo { display: block; }
.pie-logo .picto { height: 74px; width: auto; }

.pie-invito {
  margin: 4px 0 0;
  font-family: var(--font-titoli);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pie-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.pie-bottone {
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.pie-call { background: var(--giallo); color: var(--blu); }
.pie-wa   { background: var(--lilla);  color: var(--blu); }

.pie-mail {
  background: transparent;
  color: var(--bianco);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75);
}

.pie-bottone:hover { background: var(--bianco); color: var(--blu); }
.pie-mail:hover { box-shadow: inset 0 0 0 2px var(--bianco); }

.pie-bottone:focus-visible {
  outline: 3px solid var(--giallo);
  outline-offset: 3px;
}

.pie-note {
  margin: clamp(14px, 2vw, 26px) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .75);
}

.pie-note a { color: inherit; }
.pie-note a:hover { color: var(--bianco); }

/* ---------- PRESTAZIONI: cosa non deve disegnarsi ---------- */

/* il pittogramma dentro allo schermo del mac si ferma appena la slide gialla
   lascia il tutto schermo (animation: none e non "paused": un'animazione in pausa
   tiene comunque acceso il livello grafico) */
.schermo.in-pausa .picto > * {
  animation: none;
  will-change: auto;
}

/* Dentro allo schermo del mac, appena la slide rimpicciolisce, il pittogramma
   vettoriale lascia il posto alla versione a immagine: rimpicciolita tiene le
   linee, mentre le curve sotto il pixel diventano fili trasparenti.
   A tutto schermo resta il vettoriale, nitido a ogni ingrandimento. */
.picto-raster {
  position: absolute;
  left: calc(432.2 * var(--u));
  top: calc(7.5 * var(--u));
  width: calc(384.7 * var(--u));
  aspect-ratio: 800 / 780;
  display: none;
}

.picto-raster img {
  position: absolute;
  display: block;
  max-width: none;
}

.pr-corpo   { left: 2.5%;    top: 2.4359%;  width: 77.75%;  height: 95.5128%; }
.pr-occhio  { left: 29.375%; top: 38.0769%; width: 13.625%; height: 13.9744%; }
.pr-braccio { left: 67%;     top: 35.3846%; width: 23%;     height: 27.8205%; }

.schermo.tratto-fisso .picto-raster { display: block; }
.schermo.tratto-fisso .picto-hero { display: none; }


/* quello che è uscito dallo schermo non viene disegnato né animato */
.palco.fuori-schermo { visibility: hidden; }

.palco.fuori-schermo *,
.parole.fuori-schermo * { animation-play-state: paused !important; }

/* ---------- TELEFONO: le due slide diventano verticali ----------
   Su schermo stretto la "tavola" di Canva non si può rimpicciolire: i testi
   diventerebbero illeggibili. Sotto i 760px le slide si impaginano in colonna. */
@media (max-width: 760px) {
  .design {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 96px 14px 30px;
  }

  .design > * { position: static; }

  /* i titoli disegnati lasciano il posto allo stesso carattere, come testo */
  .titolo-svg > svg { display: none; }

  /* al posto del disegno di Canva, pensato per lo schermo largo,
     qui ci sono le stesse parole disegnate una per una */
  .titolo-svg .disegno {
    display: block;
    line-height: .95;
    color: var(--bianco);
  }

  /* --- slide gialla: tutto centrato, titolo su due righe --- */
  .slide-gialla .design {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-top: 104px;
  }

  .titolo-hero .disegno {
    font-size: clamp(50px, 16.5vw, 82px);
    line-height: 1.08;
  }

  .testo-hero {
    width: auto;
    max-width: none;
    font-size: 16.5px;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
  }

  .picto-hero {
    width: 64%;
    max-width: 270px;
    height: auto;
    margin-top: 10px;
  }

  /* la versione a immagine deve stare esattamente dove sta quella vettoriale:
     resta posizionata, se no i tre livelli si ancorano a tutta la slide */
  .picto-raster {
    position: relative;
    left: auto;
    top: auto;
    width: 64%;
    max-width: 270px;
    align-self: center;
    margin-top: 10px;
  }

  /* --- slide blu: titolo in cima, poi foto, stellina e mac come un blocco solo --- */
  .slide-blu .design {
    /* tutto il blocco è misurato sulla foto: così su tablet, dove la foto
       smette di crescere, stellina e telefono le restano attaccati */
    --foto: min(58vw, 260px);
    --tel: min(33vw, 148px);
    --respiro-su: 0px;
    --respiro-giu: 0px;
    top: 0;                          /* su telefono niente centratura verticale */
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 100px;
  }

  .titolo-chi .disegno { font-size: clamp(42px, 14vw, 68px); }

  /* la foto è l'elemento principale, la stellina le si appoggia in alto a destra
     e il mac sbuca da sotto a sinistra, come sul computer */
  .foto {
    position: absolute;
    left: 50%;                       /* centrata sotto al titolo */
    right: auto;
    translate: -50% 0;
    top: 215px;
    width: var(--foto);
    height: var(--foto);
  }

  .foto img { left: -9.4%; top: -18.2%; width: 116%; }
  .foto::after { box-shadow: inset 0 0 0 6px var(--bianco); }

  /* appoggiata al bordo del cerchio, in alto a destra */
  .stella {
    position: absolute;
    left: calc(50% + var(--foto) * .232);
    right: auto;
    top: calc(215px + var(--foto) * .017);
    width: calc(var(--foto) * .241);
    height: auto;
    aspect-ratio: 43 / 45;
  }

  /* su telefono al posto del mac c'è un telefono: stesse proporzioni della slide */
  .mac-posto {
    position: absolute;
    top: calc(215px + var(--foto) * .241);
    left: calc(50% - var(--foto) * .5 - var(--tel) * .515);
    width: var(--tel);
    height: auto;
    aspect-ratio: 843 / 1308;
  }

  /* su telefono l'immagine è il telefono, non il computer */
  .mac { width: 843px; height: 1308px; }

  /* titoli e testi delle sezioni: misure in pixel, non più della tavola */
  .titolo-sezione { font-size: clamp(44px, 15vw, 72px); line-height: .95; }

  .intro-sezione {
    max-width: none;
    font-size: 15.5px;
    line-height: 1.55;
  }

  .intro-sezione br { display: none; }

  /* il racconto, spostato qui sotto dallo script */
  .chi-continua {
    background: var(--blu);
    color: var(--bianco);
    /* lo spazio sopra lo misura lo script: dipende da dove finisce il telefono */
    padding: 0 22px clamp(56px, 9vh, 88px);
  }

  .chi-continua .testo-chi {
    position: static;
    width: auto;
    max-width: none;
    font-size: 15.5px;
    line-height: 1.55;
    opacity: 1;
  }

  .chi-continua .bottone {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-top: 40px;
    padding: 14px 32px;
    font-size: 26px;
  }

  /* bersagli comodi da toccare con il dito */
  .extra-chip { min-height: 42px; }
  .tappa-cta { min-height: 42px; display: inline-flex; align-items: center; }
  .incluso-toggle { min-height: 40px; display: flex; align-items: center; }

}

@media (min-width: 761px) {
  .chi-continua { display: none; }
  .solo-telefono { display: none; }      /* gli a capo valgono solo sul telefono */
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  /* il pannello: il menu è un elemento trasformato, quindi qui "fixed" parte
     dal suo angolo e non dalla finestra — le misure vanno date a mano */
  .menu-link {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100svh;
    box-sizing: border-box;
    padding: 96px 24px 40px;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    background: var(--blu);
    transform: translateX(100%);
    transition: transform .4s ease;
    overflow-y: auto;
  }
  .menu-link a { font-size: 22px; }

  .menu-azioni {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    align-items: center;
  }

  .menu-link .menu-cta,
  .menu-link .menu-wa { font-size: 18px; padding: 12px 26px; }
  .menu.aperto .menu-link { transform: translateX(0); }
  .burger { display: block; position: relative; z-index: 2; }
  /* logo e bottone restano sopra al pannello */
  .menu-logo { position: relative; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .stella-gira,
  .scorri,
  .nastro-scorre,
  .nastro-giro .sep svg,
  .picto-braccio,
  .picto-occhio,
  .picto-palpebra,
  .suggerimento,
  .pacchetto.evidenziato { animation: none; }
  .incluso-altro { transition: none; }
  .lettera,
  .scrive .lettera { animation: none; clip-path: none; opacity: 1; }
}