/*
 * Gestione Oro - design system estratto dai prototipi
 * Variabili e componenti comuni + stili di pagina (dedup a livello di regola).
 */

:root {
      --bg:      #faf7f0;
      --surface: #ffffff;
      --fg:      #1c1710;
      --muted:   #6d6453;
      --border:  #e7dfcc;
      --accent:  #8a6109;
      --gold:    #e8ac13;
      --link:    #0b57d0;
      --ink:     #191510;
      --on-ink:  #f6efdc;
      --ink-muted:#b3a88f;

      --accent-soft: color-mix(in oklch, var(--gold) 16%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
      --ink-soft:    color-mix(in oklch, var(--on-ink) 8%, transparent);

      --font-display: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
      --font-body:    'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

      --fs-h1: clamp(42px, 5.4vw, 66px);
      --fs-h2: clamp(30px, 3.6vw, 44px);
      --fs-h3: 21px;
      --fs-lead: 18px;
      --fs-body: 16px;
      --fs-meta: 13px;

      --gap-xs: 8px;
      --gap-sm: 12px;
      --gap-md: 20px;
      --gap-lg: 32px;
      --gap-xl: 56px;
      --gap-2xl: 56px;
      --container: 1160px;
      --gutter: 32px;

      --radius: 10px;
      --radius-lg: 18px;
    }

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

html { -webkit-text-size-adjust: 100%; }

body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.55;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

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

/* Mantiene le proporzioni quando sono presenti gli attributi width/height (anti-CLS) */
img { height: auto; }

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

button { font: inherit; cursor: pointer; }

p { text-wrap: pretty; }

h1, h2, h3, h4 { text-wrap: balance; }

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

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

.section { padding-block: clamp(32px, 5vw, var(--gap-2xl)); }

.section + .section { border-top: 1px solid var(--border); }

.stack { display: flex; flex-direction: column; }

.stack > * + * { margin-top: var(--gap-md); }

.row { display: flex; align-items: center; gap: var(--gap-md); }

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

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }

.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }

.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-xl); align-items: start; }

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

.h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }

.h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.015em; margin: 0; }

.h3, h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0; }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 62ch; margin: 0; }

.eyebrow {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 var(--gap-md);
    }

.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* chrome */
    .topnav {
      position: sticky; top: 0; z-index: 10;
      background: color-mix(in oklch, var(--bg) 90%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

.topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 13px; gap: var(--gap-md); }

main section[id] { scroll-margin-top: 80px; }

.topnav nav { display: flex; gap: 26px; }

.topnav nav a { font-size: 14px; color: var(--muted); font-weight: 500; }

.topnav nav a:hover { color: var(--fg); }

.brand { display: inline-flex; align-items: center; }

.brand img { width: auto; height: 30px; }

.pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }

.pagefoot .row-between { flex-wrap: wrap; gap: var(--gap-md); }

.pagefoot .foot-nav { display: flex; gap: 20px; flex-wrap: wrap; }

.pagefoot .foot-nav a:hover { color: var(--fg); }

/* buttons */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.005em;
      transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--gold); color: var(--fg); border-color: var(--gold); }

.btn-primary:hover { background: color-mix(in oklch, var(--gold) 86%, black); }

.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }

.btn-secondary:hover { border-color: var(--fg); }

.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }

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

.hero-dark .btn-ghost { color: var(--on-ink); }

.hero-dark .btn-ghost:hover { color: var(--gold); }

.btn-arrow::after { content: '→'; transition: transform 0.15s ease; }

.btn-arrow:hover::after { transform: translateX(2px); }

/* card / surface */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
    }

.card-flat { background: transparent; border: 0; padding: 0; }

.card-rule { background: transparent; border: 0; border-top: 1px solid var(--fg); padding: 24px 0 0; border-radius: 0; }

/* feature cell */
    .feature .feature-mark {
      width: 44px; height: 44px;
      display: grid; place-items: center;
      color: var(--accent);
      margin-bottom: var(--gap-md);
    }

.feature .feature-mark img { width: 44px; height: 44px; object-fit: contain; }

.feature .feature-mark svg { width: 44px; height: 44px; }

.feature h3 { margin-bottom: 8px; }

.feature p { margin: 0; color: var(--muted); font-size: 15px; }

/* hero dark */
    .hero-dark {
      background: var(--ink);
      color: var(--on-ink);
      padding-block: clamp(48px, 6vw, 72px);
      border-bottom: 1px solid color-mix(in oklch, var(--gold) 22%, transparent);
    }

.hero-dark h1 { color: var(--on-ink); }

