/* ==========================================================================
   FONT FACES — self-hosted (GDPR compliant, no Google Fonts CDN)
   Family/Weight inclusi: Big Shoulders Display 300-800, Inter 400-700, JetBrains Mono 400-500
   Subsets: latin + latin-ext (copre IT/EN/FR/ES/DE)
   ========================================================================== */
/* latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   ASSOCIAZIONE CINOFILIA 18Kt — Design System
   Black / Warm white / 18kt gold accents · Instrument Serif + Inter + Mono
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Surface */
  --bg:           #FAFAF7;   /* off-white caldo */
  --bg-2:         #F2EFE8;   /* panna leggera */
  --bg-3:         #ECE7DC;   /* sand */
  --ink:          #0A0A0A;   /* nero quasi puro */
  --ink-2:        #1A1A1A;
  --ink-soft:     #3A3A3A;
  --muted:        #6B6B6B;
  --line:         #E5E2DA;
  --line-strong:  #C9C4B6;

  /* Gold (solo accenti) */
  --gold:         #C8A24A;
  --gold-soft:    #E8D49A;
  --gold-deep:    #9A7A2E;
  --gold-glow:    rgba(200,162,74,.18);

  /* Status */
  --ok:           #1F8F5C;
  --warn:         #C97A1F;
  --err:          #B83A2D;
  --info:         #2C5A8F;

  /* Type */
  --f-display: 'Big Shoulders Display', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-lg:   1.125rem;  /* 18 */
  --t-xl:   1.375rem;  /* 22 */
  --t-2xl:  1.75rem;   /* 28 */
  --t-3xl:  2.5rem;    /* 40 */
  --t-4xl:  3.5rem;    /* 56 */
  --t-5xl:  4.75rem;   /* 76 */
  --t-6xl:  6.5rem;    /* 104 */

  /* Space */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows (warm, soft) */
  --sh-1: 0 1px 2px rgba(20,16,8,.04), 0 1px 1px rgba(20,16,8,.03);
  --sh-2: 0 4px 16px rgba(20,16,8,.06), 0 2px 4px rgba(20,16,8,.04);
  --sh-3: 0 16px 40px rgba(20,16,8,.10), 0 4px 12px rgba(20,16,8,.05);
  --sh-gold: 0 8px 28px rgba(200,162,74,.28);

  /* Motion */
  --e-out: cubic-bezier(.2, .8, .2, 1);
  --e-in:  cubic-bezier(.4, 0, 1, 1);
  --d-fast: 180ms;
  --d-base: 280ms;
  --d-slow: 520ms;

  /* Layout */
  --max:    1240px;
  --max-r:  1080px;   /* reading */
  --gut:    24px;
  --gut-lg: 40px;

  /* Header */
  --hh: 76px;
}

@media (max-width: 720px) {
  :root {
    --t-3xl: 2rem;
    --t-4xl: 2.5rem;
    --t-5xl: 3rem;
    --t-6xl: 3.75rem;
    --gut: 20px;
    --hh: 64px;
  }
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
}

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

::selection { background: var(--ink); color: var(--gold-soft); }

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

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------- */
.display, h1, h2 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 0.92;
  color: var(--ink);
  text-transform: none;
}

.h-xxl { font-size: var(--t-6xl); }
.h-xl  { font-size: var(--t-5xl); }
.h-lg  { font-size: var(--t-4xl); }
.h-md  { font-size: var(--t-3xl); }
.h-sm  { font-size: var(--t-2xl); line-height: 1.15; }

h3, h4 {
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { color: var(--ink-soft); }

.lead {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.italic-display {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 300;
  color: var(--gold-deep);
}

h1 em, h2 em, .display em {
  font-style: normal;
  font-weight: 300;
  color: var(--gold-deep);
}

.num {
  font-family: var(--f-mono);
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}

.text-muted { color: var(--muted); }
.text-gold  { color: var(--gold-deep); }
.text-light { color: rgba(255,255,255,.8); }

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.wrap-r {
  max-width: var(--max-r);
  margin: 0 auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--s-9); }
.section-sm { padding-block: var(--s-7); }
.section-lg { padding-block: var(--s-10); }

.section-dark {
  background: var(--ink);
  color: #fff;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.72); }
.section-dark .text-muted { color: rgba(255,255,255,.5); }
.section-dark .eyebrow { color: var(--gold-soft); }
.section-dark .eyebrow::before { background: var(--gold-soft); }

.section-sand { background: var(--bg-2); }

.grid { display: grid; gap: var(--gut); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
}
.section-dark .divider { background: rgba(255,255,255,.12); }

.gold-rule {
  width: 56px;
  height: 1px;
  background: var(--gold);
  border: 0;
}

/* -------------------------------------------------------------------------
   5. ICONS
   ------------------------------------------------------------------------- */
.ico {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.ico-sm { width: 14px; height: 14px; }
.ico-md { width: 20px; height: 20px; }
.ico-lg { width: 28px; height: 28px; }
.ico-xl { width: 40px; height: 40px; }

/* -------------------------------------------------------------------------
   6. HEADER & NAV
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,247,.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(250,250,247,.92);
}

.nav {
  height: var(--hh);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}
.brand-img {
  display: block;
  height: auto;
  max-width: 100%;
  flex-shrink: 0;
}
.brand picture {
  display: inline-flex;
  align-items: center;
}
.brand-mark {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.brand-mark em {
  font-style: normal;
  font-weight: 300;
  color: var(--gold-deep);
  font-size: 0.78em;
  margin-left: 2px;
  letter-spacing: 0;
}
.brand-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
  margin-left: 6px;
  align-self: center;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.nav-links a:hover { color: var(--ink); background: var(--bg-2); }
.nav-links a.is-active { color: var(--gold-deep); }

.nav-right { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: var(--hh) 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-5) var(--gut);
    transform: translateY(-100%);
    transition: transform var(--d-base) var(--e-out);
    overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: var(--t-lg);
    font-weight: 500;
  }
  .nav-links a:hover { background: transparent; }
}

/* Workaround obsoleto, sempre nascosto */
.nav-cta-li { display: none !important; }

/* ============ MOBILE MENU PURE CSS · :target ============ */
/* Hamburger e overlay: visibili solo ≤ 980px */
.nav-toggle, .mobile-menu { display: none; }

@media (max-width: 980px) {
  /* Su mobile: nascondi nav desktop + CTA, mostra hamburger */
  .nav-links, .nav-cta-desktop { display: none !important; }
  .nav-toggle { display: inline-flex; }

  /* Overlay nascosto di default */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--bg);
    overflow-y: auto;
    padding: var(--s-5) var(--gut);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 240ms var(--e-out),
                transform 240ms var(--e-out),
                visibility 0s linear 240ms;
  }
  /* :target attivato dal click su <a href="#mobileMenu"> */
  .mobile-menu:target {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 240ms var(--e-out), transform 240ms var(--e-out);
  }
}

/* Blocca scroll body quando overlay aperto (solo Safari 15.4+/Chrome 105+/FF 121+) */
body:has(.mobile-menu:target) { overflow: hidden; }

/* Header overlay */
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hh);
  margin-bottom: var(--s-5);
}
.mobile-menu-close {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
}
/* Voci menu */
.mobile-menu-nav { display: flex; flex-direction: column; }
.mobile-menu-nav a {
  padding: 18px 0;
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.mobile-menu-nav a:hover { color: var(--gold-deep); }
/* CTA finale */
.mobile-menu-nav .mobile-menu-cta {
  margin-top: var(--s-5);
  padding: 16px 24px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--t-base);
  text-align: center;
}
.mobile-menu-nav .mobile-menu-cta:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ============ LANGUAGE SWITCHER (desktop) ============ */
.lang-switcher {
  position: relative;
  display: inline-flex;
}
.lang-switcher .lang-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-xs, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.lang-switcher .lang-current:hover { background: var(--bg-2); border-color: var(--ink); }
.lang-switcher .lang-current .ico { width: 14px; height: 14px; }
.lang-switcher .lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  list-style: none;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--e-out), transform 160ms var(--e-out), visibility 0s linear 160ms;
  z-index: 1000;
}
.lang-switcher[aria-expanded="true"] .lang-menu,
.lang-switcher.is-open .lang-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms var(--e-out), transform 160ms var(--e-out);
}
.lang-switcher .lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-sm, 14px);
}
.lang-switcher .lang-menu a:hover { background: var(--bg-2); }
.lang-switcher .lang-menu a.is-active { background: var(--bg-2); font-weight: 600; }
.lang-switcher .lang-menu .lang-code {
  font-family: var(--ff-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  min-width: 22px;
}

/* Mobile: switcher compatto in mobile-menu, nascosto in header */
@media (max-width: 980px) {
  .lang-switcher { display: none; }
}

/* ============ MOBILE LANGUAGE SWITCHER (in mobile menu) ============ */
.mobile-lang {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.mobile-lang-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft, var(--ink));
  margin-bottom: 12px;
}
.mobile-lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-lang-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
}
.mobile-lang-list a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* -------------------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  --bg: var(--ink);
  --fg: #fff;
  --bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  transition: transform var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
  white-space: nowrap;
  position: relative;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }

