/* =========================================================================
   MAIN.CSS — unico foglio di stile del sito
   Prima erano 7 file separati (reset.css, tokens.css, base.css, layout.css, components.css, animations.css, utilities.css), caricati con 7 <link>
   distinti: ognuno era una richiesta di rete bloccante il render, per un
   costo misurato di ~750ms di First Contentful Paint. Uniti in un solo file
   quel costo scompare. Le sezioni sotto corrispondono ai vecchi file, nello
   stesso ordine — usare i separatori come riferimento per orientarsi.
   ========================================================================= */


/* ============================== reset.css ============================== */

/* =========================================================================
   RESET — minimale, moderno, non invasivo
   ========================================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto; /* lo smooth scroll reale è gestito da Lenis */
}

/* ------------------------------ LINGUA (IT/EN) ---------------------------- */
/* Ogni contenuto tradotto vive come coppia di elementi gemelli
   [data-lc="it"] / [data-lc="en"]; js/modules/i18n.js sceglie quale
   mostrare impostando body[data-lang]. Niente attributo HTML "hidden" nel
   markup: qui in CSS nascondiamo l'inglese di default (l'italiano è la
   lingua di partenza) e lo "revert" fa tornare ogni elemento al proprio
   display naturale (block per h1/p/div, inline per span, list-item per
   li...) senza doverlo indovinare caso per caso. !important perché la
   correttezza del cambio lingua non deve dipendere da chi vince la
   cascata altrove nel foglio di stile. */
[data-lc="en"] { display: none !important; }
body[data-lang="en"] [data-lc="en"] { display: revert !important; }
body[data-lang="en"] [data-lc="it"] { display: none !important; }

body {
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

/* Senza, un'immagine con width/height nell'HTML ristretta da max-width
   resterebbe alta quanto dice l'attributo: stirata in verticale. */
img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  text-align: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--rosso-accademia);
  color: var(--crema);
}

/* ============================== tokens.css ============================== */

/* =========================================================================
   ACCADEMIA DEL GELATO — DESIGN TOKENS
   Unica fonte di verità per colore, tipografia, spaziatura e motion.
   Nessun valore "magico" va scritto altrove: si referenzia sempre un token.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     COLORE — palette brand
     --------------------------------------------------------------------- */
  --rosso-accademia: #6E1E2A;   /* primario, bordeaux profondo */
  --rosso-accent:    #93283A;   /* hover, CTA */
  --rosso-scuro:     #4A131C;   /* sfondi pieni, footer alt */
  --crema:           #F8F1E4;   /* sfondo principale */
  --avorio:          #FBF8F3;   /* card, sfondi alternati */
  --beige-caldo:     #E7DAC3;   /* separatori, bordi */
  --antracite:       #2A2521;   /* testo principale */
  --oro-tenue:       #C6A468;   /* accento premium, badge "novità" */
  --oro-chiaro:      #E3C892;   /* variante chiara oro, per gradienti */
  --verde-vegano:    #47572F;   /* testo badge vegano — scurito per contrasto AA su sfondo chiaro */
  --verde-vegano-chiaro: #8FA46B;

  /* varianti con trasparenza — overlay, glass nav, ombre calde */
  --rosso-accademia-08: rgb(110 30 42 / 8%);
  --rosso-accademia-12: rgb(110 30 42 / 12%);
  --rosso-accademia-20: rgb(110 30 42 / 20%);
  --rosso-accademia-40: rgb(110 30 42 / 40%);
  --rosso-accademia-70: rgb(110 30 42 / 70%);
  --rosso-scuro-85:     rgb(74 19 28 / 85%);
  --rosso-scuro-95:     rgb(74 19 28 / 95%);
  --crema-70:        rgb(248 241 228 / 70%);
  --crema-85:        rgb(248 241 228 / 85%);
  --avorio-60:       rgb(251 248 243 / 60%);
  --oro-tenue-25:    rgb(198 164 104 / 25%);
  --antracite-06:    rgb(42 37 33 / 6%);
  --antracite-12:    rgb(42 37 33 / 12%);

  /* famiglie ingrediente — usate dalle card gusto (vedi components.css) */
  --ing-cioccolato-1: #4A2E23;
  --ing-cioccolato-2: #7A4A32;
  --ing-pistacchio-1: #6E7F3F;
  --ing-pistacchio-2: #A9B76B;
  --ing-nocciola-1:   #7A5636;
  --ing-nocciola-2:   #B98B5E;
  --ing-vaniglia-1:   #E8D9B5;
  --ing-vaniglia-2:   #F6ECD8;
  --ing-frutti-rossi-1: #7A1F32;
  --ing-frutti-rossi-2: #C4526A;
  --ing-agrumi-1:     #C9A227;
  --ing-agrumi-2:     #E8D272;
  --ing-tropicale-1:  #D97A2E;
  --ing-tropicale-2:  #F4C15B;
  --ing-caffe-1:      #4A342A;
  --ing-caffe-2:      #8A6142;
  --ing-liquirizia-1: #241A1D;
  --ing-liquirizia-2: #4A2E36;
  --ing-cocco-1:      #DCE7E6;
  --ing-cocco-2:      #F5F9F8;
  --ing-neutro-1:     #DCCEB4;
  --ing-neutro-2:     #F0E6D2;

  /* ---------------------------------------------------------------------
     OMBRE — sempre calde, mai grigio freddo
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(74 19 28 / 6%), 0 1px 1px rgb(74 19 28 / 4%);
  --shadow-md: 0 4px 12px rgb(74 19 28 / 10%), 0 2px 4px rgb(74 19 28 / 6%);
  --shadow-lg: 0 12px 32px rgb(74 19 28 / 14%), 0 4px 12px rgb(74 19 28 / 8%);
  --shadow-xl: 0 24px 64px rgb(74 19 28 / 18%), 0 8px 24px rgb(74 19 28 / 10%);
  --shadow-inset: inset 0 1px 2px rgb(74 19 28 / 8%);
  --shadow-gold-glow: 0 0 0 1px var(--oro-tenue-25), 0 8px 24px rgb(198 164 104 / 20%);

  /* ---------------------------------------------------------------------
     TIPOGRAFIA
     --------------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* scala fluida — clamp(min, preferred-vw, max) */
  --fs-eyebrow:  clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --fs-caption:  clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-body-sm:  clamp(0.9rem, 0.87rem + 0.15vw, 0.975rem);
  --fs-body:     clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-body-lg:  clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);
  --fs-h6:       clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  --fs-h5:       clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  --fs-h4:       clamp(1.5rem, 1.32rem + 0.9vw, 2.125rem);
  --fs-h3:       clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-h2:       clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --fs-h1:       clamp(2.75rem, 2.1rem + 3.2vw, 5rem);
  --fs-display:  clamp(3.25rem, 2.2rem + 5.2vw, 7.5rem);

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-loose: 1.8;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.16em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display-regular: 400;
  --fw-display-medium: 500;
  --fw-display-bold: 600;

  /* ---------------------------------------------------------------------
     SPAZIATURA — scala 4/8px, unico sistema per tutto il sito
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* spaziatura fluida per i ritmi di sezione */
  --space-section-y: clamp(4rem, 3.2rem + 4vw, 8rem);
  --space-section-y-sm: clamp(2.5rem, 2.1rem + 2vw, 4rem);

  --container-max: 1280px;
  --container-narrow: 780px;
  --container-pad: clamp(1.25rem, 0.9rem + 1.6vw, 3rem);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     MOTION SYSTEM — unica fonte per easing/durata
     --------------------------------------------------------------------- */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-elastic: cubic-bezier(0.68, -0.4, 0.32, 1.4);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1);

  --dur-instant: 100ms;
  --dur-fast: 200ms;
  --dur-base: 450ms;
  --dur-slow: 900ms;
  --dur-slower: 1400ms;

  --z-cursor: 9999;
  --z-preloader: 9000;
  --z-mobile-menu: 850;
  --z-nav: 900; /* sopra il menu mobile: logo + toggle devono restare visibili/cliccabili a menu aperto */
  --z-floating-cta: 700;
  --z-sfondo-decorativo: 5;
  --z-content: 1;
}

/* prefers-reduced-motion: azzeriamo le durate a livello di token così
   qualunque componente che referenzia --dur-* diventa istantaneo senza
   bisogno di duplicare regole ovunque. JS legge comunque matchMedia per
   disattivare del tutto parallax/canvas/lenis. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}

/* ============================== base.css ============================== */

/* =========================================================================
   BASE — stili di elemento, tipografia, fondamenta globali
   ========================================================================= */

html {
  background: var(--crema);
}

body {
  background: var(--crema);
  color: var(--antracite);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}

/* --------------------------- Tipografia --------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--rosso-scuro);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-display-medium); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-display-medium); letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--fs-h4); font-weight: var(--fw-display-medium); }
h4 { font-size: var(--fs-h5); font-weight: var(--fw-display-medium); }
h5 { font-size: var(--fs-h6); font-weight: var(--fw-display-medium); }
h6 { font-size: var(--fs-body-lg); font-weight: var(--fw-display-medium); }

p { max-width: 65ch; }

a {
  transition: color var(--dur-fast) var(--ease-soft);
}

strong { font-weight: var(--fw-semibold); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--rosso-accent);
  margin-bottom: var(--space-3);
}

.eyebrow--chiaro {
  color: var(--oro-tenue);
}

/* ------------------------------ Focus ------------------------------ */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2.5px solid var(--oro-tenue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------- Skip link --------------------------- */

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10000;
  background: var(--rosso-scuro);
  color: var(--crema);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-soft);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ------------------------------ Container ------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* ---------------------------- Sezioni comuni ---------------------------- */

section {
  position: relative;
}

.section-intro {
  max-width: 640px;
  margin-bottom: var(--space-16);
}

.section-intro__titolo {
  margin-bottom: var(--space-4);
}

