/*
Theme Name: 24 Gusti
Theme URI: https://gelateria24gusti.it
Author: Alessio Merulla
Description: Tema su misura per la Gelateria 24 Gusti (Cremona): sito pubblico, anteprime, quiz e Gestionale cliente.
Version: 0.66.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietario — uso riservato al progetto 24 Gusti
Text Domain: tg24
*/

/* ------------------------------------------------------------------
   Font (subset latin, sufficiente per l'italiano). File variabili:
   un solo woff2 per famiglia copre tutti i pesi.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Token di marca — palette ufficiale 24 Gusti
   ------------------------------------------------------------------ */
:root {
  color-scheme: light only; /* niente dark mode automatico del browser, vedi meta in header.php */
  --cream:      #F5EAE0;  /* crema dei file logo ufficiali */
  --cream-2:    #EDE4D2;
  --card:       #FBF7ED;
  --blue:       #285261;  /* primario */
  --blue-deep:  #1E3F4B;
  --gold:       #AF8546;  /* accento */
  --gold-deep:  #8F6B37;  /* oro leggibile su crema per testo piccolo */
  --ink:        #233139;
  --muted:      #6C6A5E;
  --line:       #E1D8C4;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow: 0 1px 2px rgba(35, 49, 57, .05), 0 10px 32px rgba(35, 49, 57, .09);
  --measure: 84ch;
}

/* Il logo è un raster su crema fissa: il brand vive a tema unico chiaro.
   Nessun blocco dark — la pagina resta crema in ogni contesto. */

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

/* Barra di scorrimento del browser nei colori del brand invece del grigio
   di sistema. */
html { scrollbar-color: var(--blue) var(--cream); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 8px; border: 2px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
body {
  margin: 0;
  overflow-x: hidden; /* rete di sicurezza: niente scroll laterale anche se qualche elemento sfugge al proprio contenitore (visto su iPhone/WebKit) */
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Contatti è una pagina interamente blu fino all'onda che introduce il
   footer panna. Il fondo del body colora anche lo spazio di sicurezza
   attorno alla nav fissa, evitando la fascia panna sopra alla sezione. */
body.tg24-blue-shell { background: var(--blue); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--gold-deep); }

/* ------------------------------------------------------------------
   Angoli "squircle" (Apple corner radius) invece del quarto di cerchio
   standard del CSS. Due livelli:

   1. corner-shape: squircle — proprietà nativa (CSS Borders 4). Dove non
      è supportata la riga viene ignorata e resta il border-radius
      classico: nessun rischio, solo un angolo meno morbido.
   2. .apple-smooth-radius — fallback universale via clip-path su una
      superellisse in coordinate objectBoundingBox (definita in
      footer.php), quindi si adatta da sola a card grandi e bottoni
      piccoli. Raggio 22,37% come da formula Apple.

   ATTENZIONE, due limiti reali del fallback (per questo è opt-in e non
   applicato a tappeto): clip-path taglia via ombre e outline
   dell'elemento, e in objectBoundingBox gli assi scalano in modo
   indipendente, quindi su box molto allungati l'angolo si deforma.
   Su elementi con ombra o molto rettangolari, usa solo il punto 1.
   ------------------------------------------------------------------ */
/* Solo sugli elementi veri, non su ::before/::after: gli pseudo-elementi
   in questo tema li usiamo spesso per forme decorative con border-radius
   asimmetrico o ellittico (tende che si aprono, riempimenti animati dei
   bottoni, onde) — lo squircle su un raggio non uniforme produce angoli
   storti invece di ammorbidirli. Trovato su .tg-cta::before. */
:where(*) { corner-shape: squircle; }

/* Eccezioni: qui il border-radius non descrive un angolo ma una forma
   (cerchi veri, blob organici, la curva del pannello mobile) — lo
   squircle la deformerebbe. */
.tg-cursor,
.tg-blob,
.tg-nav__panel,
.tg-cta::before,
::-webkit-scrollbar-thumb { corner-shape: round; }

.apple-smooth-radius { clip-path: url(#tg-squircle); }
/* Se il browser ha già corner-shape nativo, il clip-path è superfluo:
   toglierlo restituisce ombre e proporzioni corrette. */
@supports (corner-shape: squircle) {
  .apple-smooth-radius { clip-path: none; }
}

.tg-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0; z-index: 99;
}
.tg-skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }

/* Cursore di marca condiviso: oro reale su ogni sfondo, senza blend-mode
   (l'inversione trasformava l'anello in nero sulle superfici bianche). */
.tg-cursor {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 1.7px solid var(--gold); border-radius: 50%;
  pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgba(175, 133, 70, .08);
  transition: opacity .3s ease, width .5s var(--e-out), height .5s var(--e-out), margin .5s var(--e-out), background .5s var(--e-out);
}
.tg-cursor.is-target { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(175, 133, 70, .12); }
body.tg24-cursor-ready { cursor: none; }
body.tg24-cursor-ready :where(a, button, input, select, textarea, [role="button"]) { cursor: none; }
body.tg24-cursor-ready #wpadminbar,
body.tg24-cursor-ready #wpadminbar * { cursor: revert !important; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .tg-cursor { display: none; }
}

.tg-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0;
}

/* ------------------------------------------------------------------
   Nav — solo sulle pagine interne (Chi siamo, Contatti, anteprima Home),
   mai sulla home "in arrivo". Ancorata in alto (sticky): si vede sempre
   mentre scorri, e si "posa" — sfondo più opaco, ombra, sfocatura — dopo
   i primi 24px di scroll, invece di stare identica dall'inizio.
   ------------------------------------------------------------------ */
html.tg-lock-scroll, html.tg-lock-scroll body { overflow-y: hidden; }

/* Cornice bianca attorno a tutto il sito: un rettangolo fisso e
   arrotondato, con un'ombra bianca enorme che riempie tutto ciò che gli
   sta fuori — così i quattro angoli esterni restano pieni invece di
   lasciar vedere il contenuto sotto (che succederebbe con un semplice
   `border` arrotondato). pointer-events:none perché è solo decorazione. */
body.has-tg-nav { --tg-frame: 14px; }
body.has-tg-nav::after {
  content: ''; position: fixed; inset: var(--tg-frame);
  border-radius: 22px;
  box-shadow: 0 0 0 100vmax #fff;
  pointer-events: none; z-index: 90;
}
body.admin-bar.has-tg-nav::after { top: calc(32px + var(--tg-frame)); }
@media (max-width: 782px) {
  body.admin-bar.has-tg-nav::after { top: calc(46px + var(--tg-frame)); }
}

.tg-nav {
  --tg-fillet: 22px;
  position: fixed; top: 0; left: 50%; z-index: 60;
  width: min(56%, 640px);
  transform: translateX(-50%);
  background: var(--tg-nav-bg, #fff);
  /* La barra passa SOTTO la fascia superiore della cornice (z-index più
     basso): stesso bianco, quindi le due si leggono come un pezzo solo,
     e in cima non serve nessun arrotondamento. */
  padding-top: var(--tg-frame, 14px);
  border-radius: 0 0 22px 22px;
  transition: background .45s var(--e-out), top .2s ease;
}
body.admin-bar .tg-nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .tg-nav { top: 46px; }
}
/* Raccordo concavo dove i fianchi della barra incontrano il bordo
   inferiore della cornice: un quadrato di lato R riempito di colore
   TRANNE il quarto di disco di raggio R centrato nell'angolo opposto —
   il cerchio è tangente sia alla linea della cornice sia al fianco della
   barra, quindi le due superfici si innestano senza spigolo.
   Maschera SVG (definita in footer.php), non un radial-gradient: un
   gradiente CSS renderizzava a gradini/sgranato su alcuni schermi
   (DPI/zoom particolari) — il vettore resta nitido sempre. */