.btn .ico { width: 18px; height: 18px; }
.btn-arrow .ico { transition: transform var(--d-base) var(--e-out); }
.btn-arrow:hover .ico { transform: translateX(4px); }

.btn-lg { padding: 18px 28px; font-size: var(--t-base); }
.btn-sm { padding: 9px 16px; font-size: var(--t-xs); }

.btn-ghost  { --bg: transparent; --fg: var(--ink); --bd: var(--line-strong); }
.btn-ghost:hover { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }

.btn-gold {
  --bg: var(--gold);
  --fg: var(--ink);
  --bd: var(--gold);
}
.btn-gold:hover { box-shadow: var(--sh-gold); }

.btn-light {
  --bg: #fff;
  --fg: var(--ink);
  --bd: #fff;
}

.btn-outline-light {
  --bg: transparent;
  --fg: #fff;
  --bd: rgba(255,255,255,.4);
}
.btn-outline-light:hover { --bg: #fff; --fg: var(--ink); --bd: #fff; }

.btn-block { width: 100%; justify-content: center; }
.btn[disabled], .btn:disabled { opacity: .45; pointer-events: none; }

.linkish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: gap var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.linkish:hover { gap: 10px; color: var(--gold-deep); border-color: var(--gold); }
.section-dark .linkish { color: #fff; border-color: rgba(255,255,255,.4); }
.section-dark .linkish:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.hero .linkish { color: var(--gold-soft); border-color: var(--gold-soft); }
.hero .linkish:hover { color: #fff; border-color: #fff; }

/* -------------------------------------------------------------------------
   8. FORMS
   ------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; min-width: 0; }
.field + .field { margin-top: var(--s-4); }

.field > span:first-child,
.field > label,
.label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.3;
  flex-shrink: 0;
}

.input, .select, .textarea {
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  color: var(--ink);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.input::placeholder, .textarea::placeholder { color: #B8B5AB; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--gold-glow);
}
.textarea { min-height: 140px; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: end; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.help { font-size: var(--t-xs); color: var(--muted); margin-top: 6px; }
.error { font-size: var(--t-xs); color: var(--err); margin-top: 6px; display: flex; align-items: center; gap: 6px; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.5;
}
.checkbox input { display: none; }
.checkbox .box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: all var(--d-fast) var(--e-out);
  margin-top: 1px;
}
.checkbox .box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.5); transition: all var(--d-fast) var(--e-out); color: #fff; }
.checkbox input:checked + .box { background: var(--ink); border-color: var(--ink); }
.checkbox input:checked + .box svg { opacity: 1; transform: scale(1); }

/* counter (+/-) */
.counter {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  overflow: hidden;
  height: 52px;
}
.counter button {
  width: 52px;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background var(--d-fast) var(--e-out);
}
.counter button:hover { background: var(--bg-2); }
.counter button:disabled { color: var(--line-strong); pointer-events: none; }
.counter .val {
  min-width: 56px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
}

/* segmented choice */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.choice > .choice-price,
.choice > .pill {
  margin-top: auto;
  padding-top: var(--s-3);
  align-self: flex-start;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: var(--ink-soft); }
.choice .check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all var(--d-fast) var(--e-out);
}
.choice .check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity var(--d-fast) var(--e-out); }
.choice:has(input:checked),
.choice.is-selected { border-color: var(--ink); box-shadow: 0 0 0 4px var(--gold-glow); }
.choice:has(input:checked) .check,
.choice.is-selected .check { background: var(--ink); border-color: var(--ink); }
.choice:has(input:checked) .check svg,
.choice.is-selected .check svg { opacity: 1; }

.choice-title { font-size: var(--t-base); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.choice-meta  { font-size: var(--t-sm); color: var(--muted); }
.choice-price { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--gold-deep); margin-top: 8px; display: block; }

/* -------------------------------------------------------------------------
   9. CARDS
   ------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--sh-2); }

.card-pad { padding: var(--s-6); }
.card-pad-lg { padding: var(--s-7); }

.card-dark {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink-2);
}
.card-dark:hover { border-color: var(--gold-deep); }

/* visual block (placeholder for image) */
.visual {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-2);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
}
.visual.is-wide { aspect-ratio: 16/10; }
.visual.is-square { aspect-ratio: 1/1; }
.visual.is-tall { aspect-ratio: 3/4; }
.visual img { width: 100%; height: 100%; object-fit: cover; }
.visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,.45) 100%);
  pointer-events: none;
}
.visual-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .38;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* event card */
.event-card { display: flex; flex-direction: column; }
.event-card .visual { aspect-ratio: 16/10; border-radius: 0; }
.event-card-body { padding: var(--s-5) var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--muted);
}
.event-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.event-card h3 { font-size: var(--t-xl); margin-top: 4px; }
.event-card p { font-size: var(--t-sm); color: var(--ink-soft); flex: 1; }
.event-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-3); border-top: 1px solid var(--line); }

