/* =========================================================================
   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%;
}

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 ------------------------------------ */

.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: 1024px) {
  .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: 1024px) {
  .nav .nav__cta { display: inline-flex; }
}

/* stesso motivo del commento sopra: il gruppo telefono+WhatsApp resta
   nascosto sotto i 1024px, 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: 1024px) {
  .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 svg { width: 18px; height: 18px; }

.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: 1024px) {
  .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 "Da Roberto" + 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: 1024px) {
  .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;
}

.hero__content {
  position: relative;
  z-index: 2;
  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%;
}

/* --------------------------- 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);
  }
}

/* ------------------------------- VETRINA (home) ------------------------------- */

.gusti-vetrina {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

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

@media (min-width: 1024px) {
  .gusti-vetrina { grid-template-columns: repeat(4, 1fr); }
}

.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) ------------------------ */

.gusti-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

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

.gusti-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  /* 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: 640px) {
  .gusti-griglia { grid-template-columns: repeat(2, 1fr); }
}

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

.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: 1fr;
  gap: var(--space-6);
}

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

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

/* ------------------------------- 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;
}

/* ------------------------------- 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); }
}

.zampa-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  overflow: hidden;
}

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

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

.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; }

/* -------------------------------- 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 svg { width: 18px; height: 18px; }

.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;
}

.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;
  line-height: 1;
  font-family: var(--font-display);
}

.nav__logo-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rosso-scuro);
  font-weight: var(--fw-display-medium);
}

.nav__logo-nome {
  font-size: var(--fs-h6);
  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 svg { width: 18px; height: 18px; }

.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);
}

/* ---------------------------- 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 {
  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);
  }
}

@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;
}

.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;
}

.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);
}

/* ---------------------------------- MEDIA PLACEHOLDER ------------------------------- */

.media-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(155deg, var(--avorio) 0%, var(--beige-caldo) 55%, var(--oro-chiaro) 100%);
  box-shadow: var(--shadow-xl);
}

.media-placeholder__forma {
  position: absolute;
  border-radius: 50%;
  filter: blur(0px);
}

.media-placeholder__forma--coppetta {
  width: 62%;
  aspect-ratio: 1;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, var(--avorio), var(--rosso-accademia) 78%);
  border-radius: 46% 46% 50% 50% / 40% 40% 60% 60%;
  box-shadow: var(--shadow-lg);
}

.media-placeholder__forma--pallina {
  width: 34%;
  aspect-ratio: 1;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 32% 28%, var(--crema), var(--oro-tenue) 75%);
  box-shadow: var(--shadow-md);
}

.media-placeholder__grana {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle, var(--antracite) 0.6px, transparent 0.6px);
  background-size: 6px 6px;
}

.media-placeholder--senzazucchero {
  background: linear-gradient(160deg, var(--rosso-accent) 0%, var(--rosso-scuro) 100%);
}

.media-placeholder--senzazucchero .media-placeholder__forma--coppetta {
  background: radial-gradient(circle at 35% 30%, var(--oro-chiaro), var(--rosso-scuro) 80%);
}

/* ------------------------------------- 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);
}

/* 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);
  padding-top: calc(88px + 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);
}

.esperienza-card__visivo {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 88px;
  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); }

/* -------------------------------------- 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__telefono {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--rosso-accademia);
  margin-top: var(--space-2);
}

.contatti__telefono svg { width: 22px; height: 22px; }

.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 svg { width: 19px; height: 19px; }

.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__telefono:hover { color: var(--rosso-accent); }

.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; }

.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;
  }
}