/* Il Conte Gelateria · style.css
   Step 5: la home fedele al design di ChatGPT (home-approvata.png), rifinita.
   Colori misurati sul design con confronta-design.py e campionati sulle sezioni ad alta risoluzione. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* blu notte dei titoli e dei testi */
  --blu-notte: #00266E;
  --blu: #012E7F;
  --blu-testo: #0B2A80;
  /* Tiffany: pulsanti, numeri, accenti */
  --tiffany: #56E4E8;
  --tiffany-vivo: #3BDBE3;
  --tiffany-logo: #08C0E1;
  /* fondi chiari */
  --cielo: #C9F4F7;
  --ghiaccio: #EAFBFE;
  --onda: #DDF9FE;
  --scheda: #EAF7F9;
  --bolla: #D8F7FA;
  --nebbia: #F5F5F5;
  --bianco: #FFFFFF;

  --carattere: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --carattere-mano: "Caveat", "Comic Sans MS", cursive;

  --raggio: 24px;
  --raggio-grande: 40px;
  --ombra: 0 18px 40px -18px rgba(0, 38, 110, .28);
  --ombra-leggera: 0 10px 30px -14px rgba(0, 38, 110, .22);
  /* le due curve di Emil Kowalski (09 § 0-bis-2): entrate e uscite, cose che si spostano */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: clamp(20px, 3.4vw, 48px);
  --testata: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--carattere);
  font-size: 18px;
  line-height: 1.5;
  color: var(--blu-testo);
  background: var(--bianco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--tiffany-logo); outline-offset: 3px; border-radius: 6px; }

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--blu); color: var(--bianco); padding: 10px 16px; border-radius: 10px;
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ── tipografia ─────────────────────────────────────────────────────────────── */
.occhiello {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--blu-notte);
  margin-bottom: 18px;
}
.occhiello--tiffany { color: var(--tiffany-vivo); }
.a-mano {
  font-family: var(--carattere-mano);
  font-weight: 600;
  line-height: 1;
  color: var(--blu);
}
.hero__mano, .self__mano, .casa__mano { text-shadow: 0 0 2px #FFFFFF, 0 0 10px #FFFFFF, 0 0 18px #FFFFFF; }
.a-mano--tiffany { color: var(--tiffany-vivo); font-size: 34px; margin-bottom: 4px; transform: rotate(-3deg); transform-origin: left; display: inline-block; }
.titolo-sezione {
  position: relative;
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--blu-notte);
}
.titolo-sezione--grande { font-size: clamp(46px, 6vw, 88px); line-height: .93; }
.titolo-sezione--medio { font-size: clamp(36px, 3.9vw, 56px); }
.titolo-sezione__scintilla { display: inline-block; width: .7em; height: auto; vertical-align: top; margin-left: .08em; margin-top: -.18em; }
.testo-grande { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.3; color: var(--blu-testo); }
.testo-medio { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: var(--blu-testo); }

.sottolineato { position: relative; display: inline-block; }
.sottolineato__segno {
  position: absolute; left: 34%; bottom: -.2em; width: 66%; height: auto;
  pointer-events: none; z-index: -1;
}
.sottolineato--self .sottolineato__segno { left: 24%; bottom: -.5em; width: 66%; z-index: 0; }
.sottolineato--storia .sottolineato__segno { left: 30%; bottom: -.52em; width: 60%; }

/* ── pulsanti ───────────────────────────────────────────────────────────────── */
.pulsanti { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -.01em;
  border: 2px solid transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.btn--grande { min-height: 60px; padding: 14px 34px; font-size: 19px; }
.btn--tiffany { background: var(--tiffany); color: var(--blu-notte); box-shadow: 0 10px 22px -12px rgba(8, 192, 225, .7); }
.btn--bordo { background: var(--bianco); color: var(--blu-notte); border-color: var(--blu); }
.btn--bordo-tiffany { background: var(--bianco); color: var(--blu-notte); border-color: var(--tiffany); }
.btn--blu { background: var(--blu); color: var(--bianco); }
.btn__freccia { width: 15px; height: auto; flex: none; }
.btn__freccia--bianca { filter: brightness(0) invert(1); }
.btn__icona { width: 22px; height: auto; flex: none; }
.btn:active { transform: scale(.97); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover:active { transform: scale(.97); }
  .btn--tiffany:hover { box-shadow: 0 16px 28px -14px rgba(8, 192, 225, .85); }
  .btn--bordo:hover, .btn--bordo-tiffany:hover { background: var(--ghiaccio); }
  .btn--blu:hover { box-shadow: var(--ombra); }
  .btn:hover .btn__freccia { transform: translate(2px, -2px); }
  .btn__freccia { transition: transform 200ms var(--ease-out); }
}

/* ── testata ────────────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  height: var(--testata);
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.testata.is-scorsa { background: rgba(255, 255, 255, .97); box-shadow: 0 8px 24px -18px rgba(0, 38, 110, .35); }
.testata__riga { height: 100%; display: flex; align-items: center; gap: 32px; }
.testata__logo { flex: none; width: 150px; align-self: flex-start; margin-top: 10px; transform-origin: top left; transition: transform .35s var(--ease-out); }
.testata__logo img { width: 150px; }
.testata.is-scorsa .testata__logo { transform: scale(.52); }
.testata__menu { margin-left: auto; margin-right: auto; }
.testata__menu ul { display: flex; gap: clamp(16px, 2.3vw, 42px); }
.testata__menu a { font-size: 17px; font-weight: 500; color: var(--blu-notte); padding: 8px 2px; position: relative; }
.testata__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--tiffany); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .testata__menu a:hover::after { transform: scaleX(1); } }
.testata__cta { flex: none; }
.testata__apri { display: none; }

/* menu da telefono */
.menu-telefono {
  position: fixed; inset: 0; z-index: 49;
  height: 100dvh;
  padding: calc(var(--testata) + env(safe-area-inset-top, 0px) + 20px) 24px calc(32px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--bianco) 0%, var(--ghiaccio) 100%);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.menu-telefono.is-aperto { opacity: 1; transform: none; transition-duration: 300ms; }
.menu-telefono__voci a {
  display: block; padding: 14px 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: var(--blu-notte); border-bottom: 1px solid rgba(0, 38, 110, .1);
}
.menu-telefono__voci a:active { color: var(--tiffany-logo); }
.menu-telefono__azioni { display: grid; gap: 12px; margin-top: 28px; }

/* ── hero ───────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--testata));
  padding-top: calc(var(--testata) + 64px);
  padding-bottom: 24px;
  background: var(--bianco) url("/assets/img/sfondo-hero-1672.webp") center top / cover no-repeat;
  overflow: hidden;
}
.hero__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 24px; }
.hero__testo { position: relative; z-index: 2; padding-top: 30px; }
.hero__titolo {
  font-weight: 900;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--blu-notte);
  margin-bottom: 44px;
}
.hero__titolo .sottolineato { isolation: isolate; }
.hero__titolo .sottolineato__segno { left: 18%; bottom: -.42em; width: 78%; }
.hero__sotto { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.25; color: var(--blu-testo); margin-bottom: 34px; font-weight: 400; }
.punti { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 36px; }
.punti li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--blu-notte); }
.punti img { width: auto; height: 32px; }

.hero__visivo { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 740px; justify-self: end; }
.hero__alone {
  position: absolute; inset: 4% 2% 0 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 244, 247, .95), rgba(201, 244, 247, .35) 62%, rgba(201, 244, 247, 0) 100%);
}
.hero__foto {
  position: absolute; left: 1%; top: 13%; width: 70%; aspect-ratio: 5 / 6; object-fit: cover;
  border-radius: 48% 52% 50% 50% / 38% 38% 62% 62%;
  box-shadow: 0 40px 60px -30px rgba(0, 38, 110, .45), 0 0 0 10px rgba(255, 255, 255, .85);
  z-index: 3;
}
.hero__conte { position: absolute; right: -4%; top: 5%; width: 44%; z-index: 2; }
.hero__crema { position: absolute; left: -6%; bottom: -1%; width: 84%; z-index: 5; pointer-events: none; }
.hero__frammenti { position: absolute; left: -11%; top: 22%; width: 96%; z-index: 1; pointer-events: none; }
.hero__frammenti--davanti { z-index: 4; clip-path: inset(0 60% 0 0); }
.hero__scintilla { position: absolute; right: 1%; top: 0; width: 50px; z-index: 5; }
.hero__mano { position: absolute; left: 5%; top: -2%; font-size: 34px; text-align: center; transform: rotate(-8deg); z-index: 5; }
.hero__freccia { position: absolute; left: 29%; top: 2%; width: 54px; transform: scaleX(-1) rotate(-6deg); z-index: 5; }

/* Le foto scontornate: niente forma né bordo, resta l'ombra del contorno. Sono più alte delle foto di prima
   (la coppetta 0,73 e quella della consegna 0,6): più strette, così stanno nel loro riquadro come nel design */
.hero__foto.is-scontornata, .casa__foto.is-scontornata, .frutto__foto.is-scontornata {
  border-radius: 0; box-shadow: none; object-fit: contain; aspect-ratio: auto; height: auto;
  filter: drop-shadow(0 28px 26px rgba(0, 38, 110, .28));
}
.hero__foto.is-scontornata { left: 3%; top: 9%; width: 60%; }
.casa__foto.is-scontornata { left: 14%; top: 0; width: 52%; }

/* ── le nostre bontà ────────────────────────────────────────────────────────── */
.bonta { padding: 40px 0 32px; }
.bonta .titolo-sezione { margin-bottom: 40px; }
.schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); }
.scheda__link { display: block; transition: transform 160ms var(--ease-out); }
.scheda__link:active { transform: scale(.97); transition-duration: 100ms; }
.scheda__foto {
  display: block; overflow: hidden; border-radius: var(--raggio);
  background: var(--scheda); aspect-ratio: 1.3; box-shadow: var(--ombra-leggera);
}
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.scheda__nome {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 18px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--blu-notte);
}
.scheda__descr { display: block; max-width: 34ch; margin: 8px auto 0; text-align: center; font-size: 16px; line-height: 1.4; color: var(--blu-testo); }
.freccia-tonda {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bolla); flex: none; transition: transform 250ms var(--ease-out), background-color 200ms ease;
}
.freccia-tonda img { width: 13px; }
@media (hover: hover) and (pointer: fine) {
  .scheda__link:hover .scheda__foto img { transform: scale(1.05); }
  .scheda__link:hover .freccia-tonda { background: var(--tiffany); transform: translate(2px, -2px); }
}

.striscia {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr);
  margin-top: 44px; min-height: 140px; border-radius: var(--raggio); overflow: hidden; background: var(--nebbia);
}
.striscia__testo { display: flex; align-items: center; gap: 26px; padding: 24px 32px; position: relative; z-index: 2; }
.striscia__icona { width: 72px; flex: none; }
.striscia__testo p { font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; line-height: 1.3; color: var(--blu-notte); }
.striscia__foto { position: relative; }
.striscia__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.striscia__foto::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; z-index: 1;
  background: linear-gradient(90deg, var(--nebbia), rgba(245, 245, 245, 0));
}

/* ── self service ───────────────────────────────────────────────────────────── */
.self { padding: 32px 0 16px; }
.self__pannello {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
  padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 64px);
  border-radius: var(--raggio-grande);
  background: var(--ghiaccio) url("/assets/img/sfondo-self-1940.webp") center / cover no-repeat;
}
.self__testo { position: relative; z-index: 2; align-self: center; }
.self .titolo-sezione { margin-bottom: 52px; }
.passi { display: flex; align-items: flex-start; gap: 18px; }
.passo { flex: 1 1 0; min-width: 0; }
.passo__testa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.passo__num { font-size: clamp(38px, 3.6vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--tiffany-vivo); }
.passo__testa img { height: 44px; width: auto; }
.passo__testo { display: block; font-size: 18px; line-height: 1.3; color: var(--blu-testo); }
.passo__testo strong { display: block; font-size: 22px; font-weight: 800; color: var(--blu-notte); margin-bottom: 2px; }
.passo__nota { display: block; margin-top: 4px; font-size: 16px; }
.passo__freccia { flex: none; padding-top: 22px; }
.link-freccia { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; min-height: 44px; font-size: 18px; font-weight: 800; color: var(--blu-notte); transition: transform 160ms var(--ease-out); }
.link-freccia:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .link-freccia:hover .freccia-tonda { background: var(--tiffany); transform: translate(2px, -2px); } }
.passo__freccia img { width: 38px; opacity: .55; }