/* -------------------------------------------------------------------------
   10. BADGES & PILLS
   ------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--ink-soft);
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.pill-ok    { background: rgba(31,143,92,.10); color: var(--ok); }
.pill-warn  { background: rgba(201,122,31,.12); color: var(--warn); }
.pill-err   { background: rgba(184,58,45,.10); color: var(--err); }
.pill-gold  { background: rgba(200,162,74,.14); color: var(--gold-deep); }
.pill-dark  { background: var(--ink); color: var(--gold-soft); }

/* -------------------------------------------------------------------------
   11. STAT
   ------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stat-num em { font-style: normal; font-weight: 300; color: var(--gold-deep); }
.stat-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-dark .stat-num { color: #fff; }
.section-dark .stat-label { color: rgba(255,255,255,.5); }
.hero .stat-num,
.hero .stat-num em,
.kennel-hero .stat-num,
.kennel-hero .stat-num em { color: var(--gold-soft); }
.hero .stat-label,
.kennel-hero .stat-label { color: rgba(255,255,255,.65); }

/* -------------------------------------------------------------------------
   12. HERO HOME
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: calc(35px + var(--s-6)) 0 var(--s-6);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("../img/hero-black-dogs.jpg") right bottom / auto 100% no-repeat;

  z-index: 0;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 8%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.82) 75%, #000 92%),
    linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, transparent 8%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.82) 75%, #000 92%),
    linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%);
          mask-composite: intersect;
}
.hero::after {
  /* halo oro in alto-destra */
  content: "";
  position: absolute;
  inset: -15% -10% auto auto;
  width: 55vw;
  max-width: 700px;
  aspect-ratio: 1/1;
  background: radial-gradient(closest-side, var(--gold-glow), transparent 70%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.hero > * { position: relative; z-index: 2; }

/* Hero pagina Allevamento: stesso layout, immagine sostituita col logo federazione */
.hero.hero-breeding::before {
  background-image: url("../img/logo-federazione.jpeg");
  background-image: image-set(
    url("../img/logo-federazione.webp") type("image/webp"),
    url("../img/logo-federazione.jpeg") type("image/jpeg")
  );
  background-image: -webkit-image-set(
    url("../img/logo-federazione.webp") type("image/webp"),
    url("../img/logo-federazione.jpeg") type("image/jpeg")
  );
}

@media (max-width: 980px) {
  .hero::before {
    /* su tablet/mobile l'immagine va in basso e prende meno protagonismo */
    background-position: right bottom;
    background-size: auto 60%;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 70%);
            mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 70%);
  }
}

/* HERO con cover dinamica (pagina dettaglio evento) */
.hero-event {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* parallax desktop */
}
/* Disattiva immagine fissa "cani neri" e halo oro quando c'è cover custom */
.hero-event::before,
.hero-event::after { display: none; }
@media (max-width: 980px) {
  /* iOS Safari non supporta bene background-attachment:fixed: fallback scroll */
  .hero-event { background-attachment: scroll; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--gut-lg);
  align-items: end;
}
@media (min-width: 981px) { .hero-grid { margin-bottom: 5rem; } }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

.hero-logo {
  display: block;
  width: 150px;
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
}
.hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-bottom: var(--s-4);
}
.hero h1 em {
  font-style: normal;
  color: var(--gold-soft);
  font-weight: 300;
}
.hero h1 .hero-emph {
  display: inline-block;
  font-size: 1.5em;
  line-height: 0.85;
  letter-spacing: -0.025em;
}
.hero .lead { color: rgba(255,255,255,.72); font-size: var(--t-lg); max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-6); }

.hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-bottom: 6px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background-color: var(--ink);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  width: fit-content;
}
.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
a.hero-tag { text-decoration: none; transition: border-color .18s, transform .18s; }
a.hero-tag:hover { border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
a.hero-tag.is-upcoming { color: rgba(255,255,255,.7); }
a.hero-tag.is-upcoming .dot { background: rgba(255,255,255,.5); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }

/* Mappa Leaflet — marker oro */
.map-leaflet { background: var(--bg-2); }
.map-leaflet .leaflet-control-attribution { font-size: 10px; }
.map-pin-gold { position: relative; }
.map-pin-gold span {
  position: absolute; left: 50%; top: 100%;
  width: 22px; height: 22px;
  margin-left: -11px; margin-top: -22px;
  background: var(--gold);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.map-pin-gold span::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  border-radius: 50%;
}

/* Sponsor card (pagina dettaglio evento) */
.sponsor-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none;
  color: inherit;
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.sponsor-card { cursor: pointer; }
a.sponsor-card:hover {
  border-color: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.sponsor-card-logo {
  width: 100%; aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
}
.sponsor-card-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: grayscale(0.3);
  transition: filter .15s;
}
a.sponsor-card:hover .sponsor-card-logo img { filter: grayscale(0); }
.sponsor-card-placeholder {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  padding: var(--s-3);
}
.sponsor-card-name {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0;
}

.hero-quote {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-style: normal;
  font-weight: 400;
  color: var(--gold-soft);
  line-height: 1.18;
  letter-spacing: -0.005em;
  border-left: 2px solid var(--gold);
  padding-left: var(--s-4);
}

.hero-foot {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 720px) { .hero-foot { grid-template-columns: repeat(2, 1fr); } }

/* marquee strip */
.marquee {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: var(--s-7);
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 14px; }
.marquee-track span::after { content: "✦"; color: var(--gold); margin-left: var(--s-5); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------------------
   13. FEATURE LIST
   ------------------------------------------------------------------------- */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.feature .num-pad {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--gold-deep);
  letter-spacing: 0.1em;
}
.feature h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
}
.feature p { font-size: var(--t-base); color: var(--ink-soft); max-width: 56ch; }
.feature .ico-xl { color: var(--ink); margin-bottom: var(--s-3); }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-7); }
@media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } }

/* hoverable feature variant */
.feature-card {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: all var(--d-base) var(--e-out);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.feature-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--sh-2); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card .ico-xl { color: var(--ink); }

/* -------------------------------------------------------------------------
   14. STEPPER (Iscrizione)
   ------------------------------------------------------------------------- */
.stepper {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stepper li {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  min-width: 0;
}
.step-conn {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
  transition: background var(--d-base) var(--e-out);
  min-width: 24px;
}
.stepper li:has(.step-btn[data-state="done"]) + .step-conn {
  background: var(--gold);
}
.step-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 0;
  cursor: pointer;
  color: var(--muted);
  transition: color var(--d-fast) var(--e-out);
  white-space: nowrap;
  text-align: left;
}
.step-btn:hover:not([disabled]) { color: var(--ink); }
.step-btn[disabled] { cursor: not-allowed; }
.step-btn .step-num {
  width: 32px;
  height: 32px;
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  transition: all var(--d-fast) var(--e-out);
  flex-shrink: 0;
}
.step-btn .step-num > * { grid-area: stack; }
.step-btn .step-num svg { width: 14px; height: 14px; opacity: 0; }
.step-btn .step-name { font-size: var(--t-sm); font-weight: 500; }

.step-btn[data-state="done"] .step-num {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.step-btn[data-state="done"] .step-num span { display: none; }
.step-btn[data-state="done"] .step-num svg { opacity: 1; }
.step-btn[data-state="done"] { color: var(--ink); }

.step-btn[data-state="active"] .step-num {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.step-btn[data-state="active"] { color: var(--ink); }
.step-btn[data-state="active"] .step-name { font-weight: 600; }

@media (max-width: 720px) {
  .stepper li .step-name { display: none; }
  .stepper li + li::before { margin: 0 6px; }
}

/* step panels */
.step-panel { display: none; animation: fadeUp var(--d-slow) var(--e-out); }
.step-panel.is-active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* registration two-column layout */
.reg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 980px) { .reg-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.reg-side {
  position: sticky;
  top: calc(var(--hh) + var(--s-4));
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.reg-side h4 { color: #fff; font-family: var(--f-display); font-weight: 400; font-size: var(--t-xl); letter-spacing: -0.02em; }
.reg-side .summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-sm);
  padding: 8px 0;
  color: rgba(255,255,255,.78);
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.reg-side .summary-line:last-of-type { border: 0; }
.reg-side .summary-line .v { font-family: var(--f-mono); color: #fff; }
.reg-side .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.18);
}
.reg-side .summary-total .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.reg-side .summary-total .v {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  color: var(--gold-soft);
  letter-spacing: -0.03em;
}

/* dog block in form */
.dog-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: relative;
}
.dog-block + .dog-block { margin-top: var(--s-4); }
.dog-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.dog-block-head h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
}
.dog-block-head h4 .num { color: var(--gold-deep); font-size: var(--t-base); }
.dog-block-remove {
  font-size: var(--t-xs);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dog-block-remove:hover { color: var(--err); }

/* tier badge inside form */
.tier-banner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  margin-top: var(--s-4);
}
.tier-banner .ico { color: var(--gold-deep); }
.tier-banner-text { flex: 1; font-size: var(--t-sm); color: var(--ink-soft); }
.tier-banner-text strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding: var(--s-9) 0 var(--s-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.footer-brand .brand-mark { color: #fff; font-size: 36px; }
.footer-brand .brand-mark em { color: var(--gold-soft); }
.footer-brand .brand-img { display: block; height: auto; }
.footer-brand p { color: rgba(255,255,255,.56); margin-top: var(--s-3); max-width: 38ch; }

.footer-col h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255,255,255,.78); font-size: var(--t-sm); transition: color var(--d-fast) var(--e-out); }
.footer-col a:hover { color: var(--gold-soft); }

.footer-social { display: flex; gap: 10px; margin-top: var(--s-5); }
.footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  transition: all var(--d-fast) var(--e-out);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.footer-bottom {
  margin-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: rgba(255,255,255,.45);
}
.footer-bottom ul { list-style: none; display: flex; gap: var(--s-4); }

.footer-gcc-logo {
  display: block;
  width: 150px;
  margin-top: var(--s-4);
}
.footer-gcc-logo img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.85;
}

/* -------------------------------------------------------------------------
   16. ALLEVAMENTO BITS
   ------------------------------------------------------------------------- */
.kennel-hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: calc(var(--hh) + var(--s-6)) 0 var(--s-6);
  overflow: hidden;
}
.kennel-hero::before {
  content: "";
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 70%;
  aspect-ratio: 1/1;
  background: radial-gradient(closest-side, var(--gold-glow), transparent 65%);
  pointer-events: none;
}