.section-intro__testo {
  color: var(--antracite);
  opacity: 0.78;
  font-size: var(--fs-body-lg);
}

/* --------------------------- Scrollbar (progressive) --------------------------- */

@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--rosso-accent) var(--beige-caldo);
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--beige-caldo); }
::-webkit-scrollbar-thumb { background: var(--rosso-accent); border-radius: var(--radius-pill); }

/* ============================== layout.css ============================== */

/* =========================================================================
   LAYOUT — griglie e struttura per sezione (mobile-first)
   Breakpoint: 640 (phone grande) · 768 (tablet) · 1100 (desktop) · 1440 (ampio)
   ========================================================================= */

/* ------------------------------- PRELOADER ------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--rosso-scuro);
}

.preloader__logo {
  width: min(78vw, 360px);
  height: auto;
  filter: drop-shadow(0 12px 32px rgb(0 0 0 / 25%));
}

/* --------------------------- SFONDO DECORATIVO ---------------------------- */

/* Motivo maiolica siciliana richiesto da Roberto, esteso a tutto il sito
   com'era stato chiesto ("sfondo intero"). Per restare leggibile ovunque —
   anche sulle sezioni bordeaux piene, non solo su quelle crema — è un layer
   fisso sopra al contenuto (non dietro: la maggior parte delle sezioni ha
   uno sfondo pieno proprio, un layer dietro sarebbe stato invisibile quasi
   ovunque) con mix-blend-mode:multiply: il bianco del motivo diventa
   trasparente, resta visibile solo la trama blu/oro, e a bassa opacità non
   compromette il contrasto del testo sopra. */
.sfondo-maiolica-decorativo {
  position: fixed;
  inset: 0;
  z-index: var(--z-sfondo-decorativo);
  pointer-events: none;
  background-image: url('../assets/img/varie/maiolica-siciliana.webp');
  background-repeat: repeat;
  background-size: 220px 293px;
  opacity: 0.12;
  mix-blend-mode: multiply;
}

/* ------------------------------- CURSORE --------------------------------- */

.cursore {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursore { display: block; }
  body { cursor: none; }
  a, button, [role="tab"] { cursor: none; }
}

/* --------------------------------- NAV ------------------------------------ */

/* Il menu completo (voci + telefono + WhatsApp + lingua) compare da 1280px:
   sotto non ci sta su una riga (misurato: a 1024-1180px le voci andavano a
   capo su due o tre righe, il telefono su tre) e si usa il menu a tendina,
   come su telefono e tablet. Le cinque regole con 1280px qui sotto vanno
   cambiate insieme. */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  /* senza compensare env(safe-area-inset-top), su iPhone con notch (e
     viewport-fit=cover nel meta viewport) logo e menu potrebbero finire
     troppo vicini alla status bar invece che sotto */
  padding-top: max(var(--space-4), calc(var(--space-4) + env(safe-area-inset-top)));
  padding-bottom: var(--space-4);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav__links {
  display: none;
}

@media (min-width: 1280px) {
  .nav__links {
    display: flex;
    align-items: center;
    position: relative;
  }
  .nav__links ul {
    display: flex;
    gap: var(--space-8);
  }
}

/* specificità .nav .nav__cta (invece di .nav__cta da solo) necessaria per
   battere .btn { display: inline-flex } di components.css, caricato dopo
   layout.css nell'ordine dei fogli di stile e con la stessa specificità */
.nav .nav__cta {
  display: none;
}

@media (min-width: 1280px) {
  .nav .nav__cta { display: inline-flex; }
}

/* stesso motivo del commento sopra: il gruppo telefono+WhatsApp resta
   nascosto sotto i 1280px, dove il contatto passa dal menu mobile a
   schermo intero (che ha già i propri pulsanti) invece che dalla nav */
.nav__contatti {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 1280px) {
  .nav__contatti { display: flex; }
}

.nav__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--rosso-accademia);
  color: var(--rosso-accademia);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}

.nav__whatsapp:hover {
  background: var(--rosso-accademia);
  color: var(--crema);
  transform: translateY(-2px);
}

.nav__lingua {
  flex: none;
  height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--beige-caldo);
  background: transparent;
  color: var(--rosso-scuro);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}

.nav__lingua:hover {
  border-color: var(--rosso-accademia);
  color: var(--rosso-accademia);
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  align-items: center;
}

@media (min-width: 1280px) {
  .nav__toggle { display: none; }
}

/* ---------------------------- MENU MOBILE --------------------------------- */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* position:fixed + inset:0 copre tutto lo schermo, area del notch e
     dell'home indicator comprese (per via di viewport-fit=cover nel
     meta viewport): senza compensare con env(safe-area-inset-*), su
     iPhone con notch/home indicator il contenuto in cima o in fondo al
     menu può finire troppo vicino o parzialmente coperto */
  padding-top: max(var(--space-24), calc(var(--space-24) + env(safe-area-inset-top)));
  padding-right: max(var(--container-pad), calc(var(--container-pad) + env(safe-area-inset-right)));
  padding-bottom: max(var(--space-12), calc(var(--space-12) + env(safe-area-inset-bottom)));
  padding-left: max(var(--container-pad), calc(var(--container-pad) + env(safe-area-inset-left)));
  visibility: hidden;
  /* senza overflow, su schermi bassi (telefoni piccoli, o dopo aver
     aggiunto la voce del blog + WhatsApp + selettore lingua) il
     contenuto in coda al menu finiva sotto al bordo dello schermo,
     irraggiungibile: niente scroll di pagina qui dentro (il menu è
     position:fixed a schermo intero), quindi serve il proprio */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu-mobile ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.menu-mobile__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 1280px) {
  .menu-mobile { display: none; }
}

/* --------------------------------- HERO ------------------------------------ */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--space-24);
  /* riserva lo spazio per .hero__scroll-cta (assoluto, ancorato al fondo):
     senza, contenuto aggiuntivo in coda (es. lo spazio di Roberto) finisce
     sotto al pulsante invece che sopra */
  padding-bottom: var(--space-24);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* niente z-index: resta comunque sopra canvas e vignetta (vengono prima nel
   markup), e senza creare un proprio contesto lo spazio di Roberto può
   salire sopra il motivo a maioliche — con z-index:2 restava chiuso sotto */
.hero__content {
  position: relative;
  max-width: 780px;
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block: var(--space-8);
}

.hero__scroll-cta {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 2;
}

/* ------------------------------- IL BRAND ---------------------------------- */

.brand {
  padding-block: var(--space-section-y);
}

.brand__grid {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 900px) {
  .brand__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--space-24);
  }
  .brand--reverse .brand__grid { direction: rtl; }
}

.brand__paragrafo {
  margin-top: var(--space-4);
  opacity: 0.85;
}

.brand__cifre {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--beige-caldo);
}

.brand__visivo {
  aspect-ratio: 4 / 5;
  width: 100%;
  /* sopra il motivo a maioliche (.sfondo-maiolica-decorativo): sul bianco
     della giacca da chef si vedeva in trasparenza come una filigrana, come
     già sull'attestato VEGANOK. Lo z-index sta qui e non sulla foto: il
     parallasse (data-parallax) trasforma questo riquadro, e uno z-index
     della foto resterebbe chiuso al suo interno */
  position: relative;
  z-index: calc(var(--z-sfondo-decorativo) + 1);
}

/* foto già ritagliata 4:5 come il riquadro: "cover" serve solo a non
   deformarla se il riquadro cambia proporzioni */
.brand__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

/* --------------------------- RICONOSCIMENTI --------------------------------- */

/* ------------------------------- FALSI MITI ------------------------------- */

.falsi-miti {
  padding-block: var(--space-section-y-sm);
}

.falsi-miti__inner {
  text-align: center;
}

.falsi-miti .section-intro {
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.falsi-miti__card {
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: left;
}

.riconoscimenti {
  padding-block: var(--space-section-y-sm);
  background: var(--beige-caldo);
}

.riconoscimenti__inner {
  text-align: center;
}

.riconoscimenti .section-intro {
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.riconoscimenti__loghi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-8);
}

.riconoscimenti__badge {
  margin: 0;
  transition: transform var(--dur-fast) var(--ease-soft);
}

.riconoscimenti__badge img {
  display: block;
  width: 192px;
  height: auto;
  /* sfumatura ai bordi: attenua eventuali residui del ritaglio dallo sfondo
     a scacchi delle foto originali delle targhe, invece di un taglio netto */
  mask-image: radial-gradient(ellipse 76% 80% at center, #000 66%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 76% 80% at center, #000 66%, transparent 100%);
}

@media (min-width: 560px) {
  .riconoscimenti__badge img {
    /* stessa larghezza per entrambe le targhe: cosi' i bordi combaciano
       invece di dipendere solo dalla centratura */
    width: 250px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .riconoscimenti__badge:hover {
    transform: translateY(-4px);
  }
}

/* Sposta leggermente a destra solo il badge 2025, per avvicinarlo un po'
   di più al badge 2027 quando sono affiancati. Va applicato SOLO da quando
   condividono la stessa riga (da ~600px in su): sotto quella soglia
   .riconoscimenti__loghi li impila su due righe separate, ciascuna
   centrata per conto proprio — un margin-left qui li farebbe scentrare
   dalla propria riga invece di avvicinarli a un vicino che non c'è. */
@media (min-width: 600px) {
  .badge-2025 {
    margin-left: 20px;
  }
}

.riconoscimenti__link {
  margin-top: var(--space-16);
}

.riconoscimenti__altri {
  margin-top: var(--space-12);
}

.riconoscimenti__altri-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--rosso-accademia);
  margin: 0 0 var(--space-3);
}

.riconoscimenti__certificati {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.riconoscimenti__certificato {
  margin: 0;
  width: 108px;
}

.riconoscimenti__certificato img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--beige-caldo);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-soft);
}

.riconoscimenti__certificato figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--antracite);
}