.tg-nav::before, .tg-nav::after {
  content: ''; position: absolute;
  top: var(--tg-frame, 14px);
  width: var(--tg-fillet); height: calc(var(--tg-fillet) + 1px);
  background: var(--tg-nav-bg, #fff);
}
.tg-nav::before {
  left: calc(-1 * var(--tg-fillet));
  -webkit-mask-image: url(#tg-nav-fillet-l); mask-image: url(#tg-nav-fillet-l);
}
.tg-nav::after {
  right: calc(-1 * var(--tg-fillet));
  -webkit-mask-image: url(#tg-nav-fillet-r); mask-image: url(#tg-nav-fillet-r);
}
@media (max-width: 640px) {
  .tg-nav { width: 62%; } /* -33% rispetto al 92% di prima */
}
/* Sulla home, foto a piena pagina fin da subito: niente padding di
   sicurezza sotto la nav, la barra opaca può stare sopra alla foto. */
body.has-tg-nav.tg24-full-bleed-hero { padding-top: 0; }
/* Quando il menu è aperto la barra diventa blu come il pannello
   fullscreen dietro: un unico blocco visivo, non due elementi scuciti. */
.tg-nav.is-open { --tg-nav-bg: var(--blue); }
.tg-nav__inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
}
.tg-nav__side { display: flex; align-items: center; }
.tg-nav__side--end { gap: 18px; }
.tg-nav__logo {
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
  color: var(--blue); text-decoration: none; letter-spacing: -.01em;
  transition: color .4s var(--e-out);
}
.tg-nav.is-open .tg-nav__logo { color: #F3ECDD; }
/* Niente più padding-bottom riservato per una sottolineatura: quella
   spaziatura extra faceva centrare questo link un filo più in alto degli
   altri elementi della barra (Contatti, bandiera), che non ne hanno
   bisogno — visibilmente "decentrato". Il pallino/pillola di sfondo
   invece è absolute, non tocca l'altezza della riga: allineamento
   verticale identico agli altri, e un hover diverso dalla sottolineatura. */
.tg-nav__link {
  position: relative; z-index: 1; color: var(--ink); text-decoration: none; font-size: .92rem;
  padding: .35em .75em; margin: -.35em -.75em; display: inline-block;
}
.tg-nav__link::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-radius: 999px;
  transform: scale(.85); opacity: 0;
  transition: transform .3s var(--e-out), opacity .3s var(--e-out);
}
.tg-nav__link:hover::before,
.tg-nav__link[aria-current="page"]::before { transform: scale(1); opacity: 1; }
.tg-nav__link:hover,
.tg-nav__link[aria-current="page"] { color: var(--gold-deep); }

.tg-nav__cta {
  display: inline-flex; align-items: center; gap: .4em;
  background: var(--blue); color: #F3ECDD; text-decoration: none;
  font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  padding: .6em 1.35em; border-radius: 999px;
  transition: background .35s var(--e-out), color .35s var(--e-out), transform .35s var(--e-out);
}
.tg-nav__cta:hover { background: var(--gold-deep); color: #F3ECDD; transform: translateY(-1px); }

/* Icona lingua — solo il cerchietto con la bandiera per ora, niente
   dropdown funzionante (vedi nota in header.php: manca la traduzione). */
.tg-nav__lang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: #fff; cursor: pointer; overflow: hidden;
  transition: border-color .3s var(--e-out), transform .3s var(--e-out);
}
.tg-nav__lang svg { width: 18px; height: 12px; border-radius: 2px; }
.tg-nav__lang:hover { border-color: var(--gold-deep); transform: translateY(-1px); }
@media (max-width: 640px) { .tg-nav__lang { display: none; } }
.tg-nav.is-open .tg-nav__cta { background: #F3ECDD; color: var(--blue); }

/* Burger — due linee, non tre: morph più pulito e più moderno, solo su
   mobile. Le linee sono assolute (non flex) così la rotazione avviene
   attorno allo stesso punto centrale invece di "saltare". */
.tg-nav__burger {
  display: none; position: relative; z-index: 71;
  width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
}
.tg-nav__burger span {
  position: absolute; left: 7px; right: 7px; height: 2px; border-radius: 2px;
  background: var(--blue);
  transition: transform .5s cubic-bezier(.65,0,.35,1), top .5s cubic-bezier(.65,0,.35,1), background .4s var(--e-out);
}
.tg-nav__burger span:nth-child(1) { top: 13px; }
.tg-nav__burger span:nth-child(2) { top: 21px; }
.tg-nav.is-open .tg-nav__burger span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.tg-nav.is-open .tg-nav__burger span:nth-child(2) { top: 17px; transform: rotate(-45deg); }
.tg-nav.is-open .tg-nav__burger span { background: #F3ECDD; }

/* Pannello mobile — non una tendina piatta: scivola giù con un bordo
   inferiore molto curvo che si distende fino ad appiattirsi solo a fine
   corsa, così la curva resta protagonista per tutta l'apertura (mai
   clip-path, vedi la nota su Safari altrove nel progetto — solo transform
   e border-radius, che non hanno quel bug). I link entrano uno dopo
   l'altro invece che tutti insieme. */
.tg-nav__panel {
  position: fixed; inset: 0; z-index: 55;
  background: var(--blue);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 5vh, 36px);
  transform: translateY(-100%);
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
  transition: transform .6s cubic-bezier(.65,0,.35,1), border-radius .75s cubic-bezier(.65,0,.35,1) .04s;
}
.tg-nav__panel.is-open { transform: translateY(0); border-radius: 0; }
.tg-nav__panel a {
  overflow: hidden; text-decoration: none;
}
.tg-nav__panel a span {
  display: block;
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 9vw, 3.2rem);
  color: #F3ECDD; letter-spacing: -.01em;
  transform: translateY(115%);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
/* Sfalsate: ogni link parte un po' dopo il precedente, solo quando aperto */
.tg-nav__panel.is-open a:nth-child(1) span { transition-delay: .12s; }
.tg-nav__panel.is-open a:nth-child(2) span { transition-delay: .19s; }
.tg-nav__panel.is-open a:nth-child(3) span { transition-delay: .26s; }
.tg-nav__panel.is-open a span { transform: none; }
.tg-nav__panel a:hover span { color: var(--gold, #AF8546); }

@media (max-width: 640px) {
  .tg-nav__link { display: none; }
  .tg-nav__cta { display: none; }
  .tg-nav__burger { display: block; }
}
@media (min-width: 641px) {
  .tg-nav__panel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-nav__panel, .tg-nav__panel a span { transition: none !important; }
}

/* Box-foto segnaposto — dice cosa aspettarsi invece di lasciare un vuoto. */
.tg-photo-slot {
  background: var(--card); border: 1px dashed var(--line); border-radius: 24px;
  aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 20px;
  margin: 1.6rem 0; position: relative; overflow: hidden;
}
.tg-photo-slot__label { max-width: 34ch; }
.tg-photo-slot__tag {
  display: block; font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: .35rem;
}
.tg-photo-slot__desc { display: block; font-size: .84rem; font-style: italic; color: var(--muted); }

/* ------------------------------------------------------------------
   Pagine interne (Chi siamo, Contatti) — stesso linguaggio della bozza
   Home: titolo grande in Fraunces, sezioni affiancate testo/foto, bottone
   pieno con easing morbido. Riusa i token di marca già definiti sopra,
   non ne inventa di nuovi.
   ------------------------------------------------------------------ */
.tg-page { max-width: 1100px; margin: 0 auto; padding: 0 24px clamp(60px, 8vh, 100px); }

.tg-page__hero { padding: clamp(56px, 9vh, 96px) 0 clamp(40px, 6vh, 64px); text-align: center; }
.tg-page__hero h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(2.6rem, 7vw, 4.6rem); color: var(--blue); margin: .8rem 0 0; text-wrap: balance;
}
.tg-page__lead {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--ink); opacity: .85;
  margin: 1rem auto 0; max-width: 42ch;
}

.tg-split {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(40px, 6vh, 64px) 0; border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .tg-split { grid-template-columns: 1fr 1fr; } }
.tg-split--rev .tg-photo-slot { order: -1; }
.tg-split h2 {
  font-family: var(--serif); font-weight: 600; color: var(--blue);
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .8rem; letter-spacing: -.01em;
}
.tg-split p { color: var(--muted); }
.tg-split blockquote {
  margin: 1.2rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--gold);
  font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.02rem;
}
.tg-split .tg-photo-slot { margin: 0; }

.tg-note {
  background: var(--card); border: 1px dashed var(--line); border-radius: 18px;
  padding: 22px 24px; margin-top: clamp(32px, 5vh, 48px);
}
.tg-note__tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; background: #C2540E; border-radius: 999px;
  padding: .3rem .7rem; margin-bottom: .7rem;
}
.tg-note p { margin: 0; color: #9C4A1B; }

.tg-cta {
  display: inline-flex; align-items: center; gap: .6em; margin-top: 2rem;
  font-weight: 600; font-size: .92rem; color: var(--ink); padding: .9rem 1.7rem;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(35,49,57,.05), 0 12px 32px rgba(35,49,57,.09);
  text-decoration: none; position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s var(--e-out, ease), transform .6s var(--e-out, ease);
}
.tg-cta::before {
  content: ''; position: absolute; left: -20%; right: -20%; top: -45%; bottom: 0; z-index: -1;
  background: var(--blue); border-radius: 46% 54% 0 0 / 34% 32% 0 0;
  transform: translateY(112%); transition: transform .8s var(--e-out, ease);
}
.tg-cta:hover { color: #F3ECDD; transform: translateY(-2px); }
.tg-cta:hover::before { transform: translateY(0); }

.tg-page .tg-map { margin-top: 1.6rem; }

/* ------------------------------------------------------------------
   Onda + bolle decorative, e blocco Contatti/footer con lo stesso
   linguaggio della home — resi globali (prima vivevano solo dentro
   #anteprima-home) così Chi siamo e Contatti possono riusarli senza
   duplicare tutto da capo. Il filtro #tgGoo è condiviso in footer.php.
   Qui l'onda è STATICA (un path fisso, non quella che si deforma con
   lo scroll della home — quella resta un effetto solo suo, richiede
   GSAP+ScrollTrigger che non ha senso caricare su pagine più leggere):
   le bolle restano comunque animate, l'"effetto bolle" resta.
   ------------------------------------------------------------------ */
.tg-wave-wrap { position: relative; width: 100%; height: clamp(190px, 26vw, 340px); background: var(--from); overflow: hidden; z-index: 1; }
.tg-goo {
  position: absolute; top: 0; bottom: -60px;
  left: calc(-1 * clamp(16px, 6vw, 70px)); right: calc(-1 * clamp(16px, 6vw, 70px));
  filter: url(#tgGoo);
}
.tg-goo > svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.tg-goo > svg path { fill: var(--to); }
.tg-blob { position: absolute; background: var(--to); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .tg-blob { transform: none !important; } }

.tg-contatti { padding: clamp(70px, 9vw, 110px) 0; background: var(--blue); --ink: #FBF6EE; --muted: #B7C8CE; --gold: #D9B471; --line: rgba(251,246,238,.2); }
.tg-contatti a { text-decoration: none; }
/* La home definisce la propria gabbia dentro #anteprima-home. La pagina
   Contatti vive fuori da quel wrapper e deve quindi avere lo stesso
   contenitore esplicitamente: senza questa regola la griglia si allarga
   fino ai bordi della viewport e viene tagliata dalla cornice del sito. */
.tg-contatti .wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(22px, 6vw, 90px); }
.tg-contatti .wrap--narrow { max-width: 1100px; }
.tg-contatti .tg-eyebrow { text-align: center; display: block; }
.tg-contatti h1, .tg-contatti h2 { font-family: var(--serif); font-weight: 600; text-align: center; font-size: clamp(2rem, 4.4vw, 3rem); color: var(--ink); margin-top: .7rem; text-wrap: balance; max-width: 16ch; margin-inline: auto; letter-spacing: -.02em; }
.tg-contatti .contatti-grid { display: grid; gap: clamp(56px, 8vw, 120px); margin-top: clamp(64px, 8vw, 104px); align-items: start; }
@media (min-width: 760px) { .tg-contatti .contatti-grid { grid-template-columns: 1.15fr .85fr; } }
.tg-contatti .contatti-label { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tg-contatti .contatti-dove .addr { display: block; margin-top: 1.1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); max-width: 14ch; width: fit-content; transition: color .35s var(--e-out); }
.tg-contatti .contatti-dove .addr:hover { color: var(--gold); }
.tg-contatti .tel-btn { position: relative; isolation: isolate; overflow: hidden; margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .6em; font-weight: 600; font-size: .92rem; color: var(--blue-deep); padding: .95rem 1.8rem; border-radius: 999px; background: var(--gold); box-shadow: 0 1px 2px rgba(27,62,75,.14), 0 12px 32px rgba(27,62,75,.22); transition: color .5s var(--e-out), box-shadow .7s var(--e-out), transform .7s var(--e-out); }
.tg-contatti .tel-btn::before { content: ''; position: absolute; left: -20%; right: -20%; top: -45%; bottom: 0; z-index: -1; corner-shape: round; background: var(--ink); border-radius: 46% 54% 0 0 / 34% 32% 0 0; transform: translateY(112%); transition: transform .85s var(--e-out); }
.tg-contatti .tel-btn:hover { color: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(27,62,75,.16), 0 20px 44px rgba(27,62,75,.3); }
.tg-contatti .tel-btn:hover::before { transform: translateY(0); }
.tg-contatti .tel-btn__icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
.tg-contatti .tel-btn__icon path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tg-contatti .tg-rating { margin-top: 1.6rem; font-size: .86rem; color: var(--muted); }
.tg-contatti .contatti-pin { margin-top: clamp(40px, 5vw, 64px); display: inline-flex; align-items: center; gap: 16px; }
.tg-contatti .contatti-pin svg { width: 52px; height: 52px; flex: none; }
.tg-contatti .contatti-pin path { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tg-contatti[data-reveal] .contatti-pin path { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1.1s var(--e-out); }
.tg-contatti[data-reveal].is-in .contatti-pin path { stroke-dashoffset: 0; }
.tg-contatti .contatti-pin a { font-size: .84rem; letter-spacing: .02em; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: color .35s var(--e-out), gap .35s var(--e-out); }
.tg-contatti .contatti-pin a:hover { color: var(--gold); gap: 10px; }
.tg-contatti .tg-hours { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; font-size: inherit; }
.tg-contatti .tg-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0; border: 0; font-size: .92rem; color: var(--ink); }
.tg-contatti .tg-hours .day { color: var(--muted); }
.tg-contatti .tg-hours .val { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tg-contatti .tg-hours .is-closed .val { color: var(--muted); font-style: italic; font-weight: 400; }
.tg-contatti .contatti-social { margin-top: clamp(64px, 8vw, 96px); display: flex; justify-content: center; gap: 16px; }
.tg-contatti .contatti-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22.37%; color: var(--muted); transition: color .35s var(--e-out), background .35s var(--e-out); }
.tg-contatti .contatti-social a:hover { color: var(--blue-deep); background: var(--gold); }
.tg-contatti .contatti-social svg { width: 19px; height: 19px; }

.tg-site-footer { padding: clamp(40px, 5vw, 60px) 24px; text-align: center; font-size: .7rem; letter-spacing: .12em; color: var(--muted); background: var(--cream); }
.tg-site-footer .footer-links { margin-top: .9rem; display: flex; gap: .7rem; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--muted); }
.tg-site-footer .footer-links a { font: inherit; letter-spacing: inherit; color: var(--muted); border-bottom: 1px solid var(--line); transition: color .4s var(--e-out), border-color .4s var(--e-out); }
.tg-site-footer .footer-links a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* Titoli — una "torcia" oro segue il mouse invece di un'onda a tempo
   fissa: solo le lettere dentro una macchia (leggermente deformata, non
   un cerchio perfetto) attorno al cursore si colorano. Bordo sempre
   netto — niente sfumatura: la forma è un clip-path poligonale calcolato
   in JS (footer.php), non una maschera a gradiente. Il testo vero resta
   quello di sempre (colore ink): sopra c'è un doppione identico
   (attr(data-tgg), popolato via JS) colorato oro, ritagliato dalla
   macchia che segue il mouse con lo stesso lerp del cursore custom. */
.tg-gold-hover { position: relative; cursor: default; }
.tg-gold-hover::before {
  content: attr(data-tgg);
  position: absolute; inset: 0; pointer-events: none;
  font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit;
  background-image: linear-gradient(96deg,
    var(--gold-deep) 0%, var(--gold) 16%, var(--gold-deep) 32%,
    var(--gold) 48%, var(--gold-deep) 64%, var(--gold) 80%, var(--gold-deep) 100%);
  background-size: 220% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: var(--tgg-clip, circle(0px at -999px -999px));
  opacity: 0; transition: opacity .25s ease;
}
.tg-gold-hover.is-active::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tg-gold-hover::before { transition: none; opacity: 0 !important; }
}

/* ------------------------------------------------------------------
   Pagina "sito in arrivo"
   ------------------------------------------------------------------ */
.tg-soon {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(28px, 5vh, 64px) 24px;
  text-align: center;
}
.tg-soon__inner { width: 100%; max-width: 640px; }

/* Selettore lingua — dropdown in alto: si vede solo la lingua attiva,
   il click apre l'elenco delle altre. Uguale su desktop e mobile. */
.tg-lang {
  position: fixed; top: 16px; right: 16px; z-index: 20;
  text-align: left;
}
.tg-lang__trigger {
  display: flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px 7px 8px; box-shadow: var(--shadow);
  cursor: pointer; font-family: var(--sans);
  color: var(--ink);
}
.tg-lang__trigger:hover { border-color: var(--gold); }
.tg-lang__code {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
}
.tg-lang__caret {
  width: 9px; height: 9px; color: var(--muted);
  transition: transform .15s ease;
}
.tg-lang__trigger[aria-expanded="true"] .tg-lang__caret { transform: rotate(180deg); }

.tg-lang__flag {
  width: 21px; height: 15px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(35, 49, 57, .12);
  display: block;
}
.tg-lang__current { display: flex; }

.tg-lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  list-style: none; margin: 0; padding: 6px;
  min-width: 168px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
}
.tg-lang__opt {
  width: 100%; display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 9px; border-radius: 9px;
  font-family: var(--sans); font-size: .92rem; color: var(--ink);
  text-align: left;
}
.tg-lang__opt:hover { background: var(--cream-2); }
.tg-lang__opt.is-active { color: var(--gold-deep); font-weight: 700; }
.tg-lang__label { flex: 1; }

@media (max-width: 480px) {
  .tg-lang { top: 10px; right: 10px; }
  .tg-lang__trigger { padding: 6px 10px 6px 7px; gap: 6px; }
  .tg-lang__flag { width: 19px; height: 13px; }
}

/* Sotto i 960px, tutto impilato e centrato (come prima). Da 960px in su,
   due colonne affiancate: a sinistra il brand + il claim + il carosello,
   a destra le informazioni pratiche + la mappa — così il contenuto sta
   in un solo schermo invece di allungarsi in verticale. */
.tg-soon__grid { display: flex; flex-direction: column; align-items: center; }

@media (min-width: 960px) {
  .tg-soon__inner { max-width: 1040px; }
  .tg-soon__grid {
    flex-direction: row; align-items: center; justify-content: center;
    gap: clamp(48px, 6vw, 84px);
  }
  .tg-soon__col--brand { flex: 0 1 420px; }
  .tg-soon__col--info  { flex: 0 1 440px; text-align: left; }
}

.tg-soon__wordmark { margin: 0 auto; }
.tg-soon__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--blue);
  text-wrap: balance;
}
.tg-soon__kind {
  margin: .55rem 0 0;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.tg-soon__claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.6vw, 1.8rem);
  line-height: 1.3;
  color: var(--blue);
  margin: clamp(20px, 3.5vh, 30px) auto 0;
  max-width: 18ch;
  text-wrap: balance;
}
.tg-soon__lead {
  margin: 12px auto 0;
  color: var(--muted);
  max-width: 42ch;
  font-size: .98rem;
  text-wrap: balance;
}
.tg-soon__accent {
  font-style: italic;
  color: var(--gold-deep);
}