.dog-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: all var(--d-base) var(--e-out);
}
.dog-card:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--sh-3); }
.dog-card .visual { aspect-ratio: 4/5; border-radius: 0; }
.dog-card-body { padding: var(--s-5); }
.dog-card h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dog-card h3 em { font-style: normal; font-weight: 300; color: var(--gold-deep); font-size: 0.6em; }
.dog-card-meta {
  display: flex;
  gap: var(--s-4);
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* litter card */
.litter-card { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: all var(--d-base) var(--e-out); }
.litter-card:hover { border-color: var(--ink); box-shadow: var(--sh-2); }
.litter-card .visual { aspect-ratio: auto; height: 100%; min-height: 280px; border-radius: 0; }
.litter-card-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.litter-card-stats { display: flex; gap: var(--s-5); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.litter-card-stats .stat-num { font-size: var(--t-2xl); }
.litter-card-stats .stat-label { font-size: 10px; }
@media (max-width: 720px) { .litter-card { grid-template-columns: 1fr; } .litter-card .visual { aspect-ratio: 16/10; min-height: 0; } }

/* -------------------------------------------------------------------------
   17. UTILITIES & ANIMATIONS
   ------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.ta-c { text-align: center; }
.ta-l { text-align: left; }

.flex   { display: flex; }
.flex-c { display: flex; align-items: center; gap: var(--s-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); }

.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); }

/* reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* anchored skip link visible on focus */
.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  transition: top var(--d-fast) var(--e-out);
}
.skip:focus { top: 16px; }


/* =========================================================================
   18. ADMIN AREA — sidebar + topbar + tables + forms
   ========================================================================= */

.admin {
  --sidebar-w: 260px;
  --topbar-h: 64px;
  background: var(--bg);
  min-height: 100vh;
}
.admin-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.admin-sidebar {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.admin-sidebar-brand {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-sidebar-brand .brand-mark { color: #fff; font-size: 26px; }
.admin-sidebar-brand .brand-mark em { color: var(--gold-soft); }
.admin-sidebar-brand .brand-sub { color: rgba(255,255,255,.5); border-left-color: rgba(255,255,255,.18); }

.admin-sidebar-nav {
  flex: 1;
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  overflow-y: auto;
}
.admin-nav-group h6 {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 0 var(--s-3) 8px;
  font-weight: 500;
}
.admin-nav-group ul { list-style: none; padding: 0; margin: 0; }
.admin-nav-group li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--s-3);
  font-size: var(--t-sm);
  color: rgba(255,255,255,.7);
  border-radius: var(--r-md);
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.admin-nav-group li a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav-group li a.is-active { background: var(--gold); color: var(--ink); font-weight: 600; }
.admin-nav-group li a .ico { width: 18px; height: 18px; flex-shrink: 0; }
.admin-nav-group li a .badge {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  background: rgba(255,255,255,.1);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.admin-nav-group li a.is-active .badge { background: var(--ink); color: var(--gold-soft); }

.admin-sidebar-foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: var(--t-xs);
  color: rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-sidebar-foot a { color: rgba(255,255,255,.7); }

/* Main area */
.admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-topbar {
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-6);
  position: sticky;
  top: 0;
  z-index: 10;
  gap: var(--s-4);
}
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-breadcrumb a { color: var(--muted); }
.admin-breadcrumb a:hover { color: var(--ink); }
.admin-breadcrumb .sep { color: var(--line-strong); }
.admin-topbar-right { display: flex; align-items: center; gap: var(--s-3); }
.admin-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
}
.admin-user .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-soft);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
}

.admin-content {
  padding: var(--s-6);
  flex: 1;
  max-width: 100%;
}

/* Page header */
.admin-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.admin-page-head h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.admin-page-head p { color: var(--muted); margin-top: 6px; font-size: var(--t-sm); }
.admin-page-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.kpi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
}
.kpi-card .label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.kpi-card .num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-4xl);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.kpi-card .delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.kpi-card .delta.up { color: var(--ok); }
.kpi-card .delta.down { color: var(--err); }
.kpi-card.is-gold {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.kpi-card.is-gold .label { color: var(--gold-soft); }
.kpi-card.is-gold .num { color: var(--gold-soft); }

/* Toolbar */
.admin-toolbar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.admin-search {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 400px;
}
.admin-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--t-sm);
  transition: all var(--d-fast) var(--e-out);
}
.admin-search input:focus { outline: 0; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px var(--gold-glow); }
.admin-search .ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.admin-toolbar-spacer { flex: 1; }

/* Data tables */
.admin-table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.admin-table thead {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.admin-table th {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.admin-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr { transition: background var(--d-fast) var(--e-out); }
.admin-table tbody tr:hover { background: var(--bg-2); }
.admin-table .num { font-family: var(--f-mono); font-feature-settings: 'tnum'; }
.admin-table .actions { text-align: right; white-space: nowrap; }
.admin-table .actions button,
.admin-table .actions a {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all var(--d-fast) var(--e-out);
}
.admin-table .actions button:hover,
.admin-table .actions a:hover { background: var(--bg-2); color: var(--ink); }
.admin-table .actions .danger:hover { color: var(--err); background: rgba(184,58,45,.08); }
.admin-table .actions .ico { width: 16px; height: 16px; }

/* Pagination */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--muted);
}
.admin-pagination-pages { display: flex; gap: 4px; }
.admin-pagination-pages a, .admin-pagination-pages button {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-family: var(--f-mono);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--d-fast) var(--e-out);
}
.admin-pagination-pages a:hover, .admin-pagination-pages button:hover { background: var(--bg-2); }
.admin-pagination-pages .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.admin-pagination-controls { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.admin-pagination-perpage { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.admin-pagination-perpage .select { height: 32px; padding: 0 28px 0 10px; font-size: var(--t-sm); }
.admin-pagination-current { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--muted); }
.btn.is-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.btn-danger { --bg: #DC3545; --fg: #fff; --bd: #DC3545; }
.btn-danger:hover { --bg: #B82A38; --fg: #fff; --bd: #B82A38; }

/* Form panels */
.admin-form-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 980px) { .admin-form-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.admin-form-section { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.admin-form-section + .admin-form-section { margin-top: var(--s-4); }
.admin-form-section h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
}
.admin-form-section .help { color: var(--muted); margin-bottom: var(--s-5); }

.admin-form-aside .help-card {
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* Status pill in tables */
.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.admin-status.draft     { background: rgba(107,107,107,.12); color: var(--muted); }
.admin-status.published { background: rgba(31,143,92,.12);   color: var(--ok); }
.admin-status.closed    { background: rgba(184,58,45,.10);   color: var(--err); }
.admin-status.archived  { background: rgba(154,122,46,.14);  color: var(--gold-deep); }
.admin-status.pending   { background: rgba(201,122,31,.12);  color: var(--warn); }
.admin-status.completed { background: rgba(31,143,92,.12);   color: var(--ok); }
.admin-status.failed    { background: rgba(184,58,45,.10);   color: var(--err); }
.admin-status.refunded  { background: rgba(107,107,107,.12); color: var(--muted); }
.admin-status.new       { background: rgba(44,90,143,.10);   color: var(--info); }

/* Mobile sidebar */
.admin-mobile-toggle { display: none; }
@media (max-width: 980px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-base) var(--e-out);
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-mobile-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: #fff;
  }
}

/* Login (standalone) */
.admin-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
}
@media (max-width: 980px) { .admin-login { grid-template-columns: 1fr; } }
.admin-login-side {
  background: var(--ink);
  color: #fff;
  padding: var(--s-9) var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.admin-login-side::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  aspect-ratio: 1/1;
  background: radial-gradient(closest-side, var(--gold-glow), transparent 70%);
  pointer-events: none;
}
.admin-login-side > * { position: relative; }
.admin-login-side h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, var(--t-4xl));
  line-height: 0.95;
  color: #fff;
  letter-spacing: -0.02em;
  margin-top: var(--s-7);
}
.admin-login-side h1 em { font-weight: 300; color: var(--gold-soft); font-style: normal; }
.admin-login-form-wrap {
  display: grid;
  place-items: center;
  padding: var(--s-7);
}
.admin-login-form { width: 100%; max-width: 420px; }
.admin-login-form h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  margin-bottom: var(--s-5);
}