@media (hover: hover) and (pointer: fine) {
  .riconoscimenti__certificato:hover img {
    transform: translateY(-4px);
  }
}

.riconoscimenti__link svg {
  width: 16px;
  height: 16px;
}

/* ------------------------------ FILOSOFIA ----------------------------------- */

.filosofia {
  padding-block: var(--space-section-y);
  background: var(--avorio);
}

.pillar-mosaico {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .pillar-mosaico {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }
  .pillar--grande {
    grid-column: span 2;
  }
}

@media (min-width: 1100px) {
  .pillar-mosaico {
    grid-template-columns: repeat(6, 1fr);
  }
  .pillar-mosaico .pillar:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .pillar-mosaico .pillar:nth-child(2) { grid-column: span 3; }
  .pillar-mosaico .pillar:nth-child(3) { grid-column: span 3; }
  .pillar-mosaico .pillar:nth-child(4) { grid-column: span 2; }
  .pillar-mosaico .pillar:nth-child(5) { grid-column: span 4; grid-row: span 1; }
  .pillar-mosaico .pillar:nth-child(6) { grid-column: span 6; }
}

/* --------------------------------- GUSTI ------------------------------------ */

.gusti {
  padding-block: var(--space-section-y);
}

.prezzi-ticket {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .prezzi-ticket {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-6);
  }
}

/* ------------------------- LINEE (home): una card per categoria ------------------------- */

/* Al posto dei gusti in vetrina, sei porte d'ingresso al catalogo: ogni card
   apre il menu gusti già filtrato sulla sua categoria (menuGusti.js). Stessa
   materia delle card gusto — avorio, fascia colorata con micro-motivo — ma
   il colore qui identifica la linea, non un ingrediente; sulla fascia, le
   foto vere dei primi gusti della linea (.linea-card__palline). */
.gusti-linee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 640px) {
  .gusti-linee { gap: var(--space-6); }
}

@media (min-width: 1024px) {
  .gusti-linee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.linea-card {
  --lc-fascia: clamp(84px, 56px + 7vw, 148px);
  position: relative;
  /* sopra il motivo a maioliche (.sfondo-maiolica-decorativo), come
     l'attestato VEGANOK e la foto di "Il Brand": senza, la trama passava
     sopra il fondo avorio e le card sembravano trasparenti */
  z-index: calc(var(--z-sfondo-decorativo) + 1);
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: var(--avorio);
  color: var(--antracite);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-soft);
}

.linea-card__visivo {
  position: relative;
  display: block;
  flex: none;
  height: var(--lc-fascia);
  background: linear-gradient(135deg, var(--lc-1, var(--beige-caldo)), var(--lc-2, var(--avorio)));
}

.linea-card__visivo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: var(--lc-motivo, none);
  background-size: var(--lc-motivo-size, 10px 10px);
}

/* Le "palline": le foto vere dei primi gusti della linea (le mette
   gustiCatalogo.js), ritagliate a cerchio e sovrapposte come palline in
   una coppetta. Le foto di Roberto sono un disco colorato su fondo nero:
   lo scale dell'immagine toglie il filo nero attorno al disco. */
.linea-card__palline {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .linea-card__palline { padding-inline: var(--space-6); }
}

.linea-card__pallina {
  flex: none;
  width: calc(var(--lc-fascia) * 0.66);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  border: 3px solid var(--avorio);
  box-shadow: var(--shadow-md);
  transition: margin var(--dur-base) var(--ease-premium);
}

/* sovrapposte poco: i nomi stampati nelle foto restano leggibili */
.linea-card__pallina + .linea-card__pallina {
  margin-left: calc(var(--lc-fascia) * -0.1);
}

.linea-card__pallina img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}

.linea-card__freccia {
  position: absolute;
  z-index: 1;
  top: calc(var(--lc-fascia) - 20px);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--avorio);
  color: var(--rosso-accademia);
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}

.linea-card__freccia svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-premium);
}

.linea-card__testo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4) var(--space-4);
}

@media (min-width: 640px) {
  .linea-card__testo { padding: var(--space-8) var(--space-6) var(--space-6); }
}

.linea-card__conteggio {
  min-height: 1.4em;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--rosso-accent);
  font-variant-numeric: tabular-nums;
}

/* Tutto maiuscolo, come li ha chiesti Roberto: spaziatura larga come il
   logo "ACCADEMIA DEL GELATO", e un corpo un po' più piccolo di un titolo
   normale perché "NATURALMENTE" stia su una riga anche nelle card strette
   dei telefoni piccoli. */
.linea-card__nome {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 0.8rem + 0.55vw, 1.3rem);
  font-weight: var(--fw-display-medium);
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rosso-scuro);
  text-wrap: balance;
  /* ultima rete sugli schermi minuscoli: "NATURALMENTE" ha un trattino
     facoltativo (&shy;) e va a capo lì invece di uscire dalla card */
  hyphens: manual;
}

.linea-card__desc {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--antracite);
  opacity: 0.75;
}

.linea-card:focus-visible {
  outline: 2px solid var(--rosso-accademia);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .linea-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .linea-card:hover .linea-card__freccia {
    background: var(--rosso-accademia);
    color: var(--crema);
  }

  .linea-card:hover .linea-card__freccia svg { transform: translateX(2px); }

  /* le palline si allargano un poco, come a mostrarsi */
  .linea-card:hover .linea-card__pallina + .linea-card__pallina {
    margin-left: calc(var(--lc-fascia) * -0.02);
  }
}

/* colore e motivo di ogni linea */
.linea-card[data-apri-linea="creme"] {
  --lc-1: var(--ing-vaniglia-1); --lc-2: var(--ing-vaniglia-2);
  --lc-motivo: radial-gradient(circle, rgb(110 30 42 / 14%) 1.2px, transparent 1.2px); --lc-motivo-size: 10px 10px;
}
.linea-card[data-apri-linea="frutta"] {
  --lc-1: var(--ing-frutti-rossi-1); --lc-2: var(--ing-frutti-rossi-2);
  --lc-motivo: radial-gradient(circle, rgb(255 255 255 / 30%) 1px, transparent 1px); --lc-motivo-size: 8px 8px;
}
.linea-card[data-apri-linea="vegani"] {
  --lc-1: var(--ing-pistacchio-1); --lc-2: var(--ing-pistacchio-2);
  --lc-motivo: radial-gradient(circle, rgb(255 255 255 / 30%) 1.2px, transparent 1.2px); --lc-motivo-size: 7px 7px;
}
.linea-card[data-apri-linea="naturalmente-senza"] {
  --lc-1: var(--ing-nocciola-1); --lc-2: var(--ing-nocciola-2);
  --lc-motivo: repeating-linear-gradient(45deg, rgb(255 255 255 / 18%) 0 2px, transparent 2px 9px);
}
.linea-card[data-apri-linea="puro-zero"] {
  --lc-1: var(--oro-tenue); --lc-2: var(--oro-chiaro);
  --lc-motivo: radial-gradient(circle, rgb(255 255 255 / 45%) 1px, transparent 1px); --lc-motivo-size: 12px 12px;
}
.linea-card[data-apri-linea="granite"] {
  --lc-1: #B9D0D2; --lc-2: var(--ing-cocco-2);
  --lc-motivo: repeating-linear-gradient(60deg, rgb(255 255 255 / 55%) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-60deg, rgb(255 255 255 / 55%) 0 1px, transparent 1px 11px);
}

/* Su telefono, in mezza larghezza "NATURALMENTE" in maiuscolo non entra:
   una card per riga, con la fascia colorata che diventa una striscia a
   sinistra e la freccia sul bordo destro. Più compatta delle card alte, e
   il titolo ha tutto lo spazio che gli serve. Sta in fondo apposta: deve
   vincere sulle regole base delle card qui sopra. */
@media (max-width: 559px) {
  .gusti-linee { grid-template-columns: minmax(0, 1fr); }

  .linea-card { flex-direction: row; }

  .linea-card__visivo {
    width: 76px;
    height: auto;
  }

  /* nella striscia stretta una sola pallina, al centro */
  .linea-card__palline {
    justify-content: center;
    padding-inline: 0;
  }

  .linea-card__pallina { width: 54px; }

  .linea-card__pallina + .linea-card__pallina { display: none; }

  .linea-card__testo {
    flex: 1;
    min-width: 0;
    padding: var(--space-4) calc(var(--space-4) + 36px + var(--space-3)) var(--space-4) var(--space-4);
  }

  .linea-card__freccia {
    top: 50%;
    right: var(--space-4);
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }

  .linea-card__nome { font-size: 1.05rem; }
}