.tg-rule {
  width: 44px; height: 1px; border: 0; margin: clamp(22px, 4vh, 34px) auto;
  background: var(--gold); opacity: .55;
}
@media (min-width: 960px) {
  .tg-rule { width: 1px; height: 220px; margin: 0; opacity: .35; align-self: stretch; }
}

/* Blocco informazioni. Colonna orari più larga della colonna Dove/Telefono:
   le righe con doppio orario (Sabato, Domenica) sono le più lunghe e senza
   spazio extra vanno a capo, allungando la pagina quel tanto che basta a
   far comparire lo scroll su schermi appena più corti o con font leggermente
   più larghi del previsto. */
.tg-info { display: grid; gap: 22px; text-align: left; }
@media (min-width: 460px) and (max-width: 959px) { .tg-info { grid-template-columns: .62fr 1.38fr; gap: 26px 18px; } }
@media (min-width: 960px) { .tg-info { grid-template-columns: .62fr 1.38fr; gap: 22px 16px; } }

.tg-info__block { min-width: 0; }
.tg-info__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .55rem;
}
.tg-info__block p { margin: 0; color: var(--ink); font-size: .96rem; }
.tg-info__block a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.tg-info__block a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }

/* Font leggermente più piccolo e nums condensati: le righe con doppio
   orario (Sab/Dom) sono le più lunghe stringhe della pagina, devono
   stare su una riga sola senza spingere in alto lo scroll (vedi nota
   sopra .tg-info). */