.self__visivo { position: relative; min-height: 460px; }
.self__foto {
  position: absolute; left: 12%; top: 2%; width: 74%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 40px 60px -30px rgba(0, 38, 110, .45), 0 0 0 10px rgba(255, 255, 255, .9); z-index: 2;
}
.self__frammenti { position: absolute; left: 0; top: 4%; width: 100%; z-index: 1; pointer-events: none; }
.self__mano { position: absolute; left: -2%; bottom: 4%; font-size: 30px; color: var(--blu-notte); transform: rotate(-8deg); z-index: 4; text-align: center; }
.self__freccia { position: absolute; left: 13%; bottom: 20%; width: 52px; transform: rotate(185deg); z-index: 4; }
.self__riquadro {
  position: absolute; right: -2%; bottom: -4%; width: 44%; z-index: 4;
  border-radius: 22px; overflow: hidden; border: 6px solid var(--bianco); box-shadow: var(--ombra);
  transform: rotate(2deg);
}
.self__riquadro img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.self__raggi { position: absolute; right: -6%; bottom: 22%; width: 64px; transform: rotate(80deg); z-index: 5; }

/* ── specialità ─────────────────────────────────────────────────────────────── */
.specialita { padding: 64px 0 48px; }
.specialita__griglia { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: center; }
.specialita__testo { position: relative; z-index: 2; }
.specialita .titolo-sezione { margin-bottom: 22px; }
.specialita__testo .testo-grande { margin-bottom: 30px; }
.specialita__cucchiaio { width: 80px; margin: 26px 0 0 120px; transform: rotate(-24deg); }
.specialita__scintilla { position: absolute; right: -14%; top: 4%; width: 52px; }
.specialita__foto { border-radius: 28px; overflow: hidden; box-shadow: var(--ombra); aspect-ratio: 1.08; }
.specialita__foto img { width: 100%; height: 100%; object-fit: cover; }
.frutto__scheda {
  position: relative; padding: 34px 34px 30px; border-radius: 32px; overflow: hidden;
  background: linear-gradient(160deg, var(--ghiaccio) 0%, var(--bianco) 70%);
  box-shadow: var(--ombra-leggera);
  display: grid; justify-items: center;
}
.frutto__titolo { justify-self: start; font-weight: 900; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; letter-spacing: -.035em; color: var(--blu-notte); position: relative; z-index: 2; }
.frutto__raggi { position: absolute; right: 10px; top: 54px; width: 56px; transform: rotate(60deg); }
.frutto__riga { display: flex; align-items: flex-start; justify-content: center; gap: 4px; width: 100%; margin: 4px 0 22px; }
.frutto__freccia { flex: none; width: 54px; margin-top: 4px; transform: scaleX(-1) rotate(10deg); }
.frutto__foto { width: 64%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 26px 0 0; box-shadow: 0 20px 40px -22px rgba(0, 38, 110, .5); }
.frutto .btn { width: 100%; }
.frutto__nota { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 15px; color: var(--blu-testo); }
.frutto__nota img { height: 30px; width: auto; flex: none; }

/* ── storia ─────────────────────────────────────────────────────────────────── */
.storia { position: relative; padding: 56px 0 48px; overflow: hidden; }
.storia::after {
  content: ""; position: absolute; right: -10%; bottom: -20%; width: 60%; height: 90%; z-index: -1;
  background: radial-gradient(closest-side, rgba(201, 244, 247, .9), rgba(201, 244, 247, 0));
}
.storia__griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, .75fr); gap: 24px; align-items: center; }
.storia .titolo-sezione { font-size: clamp(34px, 3.5vw, 50px); }
.storia .titolo-sezione { margin-bottom: 24px; }
.storia__testo .testo-medio { margin-bottom: 30px; }
.polaroid-gruppo { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 30px; }
.polaroid-gruppo__raggi { position: absolute; left: 0; top: -10px; width: 74px; }
.polaroid {
  flex: 1 1 0; min-width: 0; max-width: 220px;
  background: var(--bianco); padding: 12px 12px 0; box-shadow: 0 18px 36px -16px rgba(0, 38, 110, .35);
  border-radius: 4px;
}
.polaroid img { width: 100%; aspect-ratio: .86; object-fit: cover; }
.polaroid figcaption { padding: 12px 4px 16px; text-align: center; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--blu-notte); }
.polaroid--1 { transform: rotate(-7deg) translateY(18px); margin-right: -10px; }
.polaroid--2 { transform: rotate(-1deg); z-index: 2; }
.polaroid--3 { transform: rotate(5deg) translateY(14px); margin-left: -10px; }
.storia__conte { position: relative; padding-top: 70px; }
.storia__augusto { width: 100%; max-width: 380px; margin-left: auto; position: relative; z-index: 1; }
.storia__fumetto { position: absolute; left: -4%; top: 0; width: 46%; z-index: 2; transform: rotate(-6deg); }
.storia__scintilla { position: absolute; width: 40px; z-index: 2; }
.storia__scintilla--1 { left: 8%; top: 46%; }
.storia__scintilla--2 { right: -4%; top: 58%; width: 48px; }

/* ── social e contatti ──────────────────────────────────────────────────────── */
.incontro { position: relative; padding: 40px 0 24px; overflow: hidden; }
.incontro__griglia { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: end; }
.incontro .titolo-sezione { margin-bottom: 30px; }
.incontro__raggi { position: relative; display: inline-block; width: .95em; height: auto; top: -.55em; margin-left: .15em; transform: rotate(30deg); }
.video-riga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.video-box { position: relative; border-radius: var(--raggio); overflow: hidden; background: var(--scheda); aspect-ratio: 4 / 5; box-shadow: var(--ombra-leggera); }
.video-box video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.video-box__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: auto; transform: translate(-50%, -50%);
  pointer-events: none; transition: opacity .4s var(--ease-out); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}
.video-box.is-in-onda .video-box__play { opacity: 0; }
.video-box__audio {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-height: 40px; white-space: nowrap;
  padding: 8px 14px; border: 0; border-radius: 999px;
  background: rgba(0, 38, 110, .78); color: var(--bianco); font-size: 12px; font-weight: 700; line-height: 1.2;
  user-select: none; -webkit-user-select: none;
  transition: background-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.video-box__audio:active { transform: translateX(-50%) scale(.97); }
.video-box__audio[aria-pressed="true"] { background: var(--tiffany); color: var(--blu-notte); }

.incontro__contatti { position: relative; padding-right: 96px; padding-bottom: 6px; }
.contatti li { display: flex; align-items: flex-start; gap: 16px; font-size: 18px; line-height: 1.35; color: var(--blu-notte); margin-bottom: 16px; }
.contatti img { width: 30px; height: 30px; object-fit: contain; flex: none; margin-top: 1px; }
.contatti a { border-bottom: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .contatti a:hover { border-bottom-color: currentColor; } }
.incontro__contatti .pulsanti { margin: 30px 0 26px; }
.incontro__contatti .btn { min-width: 170px; }
.social { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.social a { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; color: var(--blu-notte); min-height: 44px; }
.social img { width: 32px; height: 32px; object-fit: contain; }
.incontro__conte { position: absolute; right: calc(-1 * var(--gutter) - 40px); bottom: -10px; width: 190px; pointer-events: none; }

/* ── a casa ─────────────────────────────────────────────────────────────────── */
.casa {
  position: relative; padding: 90px 0 40px; overflow: hidden;
  background: url("/assets/img/sfondo-onda-2172.webp") center 40% / 100% auto no-repeat;
}
.casa__testo { position: relative; z-index: 6; }
.casa__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.casa .titolo-sezione { margin-bottom: 16px; }
.casa__testo .testo-grande { font-size: clamp(18px, 1.6vw, 22px); margin-bottom: 10px; }
.casa__testo .testo-grande:last-of-type { margin-bottom: 34px; }
.link-tel { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 38, 110, .35); white-space: nowrap; }
.casa__visivo { position: relative; aspect-ratio: 1 / .92; width: 100%; }
.casa__foto {
  position: absolute; left: 6%; top: 2%; width: 66%; aspect-ratio: 5 / 6; object-fit: cover;
  border-radius: 52% 48% 50% 50% / 38% 38% 62% 62%;
  box-shadow: 0 40px 60px -30px rgba(0, 38, 110, .45), 0 0 0 10px rgba(255, 255, 255, .9); z-index: 2;
}
.casa__frammenti { position: absolute; left: -2%; top: 14%; width: 92%; z-index: 1; pointer-events: none; }
.casa__frammenti--davanti { z-index: 4; clip-path: inset(0 60% 0 0); }
.casa__crema { position: absolute; left: -2%; bottom: -1%; width: 84%; z-index: 5; pointer-events: none; }
.casa__mano { position: absolute; right: 0; top: 4%; font-size: 36px; color: var(--blu-notte); transform: rotate(-12deg); text-align: center; z-index: 4; }
.casa__freccia { position: absolute; right: 9%; top: 27%; width: 58px; transform: rotate(6deg); z-index: 4; }

/* ── piede ──────────────────────────────────────────────────────────────────── */
.piede { padding: 30px 0 calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--bianco); }
.piede__riga { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; }
.piede__logo img { width: 130px; }
.piede__menu ul { display: flex; flex-wrap: wrap; gap: 8px 34px; }
.piede__menu a { font-size: 16px; color: var(--blu-notte); padding: 6px 0; display: inline-block; }
.piede__ordina { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 4px; }
.piede__ordina a { font-size: 15px; font-weight: 700; color: var(--blu-notte); padding: 6px 0; display: inline-block; }
.piede__nome { font-weight: 800; }
.piede__contatti { display: flex; flex-wrap: wrap; gap: 4px 20px; width: 100%; }
.piede__social { display: flex; gap: 20px; }
.piede__social a { display: grid; place-items: center; width: 44px; height: 44px; }
.piede__social img { width: 34px; height: 34px; object-fit: contain; }
.piede__diritti { margin-left: auto; text-align: right; font-size: 15px; color: var(--blu-notte); }
.piede__legali { display: flex; gap: 26px; justify-content: flex-end; margin-top: 6px; }
.piede__legali a, .piede__fondo a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 38, 110, .3); }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(0, 38, 110, .1); font-size: 13px; color: var(--blu-testo); }
@media (hover: hover) and (pointer: fine) {
  .piede__menu a:hover, .piede__legali a:hover { color: var(--tiffany-logo); }
}