/* Inline editable cells */
.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.cell-stack strong { color: var(--ink); }
.cell-stack small { color: var(--muted); font-size: var(--t-xs); }
.cell-thumb { display: inline-flex; gap: 12px; align-items: center; }
.cell-thumb .visual { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg-2); flex-shrink: 0; background-size: cover; background-position: center; }


/* Gallery masonry — CSS columns true masonry */
.gallery-mason { column-count: 4; column-gap: var(--s-3); }
.gallery-mason > a { width: 100%; margin: 0 0 var(--s-3); break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 1200px) { .gallery-mason { column-count: 3; } }
@media (max-width: 760px)  { .gallery-mason { column-count: 2; } }
@media (max-width: 480px)  { .gallery-mason { column-count: 1; } }

/* Hero — altezza uniforme per pagine secondarie (galleria, chi-siamo, contatti) */
.hero.hero--page { min-height: clamp(380px, 56vh, 540px); display: flex; align-items: center; }
.hero.hero--page > .wrap { width: 100%; }
@media (max-width: 980px) { .hero.hero--page { min-height: clamp(420px, 70vh, 560px); align-items: flex-start; } }

/* Hero — Parallax (solo home) */
@media (min-width: 981px) {
  .hero.hero--parallax::before {
    background-attachment: fixed;
    background-size: cover;
    background-position: right center;
  }
}
/* Enhancement: parallax fluido via Scroll-Driven Animations (Chrome 115+, FF 121+) */
@supports (animation-timeline: view()) {
  @media (min-width: 981px) {
    .hero.hero--parallax::before {
      background-attachment: scroll;
      background-size: auto 120%;
      background-position: right bottom;
      animation: heroParallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes heroParallax {
      from { transform: translateY(-6%); }
      to   { transform: translateY(6%); }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero.hero--parallax::before { background-attachment: scroll !important; animation: none !important; }
}

/* Home hero — terza riga del titolo, più piccola */
.hero h1 .hero-sub {
  display: inline-block;
  font-size: 0.55em;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.15;
  margin-top: .2em;
  color: rgba(255,255,255,.92);
}

/* =========================================================================
   ADMIN — Responsive (≤980 mobile, ≤640 small mobile)
   ========================================================================= */

/* Tabelle: scroll orizzontale solo nel wrap, non sull'intera pagina.
   Serve min-width: 0 sulla catena dei grid-item: per default sono min-content
   e una tabella larga "spinge" fuori tutto il layout. */
.admin-main, .admin-content { min-width: 0; }
.admin-main { overflow-x: clip; }
.admin-grid-split > *, .admin-grid-3 > * { min-width: 0; }
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.admin-table { min-width: 720px; }

/* Backdrop sidebar mobile */
.admin-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 49;
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--e-out), visibility 0s linear 240ms;
}
.admin-backdrop.is-visible {
  opacity: 1; visibility: visible;
  transition: opacity 240ms var(--e-out);
}
@media (min-width: 981px) {
  .admin-backdrop { display: none !important; }
}
body:has(.admin-sidebar.is-open) { overflow: hidden; }

/* Topbar / content piccoli schermi */
@media (max-width: 980px) {
  .admin-content { padding: var(--s-5) var(--s-4); }
  .admin-topbar { padding: 0 var(--s-4); gap: var(--s-3); }
  .admin-page-head h1 { font-size: clamp(1.6rem, 4vw, var(--t-3xl)); }
}
@media (max-width: 640px) {
  .admin { --topbar-h: 56px; }
  .admin-content { padding: var(--s-4) var(--s-3); }
  .admin-topbar { padding: 0 var(--s-3); gap: var(--s-2); }
  .admin-topbar-right { gap: 4px; }
  /* Topbar minimale: nasconde nome/ruolo, campanella e mostra solo avatar + logout.
     !important serve perché il markup ha inline style="display:flex" che vince per specificità */
  .admin-user > span:not(.avatar) { display: none !important; }
  .admin-user { padding: 0; border: 0; gap: 0; background: transparent; }
  .admin-topbar-right > button:first-child { display: none; }
  .admin-breadcrumb { font-size: 10px; gap: 4px; }
  .admin-breadcrumb a:first-child,
  .admin-breadcrumb .sep:first-of-type { display: none; }
  .admin-page-head h1 { font-size: var(--t-2xl); }
  .admin-page-actions { width: 100%; }
  .admin-page-actions .btn { flex: 1; justify-content: center; }
  .admin-table th, .admin-table td { padding: var(--s-2) var(--s-3); }
}

/* Toolbar / search */
@media (max-width: 640px) {
  .admin-search { min-width: 0; max-width: 100%; flex: 1 1 100%; }
}

/* KPI grid mobile */
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
  .kpi-card { padding: var(--s-4); }
  .kpi-card .num { font-size: var(--t-3xl); }
}

/* Grid utility classi (sostituiscono inline style nei dashboard / gazebo) */
.admin-grid-split { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 980px) { .admin-grid-split { grid-template-columns: 1fr !important; } }

.admin-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .admin-grid-3 { grid-template-columns: repeat(2, 1fr); } }
/* su mobile resta 2-col: evita card larghe e vuote in colonna singola */
@media (max-width: 540px) {
  .admin-grid-3 .card { padding: var(--s-3) !important; }
  .admin-grid-3 .card h3 { font-size: var(--t-base) !important; line-height: 1.2; }
  .admin-grid-3 .card p { font-size: var(--t-xs) !important; line-height: 1.4; margin-top: 4px !important; }
  .admin-grid-3 .card .btn { width: 100%; justify-content: center; padding: 6px 8px; font-size: var(--t-xs); }
  .admin-grid-3 .card .admin-status { font-size: 9px; padding: 3px 8px; }
}