.gusti-cta {
  margin-top: var(--space-12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.gusti-cta__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.gusti-cta__nota {
  font-size: var(--fs-caption);
  opacity: 0.65;
}

/* ------------------------------ FILTRI (dentro il menu) ------------------------ */

/* Resta ferma in cima mentre si scorrono i gusti, per cambiare categoria
   senza tornare su. Occupa tutta la larghezza del pannello (margini
   negativi = padding del contenitore) con lo stesso fondo crema, così le
   card le passano sotto pulite; l'ombra compare solo quando è appoggiata
   in cima (classe .is-ferma, da flavorFilter.js). z-index sopra i testi
   delle card, che hanno z-index:1. */
.gusti-filtri {
  position: sticky;
  top: calc(-1 * var(--space-8));
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 calc(-1 * var(--container-pad)) var(--space-3);
  padding: var(--space-3) var(--container-pad);
  background: var(--crema);
  transition: box-shadow var(--dur-fast) var(--ease-soft);
}

.gusti-filtri.is-ferma {
  box-shadow: 0 10px 18px -14px rgb(74 19 28 / 45%);
}

/* Su telefono le sette pillole in più righe ruberebbero mezzo schermo alla
   barra ferma in cima: una riga sola che scorre di lato. */
@media (max-width: 767px) {
  .gusti-filtri {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gusti-filtri::-webkit-scrollbar { display: none; }

  .gusti-filtri .filtro-pill {
    flex: none;
    white-space: nowrap;
  }
}

.gusti-conteggio {
  font-size: var(--fs-caption);
  color: var(--rosso-accent);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}

.gusti-vuoto {
  max-width: 48ch;
  margin-bottom: var(--space-8);
  font-size: var(--fs-body-sm);
  color: var(--antracite);
  opacity: 0.75;
}

/* Su telefono due colonne, non una: con una sola ogni card occupava mezzo
   schermo e i 43 gusti erano un nastro infinito di foto giganti. Fino a
   1023 px le card hanno la foto quadrata (vedi .gusto-card più sotto),
   da lì in su la fascia di 220 px del layout da PC. */
.gusti-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  /* contesto di posizionamento per GSAP Flip: senza, le card "assolute"
     durante la transizione si posizionano rispetto a un antenato più
     lontano (.menu-gusti__scroll), che include l'altezza di tutto quello
     che sta sopra la griglia (ticket prezzi, filtri, conteggio) — un
     offset enorme che GSAP applica come transform e anima via via che
     l'animazione "recupera" quello scarto, ed è quello lo scatto residuo. */
  position: relative;
}

@media (min-width: 768px) {
  .gusti-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

@media (min-width: 1024px) {
  .gusti-griglia { gap: var(--space-6); }
}

.gusti-nota {
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  opacity: 0.7;
  max-width: 60ch;
}

.esperienze {
  margin-top: var(--space-24);
}

.esperienze__titolo {
  margin-bottom: var(--space-8);
}

.esperienze__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .esperienze__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}

@media (min-width: 1024px) {
  .esperienze__griglia { gap: var(--space-6); }
}

/* ------------------------------- MENU GUSTI (modale) --------------------------- */

.menu-gusti {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-menu);
  display: flex;
  justify-content: center;
  /* il top-padding lascia sempre spazio alla nav fissa (~72px), che sta
     sopra il modale (--z-nav > --z-mobile-menu) */
  padding: 92px clamp(12px, 4vw, 32px) clamp(12px, 4vw, 32px);
  visibility: hidden;
}

.menu-gusti__inner {
  width: 100%;
  max-width: 1180px;
  /* min-height:0 sovrascrive il default "min-height:auto" dei flex item:
     senza, questo contenitore si allarga fino al contenuto invece di
     restare nei limiti di .menu-gusti, e lo scroll interno non scatta mai */
  min-height: 0;
  background: var(--crema);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.menu-gusti__header {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--container-pad);
  background: var(--avorio);
  border-bottom: 1px solid var(--beige-caldo);
}

.menu-gusti__titolo {
  margin-top: var(--space-1);
}

.menu-gusti__chiudi {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rosso-scuro);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.menu-gusti__chiudi:hover {
  transform: rotate(90deg);
  background: var(--rosso-accademia);
  color: var(--crema);
}

.menu-gusti__chiudi svg {
  width: 18px;
  height: 18px;
}

.menu-gusti__scroll {
  flex: 1;
  min-height: 0; /* stesso motivo di .menu-gusti__inner: senza, niente scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-8) var(--container-pad) var(--space-16);
  /* contesto di posizionamento per GSAP Flip: durante la transizione tra
     filtri, Flip mette temporaneamente le card in position:absolute — senza
     un antenato position:relative qui, si posizionano rispetto a un
     antenato sbagliato e "saltano" fuori posto */
  position: relative;
}

/* ----------------------------- SENZA ZUCCHERO -------------------------------- */

.senza-zucchero {
  padding-block: var(--space-section-y);
  background: var(--rosso-scuro);
  color: var(--crema);
}

.senza-zucchero__grid {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 900px) {
  .senza-zucchero__grid {
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
  }
}

.senza-zucchero__titolo {
  color: var(--crema);
}

.senza-zucchero__paragrafo {
  margin-top: var(--space-4);
  opacity: 0.85;
  max-width: 56ch;
}

.badge-gruppi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

@media (min-width: 560px) {
  .badge-gruppi { grid-template-columns: 1fr 1fr; }
}

.badge-gruppo h3 {
  color: var(--oro-tenue);
  font-size: var(--fs-body-lg);
}

.senza-zucchero .icon-draw {
  color: var(--oro-tenue);
}

.badge-gruppo ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.badge-gruppo li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.senza-zucchero__visivo {
  aspect-ratio: 1;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

/* L'attestato VEGANOK al posto della grafica decorativa: un documento
   verticale (formato A4), quindi niente quadrato — prende le proporzioni
   dell'immagine. Angoli appena arrotondati e ombra profonda, come un foglio
   appoggiato sul fondo bordeaux; al passaggio del mouse si solleva un poco,
   perché si può aprire a grandezza piena. */
.senza-zucchero__attestato {
  aspect-ratio: auto;
  max-width: clamp(210px, 150px + 12vw, 280px);
  margin-block: 0;
  /* sopra il motivo a maioliche (.sfondo-maiolica-decorativo, che copre
     tutto il sito): sul bianco del foglio si vedeva in trasparenza come una
     filigrana, e un attestato deve restare pulito e leggibile */
  position: relative;
  z-index: calc(var(--z-sfondo-decorativo) + 1);
}

.senza-zucchero__attestato a {
  display: block;
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-premium);
}

.senza-zucchero__attestato img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

.senza-zucchero__attestato figcaption {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--oro-chiaro);
}

.senza-zucchero__attestato a:focus-visible {
  outline: 2px solid var(--oro-chiaro);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .senza-zucchero__attestato a:hover { transform: translateY(-4px); }
}

/* ------------------------------- ACCOGLIENZA --------------------------------- */

.accoglienza {
  padding-block: var(--space-section-y);
}

.servizi-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}

@media (min-width: 640px) {
  .servizi-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .servizi-griglia { grid-template-columns: repeat(5, 1fr); }
}

/* minmax(0, …) invece di 1fr: con 1fr la colonna non scende sotto la
   larghezza del contenuto più lungo che non va a capo, e a 320 px il
   badge "Disponibilità stagionale in negozio" usciva dalla card tagliato. */
.zampa-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  overflow: hidden;
}

@media (min-width: 800px) {
  .zampa-card {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
  }
}

.zampa-card__visivo {
  min-height: 220px;
  position: relative;
}

/* Su telefono (una colonna) una fascia fissa di 220 px tagliava
   l'illustrazione a metà della zampa: il riquadro prende quasi le sue
   proporzioni e l'immagine resta ancorata in basso, dove la zampa entra
   dal bordo (in alto c'è solo sfondo bianco). */
@media (max-width: 799px) {
  .zampa-card__visivo {
    min-height: 0;
    aspect-ratio: 5 / 4;
  }

  .zampa-card__foto {
    object-position: 50% 100%;
  }
}

.zampa-card__testo {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
}

.zampa-card__testo .badge { margin-top: var(--space-4); align-self: flex-start; white-space: normal; }

/* -------------------------------- RECENSIONI ----------------------------------- */

.recensioni {
  padding-block: var(--space-section-y) var(--space-16);
  background: var(--avorio);
  overflow: hidden;
}

.rating-riepilogo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.rating-blocco {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.marquee {
  width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  margin-top: var(--space-8);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--space-6);
  width: max-content;
  padding-inline: var(--container-pad);
}

.marquee__item {
  flex: 0 0 auto;
  width: min(80vw, 380px);
}

/* --------------------------------- CONTATTI ------------------------------------- */

.contatti {
  padding-top: var(--space-section-y);
}

.contatti__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-section-y);
}

@media (min-width: 900px) {
  .contatti__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }
}

.contatti__mappa {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.mappa-stilizzata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mappa-stilizzata__cta {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* stesso bug di .spazio-roberto sopra: var(--space-5) non esiste,
     azzerava l'intero shorthand (anche il var(--space-3) valido) */
  padding: var(--space-3) var(--space-4);
  background: var(--avorio);
  color: var(--rosso-scuro);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}

.mappa-stilizzata__cta svg {
  width: 16px;
  height: 16px;
}

.mappa-stilizzata__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--rosso-accent);
}

.contatti__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.contatti__ordina {
  margin-top: var(--space-6);
}

.cta-finale {
  background: var(--rosso-accademia);
  color: var(--crema);
  padding-block: var(--space-24);
}

.cta-finale__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.cta-finale h2 { color: var(--crema); }

.cta-finale__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

.cta-finale__whatsapp {
  background: transparent;
  color: var(--crema);
  border: 1.5px solid rgb(248 241 228 / 35%);
}

.cta-finale__whatsapp:hover {
  border-color: var(--crema);
  transform: translateY(-2px);
}

/* ---------------------------------- FOOTER -------------------------------------- */

.footer {
  background: var(--rosso-scuro);
  color: var(--crema-85);
  padding-top: var(--space-16);
  position: relative;
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer__colonna ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.footer__filigrana {
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 5rem);
  opacity: 0.5;
  padding-block: var(--space-4);
}

.footer__legale {
  border-top: 1px solid rgb(248 241 228 / 12%);
  padding-block: var(--space-6);
  font-size: var(--fs-caption);
}

/* ------------------------------- FLOATING CTA ------------------------------------ */