/* ── tablet ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .testata__menu ul { gap: 22px; }
  .testata__menu a { font-size: 16px; }
  .specialita__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .frutto { grid-column: 1 / -1; max-width: 560px; justify-self: center; width: 100%; }
  .storia__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .storia__conte { grid-column: 1 / -1; max-width: 420px; justify-self: center; width: 100%; }
  .incontro__griglia { grid-template-columns: 1fr; }
  .incontro__contatti { max-width: 640px; }
}

/* ── telefono ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --testata: 72px; }
  .testata__menu, .testata__cta { display: none; }
  .testata__riga { justify-content: space-between; }
  .testata__logo, .testata__logo img { width: 86px; }
  .testata__logo { margin-top: 6px; }
  .testata.is-scorsa .testata__logo { transform: scale(.68); }
  .testata__apri {
    display: grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border: 0; border-radius: 50%;
    background: var(--tiffany); user-select: none; -webkit-user-select: none;
  }
  .testata__apri:active { transform: scale(.94); }
  .testata__linee, .testata__linee::before, .testata__linee::after {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--blu-notte);
    transition: transform .25s var(--ease-out), opacity .2s;
  }
  .testata__linee { position: relative; }
  .testata__linee::before, .testata__linee::after { content: ""; position: absolute; left: 0; }
  .testata__linee::before { top: -6px; }
  .testata__linee::after { top: 6px; }
  .testata__apri[aria-expanded="true"] .testata__linee { background: transparent; }
  .testata__apri[aria-expanded="true"] .testata__linee::before { transform: translateY(6px) rotate(45deg); }
  .testata__apri[aria-expanded="true"] .testata__linee::after { transform: translateY(-6px) rotate(-45deg); }
  html.menu-aperto .testata { background: var(--bianco); }
  html.menu-aperto .testata__logo { transform: scale(.68); }

  .hero { padding-top: calc(var(--testata) + 36px); padding-bottom: 40px; background-size: 200% auto; }
  .hero__griglia { grid-template-columns: 1fr; gap: 8px; }
  .hero__testo { padding-top: 22px; }
  .hero__visivo { justify-self: center; max-width: 520px; }
  .punti { margin-top: 28px; }

  .schede {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px;
  }
  .schede::-webkit-scrollbar { display: none; }
  .scheda { flex: 0 0 78%; scroll-snap-align: center; }
  .striscia { grid-template-columns: 1fr; }
  .striscia__foto { min-height: 150px; }
  .striscia__foto::before { inset: 0 0 auto 0; width: auto; height: 36%; background: linear-gradient(180deg, var(--nebbia), rgba(245, 245, 245, 0)); }

  .self__pannello { grid-template-columns: 1fr; }
  .self__visivo { min-height: 0; aspect-ratio: 1 / .95; max-width: 520px; width: 100%; justify-self: center; }

  .casa { background-size: 260% auto; background-position: 30% 0; padding-top: 80px; }
  .casa__griglia { grid-template-columns: 1fr; }
  .casa__visivo { aspect-ratio: 1 / .92; max-width: 520px; justify-self: center; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .occhiello { font-size: 12px; letter-spacing: .22em; margin-bottom: 14px; }
  .hero__titolo { font-size: clamp(38px, 12.2vw, 50px); margin-bottom: 22px; }
  .hero__sotto { margin-bottom: 26px; }
  .pulsanti .btn--grande { flex: 1 1 auto; padding-inline: 22px; font-size: 17px; min-height: 56px; }
  .punti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .punti li { flex-direction: column; text-align: center; font-size: 14px; gap: 6px; }
  .punti img { height: 30px; }
  .hero__visivo { margin-top: 36px; }
  .hero__mano { font-size: 24px; left: 3%; top: -4%; }
  .hero__freccia { width: 38px; left: 31%; top: 0; }
  .hero__scintilla { width: 38px; }

  .bonta { padding-top: 48px; }
  .bonta .titolo-sezione { margin-bottom: 26px; }
  .a-mano--tiffany { font-size: 28px; }
  .scheda__nome { font-size: 18px; gap: 10px; margin-top: 12px; }
  .scheda__descr { font-size: 15px; }
  .freccia-tonda { width: 32px; height: 32px; }
  .freccia-tonda img { width: 11px; }
  .scheda__foto { border-radius: 18px; }
  .striscia { margin-top: 32px; }
  .striscia__testo { padding: 20px; gap: 16px; }
  .striscia__icona { width: 50px; }

  .self { padding: 24px 0; }
  .self__pannello { padding: 36px 20px 30px; border-radius: 28px; }
  .self .titolo-sezione { margin-bottom: 38px; }
  .sottolineato--self .sottolineato__segno { left: 52%; width: 48%; bottom: .2em; }
  .hero { padding-bottom: 8px; }
  .passi { flex-direction: column; gap: 18px; }
  .passo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
  .passo__testa { margin-bottom: 0; gap: 6px; }
  .passo__num { font-size: 36px; }
  .passo__testa img { height: 32px; }
  .passo__freccia { display: none; }
  .passo__testo strong { font-size: 20px; }
  .self__mano { font-size: 23px; left: -2%; bottom: 2%; }
  .self__freccia { width: 36px; left: 12%; bottom: 17%; }

  .specialita { padding: 56px 0 40px; }
  .specialita__griglia { grid-template-columns: 1fr; gap: 26px; }
  .specialita__cucchiaio { display: none; }
  .specialita__scintilla { right: 0; top: 0; width: 40px; }
  .frutto__scheda { padding: 28px 22px 24px; }

  .storia { padding: 56px 0 40px; }
  .storia__griglia { grid-template-columns: 1fr; gap: 30px; }
  .polaroid-gruppo { padding-top: 16px; }
  .polaroid { padding: 7px 7px 0; }
  .polaroid figcaption { font-size: 14px; padding: 8px 2px 10px; }
  .polaroid-gruppo__raggi { width: 50px; top: -16px; }
  .storia__conte { max-width: 300px; padding-top: 56px; }

  .incontro { padding: 30px 0 56px; }
  .video-riga {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scrollbar-width: none;
  }
  .video-riga::-webkit-scrollbar { display: none; }
  .video-box { flex: 0 0 78%; scroll-snap-align: center; }
  .incontro__contatti { padding-right: 0; }
  .contatti li { font-size: 18px; gap: 14px; }
  .contatti img { width: 26px; height: 26px; }
  .incontro__contatti .pulsanti .btn { flex: 1 1 auto; min-width: 0; }
  .incontro__conte { display: none; }

  .casa { padding: 60px 0 40px; }
  .casa .pulsanti .btn--tiffany { flex: 1 1 100%; }
  .casa .pulsanti .btn--bordo { flex: 1 1 100%; }
  .casa__mano { font-size: 26px; top: 0; }
  .casa__freccia { width: 44px; }

  .piede__riga { flex-direction: column; align-items: flex-start; gap: 18px; }
  .piede__menu ul { gap: 4px 22px; }
  .piede__diritti { margin-left: 0; text-align: left; }
  .piede__legali { justify-content: flex-start; }
}



/* ── pagine legali e 404 ────────────────────────────────────────────────────── */
.pagina-interna .testata { background: rgba(255, 255, 255, .97); }
.pagina-interna .testata__logo { transform: scale(.52); }
@media (max-width: 900px) { .pagina-interna .testata__logo { transform: scale(.68); } }
.contenitore--stretto { max-width: 860px; }
.pagina-legale { padding: 56px 0 80px; }
.legale h1 { font-weight: 900; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -.035em; color: var(--blu-notte); margin-bottom: 12px; }
.legale h1 + p { font-size: 15px; color: var(--blu-testo); margin-bottom: 28px; }
.legale h2 { font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; color: var(--blu-notte); margin: 36px 0 12px; }
.legale p, .legale li, .legale td, .legale th { font-size: 17px; line-height: 1.6; color: var(--blu-testo); }
.legale p + p { margin-top: 12px; }
.legale ul { list-style: disc; padding-left: 22px; margin: 10px 0; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--blu); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legale table { width: 100%; border-collapse: collapse; margin: 14px 0; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(0, 38, 110, .12); vertical-align: top; min-width: 120px; }
.legale th { font-weight: 800; color: var(--blu-notte); background: var(--ghiaccio); }
.errore { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding: 20px 0; }
.errore .titolo-sezione { margin-bottom: 18px; }
.errore .testo-medio { margin-bottom: 12px; }
.errore .pulsanti { margin-top: 26px; }
@media (max-width: 640px) {
  .pagina-legale { padding: 32px 0 56px; }
  .errore { grid-template-columns: 1fr; }
  .errore__conte { max-width: 240px; }
}

/* ══ 5-bis · il movimento ══════════════════════════════════════════════════════════
   Come si muove: le regole di Emil Kowalski (09 § 0-bis-2): solo transform/opacity (e le proprietà singole
   translate/scale/rotate), curve --ease-out e --ease-in-out, entrate più lente delle uscite, hover solo col mouse,
   :active al tocco, meno movimento (non zero) con prefers-reduced-motion. */

@keyframes entra-su { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: none; } }
@keyframes traccia { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes foto-entra { from { scale: .93; } to { scale: 1; } }
@keyframes conte-sbuca { from { opacity: 0; translate: 40px 12px; rotate: 7deg; } to { opacity: 1; translate: none; rotate: none; } }
@keyframes conte-saluta { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes esplodono { from { opacity: 0; scale: .78; } to { opacity: 1; scale: 1; } }
@keyframes fluttuano { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1.4deg); } }
@keyframes brilla { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.78) rotate(20deg); opacity: .7; } }
@keyframes crema-entra { from { opacity: 0; scale: .9 .7; } to { opacity: 1; scale: 1; } }
@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ondeggia { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }

/* la prima schermata entra al caricamento, col CSS (senza aspettare il JavaScript) */
.hero__testo .occhiello { animation: entra-su 800ms var(--ease-out) 60ms both; }
.hero__titolo .riga { display: inline-block; animation: entra-su 900ms var(--ease-out) both; }
.hero__titolo .riga:nth-child(1) { animation-delay: 140ms; }
.hero__titolo .riga:nth-child(2) { animation-delay: 220ms; }
.hero__titolo .riga:nth-child(3) { animation-delay: 300ms; }
.hero__titolo .sottolineato__segno { animation: traccia 800ms var(--ease-out) 700ms both; }
.hero__sotto { animation: entra-su 800ms var(--ease-out) 360ms both; }
.hero__testo .pulsanti { animation: entra-su 800ms var(--ease-out) 450ms both; }
.punti li { animation: entra-su 700ms var(--ease-out) both; }
.punti li:nth-child(1) { animation-delay: 560ms; }
.punti li:nth-child(2) { animation-delay: 620ms; }
.punti li:nth-child(3) { animation-delay: 680ms; }

/* la hero prende vita: la coppetta (mai da opacity 0), il Conte che sbuca e saluta, i frammenti che esplodono */
.hero__foto { animation: foto-entra 1100ms var(--ease-out) both; }
.hero__conte { transform-origin: 40% 100%; animation: conte-sbuca 1000ms var(--ease-out) 250ms both, conte-saluta 5s var(--ease-in-out) 1.6s infinite; }
.hero__frammenti { animation: esplodono 1000ms var(--ease-out) 150ms both, fluttuano 6s var(--ease-in-out) 1.2s infinite; }
.hero__frammenti--davanti { animation: esplodono 1000ms var(--ease-out) 250ms both, fluttuano 7s var(--ease-in-out) 1.9s infinite; }
.hero__crema { transform-origin: 50% 80%; animation: crema-entra 900ms var(--ease-out) 300ms both; }
.hero__scintilla { animation: brilla 3.2s var(--ease-in-out) 1s infinite; }
.hero__mano { animation: entra-su 800ms var(--ease-out) 900ms both; }
.hero__freccia { animation: traccia 700ms var(--ease-out) 1150ms both; }

/* le sezioni arrivano mentre si scorre (.reveal → .in, una volta sola) */
html.js .reveal {
  opacity: 0; translate: 0 32px;
  transition: opacity 800ms var(--ease-out), translate 800ms var(--ease-out), scale 800ms var(--ease-out);
  transition-delay: var(--ritardo, 0ms);
}
html.js .reveal.in { opacity: 1; translate: none; }
html.js .pop.reveal { translate: none; scale: .9; transform-origin: 80% 100%; }
html.js .pop.reveal.in { scale: 1; }

/* altre cose vive, poche e lente */
.storia__augusto { transform-origin: 50% 100%; animation: ondeggia 6s var(--ease-in-out) infinite; }
.storia__scintilla--1 { animation: brilla 3.6s var(--ease-in-out) .4s infinite; }
.storia__scintilla--2 { animation: brilla 4.2s var(--ease-in-out) 1.4s infinite; }
.casa__foto { animation: galleggia 6s var(--ease-in-out) infinite; }