.tg-hours { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.tg-hours li {
  display: flex; justify-content: space-between; gap: .4rem;
  padding: .34rem 0; border-top: 1px solid var(--line);
  color: var(--ink);
}
.tg-hours .tg-hours__val { letter-spacing: -.01em; }
.tg-hours li:first-child { border-top: 0; }
.tg-hours .tg-hours__day { color: var(--muted); white-space: nowrap; }
.tg-hours .tg-hours__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold-deep); font-weight: 600; }
.tg-hours .is-closed .tg-hours__val { color: var(--muted); font-style: italic; font-weight: 400; }

/* Avviso di chiusura straordinaria (ferie/pausa invernale), acceso da
   /gestione-orari. Usa i token di colore correnti (--gold, --ink, --line),
   quindi eredita da soli quelli locali dove il contesto li ridefinisce
   (es. la card scura #anteprima-home .contatti) — nessuna variante scura
   separata da mantenere. */
.tg-chiusura-avviso {
  margin: 0 0 .9rem; padding: .65rem .9rem;
  border: 1px solid var(--gold); border-radius: 10px;
  background: rgba(175, 133, 70, .08);
  font-size: .84rem; line-height: 1.5; color: var(--ink);
}
/* --gold-deep è pensato per testo su crema (troppo scuro sulla card navy
   dei Contatti): qui usiamo --gold, che ogni contesto ridefinisce già nella
   tonalità giusta per il proprio sfondo. */
.tg-chiusura-avviso strong { color: var(--gold); }

/* ------------------------------------------------------------------
   Barra annunci/promozioni — acceso da /gestione-annunci, ancorata in
   fondo allo schermo su ogni pagina pubblica (vedi header.php), sopra a
   tutto il resto (nessun elemento fisso del tema supera z-index 99). In
   basso invece che in cima per non litigare con la nav fissa in alto.
   body.has-tg-annuncio (impostata solo quando la barra è davvero attiva,
   vedi tg24_body_class_annuncio in functions.php) aggiunge lo spazio in
   fondo così l'ultimo contenuto della pagina non ci finisce sotto.
   ------------------------------------------------------------------ */
body.has-tg-annuncio { padding-bottom: var(--tg-annuncio-h, 52px); }
.tg-annuncio-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--gold); box-shadow: 0 -6px 20px rgba(35, 49, 57, .12);
}
.tg-annuncio-bar__msg {
  margin: 0; padding: .55rem 24px; max-width: 1120px; margin-inline: auto;
  text-align: center; font-family: var(--sans); font-size: .86rem; font-weight: 600;
  color: var(--blue-deep); line-height: 1.5;
}
.tg-annuncio-bar__link {
  margin-left: .5rem; color: var(--blue-deep); text-decoration: underline;
  text-underline-offset: .18em; white-space: nowrap;
}
.tg-annuncio-bar__link:hover { color: var(--ink); }

/* ------------------------------------------------------------------
   Pulsante "Stampa" / "Scarica PDF" — UNO SOLO, uguale su tutte le
   pagine (gestione menu/gusti, foglio A4, etichette): il cliente deve
   riconoscerlo sempre allo stesso modo, non una variante diversa per
   pagina. Generato solo da tg24_print_button() in functions.php.
   ------------------------------------------------------------------ */