.floating-cta-group {
  position: fixed;
  right: max(var(--space-6), calc(var(--space-6) + env(safe-area-inset-right)));
  bottom: max(var(--space-6), calc(var(--space-6) + env(safe-area-inset-bottom)));
  z-index: var(--z-floating-cta);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.floating-cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================== components.css ============================== */

/* =========================================================================
   COMPONENTS — bottoni, card, badge, nav, tabella, marquee
   ========================================================================= */

/* --------------------------------- BOTTONI ------------------------------------ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wide);
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  will-change: transform;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-premium);
}

.btn--primario {
  background: var(--rosso-accademia);
  color: var(--crema);
  box-shadow: var(--shadow-md);
}

.btn--primario::before {
  background: var(--rosso-accent);
}

.btn--primario:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn--primario:hover::before { transform: scaleX(1); }

.btn--primario:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn--secondario {
  background: transparent;
  color: var(--rosso-scuro);
  border: 1.5px solid var(--rosso-accademia);
}

.btn--secondario::before {
  background: var(--rosso-accademia);
}

.btn--secondario:hover {
  color: var(--crema);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--secondario:hover::before { transform: scaleX(1); }

.btn--ghost {
  padding: var(--space-2) var(--space-4);
  color: var(--rosso-scuro);
  font-size: var(--fs-caption);
}

.btn--ghost:hover { color: var(--rosso-accent); }

.btn--magnetico {
  background: var(--oro-tenue);
  color: var(--rosso-scuro);
  padding: var(--space-6) var(--space-12);
  font-size: var(--fs-body-lg);
  box-shadow: var(--shadow-xl);
}

.btn--magnetico span {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-soft);
}

/* ------------------------------- FILTRO PILLOLE -------------------------------- */

.filtro-pill {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--beige-caldo);
  background: var(--avorio);
  color: var(--rosso-scuro);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}

.filtro-pill:hover {
  border-color: var(--rosso-accademia);
  transform: translateY(-1px);
}

.filtro-pill.is-active {
  background: var(--rosso-accademia);
  color: var(--crema);
  border-color: var(--rosso-accademia);
}

/* -------------------------------- PREZZI TICKET -------------------------------- */

.prezzi-ticket {
  list-style: none;
  /* sopra il motivo a maioliche (.sfondo-maiolica-decorativo), come lo
     spazio di Roberto: senza, la trama passava sopra il fondo avorio dei
     prezzi. Sulla lista e non sui <li>: il reveal (data-reveal) le dà un
     transform, e uno z-index dei <li> resterebbe chiuso al suo interno */
  position: relative;
  z-index: calc(var(--z-sfondo-decorativo) + 1);
}

.prezzi-ticket li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--avorio);
  border: 1px dashed var(--beige-caldo);
  border-radius: var(--radius-md);
}

.prezzi-ticket__nome {
  font-weight: var(--fw-semibold);
  color: var(--rosso-scuro);
}

.prezzi-ticket__dettaglio {
  font-size: var(--fs-caption);
  opacity: 0.65;
  /* prima era "flex: 1": nella riga più stretta (es. "Vaschetta piccola")
     lo spazio residuo bastava per iniziare il testo ma non per contenerlo,
     e flex-wrap lo spezzava parola per parola in una colonna stretta e
     illeggibile invece di mandarlo per intero a capo. flex-basis:100%
     lo forza sempre su una riga propria a piena larghezza, uguale per
     tutte e tre le voci invece che diverso caso per caso. */
  flex: 1 1 100%;
  order: 3;
}

.prezzi-ticket__prezzo {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  color: var(--rosso-accent);
  margin-left: auto;
}

/* --------------------------------- CIFRE BRAND ---------------------------------- */

.brand__cifra {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.brand__cifra-numero {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--rosso-accademia);
}

.brand__cifra-label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  opacity: 0.6;
}

/* --------------------------------- BADGE -------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  vertical-align: middle;
  white-space: nowrap;
}

.badge--vegano { background: rgb(107 127 79 / 14%); color: var(--verde-vegano); }
.badge--novita { background: var(--oro-tenue); color: var(--rosso-scuro); }
.badge--soldout { background: rgb(42 37 33 / 16%); color: #5a544e; }
.badge--senzaglutine { background: rgb(110 30 42 / 8%); color: var(--rosso-accademia); }
.badge--senzazucchero { background: rgb(110 30 42 / 8%); color: var(--rosso-accademia); }
.badge--cheto { background: rgb(198 164 104 / 28%); color: #6e5220; }

.tag-nota {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  color: #6b6560; /* colore pieno invece di opacity: garantisce AA indipendentemente dallo sfondo */
}

/* ----------------------------------- NAV --------------------------------------- */

.nav {
  transition: background-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), backdrop-filter var(--dur-base) var(--ease-soft);
}

.nav.is-scrolled {
  background: var(--crema-85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-sm);
}

.nav__logo {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  line-height: 1;
  font-family: var(--font-display);
}

/* Come nel logo vero del negozio (assets/logo/accademia-logo-badge.webp):
   "ACCADEMIA" e "DEL GELATO" su due righe identiche, stessa grandezza e
   stessa spaziatura — richiesto da Roberto. */
.nav__logo-eyebrow,
.nav__logo-nome {
  font-size: clamp(0.8rem, 0.74rem + 0.3vw, 0.95rem);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rosso-scuro);
  font-weight: var(--fw-display-medium);
}

.nav__links ul {
  list-style: none;
}

.nav__links a {
  position: relative;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--rosso-scuro);
  padding-block: var(--space-1);
}

.nav__links a:hover { color: var(--rosso-accent); }

.nav__indicator {
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: var(--oro-tenue);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-premium), width var(--dur-base) var(--ease-premium);
  opacity: 0;
}

.nav__indicator.is-active { opacity: 1; }

.nav__toggle-linea {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--rosso-scuro);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-fast) var(--ease-soft);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-linea:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-linea:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* A menu aperto il logo e la X restano sopra l'overlay (vedi --z-nav in
   tokens.css): qui adattiamo i loro colori allo sfondo scuro del menu.
   Sfondo pieno (non trasparente) indipendentemente da .is-scrolled: il
   menu adesso può scorrere al suo interno (overflow-y su .menu-mobile,
   necessario sugli schermi bassi), e senza uno sfondo opaco qui il testo
   che scorre sotto diventerebbe visibile attraverso la nav, sovrapposto
   al logo invece di restarne nascosto dietro. */
body.menu-aperto .nav {
  background: var(--rosso-scuro);
}

body.menu-aperto .nav.is-scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.menu-aperto .nav__logo-eyebrow,
body.menu-aperto .nav__logo-nome {
  color: var(--crema);
}

body.menu-aperto .nav__toggle-linea {
  background: var(--crema);
}

/* ------------------------------- MENU MOBILE ------------------------------------ */

.menu-mobile {
  background: var(--rosso-scuro);
  color: var(--crema);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-premium), visibility 0s linear var(--dur-base);
}

.menu-mobile.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-premium), visibility 0s;
}

.menu-mobile a {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display-medium);
  color: var(--crema);
  opacity: 0.85;
}

.menu-mobile a:hover { opacity: 1; color: var(--oro-tenue); }

.menu-mobile li {
  opacity: 0;
  transform: translateY(16px);
}

.menu-mobile.is-open li {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-premium);
}

.menu-mobile.is-open li:nth-child(1) { transition-delay: 60ms; }
.menu-mobile.is-open li:nth-child(2) { transition-delay: 110ms; }
.menu-mobile.is-open li:nth-child(3) { transition-delay: 160ms; }
.menu-mobile.is-open li:nth-child(4) { transition-delay: 210ms; }
.menu-mobile.is-open li:nth-child(5) { transition-delay: 260ms; }
.menu-mobile.is-open li:nth-child(6) { transition-delay: 310ms; }
.menu-mobile.is-open li:nth-child(7) { transition-delay: 360ms; }

.menu-mobile__footer p { opacity: 0.6; font-size: var(--fs-caption); }

/* stile proprio invece di .btn--secondario: quella variante usa testo/bordo
   rosso-scuro a riposo, praticamente invisibile sullo sfondo rosso-scuro
   di questo menu — qui serve chiaro sul fondo scuro fin da subito, non
   solo al passaggio del mouse (che su un menu mobile touch non arriva mai) */
.menu-mobile__whatsapp {
  background: transparent;
  color: var(--crema);
  border: 1.5px solid rgb(248 241 228 / 35%);
}

.menu-mobile__whatsapp:hover {
  border-color: var(--crema);
}

.menu-mobile__lingua {
  align-self: flex-start;
  height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid rgb(248 241 228 / 35%);
  background: transparent;
  color: var(--crema);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.menu-mobile__lingua:hover {
  border-color: var(--crema);
}

/* -------------------------------- MENU GUSTI ------------------------------------ */

.menu-gusti {
  background: rgb(42 37 33 / 45%);
  opacity: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity var(--dur-base) var(--ease-soft), visibility 0s linear var(--dur-base);
}

.menu-gusti.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-soft), visibility 0s;
}

.menu-gusti__inner {
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-soft);
}

.menu-gusti.is-open .menu-gusti__inner {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ------------------------------------ HERO --------------------------------------- */

.hero {
  background: linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
}

.hero__canvas {
  opacity: 0.85;
}

.hero__vignette {
  background: radial-gradient(ellipse at 30% 20%, transparent 0%, transparent 45%, var(--crema) 92%);
}

.hero__eyebrow { color: var(--rosso-accent); }

.hero__titolo {
  color: var(--rosso-scuro);
}

.hero__sottotitolo {
  margin-top: var(--space-6);
  font-size: var(--fs-body-lg);
  color: var(--antracite);
  opacity: 0.82;
  max-width: 52ch;
}

.hero__badge-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--avorio);
  border: 1px solid var(--beige-caldo);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  box-shadow: var(--shadow-sm);
}

.hero__badge-rating-stelle {
  color: var(--oro-tenue);
  letter-spacing: 1px;
}

.hero__badge-rating--riconoscimento {
  border-color: var(--oro-tenue);
}

/* Visite al sito (js/modules/visite.js): stessa pillola delle altre, con
   un puntino verde che pulsa piano — il numero è dal vivo. Compare con una
   dissolvenza quando arriva il primo totale. */
.hero__visite {
  margin: 0;
  font-variant-numeric: tabular-nums;
  animation: visite-compare var(--dur-slow) var(--ease-premium) both;
}

.hero__visite[hidden] { display: none; }

.hero__visite-punto {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-vegano-chiaro);
}