/* Gazebo: top stat row sempre in 3 colonne (numeri brevi) */
.gazebo-stats { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 640px) {
  .gazebo-stats { gap: var(--s-2) !important; }
  .gazebo-stats .kpi-card { padding: var(--s-3) var(--s-2); }
  .gazebo-stats .kpi-card .label { font-size: 9px; letter-spacing: 0.06em; margin-bottom: 4px; line-height: 1.2; }
  .gazebo-stats .kpi-card .num { font-size: var(--t-xl); }
}

/* Paginazione — su mobile diventa verticale (testo sopra, bottoni sotto, allineati al centro)
   altrimenti con justify-content: space-between si accartoccia su 320px. */
@media (max-width: 640px) {
  .admin-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    text-align: center;
  }
  .admin-pagination > span { text-align: center; }
  .admin-pagination-pages {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }
  .admin-pagination-pages a,
  .admin-pagination-pages button {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    font-size: 12px;
  }
}

/* ============ ADMIN i18n TABS ============ */
.i18n-tabs {
  margin-top: var(--s-5);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.i18n-tabs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.i18n-tabs-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.i18n-tab-btn {
  font-family: var(--f-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.i18n-tab-btn:hover { background: var(--bg-2); border-color: var(--ink); }
.i18n-tab-btn.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.i18n-tab-pane {
  display: none;
}
.i18n-tab-pane.is-active {
  display: block;
}

/* ============ COOKIE CONSENT BANNER + MODAL ============ */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: var(--ink);
  color: #fff;
  border-top: 2px solid var(--gold);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.32);
  padding: var(--s-5) var(--gut);
  animation: consent-slide-up 320ms var(--e-out);
}
.consent-banner[hidden] { display: none; }

@keyframes consent-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.consent-banner-inner {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  flex-wrap: wrap;
  max-width: var(--max);
  margin-inline: auto;
}
.consent-banner-content {
  flex: 1 1 480px;
  min-width: 0;
}
.consent-banner-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  margin: 0 0 6px;
  color: #fff;
}
.consent-banner-desc {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  margin: 0;
}
.consent-banner-link {
  color: var(--gold-soft);
  text-decoration: underline;
  margin-left: 4px;
}
.consent-banner-link:hover { color: var(--gold); }
.consent-banner-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 760px) {
  .consent-banner-inner { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .consent-banner-actions { justify-content: stretch; }
  .consent-banner-actions > .btn { flex: 1 1 auto; justify-content: center; }
}

/* Modal preferenze */
.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gut);
}
.consent-modal[hidden] { display: none; }
.consent-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.consent-modal-panel {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  animation: consent-modal-in 200ms var(--e-out);
}
@keyframes consent-modal-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.consent-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.consent-modal-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-2xl);
}
.consent-modal-close {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
}
.consent-modal-close:hover { background: var(--bg-2); }

.consent-modal-body {
  padding: var(--s-5);
  overflow-y: auto;
  flex: 1;
}
.consent-modal-intro {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
}

.consent-category {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s-4);
  margin: 0 0 var(--s-3) 0;
  background: var(--bg-2);
}
.consent-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
}
.consent-category-name {
  font-weight: 600;
  font-size: var(--t-base);
}
.consent-category-desc {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* Toggle switch accessibile */
.consent-toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
}
.consent-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.consent-toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: #c9c4b6;
  border-radius: 12px;
  position: relative;
  transition: background 200ms var(--e-out);
}
.consent-toggle-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 200ms var(--e-out);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.consent-toggle input:checked + .consent-toggle-track {
  background: var(--gold-deep);
}
.consent-toggle input:checked + .consent-toggle-track::before {
  transform: translateX(20px);
}
.consent-toggle input:focus-visible + .consent-toggle-track {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.consent-toggle.is-locked .consent-toggle-track {
  opacity: 0.7;
  cursor: not-allowed;
}

.consent-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  flex-wrap: wrap;
}

.consent-modal-footnote {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: var(--s-4);
}

@media (max-width: 480px) {
  .consent-modal-foot { flex-direction: column; align-items: stretch; }
  .consent-modal-foot > .btn,
  .consent-modal-foot > .flex > .btn { width: 100%; justify-content: center; }
}

/* sr-only utility (used by aria labels) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================================
   ACCESSIBILITY — WCAG 2.1/2.2 AA + EAA refinements
   ========================================================================= */

/* Skip link — già presente, miglioro contrasto/visibilità su focus */
.skip:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  background: var(--ink);
  color: #fff;
}

/* Touch targets: min 44×44px su tutti gli elementi interattivi (WCAG 2.5.8 / 2.5.5) */
@media (pointer: coarse) {
  a, button, input[type="submit"], input[type="button"], .btn,
  .nav-toggle, .lang-current, .lang-menu a,
  .mobile-menu-close, .mobile-lang-list a,
  .consent-modal-close, [data-consent-action] {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-sm {
    min-height: 40px;  /* eccezione per btn-sm: 40px è ancora WCAG compliant per "minimum target size" 2.5.5 livello AAA, ma 44 per AA */
  }
}

/* Focus indicator forzato anche su elementi che hanno outline:0 (admin/forms) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
  box-shadow: none;
}

/* Riduci animazioni anche per data-reveal in reduced-motion (extension) */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero--parallax,
  .visual,
  .marquee-track {
    animation: none !important;
    transition: none !important;
  }
  .marquee {
    overflow: visible;
  }
  .marquee-track {
    animation: none !important;
    transform: none !important;
  }
  .consent-banner {
    animation: none !important;
  }
  .consent-modal-panel {
    animation: none !important;
  }
}

/* Form errors — visual + ARIA aware */
[aria-invalid="true"] {
  border-color: var(--err) !important;
  box-shadow: 0 0 0 1px var(--err) !important;
}

/* High contrast mode (Windows) — assicura visibilità bordi */
@media (prefers-contrast: more) {
  .btn { border-width: 2px; }
  .input, .select, .textarea { border-width: 2px; }
  .pill { border: 1px solid currentColor; }
}