.tg-btn-print {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--sans); font-weight: 600; font-size: .9rem; line-height: 1; cursor: pointer;
  border-radius: 9px; padding: .65rem 1.1rem; border: 1px solid var(--gold);
  background: #fff; color: var(--gold-deep); text-decoration: none;
  transition: background .2s, color .2s;
}
.tg-btn-print:hover { background: var(--gold); color: #fff; }
.tg-btn-print .tg-icon-print { margin-right: 0; }

.tg-map {
  width: 100%;
  margin: clamp(18px, 3vh, 28px) 0 0;
  height: clamp(140px, 22vh, 190px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.tg-map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(.35) contrast(1.03) brightness(1.01);
  transition: filter .4s ease;
}
.tg-map iframe:hover, .tg-map iframe:focus { filter: none; }

/* Carosello dei gusti — le 24 icone scorrono una alla volta come una
   giostra: quella al centro è a fuoco e piena grandezza, le vicine si
   rimpiccioliscono e si smorzano in dissolvenza verso i lati. Avanzamento
   automatico via JS (soon-carousel.js); ogni icona porta --d (distanza dal
   centro, intera) impostata via JS, e qui sotto calc() fa il resto in CSS.
   A motion ridotto lo script non avvia il timer: resta ferma sul centro.
   Decorativo (aria-hidden): l'informazione vera è nella didascalia sotto. */
.tg-carousel {
  position: relative; margin: clamp(18px, 3.2vh, 28px) auto 0;
  width: min(380px, 100%); height: 100px;
  overflow: hidden; /* le icone lontane dal centro sono invisibili ma restano nel DOM: senza questo, su schermi stretti sporgono e causano scroll orizzontale */
}
/* mask-image separata dall'elemento che taglia (overflow sopra): in WebKit/iOS
   (anche Chrome, che lì gira su motore Safari) mask + overflow sullo stesso
   nodo a volte non tagliano davvero i figli assoluti, che restano cliccabili/
   scrollabili fuori dal box pur essendo invisibili — da qui lo scroll laterale
   su iPhone. Due nodi separati evitano il conflitto. */
.tg-carousel__track {
  position: relative; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.tg-carousel__item {
  --d: 0; --ad: 0; --step: 72px;
  position: absolute; top: 50%; left: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: clamp(0, calc(1 - var(--ad) * .42), 1);
  transform: translate(-50%, -50%)
             translateX(calc(var(--d) * var(--step)))
             scale(clamp(.42, calc(1 - var(--ad) * .3), 1));
  z-index: calc(10 - var(--ad));
  filter: drop-shadow(0 4px 10px rgb(40 82 97 / calc(.16 - var(--ad) * .05)));
  transition: transform .5s cubic-bezier(.3,.75,.25,1), opacity .5s ease, filter .5s ease;
  will-change: transform, opacity;
}
.tg-carousel__item img { width: 52px; height: 52px; object-fit: contain; }

.tg-soon__foot {
  margin: clamp(20px, 3.5vh, 32px) 0 0;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}
.tg-soon__foot .tg-soon__legal {
  display: block;
  font-size: .9em; letter-spacing: .1em; opacity: .75;
}

/* Ingresso — discreto, una volta sola (l'avanzamento del carosello lo
   guida soon-carousel.js, che rispetta prefers-reduced-motion da sé) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tgRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .tg-soon__wordmark   { animation: tgRise .9s cubic-bezier(.2,.75,.25,1) .05s both; }
  .tg-soon__claim      { animation: tgRise .8s ease .35s both; }
  .tg-soon__lead       { animation: tgRise .8s ease .5s both; }
  .tg-carousel         { animation: tgRise .8s ease .62s both; }
  .tg-rule             { animation: tgRise .8s ease .82s both; }
  .tg-info             { animation: tgRise .8s ease .92s both; }
  .tg-map              { animation: tgRise .8s ease 1.02s both; }
  .tg-soon__foot       { animation: tgRise .8s ease 1.12s both; }
}

/* ------------------------------------------------------------------
   Pagina riservata /corporate
   ------------------------------------------------------------------ */
.tg-doc { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 24px 100px; }

/* ------------------------------------------------------------------
   Gestionale cliente — stessa grammatica del sito, densità da strumento
   ------------------------------------------------------------------ */
body.tg24-management-shell { background: var(--cream); }
body.tg24-management-shell .tg-doc {
  max-width: 1180px; min-height: calc(100dvh - 28px);
  margin: 14px auto; padding: 0 clamp(20px, 4vw, 52px) 100px;
  background: var(--cream); border-radius: 22px;
  box-shadow: none;
  overflow: hidden;
}
body.tg24-management-shell .tg-doc__head {
  padding: clamp(34px, 6vh, 64px) 0 clamp(26px, 4vh, 42px);
}
body.tg24-management-shell .tg-doc__logo { width: min(190px, 52%); }
body.tg24-management-shell .tg-doc__badge {
  display: inline-flex; align-items: center;
  margin-top: 1rem; padding: .32rem .72rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--gold) 10%, transparent);
}
body.tg24-management-shell .tg-doc__title { font-size: clamp(2rem, 5vw, 3.4rem); }
body.tg24-management-shell .tg-doc__body { padding-top: clamp(26px, 4vh, 42px); }
body.tg24-management-shell .tg-doc__foot { margin-top: clamp(44px, 7vh, 72px); }

/* La barra di salvataggio riprende la nav flottante del sito: non una
   fascia tecnica incollata ai bordi, ma un controllo appartenente alla
   stessa cornice visiva. La specificità prevale sugli stili locali degli
   editor senza modificarne il funzionamento. */
body.tg24-management-shell .tg-menu-savebar {
  position: fixed;
  left: 50%; right: auto; bottom: 14px;
  width: min(calc(100% - 28px), 1180px);
  transform: translateX(-50%);
  border: 1px solid var(--gold); border-radius: 16px;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  box-shadow: 0 12px 36px rgba(27, 62, 75, .2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  overflow: hidden;
}
body.tg24-management-shell .tg-menu-savebar__inner {
  display: flex; align-items: center; justify-content: flex-end;
  width: 100%; max-width: none; margin: 0; padding: 12px 14px;
  box-sizing: border-box; gap: 1rem; flex-wrap: wrap;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.tg24-management-shell .tg-menu-savebar__msg,
body.tg24-management-shell .tg-menu-savebar__warn {
  margin-right: auto;
}

@media (max-width: 1208px) {
  body.tg24-management-shell .tg-doc { margin-inline: 14px; }
}
@media (max-width: 640px) {
  body.tg24-management-shell .tg-doc {
    min-height: calc(100dvh - 16px); margin: 8px;
    padding-inline: 18px; border-radius: 18px;
  }
  body.tg24-management-shell .tg-doc__logo { width: min(150px, 48%); }
  body.tg24-management-shell .tg-menu-savebar { bottom: 8px; width: calc(100% - 16px); border-radius: 14px; }
  body.tg24-management-shell .tg-menu-savebar__inner { align-items: stretch; flex-direction: column; gap: .65rem; }
  body.tg24-management-shell .tg-menu-savebar__inner button { width: 100%; }
}

.tg-doc__head { padding: clamp(36px, 7vh, 72px) 0 clamp(28px, 5vh, 48px); text-align: center; }
.tg-doc__logo { width: min(260px, 66%); margin: 0 auto; }
.tg-doc__badge {
  display: inline-block; margin-top: 22px;
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--cream-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .42rem .95rem;
}
.tg-doc__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em;
  color: var(--blue); margin: 20px 0 0; text-wrap: balance;
}
/* Angolo in alto a sinistra, fuori dal flusso centrato di titolo/badge:
   letto come controllo di navigazione ("torna indietro"), non come
   un'altra etichetta in mezzo al resto. */
.tg-doc__back { position: absolute; top: 22px; left: 24px; margin: 0; z-index: 2; }
.tg-doc__back a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--sans); font-weight: 600; font-size: .78rem; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .42rem .8rem .42rem .65rem; text-decoration: none; transition: border-color .2s, color .2s;
}
.tg-doc__back a:hover { color: var(--gold-deep); border-color: var(--gold); }