.hero__visite-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--verde-vegano-chiaro);
  animation: visite-pulsa 2.4s var(--ease-soft) infinite;
}

@keyframes visite-compare {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes visite-pulsa {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visite,
  .hero__visite-punto::after { animation: none; }
}

/* ---------------------------- SPAZIO DI ROBERTO ------------------------------ */
/* Nome definitivo ancora da scegliere (lo sceglie Roberto) — l'eyebrow nel
   markup ("Dal laboratorio di Roberto") è un segnaposto pensato per restare
   presentabile anche se non viene mai cambiato. */

.spazio-roberto {
  /* sopra il motivo a maioliche (.sfondo-maiolica-decorativo), come le
     card delle linee: senza, la trama passava sopra il fondo avorio, le
     card dei due blog sembravano trasparenti e il testo si leggeva male */
  position: relative;
  z-index: calc(var(--z-sfondo-decorativo) + 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
  max-width: 560px;
  background: var(--avorio);
  border: 1px solid var(--beige-caldo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  /* era var(--space-5), un token che non esiste nella scala (1,2,3,4,6,8...):
     var() senza fallback su una proprietà non definita rende l'intera
     dichiarazione non valida, quindi il padding risultava 0 — il testo
     sfondava quasi contro il bordo della card invece di starne staccato. */
  padding: var(--space-6);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}

@media (min-width: 560px) {
  .spazio-roberto {
    flex-direction: row;
    align-items: center;
    padding: var(--space-4);
  }

  /* testo lungo aperto con "Leggi tutto": la foto resta in alto, accanto
     all'inizio del testo, invece che a metà altezza */
  .spazio-roberto--espansa {
    align-items: flex-start;
  }
}

@media (hover: hover) and (pointer: fine) {
  .spazio-roberto:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
}

.spazio-roberto__foto-wrap {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--beige-caldo);
}

@media (min-width: 560px) {
  .spazio-roberto__foto-wrap {
    width: 220px;
    aspect-ratio: 1 / 1;
  }
}

/* object-fit:contain invece di cover: Roberto carica foto di proporzioni
   diverse (verticali, orizzontali, quadrate) e "cover" ne tagliava una
   parte per riempire lo spazio — con "contain" si vede sempre la foto
   intera, con lo sfondo del riquadro a fare da cornice se avanza spazio. */
.spazio-roberto__foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.spazio-roberto__testo {
  min-width: 0;
  /* una stringa lunga senza spazi (o comunque piu' larga della card)
     altrimenti sfonda il bordo invece di andare a capo */
  overflow-wrap: break-word;
}

.spazio-roberto__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--rosso-accent);
  margin: 0 0 var(--space-1);
}

.spazio-roberto__titolo {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-display-medium);
  color: var(--rosso-scuro);
  margin: 0 0 var(--space-1);
  line-height: 1.25;
}

.spazio-roberto__estratto {
  font-size: var(--fs-body-sm);
  color: var(--antracite);
  opacity: 0.8;
  margin: 0;
  line-height: 1.5;
  /* gli a capo che Roberto scrive restano a capo */
  white-space: pre-line;
}

/* Il testo dei post non ha limite di lunghezza: a card chiusa se ne vedono
   le prime righe, con i puntini se continua. Si legge tutto con "Leggi
   tutto" nella vetrina (js/modules/blog.js) o aprendo la card nell'archivio. */
.spazio-roberto:not(.spazio-roberto--espansa, .archivio-roberto__card--espansa) .spazio-roberto__estratto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

/* "Leggi tutto" / "Mostra meno" della vetrina: compare solo se il testo è
   tagliato. Stesso aspetto del link all'archivio qui sotto. */
.spazio-roberto__leggi {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  background: none;
  border: none;
  padding: var(--space-1) 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--rosso-accent);
  cursor: pointer;
}

/* senza questa regola "display: flex" qui sopra batterebbe l'attributo
   hidden e il pulsante resterebbe visibile anche a testo intero (stesso
   motivo di .archivio-roberto .spazio-roberto[hidden] più sotto) */
.spazio-roberto__leggi[hidden] {
  display: none;
}

.spazio-roberto__leggi svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-soft);
}

.spazio-roberto__leggi[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.spazio-roberto__leggi[aria-expanded="true"] .spazio-roberto__leggi-apri,
.spazio-roberto__leggi[aria-expanded="false"] .spazio-roberto__leggi-chiudi {
  display: none;
}

.spazio-roberto__data {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--antracite);
  opacity: 0.55;
}

.spazio-roberto__archivio-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  background: none;
  border: none;
  padding: var(--space-1) 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--rosso-accent);
  cursor: pointer;
  transition: gap var(--dur-fast) var(--ease-soft);
}

.spazio-roberto__archivio-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .spazio-roberto__archivio-link:hover svg { transform: translateX(3px); }
}

/* ----- Archivio (dentro il modale a schermo intero .menu-gusti) ----- */

.archivio-roberto__cerca-wrap {
  position: relative;
  margin-top: var(--space-4);
  max-width: 320px;
}

.archivio-roberto__cerca-icona {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--antracite);
  opacity: 0.45;
  pointer-events: none;
}

.archivio-roberto__cerca {
  width: 100%;
  font: inherit;
  font-size: var(--fs-caption);
  padding: var(--space-3) var(--space-3) var(--space-3) calc(16px + var(--space-3) * 2);
  border: 1.5px solid var(--beige-caldo);
  border-radius: var(--radius-pill);
  background: var(--crema);
  color: var(--antracite);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-soft);
}

.archivio-roberto__cerca::placeholder { color: var(--antracite); opacity: 0.45; }
.archivio-roberto__cerca:focus { border-color: var(--rosso-accademia); }
.archivio-roberto__cerca::-webkit-search-cancel-button { -webkit-appearance: none; }

.archivio-roberto {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 720px;
  margin-inline: auto;
}

.archivio-roberto .spazio-roberto {
  max-width: none;
  flex-direction: row;
  margin-top: 0;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}

/* .spazio-roberto ha "display: flex" nel proprio selettore d'origine (0,1,0):
   senza questa regola esplicita, [hidden] da solo (stessa specificità, ma
   nella cascata dello user-agent) verrebbe sempre battuto e le card filtrate
   dalla ricerca resterebbero visibili — stesso bug già visto per .gestione__voce
   nella pagina di pubblicazione di Roberto. */
.archivio-roberto .spazio-roberto[hidden] {
  display: none;
}

.archivio-roberto .spazio-roberto:hover,
.archivio-roberto .spazio-roberto:focus-visible {
  box-shadow: var(--shadow-lg);
}

.archivio-roberto .spazio-roberto__foto-wrap {
  width: 148px;
  aspect-ratio: 1 / 1;
  transition: width var(--dur-base) var(--ease-premium), aspect-ratio var(--dur-base) var(--ease-premium);
}

/* card espansa: foto grande sopra, testo a piena larghezza sotto.
   Selettore concatenato con .archivio-roberto .spazio-roberto per pareggiarne
   la specificita' (0,2,0): un singolo .archivio-roberto__card--espansa non
   basterebbe a vincere quella regola nel breakpoint desktop. */
.archivio-roberto .spazio-roberto.archivio-roberto__card--espansa {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}

.archivio-roberto .spazio-roberto.archivio-roberto__card--espansa .spazio-roberto__foto-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.archivio-roberto__card--espansa .spazio-roberto__estratto {
  opacity: 0.9;
}

/* nell'elenco le card chiuse restano più basse che nella vetrina: per
   leggere tutto si apre la card */
.archivio-roberto .spazio-roberto:not(.archivio-roberto__card--espansa) .spazio-roberto__estratto {
  -webkit-line-clamp: 4;
}

.archivio-roberto__vuoto {
  text-align: center;
  color: var(--antracite);
  opacity: 0.6;
  padding-block: var(--space-16);
}

.archivio-roberto__caricamento {
  text-align: center;
  color: var(--antracite);
  opacity: 0.5;
  padding-block: var(--space-16);
  font-size: var(--fs-caption);
}

.hero__scroll-cta {
  color: var(--rosso-scuro);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  opacity: 0.7;
}

.hero__scroll-linea {
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--rosso-accademia), transparent);
}

/* ------------------------------------- PILLAR ------------------------------------- */

.pillar {
  background: var(--crema);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}

.pillar:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pillar--grande {
  background: var(--rosso-accademia);
  color: var(--crema);
}

.pillar--grande .pillar__titolo { color: var(--crema); }
.pillar--grande .pillar__testo { color: var(--crema-85); }
.pillar--grande .pillar__icona { color: var(--oro-tenue); }

.pillar__icona {
  width: 40px;
  height: 40px;
  color: var(--rosso-accademia);
  stroke: currentColor;
  stroke-width: 1.5;
}

.pillar__titolo { color: var(--rosso-scuro); font-size: var(--fs-h6); }
.pillar__testo { opacity: 0.75; font-size: var(--fs-body-sm); }

/* ---------------------------------- ICONE LINE-DRAW -------------------------------- */

.icon-draw {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--rosso-accademia);
}

.icon-draw--sm { width: 24px; height: 24px; flex: none; }

.draw-path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------- CARD GUSTO ---------------------------------- */

.gusto-card {
  position: relative;
  background: var(--avorio);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  padding-top: calc(220px + var(--space-6));
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-soft);
}

/* perspective/preserve-3d servono solo al tilt hover (scrollReveal.js,
   già condizionato a hasFineHover): tenerli fuori dal caso touch/mobile
   evita di forzare un layer 3D composito su 41 card senza motivo — un
   costo di rendering gratuito e, in alcuni browser, una resa del testo
   in grayscale-AA invece di subpixel-AA che ne riduce il contrasto reale. */
@media (hover: hover) and (pointer: fine) {
  .gusto-card {
    transform-style: preserve-3d;
    perspective: 800px;
  }
}