/* Disabilita le animazioni costose anche su connessioni lente */
@media (prefers-reduced-data: reduce) {
  .hero--parallax { background-attachment: scroll !important; }
}

/* Live regions — visibili solo a screen reader, no animazioni */
[role="status"]:not([aria-hidden="true"]),
[role="alert"]:not([aria-hidden="true"]) {
  /* default visible; mantieni semantica */
}

/* Forza visibility del cursor focus su input radio/checkbox custom */
input[type="radio"]:focus-visible + *,
input[type="checkbox"]:focus-visible + * {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* =========================================================================
   GALLERY 2.0 — masonry responsive + filtri + lightbox
   ========================================================================= */

/* --- Filtri chip --- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s-5);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.gallery-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
  min-height: 40px;
}
.gallery-chip:hover { background: var(--bg-2); border-color: var(--ink); }
.gallery-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.gallery-chip-count {
  display: inline-block;
  padding: 1px 8px;
  background: var(--bg-2);
  color: var(--muted);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}
.gallery-chip.is-active .gallery-chip-count {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
}

/* --- Grid masonry responsive --- */
.gallery-grid {
  column-count: 1;
  column-gap: var(--s-3);
}
@media (min-width: 480px)  { .gallery-grid { column-count: 2; } }
@media (min-width: 768px)  { .gallery-grid { column-count: 3; } }
@media (min-width: 1100px) { .gallery-grid { column-count: 4; } }

/* --- Singolo item --- */
.gallery-item {
  break-inside: avoid;
  margin: 0 0 var(--s-3) 0;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.gallery-item.is-hidden { display: none; }

.gallery-item-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--bg-2);
  cursor: pointer;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--d-base) var(--e-out);
}
.gallery-item-btn:hover { transform: scale(1.02); }
.gallery-item-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.gallery-item-btn img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  transition: filter var(--d-base) var(--e-out);
}

/* Skeleton shimmer mentre carica (sotto l'img, mai cattura click) */
.gallery-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--line) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: gallery-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gallery-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-skeleton { animation: none; opacity: .5; }
}

/* Badge su card (tipo + label + anno) */
.gallery-item-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(10, 10, 10, 0.78);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.gallery-item-btn:hover .gallery-item-badge,
.gallery-item-btn:focus-visible .gallery-item-badge {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {
  /* Mobile: badge sempre visibile (no hover) */
  .gallery-item-badge { opacity: 0.95; transform: none; }
}
.gallery-item-type {
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.gallery-item-label { color: #fff; }
.gallery-item-year { color: rgba(255,255,255,.6); }

/* --- Sentinel + load more spinner --- */
.gallery-sentinel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-7) 0;
  text-align: center;
}
.gallery-sentinel[hidden] { display: none; }
.gallery-sentinel-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--gold);
  animation: gallery-spin 800ms linear infinite;
}
.gallery-sentinel-text { font-size: var(--t-sm); color: var(--muted); margin: 0; }
@keyframes gallery-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gallery-sentinel-spinner { animation: none; border-top-color: var(--line); }
}

/* --- Empty state filtro --- */
.gallery-empty {
  text-align: center;
  padding: var(--s-7) 0;
  color: var(--muted);
}
.gallery-empty[hidden] { display: none; }

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.94);
  animation: lightbox-fade-in 200ms var(--e-out);
}
.lightbox[hidden] { display: none; }
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: zoom-out;
}

.lightbox-image-wrap {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y;
}
.lightbox-image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  transform: scale(1) translate(0, 0);
  transform-origin: center;
  transition: transform 240ms var(--e-out);
  background: #1a1a1a;
}
.lightbox-image.is-loading { opacity: 0.4; }
.lightbox-image.is-zoomed { cursor: grab; transition: none; }
.lightbox-image.is-dragging { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .lightbox-image { transition: none; }
}

/* Bottoni navigazione + chiusura */
.lightbox-btn {
  position: absolute;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
  font-size: 22px;
  line-height: 1;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-btn:active { transform: scale(0.94); }
.lightbox-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next {
    width: 44px; height: 44px;
    top: auto; bottom: 110px; transform: none;
  }
  .lightbox-prev { left: 16px; }
  .lightbox-next { right: 16px; }
  .lightbox-close { top: 16px; right: 16px; }
}

/* Info area (counter + caption + entity link) */
.lightbox-info {
  position: absolute;
  z-index: 2;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  max-width: 80vw;
  pointer-events: none;
}
.lightbox-info .lightbox-entity-link { pointer-events: auto; }

.lightbox-counter {
  font-family: var(--f-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 6px;
}
.lightbox-caption {
  font-size: var(--t-base);
  color: #fff;
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.lightbox-entity-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--gold-soft);
  font-size: var(--t-sm);
  text-decoration: underline;
}
.lightbox-entity-link:hover { color: var(--gold); }
.lightbox-entity-link[hidden] { display: none; }

/* Toolbar azioni in basso */
.lightbox-actions {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-btn-sm {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  background: transparent;
}
.lightbox-btn-sm:hover { background: rgba(255, 255, 255, 0.12); }

/* Toast feedback (link copiato, ecc.) */
.lightbox-toast {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  padding: 10px 18px;
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms var(--e-out), transform 200ms var(--e-out);
}
.lightbox-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lightbox-toast[hidden] { display: none; }

/* Body block scroll quando lightbox aperta */
body.lightbox-open { overflow: hidden; }

/* -------------------------------------------------------------------------
   PANORAMICA TARIFFE (form iscrizione evento)
   ------------------------------------------------------------------------- */
.tariff-overview-group + .tariff-overview-group {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.tariff-overview-group-title {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}
.tariff-overview-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.tariff-overview-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) minmax(120px, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) 0;
}
.tariff-overview-dogs {
  font-weight: 600;
  color: var(--ink);
}
.tariff-overview-price {
  color: var(--muted);
  font-size: var(--t-sm);
  font-family: var(--f-mono);
}
.tariff-overview-total {
  color: var(--ink);
  font-size: var(--t-sm);
  font-family: var(--f-mono);
}
.savings-badge {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-family: var(--f-mono);
}
@media (max-width: 640px) {
  .tariff-overview-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "dogs total"
      "price savings";
    row-gap: 4px;
  }
  .tariff-overview-dogs    { grid-area: dogs; }
  .tariff-overview-total   { grid-area: total; text-align: right; }
  .tariff-overview-price   { grid-area: price; }
  .tariff-overview-savings { grid-area: savings; text-align: right; }
}