.tg-doc__body { border-top: 1px solid var(--line); padding-top: clamp(28px, 5vh, 48px); }
.tg-doc__body > * + * { margin-top: 1.15rem; }
.tg-doc__body p { color: var(--muted); max-width: var(--measure); margin-inline: 0; }
.tg-doc__body p strong, .tg-doc__body p b { color: var(--ink); font-weight: 600; }
.tg-doc__body h2 {
  font-family: var(--serif); font-weight: 600; color: var(--blue);
  font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.2; letter-spacing: -.01em;
  margin-top: 2.6rem; text-wrap: balance;
}
.tg-doc__body h3 {
  font-family: var(--serif); font-weight: 600; color: var(--blue);
  font-size: 1.12rem; margin-top: 2rem;
}
/* Sezioni ricche (Logo, Colori, Caratteri, 24 gusti): titolo + intro a
   sinistra, "esplorazione" dell'argomento (card, griglia, immagine) a
   destra. Sotto i 760px torna tutto impilato. */
.tg-doc__body .tg-section {
  display: grid;
  grid-template-columns: minmax(170px, 240px) 1fr;
  gap: 8px 48px;
  margin-top: 2.8rem;
  align-items: start;
}
.tg-doc__body .tg-section__label h2 { margin-top: 0; }
.tg-doc__body .tg-section__label p { margin-top: .6rem; }
.tg-doc__body .tg-section__content > * + * { margin-top: 1.1rem; }
.tg-doc__body .tg-section__content > *:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .tg-doc__body .tg-section { grid-template-columns: 1fr; gap: 0; }
  .tg-doc__body .tg-section__content { margin-top: 1.3rem; }
}

.tg-doc__body ul, .tg-doc__body ol { color: var(--muted); max-width: var(--measure); padding-left: 1.3rem; }
.tg-doc__body li + li { margin-top: .4rem; }
.tg-doc__body img { border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.tg-doc__body figure { margin: 2.2rem 0; }
.tg-doc__body figure img { width: min(380px, 100%); margin: 0 auto; }
.tg-doc__body figcaption { margin-top: .7rem; font-size: .86rem; color: var(--muted); font-style: italic; }
.tg-doc__body blockquote {
  margin: 2rem 0; padding: 1rem 1.3rem;
  background: var(--cream-2); border-left: 3px solid var(--gold); border-radius: 10px;
  color: var(--ink); font-size: 1rem;
}
.tg-doc__body blockquote p { color: inherit; }
.tg-doc__body hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
.tg-doc__body table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tg-doc__body th, .tg-doc__body td { text-align: left; padding: .65rem .6rem; border-top: 1px solid var(--line); }
.tg-doc__body th { color: var(--ink); font-weight: 600; }
.tg-doc__body td { color: var(--muted); }

/* Palette a swatch — usata nella /corporate per mostrare i colori ufficiali.
   Una card grande e completa per colore: minmax(280px) forza 1 colonna sui
   telefoni e 2 su schermi più larghi, mai tile strette e affollate. */
.tg-doc__body .tg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.tg-doc__body .tg-swatch {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
}
.tg-doc__body .tg-swatch__chip {
  display: block;
  height: 34px;
  background: var(--swatch, var(--line));
  box-shadow: inset 0 0 0 1px rgba(35, 49, 57, .08);
}
.tg-doc__body .tg-swatch__meta { display: block; padding: 6px 12px 7px; line-height: 1; }
.tg-doc__body .tg-swatch__role {
  display: block;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-deep); line-height: 1;
}
.tg-doc__body .tg-swatch__name {
  display: block; margin-top: .06rem;
  font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: .96rem; line-height: 1;
}
.tg-doc__body .tg-swatch__hex {
  display: block; margin-top: .1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; color: var(--muted);
}