.gusto-card__visivo {
  position: absolute;
  inset: 0;
  height: 220px;
  background: linear-gradient(135deg, var(--ing-1, var(--beige-caldo)), var(--ing-2, var(--avorio)));
}

.gusto-card__visivo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--avorio) 100%);
}

.gusto-card__visivo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: var(--ing-pattern, none);
  background-size: var(--ing-pattern-size, 10px 10px);
}

/* Foto vera caricata da Roberto (Sanity): mai più un placeholder generico,
   solo il colore/motivo dato dall'ingrediente per chi non ne ha ancora una.
   object-fit:contain invece di cover: le foto di Roberto arrivano in
   proporzioni diverse (quadrate, verticali, orizzontali) e "cover"
   tagliava una parte del soggetto per riempire lo spazio — con "contain"
   si vede sempre la foto intera, con il gradiente dell'ingrediente a
   fare da cornice nello spazio che resta libero ai lati. */
.gusto-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* con una foto vera il micro-pattern decorativo diventa ridondante */
.gusto-card__visivo:has(.gusto-card__foto)::after {
  display: none;
}

.gusto-card__eyebrow {
  position: relative;
  z-index: 1;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--rosso-scuro);
  margin-bottom: var(--space-2);
}

.gusto-card__nome {
  position: relative;
  z-index: 1;
  font-size: var(--fs-h6);
  margin-bottom: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.gusto-card__desc {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body-sm);
  opacity: 0.75;
}

.gusto-card__badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Telefono e tablet (griglia a 2-3 colonne): il riquadro della foto è
   quadrato come le foto che carica Roberto (tutte 1600×1600), così la foto
   lo riempie da bordo a bordo, senza fasce colorate ai lati né tagli; testo
   e spazi più compatti per card strette. Da 1024 px resta il layout da PC. */
@media (max-width: 1023px) {
  .gusto-card {
    padding: var(--space-3) var(--space-3) var(--space-4);
    /* in percentuale si calcola sulla larghezza: spazio quadrato per la foto */
    padding-top: calc(100% + var(--space-3));
  }

  .gusto-card__visivo {
    bottom: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .gusto-card__eyebrow {
    letter-spacing: 0.08em;
    margin-bottom: var(--space-1);
  }

  .gusto-card__nome {
    font-size: var(--fs-body);
    gap: var(--space-1);
  }

  .gusto-card__desc {
    font-size: var(--fs-caption);
    line-height: 1.45;
  }

  .gusto-card__badges {
    gap: var(--space-1);
    margin-top: var(--space-3);
  }
}

/* Niente opacity sull'intera card: degraderebbe il contrasto di tutto il
   testo sotto la soglia AA. Il grayscale sulla sola fascia visiva, più il
   badge "Esaurito", bastano come segnale — il testo resta pienamente leggibile. */
.gusto-card.is-esaurito .gusto-card__visivo { filter: grayscale(0.7); }
.gusto-card.is-esaurito .gusto-card__nome { color: var(--antracite); }

/* famiglie ingrediente — gradiente + pattern, vedi README per la mappatura completa */
.gusto-card[data-ingrediente="cioccolato"]     { --ing-1: var(--ing-cioccolato-1); --ing-2: var(--ing-cioccolato-2); }
.gusto-card[data-ingrediente="pistacchio"]     { --ing-1: var(--ing-pistacchio-1); --ing-2: var(--ing-pistacchio-2); }
.gusto-card[data-ingrediente="nocciola"]       { --ing-1: var(--ing-nocciola-1); --ing-2: var(--ing-nocciola-2); }
.gusto-card[data-ingrediente="vaniglia-crema"] { --ing-1: var(--ing-vaniglia-1); --ing-2: var(--ing-vaniglia-2); }
.gusto-card[data-ingrediente="frutti-rossi"]   { --ing-1: var(--ing-frutti-rossi-1); --ing-2: var(--ing-frutti-rossi-2); }
.gusto-card[data-ingrediente="agrumi"]         { --ing-1: var(--ing-agrumi-1); --ing-2: var(--ing-agrumi-2); }
.gusto-card[data-ingrediente="tropicale"]      { --ing-1: var(--ing-tropicale-1); --ing-2: var(--ing-tropicale-2); }
.gusto-card[data-ingrediente="caffe-caramello"]{ --ing-1: var(--ing-caffe-1); --ing-2: var(--ing-caffe-2); }
.gusto-card[data-ingrediente="liquirizia"]     { --ing-1: var(--ing-liquirizia-1); --ing-2: var(--ing-liquirizia-2); }
.gusto-card[data-ingrediente="cocco"]          { --ing-1: var(--ing-cocco-1); --ing-2: var(--ing-cocco-2); }
.gusto-card[data-ingrediente="neutro"]         { --ing-1: var(--ing-neutro-1); --ing-2: var(--ing-neutro-2); }

.gusto-card[data-ingrediente="cioccolato"] .gusto-card__visivo::after { --ing-pattern: radial-gradient(circle, rgb(255 255 255 / 25%) 1px, transparent 1px); --ing-pattern-size: 9px 9px; }
.gusto-card[data-ingrediente="pistacchio"] .gusto-card__visivo::after { --ing-pattern: radial-gradient(circle, rgb(255 255 255 / 30%) 1.2px, transparent 1.2px); --ing-pattern-size: 7px 7px; }
.gusto-card[data-ingrediente="nocciola"] .gusto-card__visivo::after   { --ing-pattern: radial-gradient(circle, rgb(0 0 0 / 12%) 1.4px, transparent 1.4px); --ing-pattern-size: 11px 11px; }
.gusto-card[data-ingrediente="frutti-rossi"] .gusto-card__visivo::after { --ing-pattern: radial-gradient(circle, rgb(255 255 255 / 30%) 1px, transparent 1px); --ing-pattern-size: 8px 8px; }
.gusto-card[data-ingrediente="agrumi"] .gusto-card__visivo::after { --ing-pattern: repeating-linear-gradient(45deg, rgb(255 255 255 / 20%) 0 2px, transparent 2px 8px); }
.gusto-card[data-ingrediente="cocco"] .gusto-card__visivo::after { --ing-pattern: repeating-linear-gradient(100deg, rgb(0 0 0 / 5%) 0 2px, transparent 2px 10px); }
.gusto-card[data-ingrediente="liquirizia"] .gusto-card__visivo::after { --ing-pattern: linear-gradient(180deg, rgb(255 255 255 / 8%), transparent); }

/* linee — comportamento hover distinto per famiglia.
   Il transform (lift + tilt 3D) è gestito interamente da JS (scrollReveal.js,
   config LINEA_HOVER) per evitare conflitti con l'inline style del tilt:
   qui restano solo gli effetti che non toccano transform. */
.gusto-card[data-linea="creme"]:hover { box-shadow: var(--shadow-lg); }
.gusto-card[data-linea="frutta"]:hover { box-shadow: var(--shadow-lg); }
.gusto-card[data-linea="vegani"]:hover { box-shadow: var(--shadow-gold-glow), var(--shadow-md); }

.gusto-card[data-linea="naturalmente-senza"] {
  border: 1.5px solid transparent;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}

.gusto-card[data-linea="naturalmente-senza"]:hover {
  border-color: var(--rosso-accademia);
}

.gusto-card[data-linea="puro-zero"]:hover { box-shadow: var(--shadow-md); }

.gusto-card[data-linea="granite"] .gusto-card__visivo {
  background: linear-gradient(135deg, var(--ing-1, var(--beige-caldo)), var(--avorio) 70%);
}

.gusto-card[data-linea="granite"]:hover {
  box-shadow: var(--shadow-lg), inset 0 0 40px rgb(255 255 255 / 40%);
}

.gusto-card {
  transition: box-shadow var(--dur-base) var(--ease-soft);
}

/* ---------------------------------- ESPERIENZA CARD --------------------------------- */

.esperienza-card {
  background: var(--rosso-accademia);
  color: var(--crema);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* in percentuale si calcola sulla larghezza: spazio quadrato per la foto */
  padding-top: calc(100% + var(--space-4));
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}

.esperienza-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* Foto intera e quadrata come i file (800×800): prima era una fascia alta
   88 px, che ne mostrava solo una striscia a caso nel mezzo. */
.esperienza-card__visivo {
  position: absolute;
  top: 0; left: 0; right: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: radial-gradient(circle at 20% 30%, var(--oro-tenue), transparent 70%);
}

.esperienza-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.esperienza-card h4 { color: var(--crema); font-size: var(--fs-h6); margin-bottom: var(--space-2); }
.esperienza-card p { opacity: 0.85; font-size: var(--fs-body-sm); }

/* card strette (2 colonne su telefono, 4 su tablet): spazi e testo più
   compatti, come nelle card dei gusti */
@media (max-width: 1023px) {
  .esperienza-card {
    padding: var(--space-3) var(--space-3) var(--space-4);
    padding-top: calc(100% + var(--space-3));
  }

  .esperienza-card h4 { font-size: var(--fs-body); margin-bottom: var(--space-1); }
  .esperienza-card p { font-size: var(--fs-caption); line-height: 1.45; }
}

/* -------------------------------------- SERVIZIO CARD -------------------------------- */

.servizio-card {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  background: var(--avorio);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}

.servizio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.servizio-card__icona {
  width: 44px;
  height: 44px;
  color: var(--rosso-accademia);
}

.servizio-card h3 { font-size: var(--fs-body-lg); }
.servizio-card p { font-size: var(--fs-caption); opacity: 0.7; }

/* ----------------------------------------- ZAMPA CARD --------------------------------- */

.zampa-card {
  background: var(--avorio);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.zampa-card__visivo {
  background: linear-gradient(150deg, var(--oro-chiaro), var(--rosso-accademia));
  overflow: hidden;
}

.zampa-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zampa-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--crema);
  color: var(--rosso-scuro);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

.zampa-card__testo h3 { margin-block: var(--space-2) var(--space-3); }
.zampa-card__testo p { opacity: 0.78; font-size: var(--fs-body-sm); }

/* ------------------------------------------ RATING / MARQUEE --------------------------- */

.rating-blocco__stelle { color: var(--oro-tenue); letter-spacing: 2px; }
.rating-blocco__numero { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--rosso-scuro); }
.rating-blocco__fonte { font-size: var(--fs-caption); opacity: 0.7; }