.hero-dark h1 em { font-style: italic; }

.hero-dark .lead { color: var(--ink-muted); }

.hero-dark .eyebrow { color: var(--gold); }

.hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

@media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; } }

.hero-copy { display: flex; flex-direction: column; gap: 0; }

.hero-logo { width: min(420px, 100%); height: auto; display: block; margin-bottom: 28px; }

@media (max-width: 920px) { .hero-logo { width: min(360px, 100%); margin-bottom: 22px; } }

.hero-copy h1 { margin-bottom: 22px; }

.hero-copy .lead { margin-bottom: 30px; }

.hero-cta { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; }

.hero-media img {
      display: block;
      width: 100%;
      max-width: 78%;
      margin-inline: auto;
      border-radius: var(--radius-lg);
      border: 1px solid color-mix(in oklch, var(--gold) 34%, transparent);
      box-shadow: 0 40px 90px -30px rgba(0,0,0,.65);
    }

/* notice / badge */
    .notice {
      display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
      padding: 16px 18px;
      border: 1px solid color-mix(in oklch, var(--gold) 45%, var(--border));
      border-radius: var(--radius-lg);
      background: var(--surface);
      font-size: 15px;
      color: var(--fg);
    }

    .notice span { white-space: nowrap; }

.notice .badge {
      flex-shrink: 0;
      padding: 4px 10px;
      background: var(--gold);
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 999px;
    }

.notice svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

.notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

.notice a:hover { color: var(--fg); }

/* solution cards */
    .sol-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

.sol-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.28); border-color: var(--accent); }

.sol-img { aspect-ratio: 16/10; overflow: hidden; background: var(--fg-soft); }

.sol-img img { width: 100%; height: 100%; object-fit: cover; }

.sol-body { padding: 24px 24px 22px; }

.sol-body h3 { margin-bottom: 8px; }

.sol-body p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }

.sol-body .more { color: var(--accent); font-size: 14px; font-weight: 500; }

/* testimonial cards */
    .t-card { display: flex; flex-direction: column; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }

.t-card .quote { font-family: var(--font-body); font-size: 15px; line-height: 1.42; letter-spacing: -0.005em; color: var(--muted); }

.t-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.t-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }

.t-avatar img { width: 100%; height: 100%; object-fit: cover; }

.t-name { font-size: 14px; font-weight: 600; }

.t-role { font-size: 13px; color: var(--muted); }

.t-role a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

.t-role a:hover { color: var(--link); text-decoration: none; }

/* testimonial carousel */
    .t-carousel { position: relative; }

.t-viewport { overflow: hidden; padding: 4px; margin: -4px; }

.t-track { display: flex; will-change: transform; }

.t-track .t-card { flex: 0 0 var(--t-card-w); margin: 0 !important; }

.t-track .t-clone { pointer-events: none; }

.t-dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }

.t-dot {
      width: 44px; height: 44px; padding: 0; margin: 0;
      display: grid; place-items: center; cursor: pointer;
      background: none; border: 0; border-radius: 10px;
    }

.t-dot::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--border); transition: background .2s ease, width .2s ease; }

.t-dot[aria-selected="true"]::before { width: 24px; background: var(--accent); }

.t-dot:hover::before { background: var(--muted); }

.t-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
      .t-track { transition: none !important; }
    }

/* partner row */
    section[data-od-id="partner"] { padding-block: 8px; }

.partner-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 40px; }

.partner-row a { opacity: .8; transition: opacity .15s ease; }

.partner-row a:hover { opacity: 1; }

.partner-row img { height: 72px; width: auto; }

/* divider */
    .rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

.rule-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }

/* ─── motion ─────────────────────────────────────────────── */
    .od-rise { opacity: 0; animation: od-rise .7s cubic-bezier(.2,.6,.2,1) forwards; }

@keyframes od-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.od-reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }

.od-reveal.od-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
      .od-rise, .od-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    }

/* ─── polish: mobile nav + dark focus ───────────────────── */
    .hero-dark :focus-visible { outline-color: var(--gold); }

.topnav .nav-cta { flex-shrink: 0; }

.nav-toggle {
      display: none; width: 44px; height: 44px; padding: 0;
      background: none; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
      flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    }

.nav-toggle span { width: 20px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
      .topnav-inner { flex-wrap: wrap; }
      .nav-toggle { display: inline-flex; }
      .topnav nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0 14px; }
      .topnav nav.open { display: flex; }
      .topnav nav a { padding: 12px 2px; font-size: 16px; border-bottom: 1px solid var(--border); }
      .topnav nav a:last-child { border-bottom: 0; }
      .topnav .nav-cta { display: none; width: 100%; }
      .topnav.open .nav-cta { display: inline-flex; margin-bottom: 14px; }
    }