/* risposte al mouse (solo col mouse) e al dito */
.polaroid { transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.video-box video { transition: transform 500ms var(--ease-out); }
.self__riquadro { transition: transform 300ms var(--ease-out); }
.frutto__foto { transition: transform 400ms var(--ease-out); }
.social a img, .piede__social img { transition: transform 200ms var(--ease-out); }
.social a:active, .piede__social a:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .polaroid-gruppo .polaroid:hover { transform: rotate(0deg) translateY(-10px) scale(1.04); z-index: 3; box-shadow: 0 26px 44px -18px rgba(0, 38, 110, .42); }
  .video-box:hover video { transform: scale(1.04); }
  .self__riquadro:hover { transform: rotate(0deg) scale(1.03); }
  .frutto__scheda:hover .frutto__foto { transform: scale(1.05) rotate(-4deg); }
  .social a:hover img, .piede__social a:hover img { transform: translateY(-3px); }
}

/* il menu da telefono: le voci arrivano una dopo l'altra, e se ne vanno in fretta */
.menu-telefono__voci li, .menu-telefono__azioni { opacity: 0; translate: 0 18px; transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out); }
.menu-telefono.is-aperto .menu-telefono__voci li, .menu-telefono.is-aperto .menu-telefono__azioni { opacity: 1; translate: none; transition-duration: 400ms; }
.menu-telefono.is-aperto .menu-telefono__voci li:nth-child(1) { transition-delay: 60ms; }
.menu-telefono.is-aperto .menu-telefono__voci li:nth-child(2) { transition-delay: 110ms; }
.menu-telefono.is-aperto .menu-telefono__voci li:nth-child(3) { transition-delay: 160ms; }
.menu-telefono.is-aperto .menu-telefono__voci li:nth-child(4) { transition-delay: 210ms; }
.menu-telefono.is-aperto .menu-telefono__voci li:nth-child(5) { transition-delay: 260ms; }
.menu-telefono.is-aperto .menu-telefono__azioni { transition-delay: 320ms; }

/* meno movimento, non zero: restano le dissolvenze, via gli spostamenti e i movimenti continui */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @keyframes entra-su { from { opacity: 0; } to { opacity: 1; } }
  @keyframes conte-sbuca { from { opacity: 0; } to { opacity: 1; } }
  @keyframes esplodono { from { opacity: 0; } to { opacity: 1; } }
  @keyframes crema-entra { from { opacity: 0; } to { opacity: 1; } }
  @keyframes traccia { from { opacity: 0; } to { opacity: 1; } }
  @keyframes foto-entra { from { opacity: 1; } to { opacity: 1; } }
  @keyframes conte-saluta { from { transform: none; } to { transform: none; } }
  @keyframes fluttuano { from { transform: none; } to { transform: none; } }
  @keyframes brilla { from { transform: none; opacity: 1; } to { transform: none; opacity: 1; } }
  @keyframes galleggia { from { transform: none; } to { transform: none; } }
  @keyframes ondeggia { from { transform: none; } to { transform: none; } }
  html.js .reveal, html.js .pop.reveal { translate: none; scale: none; transition: opacity 500ms ease; transition-delay: 0ms; }
  .menu-telefono__voci li, .menu-telefono__azioni { translate: none; }
  .scheda__link:active, .btn:active { transform: none; }
}

/* la barra fissa da telefono: Chiama · Ordina a casa (extra.md), lontana dalla barra dell'iPhone */
.barra-telefono { display: none; }
@media (max-width: 767px) {
  .barra-telefono {
    position: fixed; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .97); box-shadow: 0 12px 30px -10px rgba(0, 38, 110, .35);
  }
  .barra-telefono .btn { min-height: 48px; padding: 10px 16px; }
  html.menu-aperto .barra-telefono { display: none; }
  .piede { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* la testata: col menu della mappa (sei voci) il menu a tutto schermo arriva sotto i 1080 px, così le voci non vanno a capo */
@media (max-width: 1080px) {
  :root { --testata: 72px; }
  .testata__menu, .testata__cta { display: none; }
  .testata__riga { justify-content: space-between; }
  .testata__logo, .testata__logo img { width: 86px; }
  .testata__logo { margin-top: 6px; }
  .testata.is-scorsa .testata__logo, html.menu-aperto .testata__logo { transform: scale(.68); }
  .testata__apri {
    display: grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border: 0; border-radius: 50%;
    background: var(--tiffany); user-select: none; -webkit-user-select: none;
  }
  .testata__apri:active { transform: scale(.94); }
  .testata__linee, .testata__linee::before, .testata__linee::after {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--blu-notte);
    transition: transform 250ms var(--ease-out), opacity 200ms;
  }
  .testata__linee { position: relative; }
  .testata__linee::before, .testata__linee::after { content: ""; position: absolute; left: 0; }
  .testata__linee::before { top: -6px; }
  .testata__linee::after { top: 6px; }
  .testata__apri[aria-expanded="true"] .testata__linee { background: transparent; }
  .testata__apri[aria-expanded="true"] .testata__linee::before { transform: translateY(6px) rotate(45deg); }
  .testata__apri[aria-expanded="true"] .testata__linee::after { transform: translateY(-6px) rotate(-45deg); }
  html.menu-aperto .testata { background: var(--bianco); }
  .pagina-interna .testata__logo { transform: scale(.68); }
}

/* ══ 6-bis · le pagine interne: gli stessi pezzi della home, ricomposti ═════════════════ */

/* la voce della pagina in cui sei */
.testata__menu a[aria-current="page"] { font-weight: 800; }
.testata__menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-telefono__voci a[aria-current="page"] { color: var(--tiffany-logo); }

/* apertura della pagina: come la hero della home, più corta */
.pagina-hero {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--testata));
  padding: calc(var(--testata) + 72px) 0 40px;
  background: var(--bianco) url("/assets/img/sfondo-hero-1672.webp") center top / cover no-repeat;
}
.pagina-hero__griglia { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center; }
.pagina-hero__testo { position: relative; z-index: 2; }
.pagina-hero__titolo {
  font-weight: 900; font-size: clamp(38px, 4.6vw, 66px); line-height: .98; letter-spacing: -.04em;
  color: var(--blu-notte); margin-bottom: 26px;
}
.pagina-hero__testo .testo-medio + .testo-medio { margin-top: 12px; }
.pagina-hero__testo .pulsanti { margin-top: 32px; }
.pagina-hero__visivo { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 560px; justify-self: center; }
.pagina-hero__foto {
  position: absolute; left: 10%; top: 4%; width: 78%; aspect-ratio: 5 / 6; object-fit: cover; z-index: 2;
  border-radius: 48% 52% 50% 50% / 38% 38% 62% 62%;
  box-shadow: 0 40px 60px -30px rgba(0, 38, 110, .45), 0 0 0 10px rgba(255, 255, 255, .88);
}
.pagina-hero__frammenti { position: absolute; left: -6%; top: 18%; width: 112%; z-index: 1; pointer-events: none; }
.pagina-hero__scintilla { position: absolute; right: 2%; top: 2%; width: 48px; z-index: 3; }
.pagina-hero__raggi { position: absolute; left: 0; bottom: 14%; width: 64px; z-index: 3; transform: rotate(-120deg); }
.pagina-hero__testo > * { animation: entra-su 800ms var(--ease-out) both; }
.pagina-hero__testo > :nth-child(2) { animation-delay: 90ms; }
.pagina-hero__testo > :nth-child(3) { animation-delay: 170ms; }
.pagina-hero__testo > :nth-child(4) { animation-delay: 250ms; }
.pagina-hero__testo > :nth-child(5) { animation-delay: 330ms; }
.pagina-hero__foto { animation: foto-entra 1100ms var(--ease-out) both; }
.pagina-hero__frammenti { animation: esplodono 1000ms var(--ease-out) 150ms both, fluttuano 6s var(--ease-in-out) 1.2s infinite; }
.pagina-hero__scintilla, .pagina-hero__raggi { animation: brilla 3.4s var(--ease-in-out) .8s infinite; }

/* una sezione */
.sezione { position: relative; padding: 64px 0; }
.sezione--stretta { padding: 40px 0; }
.prosa .titolo-sezione { margin-bottom: 20px; }
.prosa .testo-medio + .testo-medio, .prosa .testo-medio + .lista, .prosa .lista + .testo-medio { margin-top: 12px; }
.prosa .pulsanti, .prosa .link-freccia { margin-top: 26px; }
.titolo-sezione--pagina { font-size: clamp(32px, 3.6vw, 52px); }

/* testo e immagine affiancati (da telefono uno sotto l'altro) */
.dueparti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dueparti--inverso > :first-child { order: 2; }
.dueparti--largo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }

/* il pannello color Tiffany della home */
.pannello {
  position: relative; padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px);
  border-radius: var(--raggio-grande);
  background: var(--ghiaccio) url("/assets/img/sfondo-self-1940.webp") center / cover no-repeat;
}

/* le immagini */
.foto-riquadro { border-radius: 28px; overflow: hidden; box-shadow: var(--ombra); background: var(--scheda); }
.foto-riquadro img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform 500ms var(--ease-out); }
.foto-riquadro--larga img { aspect-ratio: 5 / 2; }
.foto-riquadro--quattroterzi img { aspect-ratio: 4 / 3; }
.foto-uovo { position: relative; max-width: 460px; justify-self: center; width: 100%; }
.foto-uovo__foto {
  width: 100%; aspect-ratio: 5 / 6; object-fit: cover; position: relative; z-index: 2;
  border-radius: 48% 52% 50% 50% / 38% 38% 62% 62%;
  box-shadow: 0 40px 60px -30px rgba(0, 38, 110, .45), 0 0 0 10px rgba(255, 255, 255, .88);
}
.foto-uovo__frammenti { position: absolute; left: -16%; top: 12%; width: 132%; z-index: 1; pointer-events: none; }
.foto-tonda { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 20px 40px -22px rgba(0, 38, 110, .5), 0 0 0 8px rgba(255, 255, 255, .9); }
@media (hover: hover) and (pointer: fine) {
  .foto-riquadro:hover img { transform: scale(1.04); }
}

/* una riga di foto o video: griglia da computer, riga che scorre col dito da telefono */
.riga-media { display: grid; grid-template-columns: repeat(var(--colonne, 3), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.riga-media--due { --colonne: 2; }
.riga-media--quattro { --colonne: 4; }
.riga-media .video-box { aspect-ratio: 4 / 5; }

/* il carosello delle tavole del fumetto */
.carosello {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px 2px 22px;
}
.carosello::-webkit-scrollbar { display: none; }
.carosello .tavola { flex: 0 0 clamp(220px, 24vw, 300px); scroll-snap-align: start; }
.tavola { background: var(--bianco); padding: 10px; border-radius: 6px; box-shadow: 0 18px 36px -16px rgba(0, 38, 110, .35); transition: transform 300ms var(--ease-out); }
.tavola img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .tavola:hover { transform: translateY(-6px) rotate(-1deg); } }
.carosello__aiuto { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; color: var(--blu-testo); }
.carosello__aiuto img { width: 22px; height: auto; }

/* le schede piccole con l'icona (come la scheda della fragola) */
.schedine { display: grid; grid-template-columns: repeat(var(--colonne, 2), minmax(0, 1fr)); gap: 16px; }
.schedina {
  position: relative; padding: 22px 22px 20px; border-radius: 24px; background: var(--bianco);
  box-shadow: var(--ombra-leggera); transition: transform 250ms var(--ease-out);
}
.schedina__icona { height: 34px; width: auto; margin-bottom: 12px; }
.schedina__titolo { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--blu-notte); margin-bottom: 4px; }
.schedina p { font-size: 16px; line-height: 1.45; color: var(--blu-testo); }
@media (hover: hover) and (pointer: fine) { .schedina:hover { transform: translateY(-4px); } }

/* gli elenchi */
.lista { display: grid; gap: 10px; }
.lista li { position: relative; padding-left: 26px; font-size: 18px; line-height: 1.4; color: var(--blu-testo); }
.lista li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--tiffany); }
.lista strong { color: var(--blu-notte); font-weight: 800; }
.etichette { display: flex; flex-wrap: wrap; gap: 10px; }
.etichette li { padding: 10px 18px; border-radius: 999px; border: 2px solid var(--tiffany); background: var(--bianco); font-weight: 700; font-size: 16px; color: var(--blu-notte); }