.marquee__item {
  background: var(--crema);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.marquee__item p { font-size: var(--fs-body-sm); font-style: italic; opacity: 0.85; }
.marquee__item cite { display: block; margin-top: var(--space-3); font-style: normal; font-weight: var(--fw-semibold); color: var(--rosso-accent); font-size: var(--fs-caption); }

/* ----------------------------------------- TABELLA ORARI ------------------------------ */

.orari-tabella {
  margin-top: var(--space-6);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--avorio);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  /* niente overflow:hidden qui: taglierebbe anche <caption>, che è dentro
     la tabella — il border-radius da solo (senza overflow) non taglia
     nulla, ma basta perché anche l'ombra segua l'angolo arrotondato invece
     di restare un rettangolo netto dietro alle celle arrotondate. Gli
     angoli delle singole celle sotto restano comunque necessari perché lo
     sfondo delle celle stesse segua la stessa curva. */
}

.orari-tabella thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
.orari-tabella thead tr:first-child th:last-child { border-top-right-radius: var(--radius-lg); }
.orari-tabella tbody tr:last-child th:first-child { border-bottom-left-radius: var(--radius-lg); }
.orari-tabella tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }

.orari-tabella caption {
  text-align: left;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--rosso-accent);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

.orari-tabella thead th {
  padding: var(--space-3) var(--space-6);
  text-align: left;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semibold);
  color: var(--rosso-accent);
  background: var(--beige-caldo);
}

.orari-tabella thead th:last-child {
  text-align: right;
}

.orari-tabella tbody th,
.orari-tabella tbody td {
  padding: var(--space-3) var(--space-6);
  text-align: left;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  border-bottom: 1px solid var(--beige-caldo);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}

.orari-tabella tbody th {
  font-family: var(--font-display);
  font-weight: var(--fw-display-medium);
  color: var(--antracite);
}

.orari-tabella tbody td {
  text-align: right;
  color: var(--antracite);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.orari-tabella tbody tr:last-child th,
.orari-tabella tbody tr:last-child td {
  border-bottom: none;
}

.orari-tabella tr.is-oggi th,
.orari-tabella tr.is-oggi td {
  background: var(--rosso-accademia-08);
  color: var(--rosso-accademia);
  font-weight: var(--fw-semibold);
  opacity: 1;
}

.orari-tabella__badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.2em 0.65em;
  background: var(--rosso-accademia);
  color: var(--crema);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.orari-nota {
  margin-top: var(--space-2);
  font-size: var(--fs-eyebrow);
  opacity: 0.6;
}

.contatti__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--antracite);
  opacity: 0.75;
  margin-top: var(--space-2);
}

.contatti__whatsapp:hover { opacity: 1; color: var(--rosso-accademia); }

/* ------------------------------------- MAPPA STILIZZATA ---------------------------------- */

.mappa-stilizzata__label {
  font-family: var(--font-display);
  font-size: 15px;
  fill: var(--rosso-scuro);
  font-weight: 600;
}

.mappa-stilizzata__via {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: #8a7a5c;
}

.mappa-stilizzata__monumento {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--rosso-accent);
  opacity: 0.8;
}

.mappa-stilizzata__marker,
.mappa-stilizzata__duomo {
  transform-box: fill-box;
  transform-origin: center;
}

.mappa-stilizzata__pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: mappa-pulse 2.6s var(--ease-soft) infinite;
}

.contatti__titolo { margin-top: var(--space-1); }
.contatti__sottotitolo { opacity: 0.7; font-size: var(--fs-body-sm); }

/* -------------------------------------------- FOOTER -------------------------------------- */

.footer__logo { font-family: var(--font-display); font-size: var(--fs-h5); color: var(--crema); }
.footer__payoff { color: var(--oro-tenue); font-size: var(--fs-caption); margin-top: var(--space-1); }
.footer__colonna h3 { color: var(--crema); font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-family: var(--font-body); font-weight: var(--fw-semibold); opacity: 0.7; }
.footer__colonna a:hover { color: var(--oro-tenue); }
.footer__colonna li { font-size: var(--fs-body-sm); opacity: 0.85; }
/* i link del footer (telefono, WhatsApp, Deliveroo, social) erano alti
   solo quanto il testo (~17px): sotto ai 24px minimi raccomandati per un
   tocco preciso (WCAG 2.5.8). display:inline-block + padding verticale
   allargano l'area toccabile reale senza spostare il testo dal suo posto
   (il margine negativo compensa lo spazio extra introdotto dal padding). */
.footer__colonna a {
  display: inline-block;
  padding-block: var(--space-2);
  margin-block: calc(var(--space-2) * -1);
}

.footer__colonna a.footer__link-deliveroo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__link-deliveroo img { flex: none; }

.btn__icona-deliveroo { flex: none; }

/* Simbolo ufficiale di WhatsApp (verde, fondo trasparente) in tutti i
   pulsanti per scriverci: assets/logo/whatsapp-simbolo.png, ritagliato dal
   logo completo che ci ha dato Roberto (assets/logo/whatsapp-logo.png). */
.icona-whatsapp {
  flex: none;
  width: 20px;
  height: 20px;
}

.footer__social {
  flex-direction: row !important;
  gap: var(--space-4) !important;
}

.badge-gruppo__nota {
  opacity: 0.7;
  font-weight: var(--fw-regular);
  text-transform: none;
}

/* -------------------------------------------- FLOATING CTA --------------------------------- */

.floating-cta {
  background: var(--rosso-accademia);
  color: var(--crema);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xl);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}

/* la visibilità allo scroll si anima sul gruppo intero, cosi' le due
   pillole (telefono + WhatsApp) compaiono e spariscono insieme invece di
   sfasarsi */
.floating-cta-group {
  opacity: 0;
  transform: translateY(24px) scale(0.9);
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-soft);
}

.floating-cta-group.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.floating-cta:hover {
  box-shadow: var(--shadow-xl), 0 0 0 4px var(--oro-tenue-25);
}

.floating-cta svg { width: 18px; height: 18px; }

/* variante WhatsApp: invertita (fondo crema, testo bordeaux) cosi' resta
   nella stessa palette del sito invece del verde WhatsApp, che stonerebbe
   con bordeaux/crema/oro usato ovunque — leggibile come "secondaria"
   accanto al pulsante telefono, pieno e quindi "primario" */
.floating-cta--whatsapp {
  background: var(--crema);
  color: var(--rosso-accademia);
  border: 1.5px solid var(--rosso-accademia);
}

@media (max-width: 480px) {
  .floating-cta span { display: none; }
  .floating-cta { padding: var(--space-4); }
}

/* -------------------------------------------- CURSORE ------------------------------------- */

.cursore__punto {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rosso-accademia);
  transform: translate(-50%, -50%);
}

.cursore__anello {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--rosso-accademia);
  transform: translate(-50%, -50%);
  transition: width var(--dur-fast) var(--ease-soft), height var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}

.cursore.is-hover .cursore__anello {
  width: 54px;
  height: 54px;
  border-color: var(--oro-tenue);
}

.cursore.is-hidden .cursore__punto,
.cursore.is-hidden .cursore__anello {
  opacity: 0;
}

/* ============================== animations.css ============================== */

/* =========================================================================
   ANIMATIONS — keyframes e classi di transizione
   Tutte le durate/easing referenziano i token di motion (tokens.css).
   ========================================================================= */

/* ------------------------------- PRELOADER -------------------------------- */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes preloader-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* Durata/delay dedicati (non i token condivisi --dur-*) così la comparsa
   del logo finisce ben dentro il minDisplay di preloader.js (1100ms),
   lasciando un momento di sosta prima della dissolvenza in uscita. */
.preloader__logo {
  opacity: 0;
  animation: preloader-pop 650ms var(--ease-premium) forwards;
  animation-delay: 100ms;
}

.preloader {
  transition: opacity var(--dur-slow) var(--ease-soft), visibility 0s linear var(--dur-slow);
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* -------------------------------- SCROLL CUE -------------------------------- */

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(8px); opacity: 1; }
}

.hero__scroll-linea {
  animation: scroll-bounce 2.4s var(--ease-in-out-soft) infinite;
}

/* --------------------------------- MARQUEE ---------------------------------- */

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__track {
  animation: marquee-scroll 42s linear infinite;
}

.marquee.is-paused .marquee__track,
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ------------------------------- SPLIT TEXT HERO ----------------------------- */

.split-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.split-char {
  display: inline-block;
  will-change: transform;
}

/* ---------------------------------- MAPPA PIN -------------------------------- */

@keyframes mappa-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* -------------------------------- FADE GENERICO ------------------------------ */

.fade-in {
  animation: fade-in-up var(--dur-base) var(--ease-soft) forwards;
}

/* ------------------------------ REDUCED MOTION ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .preloader__logo {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__scroll-linea {
    animation: none;
  }

  .marquee__track {
    animation: none;
  }

  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mappa-stilizzata__pulse {
    animation: none;
    opacity: 0.3;
  }

  * {
    scroll-behavior: auto !important;
  }
}

/* ============================== utilities.css ============================== */

/* =========================================================================
   UTILITIES — helper generici, riusati sporadicamente
   ========================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll {
  overflow: hidden;
  height: 100svh;
}

.text-oro { color: var(--oro-tenue); }
.text-center { text-align: center; }

/* elementi con reveal via JS partono invisibili solo se JS è attivo:
   evita che un errore JS lasci contenuto nascosto per sempre */
html:not(.js) [data-reveal],
html:not(.js) [data-reveal-text],
html:not(.js) [data-split-text] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none !important;
  }
}