:root {
      --bg:      #faf7f0;
      --surface: #ffffff;
      --fg:      #1c1710;
      --muted:   #6d6453;
      --border:  #e7dfcc;
      --accent:  #8a6109;
      --gold:    #e8ac13;
      --link:    #0b57d0;
      --ink:     #191510;
      --on-ink:  #f6efdc;
      --ink-muted:#b3a88f;

      --accent-soft: color-mix(in oklch, var(--gold) 16%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
      --ink-soft:    color-mix(in oklch, var(--on-ink) 8%, transparent);

      --font-display: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
      --font-body:    'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

      --fs-h1: clamp(42px, 5.4vw, 66px);
      --fs-h2: clamp(30px, 3.6vw, 44px);
      --fs-h3: 19px;
      --fs-lead: 18px;
      --fs-body: 16px;
      --fs-meta: 13px;

      --gap-xs: 8px;
      --gap-sm: 12px;
      --gap-md: 20px;
      --gap-lg: 32px;
      --gap-xl: 56px;
      --gap-2xl: 56px;
      --container: 1160px;
      --gutter: 32px;

      --radius: 10px;
      --radius-lg: 18px;
    }

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

.topnav { position: sticky; top: 0; z-index: 10; background: color-mix(in oklch, var(--bg) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }

.topnav nav a.active { color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }

.feature-h { display: flex; gap: 18px; align-items: flex-start; }

.feature-h .feature-mark { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--accent); }

.feature-h .feature-mark img { width: 44px; height: 44px; }

.feature-h h3 { margin-bottom: 6px; }

.feature-h p { margin: 0; color: var(--muted); font-size: 15px; }

.feature-h a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

.feature-h a:hover { color: var(--fg); }

.chip { display: inline-block; padding: 3px 9px; background: var(--gold); color: var(--fg); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; margin-left: 8px; }

.hero-dark { background: var(--ink); color: var(--on-ink); padding-block: clamp(48px, 6vw, 72px); border-bottom: 1px solid color-mix(in oklch, var(--gold) 22%, transparent); }

.note-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.note-band .inner { text-align: center; max-width: 46ch; margin-inline: auto; }

.topnav nav a.active { color: var(--fg); }

/* hero dark centered */
    .hero-dark {
      background: var(--ink);
      color: var(--on-ink);
      padding-block: clamp(48px, 6vw, 72px);
      border-bottom: 1px solid color-mix(in oklch, var(--gold) 22%, transparent);
    }

.hero-center { max-width: 780px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }

.hero-center .lead { margin-inline: auto; }

/* blog featured post */
    .post-feature {
      display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: box-shadow .18s ease, border-color .18s ease;
    }

.post-feature:hover { border-color: var(--accent); box-shadow: 0 28px 60px -28px rgba(0,0,0,.3); }

.post-feature .pf-media { display: block; position: relative; min-width: 0; width: 100%; height: 100%; overflow: hidden; background: var(--fg-soft); }

.post-feature .pf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }

.post-feature:hover .pf-media img { transform: scale(1.02); }

.post-feature .pf-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; }

.post-feature .pf-body h2, .post-feature .pf-body h3 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 16px; }

.post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.post-chip {
      display: inline-flex; align-items: center;
      padding: 4px 12px;
      background: var(--gold);
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 999px;
    }

.post-date { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }

.post-excerpt { color: var(--muted); line-height: 1.7; margin: 0 0 24px; }

.post-more {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--accent); font-weight: 600; font-size: 15px;
      padding: 10px 0; min-height: 44px;
    }

.post-more svg { width: 18px; height: 18px; transition: transform .15s ease; }

.post-more:hover svg { transform: translateX(3px); }

.post-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 920px) {
      .post-feature { grid-template-columns: 1fr; }
      .post-feature .pf-media { aspect-ratio: 2/1; height: auto; }
    }

.container-narrow { max-width: 820px; }

/* article hero */
    .article-hero { padding-top: clamp(64px, 9vw, 108px); padding-bottom: clamp(32px, 5vw, 56px); }

.article-back {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--accent); font-weight: 500; font-size: 15px;
      padding: 10px 0; min-height: 44px;
      margin-bottom: 28px;
    }

.article-back svg { width: 18px; height: 18px; transition: transform .15s ease; }

.article-back:hover svg { transform: translateX(-3px); }