/* Righe copia HEX/RGB dentro gli swatch: etichetta + valore + icona */
.tg-doc__body .tg-swatch__codes { display: flex; flex-direction: column; gap: .06rem; margin-top: .1rem; }
.tg-doc__body .tg-code-row { display: inline-flex; align-items: center; gap: .45rem; line-height: 1.1; }
.tg-doc__body .tg-code-row__label {
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep); width: 3em; flex: 0 0 auto;
}
.tg-doc__body .tg-code-row__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; color: var(--ink);
}
.tg-doc__body .tg-copy {
  font: inherit; color: var(--muted); background: #fff; border: 1px solid var(--line);
  border-radius: 5px; width: 1.15rem; height: 1.15rem; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  flex: 0 0 auto; transition: background .15s, border-color .15s, color .15s, width .15s;
}
.tg-doc__body .tg-copy__icon,
.tg-doc__body .tg-copy__check { width: 11px; height: 11px; display: block; }
.tg-doc__body .tg-copy__check,
.tg-doc__body .tg-copy__label { display: none; }
.tg-doc__body .tg-copy:hover { border-color: var(--gold); color: var(--gold-deep); }
.tg-doc__body .tg-copy:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.tg-doc__body .tg-copy.is-copied,
.tg-doc__body .tg-copy.is-error {
  width: auto; padding: 0 .6rem;
}
.tg-doc__body .tg-copy.is-copied .tg-copy__icon,
.tg-doc__body .tg-copy.is-error .tg-copy__icon { display: none; }
.tg-doc__body .tg-copy.is-copied .tg-copy__label,
.tg-doc__body .tg-copy.is-error .tg-copy__label {
  display: inline; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.tg-doc__body .tg-copy.is-copied { background: var(--blue); border-color: var(--blue); color: #fff; }
.tg-doc__body .tg-copy.is-copied .tg-copy__check { display: block; }
.tg-doc__body .tg-copy.is-error { background: var(--cream-2); border-color: #C2540E; color: #9C4A1B; }

.tg-doc__body .tg-swatch__pantone {
  display: block; margin-top: .14rem; padding-top: .12rem;
  border-top: 1px solid var(--line);
  font-size: .72rem; line-height: 1.05; color: var(--muted);
}
.tg-doc__body .tg-swatch__pantone strong { color: var(--ink); font-weight: 600; }
.tg-doc__body .tg-swatch__approx { font-style: italic; }

.tg-doc__body .tg-note { font-size: .82rem; color: var(--muted); font-style: italic; }

/* Font scaricabili — due colonne (Fraunces / Archivo), ciascuna col proprio
   titolo e testo sopra la card con specimen grande ("Aa" + alfabeto),
   nome/ruolo e bottone download sotto, separati da un filo. */
.tg-doc__body .tg-fonts {
  display: grid; gap: 32px 36px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 1.4rem;
}
.tg-doc__body .tg-font-col > h3 { margin-top: 0; color: var(--gold-deep); }
.tg-doc__body .tg-font-col > p {
  color: var(--muted); margin-top: .5rem;
}
.tg-doc__body .tg-font-card {
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  padding: 24px 22px 20px; margin-top: 1.3rem;
}
.tg-doc__body .tg-font-card__specimen {
  margin: 0; line-height: 1; color: var(--blue);
  font-size: clamp(3.2rem, 11vw, 4rem);
}
.tg-doc__body .tg-font-card__abc {
  margin: .5rem 0 0; color: var(--muted);
  font-size: 1.05rem; line-height: 1.6; letter-spacing: .01em;
}
.tg-doc__body .tg-font-card__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.tg-doc__body .tg-font-card__id { display: flex; flex-direction: column; gap: .25rem; }
.tg-doc__body .tg-font-card__name {
  font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.05rem; line-height: 1;
}
.tg-doc__body .tg-font-card__role {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep);
}
.tg-doc__body .tg-download {
  display: inline-flex; align-items: center; gap: .45em; text-decoration: none;
  font-size: .84rem; font-weight: 600; line-height: 1; white-space: nowrap;
  color: #F3ECDD; background: var(--blue); border-radius: 999px; padding: .62rem 1.1rem;
  transition: background .15s;
}
.tg-doc__body .tg-download:hover { background: var(--blue-deep); color: #fff; }
.tg-doc__body .tg-download__icon { width: 15px; height: 15px; flex: 0 0 auto; }

/* Icone dei gusti — line art in oro su crema, etichetta in blu, senza box:
   il grafismo deve respirare sulla pagina, non stare in una card. */
.tg-doc__body .tg-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 30px 16px;
  margin-top: 1.8rem;
}
.tg-doc__body .tg-icon-item {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  text-align: center;
}
.tg-doc__body .tg-icon {
  width: 54px; height: 54px; object-fit: contain;
  transition: transform .15s ease;
  border: none; border-radius: 0; box-shadow: none; background: none;
}
.tg-doc__body .tg-icon-item:hover .tg-icon { transform: translateY(-3px); }
.tg-doc__body .tg-icon__label {
  font-size: .74rem; font-weight: 600; letter-spacing: .01em; line-height: 1.25;
  color: var(--blue);
}

/* Blocchi bozza — testo segnaposto (lorem ipsum) dentro una sezione reale,
   in attesa del copy vero. Arancione di proposito: non è un colore di marca,
   è un colore da cantiere, per non confonderlo mai con l'oro. Si toglie il
   div (tag compreso) quando arriva il testo definitivo. */
.tg-doc__body .tg-draft {
  --draft-line: #C2540E;
  --draft-ink:  #9C4A1B;
  border: 1.5px dashed var(--draft-line);
  border-radius: 14px;
  padding: 20px 22px 22px;
  background: rgba(194, 84, 14, .06);
}
.tg-doc__body .tg-draft__tag {
  display: inline-block;
  font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  background: var(--draft-line); border-radius: 999px;
  padding: .3rem .7rem; margin-bottom: 1rem;
}
.tg-doc__body .tg-draft p { color: var(--draft-ink); }
.tg-doc__body .tg-draft p + p { margin-top: .8rem; }

.tg-doc__placeholder {
  background: var(--card); border: 1px dashed var(--line); border-radius: 18px;
  padding: 28px 26px;
}
.tg-doc__placeholder p { margin: 0; }
.tg-doc__placeholder p + p { margin-top: .8rem; }

.tg-doc__foot {
  margin-top: clamp(48px, 8vh, 88px); padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
}

/* Form d'accesso (login utenti, /corporate) */
.tg-pw { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; box-shadow: var(--shadow); max-width: 360px; }
.tg-pw p { color: var(--muted); margin: 0 0 1.1rem; }
.tg-pw__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.tg-pw form { display: flex; flex-direction: column; gap: 1rem; }
.tg-pw form p { margin: 0; }
.tg-pw label {
  display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin: 0 0 .4rem;
}
.tg-pw input[type="text"],
.tg-pw input[type="password"] {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem;
}
.tg-pw input[type="submit"] {
  font: inherit; font-weight: 600; font-size: .95rem;
  color: #F3ECDD; background: var(--blue); border: 0; border-radius: 10px;
  padding: .7rem 1.4rem; cursor: pointer;
}
.tg-pw input[type="submit"]:hover { background: var(--blue-deep); }

/* ------------------------------------------------------------------
   Banner consenso cookie
   ------------------------------------------------------------------ */
.tg-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30;
  max-width: 560px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.tg-cookies.is-visible { opacity: 1; transform: translateY(0); }
.tg-cookies__text { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.tg-cookies__text a { color: var(--ink); }
.tg-cookies__actions { display: flex; gap: 10px; justify-content: flex-end; }
.tg-cookies__btn {
  font: inherit; font-size: .88rem; font-weight: 600;
  border-radius: 999px; padding: .55rem 1.2rem; cursor: pointer;
  border: 1px solid transparent;
}
.tg-cookies__btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.tg-cookies__btn--ghost:hover { border-color: var(--gold); }
.tg-cookies__btn--solid { background: var(--blue); color: #F3ECDD; }
.tg-cookies__btn--solid:hover { background: var(--blue-deep); }

@media (max-width: 480px) {
  .tg-cookies { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .tg-cookies__actions { justify-content: stretch; }
  .tg-cookies__btn { flex: 1; }
}

@media print { .tg-cookies { display: none; } }

/* Stampa: il cliente stamperà o farà PDF della /corporate */
@media print {
  body { background: #fff; }
  .tg-doc { padding-bottom: 0; }
  .tg-doc__badge { display: none; }
}

/* ------------------------------------------------------------------
   404: battuta editoriale + mini-gioco Snake
   ------------------------------------------------------------------
   Pagina a schermo intero, niente scroll verticale: la nav condivisa e
   la barra annunci sono escluse per questa pagina in header.php, e qui
   tutto è dimensionato in vh/dvh così il contenuto sta sempre dentro il
   viewport invece di spingerlo in basso. */
body.error404 {
  height: 100dvh;
  overflow: hidden;
}
/* Admin loggato: WP spinge tutta la pagina giù di 32px (46px sotto 783px)
   per la barra admin fissa — senza questo conto lo scroll ricompare solo
   per chi è loggato, mai per un visitatore vero. */
body.error404.admin-bar { height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  body.error404.admin-bar { height: calc(100dvh - 46px); }
}
.tg-404 {
  position: relative;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(92px, 12vh, 132px) clamp(24px, 5vw, 76px) clamp(30px, 5vh, 62px);
  overflow: hidden;
  background: var(--cream);
}
.tg-404::before {
  content: '';
  position: absolute; right: -15vw; bottom: -38vw;
  width: min(72vw, 980px); aspect-ratio: 1;
  border-radius: 46% 54% 62% 38% / 42% 40% 60% 58%;
  background: rgba(175,133,70,.095);
  transform: rotate(-14deg);
  pointer-events: none;
}
.tg-404__brand {
  position: absolute; z-index: 2; top: clamp(25px, 4vh, 48px); left: clamp(24px, 5vw, 76px);
  display: inline-flex; flex-direction: column; align-items: flex-start;
  color: var(--blue); text-decoration: none;
}
.tg-404__brand-name {
  font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 600;
  line-height: 1; letter-spacing: -.02em;
}
.tg-404__brand-kind {
  margin-top: .46rem; font-size: .56rem; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-deep); text-transform: uppercase;
}
.tg-404__inner {
  position: relative;
  width: 100%; max-width: 1180px;
  display: grid; grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.28fr);
  align-items: center; gap: clamp(56px, 8vw, 116px);
}
.tg-404__copy {
  position: relative; z-index: 1; text-align: left;
}
.tg-404__eyebrow {
  margin: 0 0 clamp(12px, 2vh, 20px); font-size: .66rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep);
}
.tg-404__num {
  margin: 0;
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: clamp(6.4rem, 15vh, 10.8rem); line-height: .68;
  color: var(--gold); letter-spacing: -.075em;
}
.tg-404__title {
  margin: clamp(24px, 3.6vh, 38px) 0 0; font-family: var(--serif); font-weight: 560;
  font-size: clamp(2.15rem, 4.2vw, 3.65rem); color: var(--blue); line-height: .98;
  letter-spacing: -.035em; text-wrap: balance;
}
.tg-404__lead {
  margin: clamp(16px, 2.2vh, 24px) 0 0; color: var(--muted); font-size: clamp(.9rem, 1.25vw, 1rem); line-height: 1.55;
  max-width: 36ch;
}
.tg-404__home {
  margin-top: clamp(24px, 3.5vh, 38px);
  display: inline-flex; align-items: center; gap: .35em;
  font-weight: 650; font-size: .82rem;
  color: var(--blue); text-decoration: none;
  transition: color .3s ease;
}
.tg-404__home::before { content: '←'; font-size: 1.15em; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.tg-404__home:hover { color: var(--gold-deep); }
.tg-404__home:hover::before { transform: translateX(-3px); }

.tg-snake {
  position: relative; z-index: 1;
  width: 100%; max-width: 700px;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 1.8dvh, 18px);
}

.tg-snake__hud {
  position: absolute; z-index: 3; top: clamp(20px, 3vw, 30px); left: clamp(25px, 4vw, 40px); right: clamp(25px, 4vw, 40px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--sans); pointer-events: none;
}
.tg-snake__score { display: flex; flex-direction: column; gap: 1px; }
.tg-snake__score--best { align-items: flex-end; }
.tg-snake__score-label {
  font-size: .55rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.tg-snake__score-val {
  font-family: var(--serif); font-size: clamp(1.3rem, 3.2dvh, 1.75rem); font-weight: 600; color: var(--blue);
  font-variant-numeric: tabular-nums;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.tg-snake__score-val.is-bump { transform: scale(1.28); }
.tg-snake__score--best .tg-snake__score-val { color: var(--gold-deep); }

/* Tabellone rettangolare: raggio generoso in px (non lo squircle percentuale
   condiviso, che su un rettangolo così largo produceva angoli sproporzionati
   fra lato lungo e corto) più una cornice discreta a due livelli invece del
   solito bordo piatto. */
.tg-snake__board {
  position: relative;
  width: 100%; max-width: 700px;
  aspect-ratio: 20 / 13;
  max-height: 62dvh;
  background: #EFE5D9;
  border-radius: clamp(52px, 6vw, 80px);
  corner-shape: squircle;
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 0 0 1px rgba(40,82,97,.10), 0 30px 68px rgba(60,48,34,.14);
  overflow: hidden;
}
.tg-snake__board canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }

.tg-snake__overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem;
  padding: clamp(16px, 3dvh, 26px);
  text-align: center;
  background: rgba(239,229,217,.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 1; transform: scale(1); visibility: visible;
  transition: opacity .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
.tg-snake__overlay.is-hidden {
  opacity: 0; transform: scale(1.035); visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
/* Dopo un game over il testo diventa il punteggio: le icone dei tasti,
   che servivano solo a spiegare i comandi, non servono più. */
.tg-snake__overlay.is-gameover .tg-snake__keys {
  display: none;
}
.tg-snake__eyebrow {
  margin: 0 0 .15rem; font-size: .58rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
}
.tg-snake__overlay.is-gameover .tg-snake__eyebrow { display: none; }
.tg-snake__overlay-title {
  margin: 0; font-family: var(--serif); font-size: clamp(1.75rem, 4dvh, 2.5rem); font-weight: 560; color: var(--blue); letter-spacing: -.025em;
}
.tg-snake__keys { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 30px); gap: 4px; margin: .35rem 0 .2rem; }
.tg-snake__key {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.56); color: var(--blue);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 1px rgba(40,82,97,.10);
}
.tg-snake__key--up { grid-column: 2; grid-row: 1; }
.tg-snake__key--left { grid-column: 1; grid-row: 2; }
.tg-snake__key--down { grid-column: 2; grid-row: 2; }
.tg-snake__key--right { grid-column: 3; grid-row: 2; }
.tg-snake__key svg { width: 55%; height: 55%; }
.tg-snake__overlay-text { margin: 0; display: flex; gap: .65rem; color: var(--muted); font-size: .7rem; }
.tg-snake__overlay-text span + span::before { content: '·'; margin-right: .65rem; color: var(--gold-deep); }
.tg-snake__play {
  margin-top: .45rem; font: inherit; font-weight: 700; font-size: .78rem; cursor: pointer;
  border: none; border-radius: 999px; padding: .8rem 1.8rem;
  background: var(--blue); color: #F3ECDD;
  box-shadow: 0 10px 28px rgba(40,82,97,.16);
  transition: background .3s ease, color .3s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.tg-snake__play:hover { background: var(--blue-deep); color: #fff; transform: translateY(-2px); }
.tg-snake__play:active { transform: scale(.94); }

.tg-snake__pad {
  display: none; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(2, 40px);
  gap: 5px; justify-content: center;
}
.tg-snake__pad-btn {
  grid-row: 1; border: 1px solid var(--line); background: #fff; color: var(--blue);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 30%;
  transition: background .15s ease, transform .1s ease;
}
.tg-snake__pad-btn svg { width: 18px; height: 18px; }
.tg-snake__pad-btn:active { transform: scale(.92); background: var(--cream-2); }
.tg-snake__pad-btn--up    { grid-column: 2; grid-row: 1; }
.tg-snake__pad-btn--left  { grid-column: 1; grid-row: 2; }
.tg-snake__pad-btn--down  { grid-column: 2; grid-row: 2; }
.tg-snake__pad-btn--right { grid-column: 3; grid-row: 2; }

/* Schermi molto bassi (telefono in orizzontale): la battuta si accorcia
   da sola sparendo per lasciare spazio al gioco, che è il punto della
   pagina — niente scroll comunque. */
@media (max-height: 480px) {
  .tg-404__lead { display: none; }
  .tg-404__num { font-size: clamp(3rem, 16dvh, 5rem); }
  .tg-404__title { font-size: clamp(1.2rem, 4.6dvh, 1.9rem); }
}

@media (max-width: 900px) {
  body.error404 { height: auto; min-height: 100dvh; overflow-y: auto; }
  body.error404.admin-bar { height: auto; min-height: calc(100dvh - 46px); }
  .tg-404 { min-height: 100dvh; height: auto; padding: 110px 20px 40px; overflow: hidden; }
  .tg-404__brand { top: 28px; left: 24px; }
  .tg-404__inner { max-width: 680px; grid-template-columns: 1fr; gap: 38px; }
  .tg-404__copy { text-align: center; }
  .tg-404__lead { margin-inline: auto; }
  .tg-404__num { font-size: clamp(5.2rem, 19vw, 8rem); }
  .tg-404__title { margin-top: 24px; font-size: clamp(2rem, 7vw, 3rem); }
  .tg-404__home { margin-top: 24px; }
}

@media (max-width: 640px) {
  .tg-404 { padding-inline: 12px; }
  .tg-404__copy { padding-inline: 12px; }
  .tg-snake__board { aspect-ratio: 4 / 3; border-radius: clamp(38px, 12vw, 58px); }
  .tg-snake__overlay { padding: 18px; }
  .tg-snake__overlay-text { max-width: 28ch; }
  .tg-snake__hud { top: 18px; left: 24px; right: 24px; }
}
/* --------------------------------------------------------------------------
   Gestionale: hub e editor annunci/reputazione
   ----------------------------------------------------------------------- */
.tg-gestionale-welcome{margin-bottom:.4rem}
.tg-gestionale-welcome__hi{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.7rem;color:var(--gold-deep);margin:0 0 .5rem;text-wrap:balance;letter-spacing:-.01em}
.tg-gestionale-welcome__body{font-family:var(--sans);font-size:1rem;line-height:1.7;color:var(--ink);max-width:46ch;margin:0}
.tg-gestionale-site-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.9rem;color:#F3ECDD;background:var(--blue);border:1px solid var(--blue);border-radius:9px;padding:.65rem 1.1rem;text-decoration:none;transition:background .2s}
.tg-gestionale-site-btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.tg-gestionale-site-btn__arrow{transition:transform .3s}
.tg-gestionale-site-btn:hover .tg-gestionale-site-btn__arrow{transform:translateX(3px)}
.tg-gestionale-grid{display:grid;gap:1rem;margin-top:1.6rem}
.tg-gestionale-card{position:relative;display:flex;flex-direction:column;gap:.4rem;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px clamp(18px,3vw,26px);box-shadow:var(--shadow);text-decoration:none;transition:border-color .25s,transform .25s}
.tg-gestionale-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.tg-gestionale-card__title{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.15rem;color:var(--blue)}
.tg-gestionale-card__text{font-family:var(--sans);font-size:.88rem;color:var(--muted);line-height:1.5}
.tg-gestionale-card__arrow{position:absolute;top:22px;right:22px;color:var(--gold-deep);font-size:1.05rem;transition:transform .3s}
.tg-gestionale-card:hover .tg-gestionale-card__arrow{transform:translateX(3px)}
.tg-orari-section{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px clamp(16px,3vw,26px);box-shadow:var(--shadow);margin-top:1.6rem}
.tg-orari-toggle{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.94rem;color:var(--ink);cursor:pointer;margin-bottom:1.2rem}
.tg-orari-toggle input{width:18px;height:18px;accent-color:var(--blue)}
.tg-annuncio-label{display:block;font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--muted);margin-bottom:.35rem}
.tg-annuncio-link-row{display:grid;gap:1rem;margin-top:1.1rem}
.tg-orari-hint{margin:.6rem 0 0;font-size:.8rem;color:var(--muted)}
.tg-annuncio-section-title{margin:0 0 .35rem;font:italic 600 1.35rem/1.2 var(--serif);color:var(--blue)}
.tg-menu-input{width:100%;box-sizing:border-box;font:inherit;font-size:.92rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:.55rem .7rem}
.tg-menu-input:focus{outline:2px solid var(--gold);outline-offset:1px}
.tg-menu-btn--save{font:inherit;font-weight:600;font-size:.95rem;color:#F3ECDD;background:var(--blue);border:1px solid var(--blue);border-radius:9px;padding:.75rem 1.6rem;cursor:pointer}
.tg-menu-btn--save:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
@media (min-width:560px){.tg-gestionale-grid{grid-template-columns:1fr 1fr}.tg-annuncio-link-row{grid-template-columns:1.3fr 1fr}}