/* la classifica del Conte */
.classifica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-top: 18px; }
.classifica li { display: flex; align-items: baseline; gap: 10px; font-size: 17px; line-height: 1.35; color: var(--blu-testo); }
.classifica__num { flex: none; min-width: 2.2em; font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: var(--tiffany-vivo); }
.classifica li:last-child .classifica__num, .classifica li:last-child { color: var(--blu-notte); font-weight: 700; }

/* recensione e domande */
.recensione { padding: 22px 24px; border-radius: 24px; background: var(--bianco); box-shadow: var(--ombra-leggera); border-left: 6px solid var(--tiffany); }
.recensione p { font-size: 19px; font-weight: 700; color: var(--blu-notte); }
.recensione a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 38, 110, .3); }
.domande { display: grid; gap: 12px; max-width: 860px; }
.domanda { border-radius: 22px; background: var(--bianco); box-shadow: var(--ombra-leggera); overflow: hidden; }
.domanda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer;
  font-weight: 800; font-size: 18px; color: var(--blu-notte); list-style: none; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary .freccia-tonda { transition: transform 250ms var(--ease-out), background-color 200ms ease; }
.domanda[open] summary .freccia-tonda { transform: rotate(90deg); background: var(--tiffany); }
.domanda summary:active { transform: scale(.99); }
.domanda p { padding: 0 22px 20px; font-size: 17px; line-height: 1.5; color: var(--blu-testo); }
.domanda a { text-decoration: underline; text-underline-offset: 3px; }

/* gli orari, giorno per giorno */
.orari { display: grid; gap: 0; }
.orari li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid rgba(0, 38, 110, .1); font-size: 17px; color: var(--blu-notte); }
.orari li:last-child { border-bottom: 0; }

/* la chiusura delle pagine: la sezione con l'onda della home, col Conte che si affaccia */
.casa__conte { position: absolute; right: 4%; bottom: 0; width: min(300px, 52%); z-index: 2; pointer-events: none; }
.casa--chiusura .casa__visivo { aspect-ratio: auto; min-height: 380px; }
.casa--chiusura .titolo-sezione { font-size: clamp(32px, 3.6vw, 52px); }