.article-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

.article-title {
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.12;
      letter-spacing: -0.015em;
      margin: 0;
      max-width: 20ch;
    }

/* featured image */
    .article-media { margin-bottom: clamp(32px, 5vw, 56px); }

.article-media img {
      width: 100%;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
    }

/* article body */
    .article-body-section { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--border); }

.article-content {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(28px, 5vw, 56px);
    }

.article-content > *:first-child { margin-top: 0; }

.article-content p {
      color: var(--fg);
      font-size: 17px;
      line-height: 1.75;
      margin: 0 0 24px;
      text-wrap: pretty;
    }

.article-content strong { color: var(--fg); font-weight: 600; }

.article-content h2 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.6vw, 32px);
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin: 44px 0 18px;
    }

.article-content a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.article-content a:hover { text-decoration-thickness: 2px; }

.article-content .highlight {
      border-left: 3px solid var(--gold);
      background: var(--accent-soft);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: 20px 24px;
      margin: 32px 0;
    }

.article-content .highlight p { margin: 0; font-weight: 500; }

.article-content .article-figure { margin: 32px 0; }

.article-content .article-figure img {
      width: 100%;
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

.article-content .article-figure figcaption {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      margin-top: 10px;
      text-align: center;
    }

.article-content ol { margin: 0 0 8px; padding-left: 22px; }

.article-content li {
      color: var(--fg);
      font-size: 17px;
      line-height: 1.7;
      margin-bottom: 12px;
    }

.article-content li::marker { color: var(--accent); font-weight: 600; }

@media (max-width: 920px) {
      .article-content p, .article-content li { font-size: 16px; }
    }

/* ─── polish: mobile nav ─────────────────────────────────── */
    .topnav .nav-cta { flex-shrink: 0; }

.grid-2-1 { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap-xl); align-items: start; }

@media (max-width: 920px) { .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field label { font-size: 13px; color: var(--muted); }

.field .req { color: var(--accent); }

.input, .textarea, select.input {
      width: 100%; padding: 12px 14px;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); color: var(--fg); font: inherit; font-size: 15px;
    }

.input:focus, .textarea:focus, select.input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

fieldset.checks { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

fieldset.checks legend { font-size: 13px; color: var(--muted); margin-bottom: 4px; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }

.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

.info-list { display: flex; flex-direction: column; gap: 18px; }

.info-item { display: flex; gap: 14px; align-items: flex-start; }

.info-item .mark { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--accent); background: var(--surface); }

.info-item .mark svg { width: 18px; height: 18px; }

.info-item .label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-family: var(--font-mono); margin-bottom: 2px; }

.info-item a:hover { color: var(--accent); }

.mapbox { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--fg-soft); min-height: 200px; display: grid; place-items: center; text-align: center; padding: 24px; }

.mapbox .pin { width: 40px; height: 40px; color: var(--accent); margin-bottom: 12px; }

@media (max-width: 920px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.news-form { display: flex; gap: 10px; max-width: 460px; margin-inline: auto; }

.news-form .input { flex: 1; }

@media (max-width: 520px) { .news-form { flex-direction: column; } }

@media (max-width: 640px) { .notice { flex-wrap: wrap; } .notice span { white-space: normal; } }

.nowrap-desktop { white-space: nowrap; }

@media (max-width: 920px) { .nowrap-desktop { white-space: normal; } }

.empty-note { text-align: center; max-width: 44ch; margin-inline: auto; color: var(--muted); }

/* ─── Archivio newsletter (generato da Mailchimp) ────────── */
.display_archive { display: flex; flex-direction: column; }

.archive-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-height: 160px;
      padding: 40px 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: transparent;
      color: var(--muted);
      font-size: 15px;
      text-align: center;
    }

.archive-loading .spinner {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      border-radius: 50%;
      border: 3px solid color-mix(in oklch, var(--accent) 25%, transparent);
      border-top-color: var(--accent);
      animation: archive-spin .8s linear infinite;
    }

@keyframes archive-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
      .archive-loading .spinner { animation: none; opacity: .7; }
    }

.campaign { line-height: 1.4; margin: 5px 0 10px; }

.campaign:before {
    content: url('/img/icons/icons8-newsletter-62.svg');
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
}

.campaign a { font-weight: 500; }

.campaign:hover, .campaign a:hover { color: var(--accent); font-weight: bold; }


/* Variante ristretta per hero centrati (contatti, newsletter) */
.hero-center.hero-center-narrow { max-width: 46ch; }
.hero-center.hero-center-narrow h1 { margin-bottom: 18px; }