@media (max-width: 900px) {
  .pagina-hero { padding-top: calc(var(--testata) + 64px); }
  .striscia--alta .striscia__foto { min-height: 240px; }
  .pagina-hero__griglia { grid-template-columns: 1fr; gap: 24px; }
  .pagina-hero__visivo { max-width: 420px; }
  .dueparti, .dueparti--largo { grid-template-columns: 1fr; gap: 28px; }
  .dueparti--inverso > :first-child { order: 0; }
  .riga-media--quattro { --colonne: 2; }
  .casa--chiusura .casa__visivo { min-height: 260px; }
  .casa--chiusura .casa__conte { width: min(220px, 56%); right: 8%; }
}
@media (max-width: 640px) {
  .sezione { padding: 44px 0; }
  .pagina-hero__titolo { font-size: clamp(32px, 9.6vw, 40px); }
  .riga-media, .riga-media--due, .riga-media--quattro {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px;
  }
  .riga-media::-webkit-scrollbar { display: none; }
  .riga-media > * { flex: 0 0 78%; scroll-snap-align: center; }
  .carosello { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .carosello .tavola { flex-basis: 74%; scroll-snap-align: center; }
  .schedine { grid-template-columns: 1fr; }
  .classifica { grid-template-columns: 1fr; }
  .lista li, .orari li { font-size: 16px; }
  .etichette li { font-size: 15px; padding: 8px 14px; }
}

/* pezzi delle pagine interne, ricavati da quelli della home */
.prosa--centro { max-width: 780px; margin-inline: auto; text-align: center; }
.prosa--larga { max-width: 860px; }
.passi--colonna { flex-direction: column; gap: 18px; margin-top: 28px; }
.passi--colonna .passo { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; }
.passi--colonna .passo__testa { margin-bottom: 0; }
.schede--due { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.scheda__corpo .foto-riquadro { margin-bottom: 26px; }
.scheda__corpo .titolo-sezione { margin-bottom: 14px; }
.scheda__corpo .testo-medio + .testo-medio { margin-top: 10px; }
.tonde { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); align-items: center; max-width: 520px; justify-self: center; width: 100%; }
.tonde .foto-tonda:nth-child(2) { margin-top: 70px; }
.tonde__scintilla { position: absolute; right: 2%; top: -8%; width: 48px; animation: brilla 3.6s var(--ease-in-out) infinite; }
.conte-presenta { position: relative; max-width: 340px; width: 100%; justify-self: center; padding-top: 40px; }
.conte-presenta .tavola { rotate: -3deg; }
.conte-presenta--destra .tavola { rotate: 3deg; }
.conte-presenta__fumetto { position: absolute; left: -26%; top: -6%; width: 54%; z-index: 2; rotate: -8deg; }
.conte-presenta__scintilla { position: absolute; right: -10%; bottom: 12%; width: 44px; animation: brilla 3.4s var(--ease-in-out) .6s infinite; }
.schedine--grandi { --colonne: 2; gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.schedine--grandi .schedina { padding: clamp(24px, 3vw, 40px); }
.schedine--grandi .titolo-sezione { margin-bottom: 16px; }
.schedine--grandi .schedina__icona { height: 40px; }
.contatti--pagina { margin: 6px 0 16px; }
.contatti--pagina li { font-size: 18px; margin-bottom: 12px; }
.contatti--pagina a { overflow-wrap: anywhere; }
.social--pagina { margin-top: 22px; }
.video-singolo { position: relative; max-width: 380px; width: 100%; justify-self: center; }
.video-singolo__scintilla { position: absolute; right: -12%; top: -6%; width: 50px; animation: brilla 3.4s var(--ease-in-out) infinite; }
.striscia--alta { min-height: 360px; }
.striscia--alta .striscia__testo { padding: clamp(28px, 4vw, 48px); }
.striscia--alta .striscia__foto img { object-position: center; }
.striscia--alta .striscia__foto::before { width: 22%; }
.striscia__titolo { font-weight: 900; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.03em; color: var(--blu-notte); margin-bottom: 8px; }
.striscia .link-freccia { margin-top: 12px; }
.casa--chiusura .link-freccia { margin-top: 18px; }
@media (max-width: 900px) {
  .schede--due, .schedine--grandi { grid-template-columns: 1fr; }
  .conte-presenta { max-width: 300px; }
  .conte-presenta__fumetto { left: -12%; }
}
@media (max-width: 640px) {
  .passi--colonna .passo { grid-template-columns: 96px minmax(0, 1fr); }
  .tonde .foto-tonda:nth-child(2) { margin-top: 40px; }
  .video-singolo { max-width: 300px; }
  .video-singolo__scintilla { right: -4%; }
}
.recensione__chi { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; color: var(--blu-testo); }
@media (max-width: 640px) {
  .pagina-sezione .testo-medio { font-size: 17px; line-height: 1.45; }
  .pagina-sezione .pannello { padding: 32px 18px; border-radius: 28px; }
  .pagina-sezione .striscia__testo p { font-size: 16px; }
  .pagina-sezione .schede--due .scheda { flex-basis: 88%; }
  .domanda p { font-size: 16px; padding: 0 18px 18px; }
  .domanda summary { padding: 16px 18px; font-size: 17px; }
}
@media (max-width: 640px) {
  .passi--colonna .passo { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
  .passi--colonna .passo__testa img { height: 26px; }
  .passi--colonna .passo__num { font-size: 32px; }
  .domanda p { font-size: 15px; padding: 0 16px 16px; }
}
@media (max-width: 900px) {
  .casa--chiusura .casa__visivo { min-height: 0; padding-top: 12px; }
  .casa--chiusura .casa__conte { position: relative; right: auto; bottom: auto; display: block; margin: 0 auto; width: min(220px, 56%); }
}

/* ════════════════════════════════════════════════════════════════════════════════════
   6-quater · IL SALTO DI LIVELLO (Design/SALTO-DI-LIVELLO.md)
   Stessa struttura, stesso copy, stesso kit, stessi colori e caratteri: cambia la qualità grafica.
   Tutto in CSS, sopra quello che c'è: un passo indietro = togliere questo blocco.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* ── tipografia: titoli compatti e bilanciati, paragrafi senza parole sole ── */
.titolo-sezione, .pagina-hero__titolo, .frutto__titolo, .striscia__titolo { text-wrap: balance; }
.titolo-sezione { letter-spacing: -.04em; line-height: .95; }
.testo-medio, .testo-grande, .hero__sotto, .scheda__descr, .schedina p, .domanda p, .lista li { text-wrap: pretty; }
.hero__titolo { line-height: .88; margin-bottom: 40px; }
.hero__sotto { font-weight: 500; max-width: 30ch; }

/* ── occhielli: pillola bianca col bordo Tiffany e il punto ── */
.occhiello, .occhiello--tiffany {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  padding: 8px 16px 8px 13px; border-radius: 999px;
  background: var(--bianco); border: 1px solid rgba(86, 228, 232, .75);
  box-shadow: 0 8px 18px -12px rgba(0, 38, 110, .35);
  font-size: 12px; letter-spacing: .22em; color: var(--blu-notte); margin-bottom: 22px;
}
.occhiello::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tiffany-vivo); box-shadow: 0 0 0 4px rgba(86, 228, 232, .25); }

/* ── pulsanti: la freccia del kit dentro un cerchio ── */
.btn .btn__freccia {
  box-sizing: content-box; width: 12px; height: 12px; object-fit: contain; padding: 8px; margin-right: -14px;
  border-radius: 50%; background: var(--bianco); transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.btn--bordo .btn__freccia, .btn--bordo-tiffany .btn__freccia { background: var(--bolla); }
.btn--blu .btn__freccia { background: rgba(255, 255, 255, .16); }
.btn--tiffany { box-shadow: 0 14px 28px -14px rgba(8, 192, 225, .9), inset 0 -2px 0 rgba(0, 38, 110, .08); }
.btn--grande { padding-inline: 30px 34px; }

/* ── la hero della home: disco e anello dietro la coppetta, voci in pillole ── */
@keyframes gira { to { transform: rotate(360deg); } }
.hero__visivo::before, .hero__visivo::after, .pagina-hero__visivo::before, .pagina-hero__visivo::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.hero__visivo::before { left: -6%; top: 14%; width: 84%; aspect-ratio: 1; background: radial-gradient(circle at 40% 35%, var(--bianco) 0%, var(--ghiaccio) 55%, var(--cielo) 100%); box-shadow: inset 0 -30px 60px -30px rgba(8, 192, 225, .35); }
.hero__visivo::after { left: -11%; top: 7%; width: 96%; aspect-ratio: 1; border: 2px dashed rgba(59, 219, 227, .7); animation: gira 70s linear infinite; }
.hero__alone { z-index: 0; }
.punti { gap: 10px; }
.punti li {
  padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--bianco);
  box-shadow: 0 10px 22px -14px rgba(0, 38, 110, .4); font-weight: 600; font-size: 14px;
}
.punti img { height: 26px; }

/* ── le aperture delle pagine interne: la stessa famiglia della hero ── */
.pagina-hero { padding-bottom: 72px; }
.pagina-hero__titolo { font-size: clamp(38px, 4.4vw, 64px); line-height: .94; letter-spacing: -.045em; }
.pagina-hero__visivo::before { left: 2%; top: 8%; width: 92%; aspect-ratio: 1; background: radial-gradient(circle at 40% 35%, var(--bianco) 0%, var(--ghiaccio) 55%, var(--cielo) 100%); }
.pagina-hero__visivo::after { left: -4%; top: 2%; width: 104%; aspect-ratio: 1; border: 2px dashed rgba(59, 219, 227, .7); animation: gira 70s linear infinite; }
.pagina-hero__foto { z-index: 2; }

/* ── ritmo: fasce color ghiaccio e una fascia blu notte per pagina ── */
.pagina-self-service #topping, .pagina-specialita #frutti, .pagina-crepes-e-waffle #crepes,
.pagina-chi-siamo #locale, .pagina-contatti #orari {
  background: linear-gradient(180deg, var(--ghiaccio) 0%, rgba(234, 251, 254, .55) 100%);
  margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 4vw, 56px);
}
#dove-siamo, .pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-crepes-e-waffle #waffle,
.pagina-chi-siamo #in-gelateria, .pagina-contatti #domande {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 0%, #012E7F 0%, var(--blu-notte) 55%) ;
  margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 4vw, 56px);
  color: var(--bianco);
}
#dove-siamo::before, .pagina-self-service #classifica::before, .pagina-specialita #cannoli::before, .pagina-crepes-e-waffle #waffle::before,
.pagina-chi-siamo #in-gelateria::before, .pagina-contatti #domande::before {
  content: ""; position: absolute; z-index: -1; right: -10%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(86, 228, 232, .22), rgba(86, 228, 232, 0));
}
:is(#dove-siamo, .pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-crepes-e-waffle #waffle, .pagina-chi-siamo #in-gelateria, .pagina-contatti #domande) :is(.titolo-sezione, h2, h3) { color: var(--bianco); }
:is(#dove-siamo, .pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-crepes-e-waffle #waffle, .pagina-chi-siamo #in-gelateria, .pagina-contatti #domande) :is(.testo-medio, .testo-grande, .contatti li, .classifica li, .social a, .link-freccia) { color: rgba(255, 255, 255, .9); }
:is(#dove-siamo, .pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-crepes-e-waffle #waffle, .pagina-chi-siamo #in-gelateria, .pagina-contatti #domande) .occhiello { background: rgba(255, 255, 255, .08); color: var(--bianco); border-color: rgba(86, 228, 232, .6); box-shadow: none; }
:is(#dove-siamo, .pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-crepes-e-waffle #waffle, .pagina-chi-siamo #in-gelateria, .pagina-contatti #domande) .video-box { box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .55); }
/* sul blu: le icone del kit in cerchi bianchi, i pulsanti chiari */
#dove-siamo .contatti img, #dove-siamo .social img {
  box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 50%; background: var(--bianco); object-fit: contain;
}
#dove-siamo .contatti li { align-items: center; }
#dove-siamo .contatti a { color: var(--bianco); }
#dove-siamo .btn--blu { background: var(--tiffany); color: var(--blu-notte); }
#dove-siamo .btn--blu .btn__freccia--bianca { filter: none; background: var(--bianco); }
#dove-siamo .btn--bordo { background: transparent; color: var(--bianco); border-color: rgba(255, 255, 255, .7); }
#dove-siamo .btn--bordo .btn__icona { box-sizing: content-box; width: 16px; height: 16px; padding: 5px; border-radius: 50%; background: var(--bianco); }
#dove-siamo { padding: 88px 0 72px; margin-top: 24px; }
.pagina-self-service #classifica .classifica__num { color: var(--tiffany); }
.pagina-self-service #classifica .classifica li:last-child { color: var(--bianco); }
.pagina-self-service #classifica .classifica li:last-child .classifica__num { color: var(--tiffany); }
.pagina-self-service #classifica .classifica li { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.pagina-self-service #classifica .classifica li:last-child { background: rgba(86, 228, 232, .18); box-shadow: inset 0 0 0 1px rgba(86, 228, 232, .5); }
.pagina-contatti #domande .domanda { box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .6); }
.pagina-contatti #domande .domande { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
:is(.pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-crepes-e-waffle #waffle, .pagina-chi-siamo #in-gelateria, .pagina-contatti #domande) { padding: 96px 0; }

/* ── immagini: la cornice bianca della polaroid e le coppie a scalino ── */
.riga-media .foto-riquadro, .riga-media .video-box, .video-singolo .video-box, .scheda__corpo .foto-riquadro,
.dueparti > .foto-riquadro { border: 6px solid var(--bianco); }
.riga-media--due > :nth-child(1) { rotate: -1.5deg; }
.riga-media--due > :nth-child(2) { rotate: 1.5deg; margin-top: 56px; }
.riga-media:not(.riga-media--due):not(.riga-media--quattro) > :nth-child(2) { margin-top: 44px; }
.riga-media--quattro > :nth-child(even) { margin-top: 44px; }
.riga-media--quattro > :nth-child(odd) { rotate: -1deg; }
.riga-media--quattro > :nth-child(even) { rotate: 1deg; }
.video-singolo .video-box { rotate: 2deg; }
.dueparti > .foto-riquadro { rotate: 1.5deg; }
.carosello .tavola:nth-child(odd) { rotate: -1.5deg; }
.carosello .tavola:nth-child(even) { rotate: 1.5deg; }
.carosello { padding-top: 16px; padding-bottom: 28px; }
.foto-tonda { outline: 2px dashed rgba(59, 219, 227, .7); outline-offset: 12px; }

/* ── schede della home: oggetti interi, la centrale a scalino ── */
.schede:not(.schede--due) .scheda {
  background: var(--bianco); border-radius: 30px; padding: 12px 12px 24px;
  box-shadow: 0 24px 44px -28px rgba(0, 38, 110, .45), 0 0 0 1px rgba(0, 38, 110, .05);
}
.schede:not(.schede--due) .scheda__foto { border-radius: 22px; box-shadow: none; }
.schede:not(.schede--due) .scheda__nome { justify-content: space-between; padding: 0 10px; margin-top: 20px; font-size: 22px; }
.schede:not(.schede--due) .scheda__descr { text-align: left; max-width: none; margin: 8px 10px 0; }
.schede--due .scheda { background: var(--bianco); border-radius: 30px; padding: 12px 12px 30px; box-shadow: 0 24px 44px -28px rgba(0, 38, 110, .45); }
.schede--due .scheda__corpo > :not(figure) { padding-inline: 16px; }
.schede--due .scheda__corpo .foto-riquadro { border: 0; border-radius: 22px; box-shadow: none; }
.bonta .titolo-sezione { margin-bottom: 48px; }

/* ── striscia, specialità, schedine, orari, recensione ── */
#banco.striscia { min-height: 190px; }
#banco .striscia__testo p { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -.015em; }
.striscia { box-shadow: inset 0 0 0 1px rgba(0, 38, 110, .05); }
.pagina-specialita #borsette .striscia, .pagina-self-service #creme .striscia { background: var(--ghiaccio); }
.pagina-specialita #borsette .striscia__foto::before, .pagina-self-service #creme .striscia__foto::before { background: linear-gradient(90deg, var(--ghiaccio), rgba(234, 251, 254, 0)); }
.specialita__foto { border: 10px solid var(--bianco); border-radius: 22px; rotate: -2deg; box-shadow: 0 30px 50px -26px rgba(0, 38, 110, .5); }
.frutto__scheda {
  border: 2px solid transparent;
  background: linear-gradient(160deg, var(--ghiaccio) 0%, var(--bianco) 70%) padding-box,
              linear-gradient(150deg, var(--tiffany) 0%, rgba(86, 228, 232, .15) 60%, var(--tiffany-vivo) 100%) border-box;
}
.schedina { border: 1px solid rgba(0, 38, 110, .06); }
.schedina__icona, .schedine--grandi .schedina__icona {
  box-sizing: content-box; width: 30px; height: 30px; object-fit: contain; padding: 15px; border-radius: 50%;
  background: var(--bolla); margin-bottom: 16px;
}
.schedina__titolo { font-size: 20px; }
.orari li span:last-child { font-weight: 700; }
.orari li:nth-child(n+5) { background: var(--ghiaccio); border-radius: 12px; border-bottom-color: transparent; margin-top: 4px; padding-inline: 12px; }
.recensione { position: relative; overflow: hidden; padding-right: 90px; }
.recensione::after {
  content: "\201C"; position: absolute; right: 18px; top: -18px; font-family: var(--carattere-mano); font-size: 130px; line-height: 1;
  color: var(--tiffany); opacity: .5; pointer-events: none;
}
.etichette li { box-shadow: 0 8px 16px -12px rgba(0, 38, 110, .4); }
.pagina-crepes-e-waffle #farciture .pannello { padding-block: clamp(44px, 5vw, 80px); }

/* ── spazi ── */
.sezione { padding: 88px 0; }
.sezione--stretta { padding: 48px 0; }

/* ── il piede: un pannello color ghiaccio, a colonne ── */
.piede {
  margin-top: 48px; padding: 64px 0 calc(32px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--ghiaccio) 0%, var(--bianco) 100%);
  border-radius: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 56px) 0 0;
}
.piede__riga { display: grid; grid-template-columns: auto minmax(0, 1.5fr) auto minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.piede__logo img { width: 150px; }
.piede__menu ul:first-child { gap: 10px 30px; }
.piede__menu a { font-size: 17px; font-weight: 600; }
.piede__ordina { gap: 10px; margin-top: 18px; }
.piede__ordina a { padding: 10px 18px; border-radius: 999px; background: var(--tiffany); box-shadow: 0 10px 20px -12px rgba(8, 192, 225, .9); }
.piede__social a { width: 52px; height: 52px; border-radius: 50%; background: var(--bianco); box-shadow: 0 10px 22px -14px rgba(0, 38, 110, .45); }
.piede__social img { width: 26px; height: 26px; }
.piede__diritti { margin-left: 0; font-size: 15px; }
.piede__nome { font-size: 18px; }
.piede__fondo { margin-top: 40px; padding-top: 22px; }
.piede__contatti { gap: 8px; }
.piede__contatti > * { padding: 7px 14px; border-radius: 999px; background: var(--bianco); border: 1px solid rgba(0, 38, 110, .08); text-decoration: none !important; }
.piede__nota-legale, .credit { align-self: center; }
@media (hover: hover) and (pointer: fine) {
  .piede__ordina a:hover { transform: translateY(-2px); }
  .piede__ordina a { transition: transform 200ms var(--ease-out); display: inline-block; }
}

/* ── tablet e telefono ── */
@media (max-width: 1080px) {
  .piede__riga { grid-template-columns: auto minmax(0, 1fr); }
  .piede__diritti { text-align: left; }
  .piede__legali { justify-content: flex-start; }
  .pagina-contatti #domande .domande { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .schede:not(.schede--due) .scheda:nth-child(2) { margin-top: 0; }
}
@media (min-width: 901px) {
  .schede:not(.schede--due) .scheda:nth-child(2) { margin-top: 40px; }
  .schede--due .scheda:nth-child(2) { margin-top: 40px; }
}
@media (max-width: 640px) {
  .occhiello, .occhiello--tiffany { font-size: 11px; letter-spacing: .18em; padding: 7px 13px 7px 11px; margin-bottom: 16px; }
  .hero { padding-top: calc(var(--testata) + 20px); }
  .hero__titolo { font-size: clamp(36px, 11.6vw, 47px); margin-bottom: 26px; }
  .hero__sotto { margin-bottom: 22px; }
  .punti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; justify-content: flex-start; }
  .punti li { flex-direction: row; text-align: left; font-size: 13px; gap: 6px; padding: 6px 12px 6px 8px; }
  .punti img { height: 20px; }
  .hero__visivo { margin-top: 18px; }
  .riga-media > *, .riga-media--due > :nth-child(2), .riga-media--quattro > :nth-child(even),
  .riga-media:not(.riga-media--due):not(.riga-media--quattro) > :nth-child(2) { margin-top: 0; rotate: none; }
  .riga-media--due > :nth-child(1), .riga-media--quattro > :nth-child(odd), .dueparti > .foto-riquadro, .video-singolo .video-box { rotate: none; }
  .specialita__foto { rotate: -1deg; border-width: 8px; }
  .sezione { padding: 56px 0; }
  .sezione--stretta { padding: 32px 0; }
  #dove-siamo, :is(.pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-crepes-e-waffle #waffle, .pagina-chi-siamo #in-gelateria, .pagina-contatti #domande) { padding: 60px 0; margin-inline: 8px; }
  .pagina-self-service #classifica .classifica li { padding: 10px 12px; }
  .recensione { padding-right: 60px; }
  .recensione::after { font-size: 100px; right: 10px; }
  .piede { padding-top: 44px; }
  .piede__riga { grid-template-columns: 1fr; gap: 22px; }
  .piede__logo img { width: 120px; }
  .piede__contatti > * { font-size: 12px; }
  .pagina-hero { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes gira { from { transform: none; } to { transform: none; } }
}
/* salto · ritocchi dopo le foto */
@media (min-width: 1081px) { .piede__riga { grid-template-columns: auto minmax(0, 2fr) auto minmax(0, 1fr); } }
.piede__menu ul:first-child { gap: 10px 26px; }
@media (max-width: 640px) {
  .hero__titolo { font-size: clamp(34px, 10.8vw, 44px); }
  .sottolineato--self .sottolineato__segno { left: 30%; width: 64%; bottom: -.46em; }
}
/* salto · pagine legali e 404 */
.pagina-legale { background: linear-gradient(180deg, var(--ghiaccio) 0%, var(--bianco) 70%); padding: 56px 0 96px; }
.legale { background: var(--bianco); border-radius: clamp(24px, 3vw, 40px); padding: clamp(28px, 5vw, 64px); box-shadow: 0 30px 60px -40px rgba(0, 38, 110, .45), 0 0 0 1px rgba(0, 38, 110, .05); }
.legale h1 { text-wrap: balance; }
.legale h1 + p { display: inline-flex; width: fit-content; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(86, 228, 232, .75); font-size: 13px; }
.legale h2 { position: relative; padding-left: 18px; text-wrap: balance; }
.legale h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 3px; background: var(--tiffany); }
.legale ul { list-style: none; padding-left: 0; }
.legale li { position: relative; padding-left: 24px; }
.legale li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--tiffany); }
.legale table { border-radius: 16px; overflow: auto; box-shadow: 0 0 0 1px rgba(0, 38, 110, .08); }
.legale th, .legale td { padding: 14px 16px; }
.errore__conte { position: relative; z-index: 1; filter: drop-shadow(0 26px 30px rgba(0, 38, 110, .25)); }
.errore > :first-child { position: relative; }
.errore { position: relative; }
.errore::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: min(38vw, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--bianco) 0%, var(--ghiaccio) 55%, var(--cielo) 100%); z-index: 0; }
.errore::after { content: ""; position: absolute; left: -3%; top: 50%; translate: 0 -50%; width: min(44vw, 480px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(59, 219, 227, .7); z-index: 0; animation: gira 70s linear infinite; }
.errore > div { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .pagina-legale { padding: 28px 0 64px; }
  .legale { padding: 26px 20px; border-radius: 24px; }
  .errore::before { width: 260px; top: 130px; }
  .errore::after { width: 300px; left: -20px; top: 130px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════
   Collaudo · le pagine interne ricomposte coi pezzi della home (09 § 0-quater § 2 punto 4):
   solo classi della home; le varianti con la classe della pagina sul <body> e con gli id delle sezioni.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* apertura: la hero della home */
.pagina-sezione .hero { padding-bottom: 72px; }
.pagina-sezione .hero__griglia { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; }
.pagina-sezione .hero__testo { padding-top: 0; }
.pagina-sezione .hero__titolo { font-size: clamp(38px, 4.4vw, 64px); line-height: .94; letter-spacing: -.045em; margin-bottom: 26px; text-wrap: balance; }
.pagina-sezione .hero__testo .testo-medio + .testo-medio { margin-top: 12px; }
.pagina-sezione .hero__testo .pulsanti { margin-top: 32px; }
.pagina-sezione .hero__testo > * { animation: entra-su 800ms var(--ease-out) both; }
.pagina-sezione .hero__testo > :nth-child(2) { animation-delay: 90ms; }
.pagina-sezione .hero__testo > :nth-child(3) { animation-delay: 170ms; }
.pagina-sezione .hero__visivo { aspect-ratio: 1 / 1.02; max-width: 560px; justify-self: center; }
.pagina-sezione .hero__foto { left: 10%; top: 4%; width: 78%; }
.pagina-sezione .hero__frammenti { left: -6%; top: 18%; width: 112%; z-index: 1; }
.pagina-sezione .hero__scintilla { right: 2%; top: 2%; width: 48px; }
.pagina-sezione .hero__visivo::before { left: 2%; top: 8%; width: 92%; }
.pagina-sezione .hero__visivo::after { left: -4%; top: 2%; width: 104%; }
.pagina-sezione .hero .self__raggi { left: 0; right: auto; bottom: 14%; transform: rotate(-120deg); z-index: 3; animation: brilla 3.4s var(--ease-in-out) .8s infinite; }

/* le sezioni */
.pagina-sezione .bonta { padding: 88px 0; }
.pagina-sezione .bonta .titolo-sezione, .pagina-sezione .incontro .titolo-sezione, .pagina-sezione .self__pannello .titolo-sezione { margin-bottom: 20px; }
.pagina-sezione .titolo-sezione--medio { font-size: clamp(32px, 3.4vw, 50px); }
.pagina-self-service #creme, .pagina-specialita #borsette, .pagina-crepes-e-waffle #farciture, .pagina-crepes-e-waffle #creme { padding: 48px 0; }
.pagina-sezione .self__testo .testo-medio + .testo-medio,
.pagina-sezione .self__testo .testo-medio + .contatti, .pagina-sezione .self__testo .contatti + .testo-medio { margin-top: 12px; }
.pagina-sezione .self__testo .pulsanti, .pagina-sezione .self__testo .link-freccia { margin-top: 26px; }
.pagina-sezione .casa__griglia { gap: clamp(32px, 5vw, 72px); }
.pagina-crepes-e-waffle #crepes .self__testo, .pagina-crepes-e-waffle #farciture .self__pannello { max-width: 780px; margin-inline: auto; text-align: center; }
.pagina-chi-siamo #storia .self__testo { max-width: 860px; }
@media (min-width: 901px) {
  :is(.pagina-self-service #classifica, .pagina-specialita #cannoli, .pagina-chi-siamo #il-conte, .pagina-chi-siamo #dehors, .pagina-crepes-e-waffle #frozen-yogurt) .casa__griglia > :first-child { order: 2; }
  .pagina-self-service #come-funziona .casa__griglia { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* il pannello del self service della home, anche senza le due colonne */
.pagina-crepes-e-waffle #farciture .self__pannello, .pagina-chi-siamo #storia .self__pannello, .pagina-contatti #ordina .self__pannello { display: block; }
.pagina-crepes-e-waffle #farciture .self__pannello { padding-block: clamp(44px, 5vw, 80px); }

/* i passi della home: come funziona, la classifica, le domande */
.pagina-self-service #come-funziona .passi { flex-direction: column; gap: 18px; margin-top: 28px; }
.pagina-self-service #come-funziona .passo { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; }
.pagina-self-service #come-funziona .passo__testa { margin-bottom: 0; }
.pagina-self-service #classifica .passi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-top: 18px; }
.pagina-self-service #classifica .passo { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.pagina-self-service #classifica .passo__num { flex: none; min-width: 2.2em; font-size: 30px; color: var(--tiffany); }
.pagina-self-service #classifica .passo__testo { font-size: 17px; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.pagina-self-service #classifica .passo:last-child { background: rgba(86, 228, 232, .18); box-shadow: inset 0 0 0 1px rgba(86, 228, 232, .5); }
.pagina-self-service #classifica .passo:last-child .passo__testo { color: var(--bianco); font-weight: 700; }
.pagina-contatti #domande .passi { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 860px; }
.pagina-contatti #domande .frutto__scheda { display: block; padding: 0; border-radius: 22px; overflow: hidden; background: var(--bianco); border: 0; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .6); }
.pagina-contatti #domande summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer;
  font-weight: 800; font-size: 18px; color: var(--blu-notte); list-style: none; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.pagina-contatti #domande summary::-webkit-details-marker { display: none; }
.pagina-contatti #domande summary .freccia-tonda { transition: transform 250ms var(--ease-out), background-color 200ms ease; }
.pagina-contatti #domande details[open] summary .freccia-tonda { transform: rotate(90deg); background: var(--tiffany); }
.pagina-contatti #domande summary:active { transform: scale(.99); }
.pagina-contatti #domande details p { padding: 0 22px 20px; font-size: 17px; line-height: 1.5; color: var(--blu-testo); }
.pagina-contatti #domande details a { text-decoration: underline; text-underline-offset: 3px; }

/* le schede della home: topping, banco, orari, consegna */
.pagina-sezione .schede:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.pagina-self-service #topping .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.pagina-self-service #topping .scheda { padding: 22px 22px 20px; }
.pagina-self-service #topping .scheda__nome { display: block; padding: 0; margin: 0 0 4px; font-size: 20px; }
.pagina-self-service #topping .scheda p:not(.scheda__nome) { font-size: 16px; line-height: 1.45; color: var(--blu-testo); }
.pagina-sezione .scheda .striscia__icona {
  box-sizing: content-box; width: 30px; height: 30px; object-fit: contain; padding: 15px; border-radius: 50%; background: var(--bolla); margin-bottom: 16px;
}
.pagina-sezione .scheda .testo-medio + .testo-medio { margin-top: 10px; }
.pagina-sezione .scheda .pulsanti { margin-top: 22px; }
.pagina-contatti .schede .scheda { padding: clamp(24px, 3vw, 40px); }
.pagina-contatti .schede .titolo-sezione { margin-bottom: 16px; }
.pagina-self-service #banco .scheda { padding: 12px 12px 30px; }
.pagina-self-service #banco .scheda > div > :not(figure) { padding-inline: 16px; }
.pagina-self-service #banco .specialita__foto { border: 0; rotate: none; border-radius: 22px; box-shadow: none; aspect-ratio: 4 / 3; margin-bottom: 26px; }
.pagina-self-service #banco .titolo-sezione { margin-bottom: 14px; }
.pagina-self-service #banco .testo-medio + .testo-medio { margin-top: 10px; }

/* gli orari e i contatti (l'elenco della home) */
.pagina-sezione .contatti li:not(:has(img))::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--tiffany); }
.pagina-sezione .contatti li { font-size: 18px; margin-bottom: 10px; color: var(--blu-testo); }
.pagina-sezione .contatti strong { color: var(--blu-notte); font-weight: 800; }
.pagina-contatti #orari .scheda:first-child .contatti li { justify-content: space-between; gap: 16px; padding: 12px 4px; margin: 0; border-bottom: 1px solid rgba(0, 38, 110, .1); font-size: 17px; color: var(--blu-notte); }
.pagina-contatti #orari .scheda:first-child .contatti li::before { display: none; }
.pagina-contatti #orari .scheda:first-child .contatti li span:last-child { font-weight: 700; }
.pagina-contatti #orari .scheda:first-child .contatti li:nth-child(n+5) { background: var(--ghiaccio); border-radius: 12px; border-bottom-color: transparent; margin-top: 4px; padding-inline: 12px; }
.pagina-contatti #orari .scheda:last-child .contatti { margin: 6px 0 16px; }
.pagina-contatti #orari .scheda:last-child .contatti a { overflow-wrap: anywhere; }
.pagina-contatti #dove .contatti li::before { display: none; }

/* le righe di foto e video della home (video-riga), con la cornice della polaroid */
.pagina-sezione .video-riga:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pagina-sezione .video-riga:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pagina-sezione .video-riga:has(> :only-child) { grid-template-columns: 1fr; max-width: 380px; width: 100%; justify-self: center; position: relative; }
.pagina-sezione .video-riga .specialita__foto { aspect-ratio: auto; border-width: 6px; border-radius: 28px; rotate: none; box-shadow: var(--ombra); }
.pagina-sezione .video-riga .specialita__foto img { aspect-ratio: 4 / 5; }
.pagina-sezione .video-riga .video-box { border: 6px solid var(--bianco); }
.pagina-sezione .video-riga:has(> :nth-child(2):last-child) > :nth-child(1) { rotate: -1.5deg; }
.pagina-sezione .video-riga:has(> :nth-child(2):last-child) > :nth-child(2) { rotate: 1.5deg; margin-top: 56px; }
.pagina-sezione .video-riga:has(> :nth-child(3):last-child) > :nth-child(odd) { rotate: -1deg; }
.pagina-sezione .video-riga:has(> :nth-child(3):last-child) > :nth-child(2) { rotate: 1deg; }
.pagina-sezione .video-riga:has(> :nth-child(4)) > :nth-child(odd) { rotate: -1deg; }
.pagina-sezione .video-riga:has(> :nth-child(4)) > :nth-child(even) { rotate: 1deg; margin-top: 44px; }
.pagina-sezione .video-riga:has(> :only-child) > .video-box { rotate: 2deg; }
.pagina-sezione .video-riga .storia__scintilla { right: -12%; top: -6%; left: auto; width: 50px; animation: brilla 3.4s var(--ease-in-out) infinite; }
.pagina-sezione .casa__griglia > .specialita__foto { aspect-ratio: 4 / 3; border-width: 6px; rotate: 1.5deg; }
@media (hover: hover) and (pointer: fine) {
  .pagina-sezione .specialita__foto img { transition: transform 500ms var(--ease-out); }
  .pagina-sezione .specialita__foto:hover img { transform: scale(1.04); }
}

/* le tavole del fumetto: le polaroid della storia; nella riga stanno intere da computer, scorrono da telefono */
.pagina-sezione .polaroid-gruppo { justify-content: flex-start; gap: 18px; padding: 16px 2px 28px; }
.pagina-sezione .polaroid-gruppo .polaroid { max-width: 300px; padding: 10px; border-radius: 6px; }
.pagina-sezione .polaroid img { aspect-ratio: 4 / 5; border-radius: 2px; }
.pagina-sezione .polaroid-gruppo .polaroid:nth-child(odd) { rotate: -1.5deg; }
.pagina-sezione .polaroid-gruppo .polaroid:nth-child(even) { rotate: 1.5deg; }
.pagina-sezione .frutto__nota { display: none; }
.pagina-sezione .frutto__nota img { height: 12px; width: auto; }

/* il Conte che si presenta: la colonna del Conte della storia, con la tavola al posto della foto */
.pagina-sezione .storia__conte { grid-column: auto; max-width: 340px; width: 100%; justify-self: center; padding-top: 40px; }
.pagina-sezione .storia__conte .polaroid { max-width: none; padding: 10px; rotate: -3deg; }
.pagina-chi-siamo #social .storia__conte .polaroid { rotate: 3deg; }
.pagina-sezione .storia__conte .storia__fumetto { left: -26%; top: -6%; width: 54%; transform: none; rotate: -8deg; }
.pagina-sezione .storia__conte .storia__scintilla { left: auto; top: auto; right: -10%; bottom: 12%; width: 44px; animation: brilla 3.4s var(--ease-in-out) .6s infinite; }

/* le foto tonde, l'uovo, la recensione, le farciture */
.pagina-specialita #frutti .frutto__riga { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); align-items: center; max-width: 520px; justify-self: center; margin: 0; }
.pagina-specialita #frutti .frutto__foto { width: 100%; margin: 0; outline: 2px dashed rgba(59, 219, 227, .7); outline-offset: 12px; }
.pagina-specialita #frutti .frutto__foto:nth-child(2) { margin-top: 70px; }
.pagina-specialita #frutti .storia__scintilla { right: 2%; top: -8%; left: auto; width: 48px; animation: brilla 3.6s var(--ease-in-out) infinite; }
.pagina-sezione .bonta .casa__visivo { max-width: 460px; justify-self: center; aspect-ratio: 5 / 6; }
.pagina-sezione .bonta .casa__foto { left: 0; top: 0; width: 100%; }
.pagina-sezione .bonta .casa__frammenti { left: -16%; top: 12%; width: 132%; }
.pagina-crepes-e-waffle blockquote.frutto__scheda { position: relative; display: block; overflow: hidden; margin: 22px 0 0; padding: 22px 90px 22px 24px; border-radius: 24px; box-shadow: var(--ombra-leggera); }
.pagina-crepes-e-waffle blockquote.frutto__scheda p { font-size: 19px; font-weight: 700; color: var(--blu-notte); }
.pagina-crepes-e-waffle blockquote .scheda__descr { display: block; max-width: none; margin: 6px 0 0; text-align: left; font-size: 16px; font-weight: 500; color: var(--blu-testo); }
.pagina-crepes-e-waffle blockquote a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 38, 110, .3); }
.pagina-crepes-e-waffle blockquote.frutto__scheda::after { content: "\201C"; position: absolute; right: 18px; top: -18px; font-family: var(--carattere-mano); font-size: 130px; line-height: 1; color: var(--tiffany); opacity: .5; pointer-events: none; }
.pagina-crepes-e-waffle #farciture .punti { justify-content: center; margin-top: 22px; }
.pagina-crepes-e-waffle #farciture .punti li { border: 2px solid var(--tiffany); font-weight: 700; font-size: 16px; padding: 10px 18px; animation: none; }

/* la striscia del banco della home, più alta */
.pagina-sezione .striscia { margin-top: 0; }
.pagina-self-service #creme .striscia, .pagina-specialita #borsette .striscia { min-height: 360px; }
.pagina-self-service #creme .striscia__testo, .pagina-specialita #borsette .striscia__testo { padding: clamp(28px, 4vw, 48px); }
.pagina-self-service #creme .striscia__foto::before, .pagina-specialita #borsette .striscia__foto::before { width: 22%; }
.pagina-sezione .striscia__testo p { font-size: 18px; font-weight: 500; line-height: 1.45; }
.pagina-crepes-e-waffle #creme .striscia__testo p { font-weight: 600; font-size: clamp(18px, 1.7vw, 22px); }
.pagina-crepes-e-waffle #creme .striscia .titolo-sezione { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 8px; }
.pagina-crepes-e-waffle #creme .link-freccia { margin-top: 12px; }

/* la chiusura: la sezione della consegna della home, col Conte che si affaccia */
.pagina-sezione .casa .titolo-sezione { font-size: clamp(32px, 3.6vw, 52px); }
.pagina-sezione .casa .casa__visivo { aspect-ratio: auto; min-height: 380px; }
.pagina-sezione .casa .incontro__conte { display: block; position: absolute; right: 4%; bottom: 0; width: min(300px, 52%); z-index: 2; }
.pagina-sezione .casa .link-freccia { margin-top: 18px; }

/* i gruppi di tre pulsanti: tutti in una riga da computer */
@media (min-width: 901px) {
  .pulsanti:has(> :nth-child(3)) { flex-wrap: nowrap; gap: 10px; }
  .pulsanti:has(> :nth-child(3)) .btn { padding-inline: clamp(14px, 1.3vw, 22px); font-size: clamp(14px, 1.1vw, 16px); white-space: nowrap; }
  .pulsanti:has(> :nth-child(3)) .btn--grande { min-height: 56px; }
}

/* la home: le schede in riga senza scalino; le tre voci della hero da telefono in una riga */
.schede:not(.schede--due) .scheda:nth-child(2) { margin-top: 0 !important; }

@media (max-width: 900px) {
  .pagina-sezione .hero { padding-top: calc(var(--testata) + 64px); }
  .pagina-sezione .hero__visivo { max-width: 420px; }
  .pagina-sezione .video-riga:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-sezione .casa .casa__visivo { min-height: 0; padding-top: 12px; }
  .pagina-sezione .casa .incontro__conte { position: relative; right: auto; bottom: auto; margin: 0 auto; width: min(220px, 56%); }
  .pagina-sezione .storia__conte { max-width: 300px; }
  .pagina-self-service #creme .striscia__foto, .pagina-specialita #borsette .striscia__foto { min-height: 240px; }
  .pagina-contatti .schede:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .piede { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .pagina-sezione .hero__titolo { font-size: clamp(32px, 9.6vw, 40px); }
  .pagina-sezione .bonta { padding: 56px 0; }
  .pagina-sezione .testo-medio { font-size: 17px; line-height: 1.45; }
  .pagina-sezione .self__pannello { padding: 32px 18px; border-radius: 28px; }
  .pagina-sezione .video-riga > * { flex: 0 0 78%; scroll-snap-align: center; margin-top: 0 !important; rotate: none !important; }
  .pagina-sezione .video-riga:has(> :only-child) { display: block; margin-inline: auto; padding: 0; max-width: 300px; }
  .pagina-sezione .casa__griglia > .specialita__foto { rotate: none; }
  .pagina-sezione .polaroid-gruppo { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; }
  .pagina-sezione .polaroid-gruppo::-webkit-scrollbar { display: none; }
  .pagina-sezione .polaroid-gruppo .polaroid { flex: 0 0 74%; max-width: none; scroll-snap-align: center; }
  .pagina-sezione .frutto__nota { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; }
  .pagina-sezione .storia__conte .storia__fumetto { left: 0; top: -4%; width: 50%; }
  .pagina-self-service #come-funziona .passo { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
  .pagina-self-service #come-funziona .passo__testa img { height: 26px; }
  .pagina-self-service #come-funziona .passo__num { font-size: 32px; }
  .pagina-self-service #classifica .passi { grid-template-columns: 1fr; }
  .pagina-self-service #classifica .passo { display: flex; padding: 10px 12px; }
  .pagina-self-service #banco .scheda { flex-basis: 88%; }
  .pagina-self-service #banco .titolo-sezione { font-size: 26px; }
  .pagina-self-service #topping .scheda { flex: 0 0 72%; }
  .pagina-specialita #frutti .frutto__foto:nth-child(2) { margin-top: 40px; }
  .pagina-sezione .striscia__testo p { font-size: 16px; }
  .pagina-contatti #domande details p { font-size: 15px; padding: 0 16px 16px; }
  .pagina-contatti #domande summary { padding: 16px 18px; font-size: 17px; }
  .pagina-crepes-e-waffle blockquote.frutto__scheda { padding-right: 60px; }
  .pagina-crepes-e-waffle blockquote.frutto__scheda::after { font-size: 100px; right: 10px; }
  .pagina-crepes-e-waffle #farciture .punti li { font-size: 15px; padding: 8px 14px; }
  .hero .punti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero .punti li { flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 8px 4px; border-radius: 16px; font-size: 12px; line-height: 1.2; }
}
.pagina-sezione .casa__griglia > *, .pagina-sezione .hero__griglia > * { min-width: 0; }
@media (max-width: 900px) {
  .pagina-sezione .hero__griglia { grid-template-columns: 1fr; gap: 24px; }
  .pagina-sezione .casa__griglia, .pagina-self-service #come-funziona .casa__griglia { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .pagina-self-service #creme .striscia__testo, .pagina-specialita #borsette .striscia__testo { padding: 24px 18px; }
  .pagina-self-service #creme .contatti li { font-size: 15px; }
  .pagina-crepes-e-waffle #creme .striscia__testo { padding: 20px 18px; gap: 14px; }
  .pagina-crepes-e-waffle #creme .striscia__testo p { font-size: 15.5px; }
  .pagina-contatti #ordina .self__pannello { padding: 18px 10px; }
  .pagina-contatti .schede .scheda { padding: 22px 18px; }
  .pagina-contatti .schede .testo-medio { font-size: 16px; }
}
.pagina-contatti #domande .frutto__scheda, .pagina-crepes-e-waffle blockquote.frutto__scheda { justify-items: normal; }

/* Collaudo, ultimo ritocco: su /contatti le schede di orari, telefono e consegna sono informazioni, non una serie di foto:
   da telefono e tablet una sotto l'altra, a tutta larghezza; le domande frequenti occupano tutto il pannello */
.pagina-contatti #domande .passi { max-width: none; }
@media (max-width: 900px) {
  .pagina-contatti :is(#orari, #ordina) .schede {
    display: grid; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding: 0;
  }
  .pagina-contatti :is(#orari, #ordina) .scheda { flex: none; }
}

/* Le chiusure delle pagine interne: il Conte intero che saluta (l'affacciato, da solo, sembrava tagliato);
   la vita sfuma nell'onda invece di finire con un taglio dritto */
.pagina-sezione .casa .incontro__conte {
  width: min(340px, 60%); right: 2%;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}