/* ============================================================
   premium.css — Design System ActionToBe (tema light premium)
   Token di brand FISSI: navy · arancio · teal · crema
   Sostituisce global.css + page.css sulle pagine migrate.
   ============================================================ */

:root {
    /* ── Brand (fissi) ── */
    --navy:        #1A1A2E;   /* inchiostro dominante */
    --navy-deep:   #0D2240;   /* sezioni scure di contrasto */
    --orange:      #F5820A;   /* azione */
    --orange-2:    #E8721A;   /* hover azione */
    --teal:        #2BC4C0;   /* accento relazionale / umano */
    --teal-ink:    #15807D;   /* teal leggibile su crema (AA) */
    --cream:       #FBF7F1;   /* sfondo */
    --cream-2:     #F3ECE1;   /* superficie più calda */
    --white:       #FFFFFF;
    /* Arancio per TESTO su fondi chiari (l'arancio pieno non regge il contrasto):
       -text per titoli grandi (≥3:1), -ink per testo piccolo (≥4.5:1) */
    --orange-text: #C86400;
    --orange-ink:  #B45604;

    /* ── Testo ── */
    --text-main:   #1A1A2E;   /* navy */
    --text-soft:   #52516A;   /* navy desaturato — secondario (≥4.5:1 su crema) */
    --text-on-dark:#EDEAF2;   /* testo su sezioni navy */
    --text-on-dark-soft:#B9C2D6;
    --line:        #E6DDCF;   /* hairline su crema */
    --line-dark:   rgba(255,255,255,0.12);

    /* ── Tipografia (token fissi: Cormorant display, Poppins UI, Inter testo) ── */
    --font-display:'Cormorant Garamond', Georgia, serif;
    --font-ui:     'Poppins', sans-serif;
    --font-body:   'Inter', sans-serif;
    --font-voice:  'Cormorant Garamond', Georgia, serif;

    /* ── Scala / forma ── */
    --radius-sm: 9px;
    --radius:    14px;
    --radius-lg: 22px;
    /* ombre a doppio livello: una corta di contatto + una lunga d'ambiente */
    --shadow-card: 0 1px 2px rgba(26,26,46,0.05), 0 18px 40px -24px rgba(26,26,46,0.22);
    --shadow-lift: 0 2px 5px rgba(26,26,46,0.06), 0 30px 60px -28px rgba(26,26,46,0.38);
    --shadow-orange: 0 12px 28px -10px rgba(245,130,10,0.55);
    --maxw: 1180px;

    /* ── Movimento ── */
    --ease:    cubic-bezier(.22,1,.36,1);     /* decelerazione morbida (reveal, hover) */
    --ease-io: cubic-bezier(.65,.05,.36,1);   /* in-out per transizioni simmetriche */

    /* ── Alias retro-compatibili (vecchi nomi token usati negli stili inline
         delle pagine non ancora riscritte: così lo swap di CSS non le rompe) ── */
    --primary:       var(--orange);
    --primary-hover: var(--orange-2);
    --dark-bg:       var(--cream);
    --darker-bg:     var(--cream-2);
    --card-bg:       var(--white);
    --border-color:  var(--line);
    --text-muted-var:var(--text-soft);     /* nota: .text-muted è una classe */
    --font-heading:  var(--font-display);
}
/* var(--text-muted) usato inline nelle vecchie pagine → mappa al testo soft */
:root { --text-muted: var(--text-soft); }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body {
    font-family:var(--font-body);
    background:var(--cream);
    color:var(--text-main);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    animation:pageIn .5s ease both;
}
@keyframes pageIn { from { opacity:0; } }

::selection { background:rgba(245,130,10,.24); color:var(--navy); }

/* scrollbar discreta, coerente col tema (solo WebKit) */
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:var(--cream-2); }
::-webkit-scrollbar-thumb { background:#C9BFAE; border-radius:8px; border:3px solid var(--cream-2); }
::-webkit-scrollbar-thumb:hover { background:#AFA593; }

/* ── Tipografia ── */
h1,h2,h3,h4,h5,h6 {
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-0.01em;
    color:var(--text-main);
}
a { color:inherit; text-decoration:none; }

.text-gradient { color:var(--orange-text); }   /* tinta piena leggibile su crema */
.bg-darker .text-gradient { color:var(--orange); } /* su navy l'arancio pieno regge */
.text-voice    { font-family:var(--font-voice); font-style:italic; font-weight:400; letter-spacing:-0.01em; }

/* ── Utilities ── */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 2rem; }
.section   { padding:6rem 0; }
.bg-cream2 { background:var(--cream-2); }
.bg-darker { background:var(--navy-deep); color:var(--text-on-dark); }
/* Tipografia su sezioni scure (le h* hanno colore esplicito → vanno forzate) */
.bg-darker h1, .bg-darker h2, .bg-darker h3, .bg-darker h4,
.bg-darker .section-title, .bg-darker .hero-title, .bg-darker .pg-hero-title { color:#fff; }
.bg-darker .section-subtitle, .bg-darker .text-muted, .bg-darker p { color:var(--text-on-dark-soft); }
.text-center { text-align:center; }
.text-muted  { color:var(--text-soft); }
.w-100 { width:100%; }
.mt-4 { margin-top:1.5rem; } .mt-5 { margin-top:3rem; }
.mb-3 { margin-bottom:1rem; } .mb-4 { margin-bottom:1.5rem; } .mb-5 { margin-bottom:3rem; }
.mx-auto { margin-left:auto; margin-right:auto; }
.max-w-800 { max-width:800px; }

.section-title    { font-size:clamp(2.25rem,3.9vw,3.2rem); margin-bottom:1rem; }
.section-subtitle { font-size:1.12rem; color:var(--text-soft); }

/* Kicker / eyebrow */
.hero-kicker, .sec-kicker {
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:var(--font-ui);
    font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--teal-ink);
    margin-bottom:1rem;
}
.hero-kicker::before, .sec-kicker::before {
    content:''; width:26px; height:2px; background:var(--teal); display:inline-block;
}
.bg-darker .sec-kicker, .bg-darker .hero-kicker { color:var(--teal); }

/* ── Icone (SVG inline, stroke coerente) ── */
.ico { width:1.25em; height:1.25em; stroke:currentColor; stroke-width:1.8; fill:none;
       stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ============================================================
   BOTTONI
   ============================================================ */
.btn {
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-family:var(--font-ui); font-weight:500; font-size:.92rem;
    padding:.78rem 1.6rem; border-radius:var(--radius-sm);
    border:1.5px solid transparent; cursor:pointer; text-align:center;
    transition:transform .25s var(--ease), background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.btn .ico { transition:transform .3s var(--ease); }
.btn:hover .ico { transform:translateX(3px); }
/* testo navy su arancio: contrasto ~7:1 (AA) contro il ~2.8:1 del bianco */
.btn-primary { background:var(--orange); color:var(--navy); border-color:var(--orange); font-weight:600; }
.btn-primary:hover { background:var(--orange-2); border-color:var(--orange-2); color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-orange); }
/* riflesso che attraversa il bottone primario */
.btn-primary::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%);
    transform:translateX(-130%); transition:transform .05s;
}
.btn-primary:hover::after { transform:translateX(130%); transition:transform .65s ease; }
.btn-secondary { background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-secondary:hover { background:var(--navy); color:var(--cream); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--orange-ink); border-color:var(--orange); }
.btn-outline:hover { background:var(--orange); color:var(--navy); }
.btn-large { padding:1rem 2.4rem; font-size:1.05rem; }
.bg-darker .btn-secondary { color:#fff; border-color:rgba(255,255,255,.5); }
.bg-darker .btn-secondary:hover { background:#fff; color:var(--navy); }

/* ============================================================
   NAVBAR (struttura da components.js)
   ============================================================ */
.navbar {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    padding:.85rem 0;
    background:rgba(251,247,241,.82);
    backdrop-filter:blur(12px) saturate(1.4);
    -webkit-backdrop-filter:blur(12px) saturate(1.4);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.navbar.scrolled { border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(26,26,46,.5); }
/* barra di avanzamento lettura (creata da global.js) */
.scroll-progress {
    position:fixed; top:0; left:0; height:2.5px; width:100%; z-index:1001;
    background:linear-gradient(90deg, var(--orange), var(--teal));
    transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
}
.nav-container { display:flex; align-items:center; justify-content:space-between; }
.logo img { height:46px; width:auto; display:block; transition:transform .35s var(--ease); }
.nav-links { display:flex; gap:2.1rem; align-items:center; }
.nav-links a {
    position:relative; color:var(--text-soft); font-weight:500; font-size:.94rem;
    font-family:var(--font-ui); padding:.25rem 0; transition:color .2s ease;
}
.nav-links a:hover { color:var(--navy); }
.nav-links a::after {
    content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0;
    background:var(--orange); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links .nav-active::after { width:100%; }
.nav-links .nav-active { color:var(--navy); }
.nav-actions { display:flex; gap:1rem; align-items:center; }
.menu-toggle { display:none; flex-direction:column; justify-content:space-between; width:28px; height:19px; cursor:pointer; z-index:1001; }
.menu-toggle .bar { height:2.5px; width:100%; background:var(--navy); border-radius:3px; transition:all .3s ease; }

/* ============================================================
   FOOTER (struttura da components.js) — navy
   ============================================================ */
.footer { background:var(--navy); color:var(--text-on-dark-soft); padding:4rem 0 3rem; }
.footer-container { display:flex; flex-direction:column; align-items:center; gap:1.4rem; text-align:center; }
.footer-logo img { height:42px; opacity:.95; }
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.footer-links a { position:relative; color:var(--text-on-dark-soft); font-size:.95rem; transition:color .25s ease; }
.footer-links a:hover { color:#fff; }
.footer-social { display:flex; gap:.75rem; justify-content:center; }
.footer-social a {
    display:flex; align-items:center; justify-content:center; width:40px; height:40px;
    border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    color:var(--text-on-dark-soft); transition:all .3s ease;
}
.footer-social a:hover { background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px); }
.footer-sites { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.footer-sites a {
    color:var(--text-on-dark-soft); font-size:.82rem;
    border-bottom:1px solid rgba(245,130,10,.4); padding-bottom:1px; transition:all .25s ease;
}
.footer-sites a:hover { color:var(--teal); border-color:var(--teal); }
.footer-info { color:var(--text-on-dark-soft); font-size:.9rem; }
.footer-copy { color:rgba(255,255,255,.4); font-size:.85rem; }
.footer-copy a { color:var(--teal); font-weight:600; }

/* ============================================================
   HERO (home) + PG-HERO (pagine interne)
   ============================================================ */
.hero { padding:8.5rem 0 5rem; position:relative; overflow:hidden; }
.hero-content { position:relative; z-index:1; }
.hero-title { font-size:clamp(2.9rem,5.9vw,5.1rem); margin-bottom:1.4rem; }
.hero-subtitle { font-size:1.18rem; color:var(--text-soft); max-width:640px; margin:0 0 2.2rem; }

.pg-hero { position:relative; padding:9rem 0 4.5rem; background:var(--cream-2); border-bottom:1px solid var(--line); overflow:hidden; }
.pg-hero::before {
    content:''; position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(43,196,192,.12) 0%, transparent 70%);
    top:-180px; right:-120px; pointer-events:none;
}
.pg-hero::after {
    content:''; position:absolute; width:460px; height:460px; border-radius:50%;
    background:radial-gradient(circle, rgba(245,130,10,.09) 0%, transparent 70%);
    bottom:-200px; left:-140px; pointer-events:none;
}
/* aloni gemelli anche sull'hero della home */
.hero::before {
    content:''; position:absolute; width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, rgba(43,196,192,.09) 0%, transparent 70%);
    top:-160px; right:-140px; pointer-events:none;
}
.hero::after {
    content:''; position:absolute; width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle, rgba(245,130,10,.07) 0%, transparent 70%);
    bottom:-180px; left:-160px; pointer-events:none;
}
.pg-hero-inner, .pg-hero-content { position:relative; z-index:1; text-align:center; max-width:820px; margin:0 auto; }
.pg-hero-title { font-size:clamp(2.7rem,4.8vw,4rem); margin-bottom:1rem; }
.pg-hero-subtitle { font-size:1.12rem; color:var(--text-soft); max-width:600px; margin:1rem auto 0; }

.hero-badge {
    display:inline-block; background:rgba(245,130,10,.1); border:1px solid rgba(245,130,10,.3);
    color:#9a4d05; padding:.45rem 1.3rem; border-radius:50px;
    font-family:var(--font-ui); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.4rem;
}
.subtitle-accent { color:var(--teal-ink); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:.75rem; }

/* ── Firma: archi annidati ── */
.signature { position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.signature svg { width:100%; height:auto; overflow:visible; }

/* ============================================================
   VIDEO
   ============================================================ */
.video-container {
    position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
    border-radius:var(--radius-lg); border:1px solid var(--line);
    box-shadow:var(--shadow-card); margin:2.5rem auto; max-width:900px; background:#000;
}
.video-container iframe { position:absolute; inset:0; width:100%; height:100%; }

/* ============================================================
   CARD generica
   ============================================================ */
.card {
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:2.25rem; box-shadow:var(--shadow-card);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform:translateY(-4px); border-color:rgba(245,130,10,.4); box-shadow:var(--shadow-lift); }

/* ============================================================
   FORM
   ============================================================ */
.form-group { margin-bottom:1.25rem; text-align:left; }
.form-group label { display:block; margin-bottom:.5rem; font-weight:500; font-size:.92rem; color:var(--text-main); }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"],
.form-group textarea, .form-select {
    width:100%; padding:.85rem 1rem; border-radius:var(--radius-sm);
    background:var(--white); border:1px solid var(--line); color:var(--text-main);
    font-family:var(--font-body); font-size:1rem; transition:border-color .25s ease, box-shadow .25s ease;
}
.form-select { appearance:none; -webkit-appearance:none; cursor:pointer; }
.form-group input:focus, .form-group textarea:focus, .form-select:focus {
    outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(245,130,10,.15);
}

/* ============================================================
   ANIMAZIONI (con global.js) + reduced motion
   ============================================================ */
/* --rd = ritardo di stagger, assegnato da global.js ai fratelli nella stessa griglia */
.fade-in-up   { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--rd, 0s); }
.fade-in-left { opacity:0; transform:translateX(-30px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--rd, 0s); }
.fade-in-right{ opacity:0; transform:translateX(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--rd, 0s); }
.is-visible   { opacity:1; transform:translate(0); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
    .fade-in-up,.fade-in-left,.fade-in-right { opacity:1 !important; transform:none !important; }
}

/* ── Focus visibile globale (accessibilità) ── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
    outline:3px solid var(--teal); outline-offset:2px; border-radius:4px;
}

/* ============================================================
   HOME — branch cards
   ============================================================ */
.branches-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin:3.5rem auto 0; max-width:900px; }
.branch-card {
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:2.25rem 1.5rem; text-align:left; text-decoration:none; color:var(--text-main);
    display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--shadow-card);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.branch-card:hover { transform:translateY(-6px); border-color:var(--orange); box-shadow:var(--shadow-lift); }
.branch-icon { width:48px; height:48px; border-radius:12px; background:rgba(43,196,192,.12); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:.5rem; }
.branch-icon svg { width:24px; height:24px; }
.branch-title { font-size:1.3rem; }
.branch-card p { color:var(--text-soft); font-size:.92rem; line-height:1.6; }
.branch-card .arrow { margin-top:auto; color:var(--orange-ink); font-family:var(--font-ui); font-weight:600; font-size:.85rem; display:inline-flex; align-items:center; gap:.4rem; }

/* ============================================================
   STAT STRIP
   ============================================================ */
.stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.stat { text-align:center; position:relative; }
.stat:not(:last-child)::after { content:''; position:absolute; right:0; top:15%; height:70%; width:1px; background:var(--line); }
.stat .n { font-family:var(--font-display); font-weight:700; font-size:2.6rem; letter-spacing:-.03em; color:var(--navy); font-variant-numeric:tabular-nums; }
.stat .n em { font-style:normal; color:var(--orange-text); }
.stat .l { font-size:.9rem; color:var(--text-soft); margin-top:.2rem; }

/* ============================================================
   METHOD CARDS (sezione scura)
   ============================================================ */
/* Utility: griglia a 2 colonne, 1 su mobile (mai righe orfane 3+1) */
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
@media (max-width:760px){ .grid-2 { grid-template-columns:1fr; gap:1.5rem; } }

/* Griglie schede: MAI più di 2 per riga (niente righe orfane 3+1) */
.method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin-top:3rem; }
.method-card {
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:2rem; position:relative; box-shadow:var(--shadow-card);
    transition:transform .3s ease, border-color .3s ease;
}
.method-card:hover { transform:translateY(-4px); border-color:rgba(245,130,10,.35); }
.bg-darker .method-card { background:rgba(255,255,255,.03); border-color:var(--line-dark); box-shadow:none; }
.bg-darker .method-card:hover { background:rgba(255,255,255,.06); }
.method-letter { position:absolute; top:-10px; right:10px; font-family:var(--font-display); font-weight:700; font-size:5rem; color:rgba(245,130,10,.08); line-height:1; pointer-events:none; user-select:none; }
.method-ic { width:46px; height:46px; border-radius:12px; background:rgba(43,196,192,.14); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.method-ic svg { width:24px; height:24px; }
.bg-darker .method-ic { color:var(--teal); }
.method-card h3 { font-size:1.25rem; margin-bottom:.5rem; }
.bg-darker .method-card h3 { color:#fff; }
.method-title { color:var(--orange); font-family:var(--font-ui); font-weight:600; font-size:1rem; margin-bottom:.75rem; }
.method-card p { color:var(--text-soft); font-size:.93rem; line-height:1.7; margin:0; }
.bg-darker .method-card p { color:var(--text-on-dark-soft); }
.method-card .more { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--teal-ink); }
.bg-darker .method-card .more { color:var(--teal); }

/* ============================================================
   TARGET CARDS
   ============================================================ */
.target-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin-top:3rem; }
.target-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-card); transition:transform .3s ease, border-color .3s ease; }
.target-card:hover { transform:translateY(-6px); border-color:rgba(245,130,10,.4); }
.target-icon { width:44px; height:44px; border-radius:12px; background:rgba(43,196,192,.12); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.target-icon svg { width:22px; height:22px; }
.target-title { font-family:var(--font-ui); font-size:1rem; font-weight:600; margin-bottom:.5rem; }
.target-desc  { color:var(--text-soft); font-size:.92rem; line-height:1.65; }

/* ============================================================
   QUOTE / VOICE
   ============================================================ */
.quote-box { border-left:4px solid var(--orange); padding:1.75rem 2.25rem; background:var(--cream-2); border-radius:0 var(--radius) var(--radius) 0; margin:3rem 0; }
.quote-box blockquote { font-family:var(--font-voice); font-style:italic; font-size:1.25rem; color:var(--text-main); line-height:1.5; margin:0 0 .75rem; }
.quote-box cite { color:var(--teal-ink); font-weight:600; font-style:normal; font-size:.88rem; font-family:var(--font-display); }
.voiceq { padding:5.5rem 0; }
.voiceq blockquote { font-family:var(--font-voice); font-style:italic; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.35; max-width:24ch; margin:0 auto; text-align:center; color:var(--navy); }
.voiceq blockquote .hl { color:var(--orange); }
.voiceq cite { display:block; text-align:center; margin-top:1.6rem; font-style:normal; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--text-soft); }

/* ============================================================
   SPLIT / INTRO / BULLET / TAKEAWAYS
   ============================================================ */
.intro-grid, .split-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.gradient-block { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg, rgba(43,196,192,.14), rgba(245,130,10,.08)); border-radius:var(--radius-lg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.gradient-block svg { width:88px; height:88px; color:var(--teal-ink); }
.bullet-list { list-style:none; padding:0; margin:1.5rem 0 0; }
.bullet-list li { padding:.6rem 0; color:var(--text-soft); display:flex; gap:.75rem; align-items:flex-start; font-size:.96rem; line-height:1.65; border-bottom:1px solid var(--line); }
.bullet-list li:last-child { border-bottom:none; }
.bullet-list li::before { content:'→'; color:var(--orange); font-weight:700; flex-shrink:0; }
.takeaways-box { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow-card); }
.takeaways-box p { color:var(--text-soft); font-size:.95rem; line-height:1.75; margin-bottom:1rem; }

/* ── Methodologies list ── */
.methodologies-list { list-style:none; padding:0; margin:2rem 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.methodology-item { display:flex; align-items:flex-start; gap:1rem; padding:1rem 1.25rem; background:var(--white); border-radius:var(--radius-sm); border:1px solid var(--line); }
.icon-check { flex-shrink:0; width:26px; height:26px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#063b39; margin-top:2px; }
.icon-check svg { width:14px; height:14px; stroke-width:3; }
.methodology-item span { color:var(--text-soft); font-size:.93rem; line-height:1.6; }

/* ============================================================
   TRAINER CARDS
   ============================================================ */
.trainers-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; margin-top:3rem; }
.trainer-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.5rem; text-align:center; box-shadow:var(--shadow-card); transition:transform .3s ease, border-color .3s ease; }
.trainer-card:hover { transform:translateY(-6px); border-color:rgba(245,130,10,.35); }
.trainer-img-wrapper { width:140px; height:140px; border-radius:50%; overflow:hidden; margin:0 auto 1.5rem; border:3px solid rgba(43,196,192,.4); background:var(--cream-2); display:flex; align-items:center; justify-content:center; }
.trainer-img { width:100%; height:100%; object-fit:cover; display:block; }
.trainer-name { font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:.25rem; }
.trainer-role { color:var(--teal-ink); font-weight:600; margin-bottom:1rem; font-size:.88rem; }
.trainer-bio  { color:var(--text-soft); font-size:.9rem; line-height:1.7; }

/* ============================================================
   CTA BOX (iscrizione)
   ============================================================ */
.cta-box { background:var(--white); border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:var(--radius-lg); padding:3.5rem 3rem; max-width:900px; margin:0 auto; box-shadow:var(--shadow-lift); }
.cta-title { font-family:var(--font-display); font-size:2rem; font-weight:700; margin-bottom:.75rem; text-align:center; }
.cta-subtitle { font-size:1.05rem; color:var(--text-soft); margin-bottom:2.5rem; text-align:center; }
.practical-info { display:flex; justify-content:center; gap:1.25rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.info-item { display:flex; align-items:center; gap:.9rem; background:var(--cream-2); padding:.9rem 1.25rem; border-radius:var(--radius-sm); border:1px solid var(--line); text-align:left; }
.info-icon { color:var(--teal-ink); display:flex; }
.info-icon svg { width:22px; height:22px; }
.info-item strong { display:block; color:var(--text-main); font-size:.88rem; margin-bottom:.15rem; }
.info-item span { color:var(--text-soft); font-size:.8rem; }

/* ── Moduli inclusi (percorsi) ── */
.moduli-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.modulo-link { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.25rem 1rem; text-align:center; text-decoration:none; color:var(--text-main); font-weight:500; font-size:.9rem; transition:all .3s ease; display:flex; flex-direction:column; align-items:center; gap:.5rem; box-shadow:var(--shadow-card); }
.modulo-link:hover { border-color:var(--orange); color:var(--orange-ink); transform:translateY(-3px); }

/* ============================================================
   TAG / BADGE / LISTE varie
   ============================================================ */
.tag { display:inline-block; padding:.3rem .9rem; border-radius:50px; font-size:.8rem; font-weight:600; letter-spacing:.04em; background:rgba(245,130,10,.12); color:#9a4d05; border:1px solid rgba(245,130,10,.25); margin:.25rem; }

/* ============================================================
   PERCORSI — livelli ascendenti
   ============================================================ */
.levels { max-width:1000px; margin:3.5rem auto 5rem; display:flex; flex-direction:column; gap:1.5rem; }
.level { position:relative; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--white); padding:2.25rem; box-shadow:var(--shadow-card); transition:border-color .3s ease, transform .3s ease; }
.level:hover { border-color:rgba(245,130,10,.4); transform:translateY(-3px); }
.level:not(:last-child)::after { content:'↑'; position:absolute; left:50%; bottom:-1.4rem; transform:translateX(-50%); color:rgba(245,130,10,.6); font-size:1.1rem; z-index:2; }
.level-tag { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-ui); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#9a4d05; margin-bottom:1rem; }
.level-tag .num { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(245,130,10,.12); border:1px solid rgba(245,130,10,.35); font-size:.8rem; }
.level-name { font-family:var(--font-display); font-size:1.75rem; font-weight:700; margin-bottom:.4rem; }
.level-desc { color:var(--text-soft); font-size:.96rem; line-height:1.7; max-width:720px; }
.includes-note { display:inline-flex; align-items:center; gap:.5rem; margin:1.25rem 0 .25rem; padding:.5rem 1rem; border-radius:var(--radius-sm); background:rgba(43,196,192,.08); border:1px dashed rgba(43,196,192,.35); color:var(--text-main); font-size:.85rem; }
.includes-note .ic { color:var(--teal-ink); display:flex; } .includes-note .ic svg{width:16px;height:16px;}
.mods { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0; }
.mods .mods-label { width:100%; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.1rem; }
.chip { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1rem; border-radius:var(--radius-sm); font-size:.88rem; font-weight:500; text-decoration:none; background:var(--cream-2); border:1px solid var(--line); color:var(--text-main); transition:all .25s ease; }
a.chip:hover { border-color:var(--orange); color:var(--orange-ink); transform:translateY(-2px); }
.chip.feature { background:rgba(43,196,192,.08); border-color:rgba(43,196,192,.3); color:var(--teal-ink); }
.chip .dot { color:var(--orange); }
.foundations { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:1.5rem; }
.foundation { border:1px solid var(--line); border-radius:var(--radius); background:var(--cream-2); padding:1.75rem; transition:border-color .3s ease; }
.foundation:hover { border-color:rgba(245,130,10,.4); }
.foundation .ftype { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-bottom:.6rem; }
.foundation.is-percorso .ftype { color:var(--teal-ink); }
.foundation.is-master .ftype { color:#9a4d05; }
.foundation h3 { font-family:var(--font-display); font-size:1.3rem; margin-bottom:.6rem; }
.foundation p { color:var(--text-soft); font-size:.9rem; line-height:1.65; margin-bottom:.75rem; }
.level-actions { margin-top:1.75rem; display:flex; gap:.85rem; flex-wrap:wrap; }
.level.apex { border-color:rgba(245,130,10,.4); border-top:4px solid var(--orange); background:linear-gradient(160deg, #fff7ef 0%, #fff 60%); }

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq-section { max-width:860px; margin:0 auto; }
.faq-category { margin-bottom:3rem; }
.faq-category-title { font-family:var(--font-ui); font-size:.92rem; font-weight:600; color:#9a4d05; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); }
details.faq-item { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.75rem; overflow:hidden; box-shadow:var(--shadow-card); transition:border-color .3s ease; }
details.faq-item[open] { border-color:rgba(245,130,10,.4); }
details.faq-item summary { padding:1.2rem 1.5rem; cursor:pointer; font-weight:600; font-size:.97rem; color:var(--text-main); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; user-select:none; font-family:var(--font-ui); font-weight:500; }
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after { content:'+'; color:var(--orange); font-size:1.4rem; font-weight:400; flex-shrink:0; transition:transform .3s ease; }
details.faq-item[open] summary::after { transform:rotate(45deg); }
details.faq-item .faq-answer { padding:0 1.5rem 1.4rem; color:var(--text-soft); font-size:.93rem; line-height:1.75; border-top:1px solid var(--line); padding-top:1rem; }
details.faq-item .faq-answer a { color:var(--orange); font-weight:600; }
details.faq-item .faq-answer a:hover { text-decoration:underline; }

/* ============================================================
   FOUNDER CARDS (chi siamo)
   ============================================================ */
.founders-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:4rem; }
.founder-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:border-color .3s ease, transform .3s ease; }
.founder-card:hover { border-color:rgba(245,130,10,.4); transform:translateY(-4px); }
/* I ritratti sorgente sono verticali (3:4): il vecchio riquadro 4:3 tagliava
   via meta fotogramma e mozzava il mento. 5:6 usa quasi tutto lo scatto.
   --fuoco = punto di fuoco verticale, DIVERSO per foto: nei due scatti la
   testa parte ad altezze diverse (Marco 23%, Francesca 15% del fotogramma)
   e senza correzione i due volti risultano sfalsati di ~60px a schermo.
   ATTENZIONE: se si sostituisce una foto va ritarato il suo --fuoco. */
.founder-photo { width:100%; aspect-ratio:5/6; object-fit:cover;
                 object-position:50% var(--fuoco, 30%); display:block; }
.founder-photo-placeholder { width:100%; aspect-ratio:5/6; background:var(--cream-2); display:flex; align-items:center; justify-content:center; color:var(--teal-ink); }
.founder-photo-placeholder svg { width:64px; height:64px; }
.founder-body { padding:2.5rem; }
.founder-name { font-family:var(--font-display); font-size:1.8rem; font-weight:700; margin-bottom:.25rem; }
.founder-role { color:var(--teal-ink); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.5rem; }
.founder-bio { color:var(--text-soft); font-size:.95rem; line-height:1.8; margin-bottom:1.5rem; }
.founder-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.founder-tag { background:rgba(43,196,192,.1); border:1px solid rgba(43,196,192,.25); color:var(--teal-ink); padding:.3rem .85rem; border-radius:50px; font-size:.78rem; font-weight:600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:992px) {
    .nav-links { display:none; }
    .nav-links.active { display:flex !important; flex-direction:column; position:absolute; top:100%; left:0; width:100%; background:var(--cream); padding:1.5rem; gap:1rem; border-bottom:1px solid var(--line); box-shadow:var(--shadow-card); }
    .menu-toggle { display:flex; }
    .menu-toggle.active .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2){ opacity:0; }
    .menu-toggle.active .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
    .nav-actions { display:none; }
    .intro-grid, .split-grid { grid-template-columns:1fr; gap:2.5rem; }
    .intro-image-wrapper { order:-1; }
}
@media (max-width:760px) {
    .container { padding:0 1.25rem; }
    .section { padding:4rem 0; }
    .stat-strip, .founders-grid { grid-template-columns:1fr; gap:1.5rem; }
    .stat:not(:last-child)::after { display:none; }
    .stat { padding:1rem 0; border-bottom:1px solid var(--line); }
    .foundations { grid-template-columns:1fr; }
    .level { padding:1.75rem 1.4rem; }
    .level-name { font-size:1.45rem; }
    .cta-box { padding:2.25rem 1.4rem; }
    .practical-info { flex-direction:column; align-items:stretch; }
    .method-grid, .target-grid, .methodologies-list,
    .trainers-grid, .branches-grid, .moduli-grid { grid-template-columns:1fr; }
}

/* ============================================================
   v3 — UTILITIES ANTI-INLINE
   Sostituiscono i pattern ripetuti negli style="" delle pagine.
   ============================================================ */
.sec-head { text-align:center; max-width:680px; margin-left:auto; margin-right:auto; }
.sec-head .sec-kicker, .sec-head .hero-kicker,
.text-center .sec-kicker, .text-center .hero-kicker { justify-content:center; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.text-center .hero-actions, .sec-head .hero-actions { justify-content:center; }
.actions-center { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.more .ico, .arrow .ico { width:1em; height:1em; }

/* ============================================================
   v3 — MICRO-INTERAZIONI CARD
   Velo di luce (arancio/teal) che appare al passaggio.
   ============================================================ */
.card, .branch-card, .method-card, .target-card, .trainer-card,
.founder-card, .foundation, .level, .event-card, .post-card, .quiz-card { position:relative; }
.branch-card::before, .method-card::before, .target-card::before,
.trainer-card::before, .founder-card::before, .foundation::before,
.level::before, .event-card::before, .post-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
    background:
        radial-gradient(420px 220px at 88% -10%, rgba(245,130,10,.055), transparent 65%),
        radial-gradient(340px 200px at -8% 112%, rgba(43,196,192,.055), transparent 60%);
    opacity:0; transition:opacity .5s var(--ease);
}
.branch-card:hover::before, .method-card:hover::before, .target-card:hover::before,
.trainer-card:hover::before, .founder-card:hover::before, .foundation:hover::before,
.level:hover::before, .event-card:hover::before, .post-card:hover::before { opacity:1; }

/* foto che respira dentro la cornice */
.founder-photo, .trainer-img { transition:transform .9s var(--ease); }
.founder-card:hover .founder-photo { transform:scale(1.035); }
.trainer-card:hover .trainer-img { transform:scale(1.05); }

/* logo navbar */
.logo a:hover img { transform:scale(1.045); }

/* virgoletta d'apertura nelle citazioni grandi */
.voiceq blockquote::before {
    content:'\201C'; display:block; font-size:3.4rem; line-height:.55;
    color:rgba(245,130,10,.4); margin-bottom:1.1rem;
}

/* numeri stabili durante l'animazione contatore */

/* ============================================================
   v3 — FOOTER
   ============================================================ */
.footer-links a::after {
    content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
    background:var(--teal); transform:scaleX(0); transform-origin:0 50%;
    transition:transform .3s var(--ease);
}
.footer-links a:hover::after { transform:scaleX(1); }
.footer-credit { font-size:.8rem; color:rgba(255,255,255,.35); }
.footer-credit a {
    color:rgba(255,255,255,.55); font-weight:600;
    border-bottom:1px solid rgba(43,196,192,.4);
    transition:color .25s ease, border-color .25s ease;
}
.footer-credit a:hover { color:var(--teal); border-color:var(--teal); }

/* ============================================================
   v3 — MENU MOBILE ANIMATO
   ============================================================ */
@media (max-width:992px) {
    .nav-links.active { animation:menuIn .4s var(--ease); }
    .nav-links.active a { animation:menuItem .45s var(--ease) backwards; }
    .nav-links.active a:nth-child(1) { animation-delay:.04s; }
    .nav-links.active a:nth-child(2) { animation-delay:.09s; }
    .nav-links.active a:nth-child(3) { animation-delay:.14s; }
    .nav-links.active a:nth-child(4) { animation-delay:.19s; }
    .nav-links.active a:nth-child(5) { animation-delay:.24s; }
    .nav-links.active a:nth-child(6) { animation-delay:.29s; }
}
@keyframes menuIn   { from { opacity:0; transform:translateY(-10px); } }
@keyframes menuItem { from { opacity:0; transform:translateY(-7px); } }

/* ============================================================
   v3 — EVENTI (pagina generata da _data/calendario.json)
   ============================================================ */
.filtri { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:2.5rem auto 0; }
.filtro {
    font-family:var(--font-ui); font-size:.85rem; font-weight:500; padding:.45rem 1.1rem;
    border-radius:50px; border:1px solid var(--line); background:var(--white);
    color:var(--text-soft); cursor:pointer; transition:all .25s var(--ease);
}
.filtro:hover { border-color:var(--orange); color:var(--orange-ink); transform:translateY(-1px); }
.filtro.attivo { background:var(--navy); border-color:var(--navy); color:var(--cream); }

.eventi-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; max-width:1100px; margin:3rem auto 0; }

.event-card {
    background:var(--white); border:1px solid var(--line); border-radius:20px;
    overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
    transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.event-card:hover { border-color:rgba(245,130,10,.55); box-shadow:var(--shadow-lift); transform:translateY(-5px); }
.event-card.in-evidenza { border-color:rgba(245,130,10,.5); border-top:4px solid var(--orange); }
.event-card[hidden] { display:none; }
.event-header { background:linear-gradient(135deg, var(--cream-2), var(--white)); padding:1.75rem 2rem; border-bottom:1px solid var(--line); }
.event-date-badge {
    display:inline-block; background:rgba(245,130,10,.12); color:#9a4d05;
    border:1px solid rgba(245,130,10,.25); font-family:var(--font-ui);
    font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    padding:.3rem .85rem; border-radius:50px; margin-bottom:.9rem;
}
.event-title { font-size:1.45rem; margin-bottom:.35rem; }
.event-sub { color:var(--text-soft); font-size:.92rem; line-height:1.6; }
.event-body { padding:1.75rem 2rem; display:flex; flex-direction:column; flex:1; }
.event-meta { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem; font-size:.9rem; color:var(--text-soft); }
.event-meta span { display:flex; align-items:center; gap:.55rem; }
.event-meta .ico { color:var(--teal-ink); }
.event-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:auto; }
.event-actions .btn { font-size:.85rem; padding:.6rem 1.15rem; }

/* ============================================================
   v3 — BLOG & QUESTIONARI (pagine generate da _data/blog.json)
   ============================================================ */
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.post-card {
    display:flex; flex-direction:column; text-decoration:none; color:inherit;
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow-card);
    transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
a.post-card:hover { transform:translateY(-5px); border-color:rgba(245,130,10,.5); box-shadow:var(--shadow-lift); }
.post-media {
    aspect-ratio:21/9; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--cream-2), #EFE6D8);
    border-bottom:1px solid var(--line); color:var(--teal-ink); overflow:hidden;
}
.post-media .ico { width:52px; height:52px; stroke-width:1.4; }
.post-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
a.post-card:hover .post-media img { transform:scale(1.045); }
.post-content { padding:1.9rem 2rem 2rem; display:flex; flex-direction:column; flex:1; }
.post-tag {
    font-family:var(--font-ui); font-size:.75rem; font-weight:600; color:var(--teal-ink);
    text-transform:uppercase; letter-spacing:.1em; margin-bottom:.7rem; display:block;
}
.post-title { font-family:var(--font-display); font-size:1.35rem; font-weight:700; line-height:1.25; margin-bottom:.7rem; color:var(--text-main); }
.post-excerpt { color:var(--text-soft); font-size:.92rem; line-height:1.7; }
.post-meta { margin-top:auto; padding-top:1.25rem; font-size:.82rem; color:var(--text-soft); display:flex; gap:.9rem; align-items:center; }
.post-meta .sep { color:var(--line); }
.post-soon {
    display:inline-flex; align-items:center; gap:.45rem; margin-top:1.25rem;
    font-family:var(--font-ui); font-size:.78rem; font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; color:#9a4d05;
    background:rgba(245,130,10,.1); border:1px dashed rgba(245,130,10,.4);
    padding:.4rem .9rem; border-radius:50px; align-self:flex-start;
}

.quiz-card {
    background:var(--white); border:1px solid rgba(43,196,192,.35); border-radius:var(--radius-lg);
    padding:2.25rem 2rem; text-align:center; box-shadow:var(--shadow-card);
    display:flex; flex-direction:column; align-items:center;
    transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.quiz-card:hover { border-color:var(--teal); transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.quiz-icon {
    width:54px; height:54px; border-radius:16px; background:rgba(43,196,192,.12);
    color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;
}
.quiz-icon .ico { width:26px; height:26px; }
.quiz-card h3 { font-size:1.25rem; margin-bottom:.6rem; }
.quiz-card p { color:var(--text-soft); font-size:.9rem; line-height:1.65; margin-bottom:1.5rem; }
.quiz-card .btn { margin-top:auto; }

/* ── Recensioni (widget ReputationHub iniettato da components.js) ──
   Fondo crema neutro con hairline: il widget disegna schede bianche,
   così stacca sempre, qualunque sia la sezione che lo precede. */
.reviews-section {
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.reviews-widget { max-width:1000px; margin:2.75rem auto 0; }
/* min-height: senza, un iframe senza attributo height resta a 150px (moncone).
   Lo script del widget imposta poi l'altezza vera e questa regola non lo ostacola. */
.reviews-widget iframe { display:block; border:0; width:100%; min-width:100%; min-height:280px; }

/* ── Pagina articolo ── */
.article-hero { padding:8.5rem 0 3rem; background:var(--cream-2); border-bottom:1px solid var(--line); }
.article-hero .container { max-width:820px; }
.article-title { font-size:clamp(2.3rem,4.5vw,3.4rem); line-height:1.12; margin:1rem 0; }
.article-meta { display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; color:var(--text-soft); font-size:.9rem; }
.prose { max-width:720px; margin:0 auto; font-size:1.05rem; line-height:1.85; color:var(--text-main); }
.prose > * + * { margin-top:1.25rem; }
.prose h2 { font-size:1.9rem; margin-top:3rem; }
.prose h3 { font-size:1.4rem; margin-top:2.25rem; }
.prose p { color:#33324A; }
.prose strong { color:var(--text-main); }
.prose a { color:var(--orange-ink); font-weight:600; border-bottom:1px solid rgba(245,130,10,.35); }
.prose a:hover { border-color:var(--orange); }
.prose ul, .prose ol { padding-left:1.4rem; color:#33324A; }
.prose li { margin:.5rem 0; }
.prose blockquote {
    border-left:4px solid var(--orange); padding:1.25rem 1.75rem; background:var(--cream-2);
    border-radius:0 var(--radius) var(--radius) 0;
    font-family:var(--font-voice); font-style:italic; font-size:1.2rem; color:var(--text-main);
}
.prose img { max-width:100%; border-radius:var(--radius); }
.article-nav { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; max-width:720px; margin:3.5rem auto 0; padding-top:2rem; border-top:1px solid var(--line); }
.article-nav a { color:var(--orange-ink); font-weight:600; font-size:.92rem; }
.article-nav a:hover { text-decoration:underline; }

@media (max-width:760px) {
    .eventi-grid, .post-grid { grid-template-columns:1fr; }
    .post-content { padding:1.5rem 1.4rem 1.6rem; }
    .prose { font-size:1rem; }
}

/* ============================================================
   v4 — CONTATTI: form CRM in iframe + alternative
   ============================================================ */
.contact-section { background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.contact-card { padding:1.75rem; }

/* Il modulo è servito da un iframe esterno.
   ATTENZIONE: un iframe senza altezza esplicita collassa a 150px (default HTML).
   Qui l'altezza sta nel FOGLIO DI STILE, non inline: così lo script del CRM
   (form_embed.js), che scrive `style.height` sull'elemento, ha la precedenza
   e può ridimensionarlo liberamente. Il valore è quello dichiarato dal modulo. */
.form-embed { position:relative; border-radius:var(--radius); overflow:hidden; background:var(--white); }
.form-embed iframe {
    display:block; width:100%; height:985px; border:0; border-radius:var(--radius);
}
/* Segnaposto animato: si vede solo finché l'iframe non ha dipinto il modulo */
.form-embed::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(100deg, var(--cream-2) 30%, #F8F2E8 50%, var(--cream-2) 70%);
    background-size:220% 100%; animation:formLoad 1.6s ease-in-out 8;
}
/* Quando lo script del CRM ha montato il modulo aggiunge il proprio wrapper:
   da quel momento il segnaposto non serve più. */
.form-embed:has(.ep-wrapper)::before,
.form-embed:has(iframe[style*="visibility: visible"])::before { display:none; }
.form-embed iframe { position:relative; z-index:1; }
@keyframes formLoad { to { background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce) { .form-embed::before { animation:none; } }

/* ── Alternative: chiamata e WhatsApp ── */
.contact-alt { margin-top:3.5rem; text-align:center; }
.contact-alt-head { max-width:560px; margin:0 auto 2rem; }
.contact-alt-head .sec-kicker { justify-content:center; }
.contact-alt-title { font-size:1.9rem; margin-bottom:.6rem; }
.contact-alt .calendly-inline-widget {
    border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-card);
}
.contact-alt-foot {
    display:flex; align-items:center; justify-content:center; gap:1rem;
    flex-wrap:wrap; margin-top:2rem;
}

/* ── Rimando al modulo della home (pagine senza form proprio) ── */
.contact-cta {
    max-width:760px; margin:0 auto; text-align:center;
    background:var(--white); border:1px solid var(--line); border-top:4px solid var(--orange);
    border-radius:var(--radius-lg); padding:3rem 2.5rem; box-shadow:var(--shadow-lift);
}
.contact-cta .sec-kicker { justify-content:center; }
.contact-cta-title { font-family:var(--font-display); font-size:2rem; font-weight:700; margin-bottom:.75rem; }
.contact-cta p { color:var(--text-soft); font-size:1.02rem; line-height:1.75; margin-bottom:2rem; }
.contact-cta .hero-actions { justify-content:center; }

@media (max-width:760px) {
    .contact-card { padding:.75rem; }
    .contact-cta { padding:2.25rem 1.4rem; }
    .contact-alt-title { font-size:1.5rem; }
}

/* ============================================================
   NOTA PER LA MANUTENZIONE — non cancellare "perche' inutilizzate"
   Queste classi non compaiono in nessuna pagina OGGI perche' le
   pagine che le usano vengono GENERATE da _scripts/genera_blog.py
   e nascono solo quando un articolo ha un contenuto:
     .article-hero  .article-title  .article-meta  .article-nav
     .prose  .post-meta  .sep
   Idem .founder-photo-placeholder, usata da global.js quando una
   foto non si carica.
   ============================================================ */

/* ============================================================
   v5 — HANNO LAVORATO CON NOI (muro dei loghi)
   I loghi arrivano da enti diversi: proporzioni, colori e pesi
   sono incompatibili fra loro. Per unificarli: riquadro di
   dimensione fissa + object-fit:contain, e desaturazione a
   riposo che torna a colori al passaggio del mouse.
   ============================================================ */
.partners { background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.partners-list {
    /* Numero di loghi per riga FISSATO, non lasciato al caso: con 11 loghi e una
       larghezza libera si finiva a 5+5+1, con l'ultimo logo orfano in fondo.
       4 per riga da 11 -> 4+4+3;  3 -> 3+3+3+2;  2 -> ultimo centrato. */
    --col: 4;
    --gap: 1.75rem;
    list-style:none; padding:0;
    margin:2.75rem auto 0; max-width:920px;
    display:flex; flex-wrap:wrap;
    justify-content:center; align-items:center;
    gap:1.6rem var(--gap);
}
.partner {
    flex:0 0 auto;
    width:calc((100% - (var(--col) - 1) * var(--gap)) / var(--col));
    height:72px;
    display:flex; align-items:center; justify-content:center;
    padding:.35rem;
}
@media (max-width:900px) { .partners-list { --col: 3; } }

/* Le copie servono solo al nastro scorrevole del telefono: sul resto
   sono fuori dal flusso, cosi la griglia resta di 11 loghi. */
.partner.is-copia { display:none; }

/* ── TELEFONO: nastro scorrevole ──────────────────────────────────────────
   A due loghi per riga gli 11 loghi facevano SEI righe: una colonna
   altissima da scorrere. In un nastro stanno su una riga sola.
   Le voci sono duplicate nell'HTML: l'animazione trasla del 50%, quindi
   quando la prima copia esce la seconda e' esattamente al suo posto e il
   giro riparte senza stacco. */
@media (max-width:620px) {
    .partners-viewport {
        overflow:hidden;
        /* i bordi sfumano, cosi i loghi non vengono "tagliati" di netto */
        -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
                mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    }
    .partners-list {
        flex-wrap:nowrap; width:max-content; max-width:none;
        justify-content:flex-start;
        /* NIENTE gap qui: con 22 voci i gap sono 21, quindi la larghezza totale
           NON e' divisibile in due meta uguali e translateX(-50%) cadrebbe
           11px fuori posto, con uno scatto visibile a ogni giro. Con il
           margine su OGNI voce le due meta sono identiche e il giro e' liscio. */
        gap:0; margin-top:2.25rem;
        animation:scorriLoghi 40s linear infinite;
        will-change:transform;
    }
    .partner { width:132px; height:60px; margin-right:1.4rem; }
    .partner.is-copia { display:flex; }
    /* tenendo premuto si ferma, per leggere un logo */
    .partners-viewport:active .partners-list { animation-play-state:paused; }
    /* senza mouse il colore non si potrebbe rivelare: loghi pieni */
    .partner img { filter:none; opacity:.95; }
}
@keyframes scorriLoghi { to { transform:translateX(-50%); } }

/* Chi ha chiesto meno animazioni torna alla griglia, ferma. */
@media (prefers-reduced-motion: reduce) {
    .partners-list { animation:none !important; flex-wrap:wrap !important; width:auto !important; }
    .partner.is-copia { display:none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width:620px) {
    .partners-list { --col: 2; }
}
.partner img {
    /* --max-w: normalmente 88%, per dare respiro ai loghi larghi e non farli
       schiacciare i quadrati. I marchi molto allungati (PsicoPoint e' 6,4:1)
       verrebbero troppo sottili: a loro si concede il 100% sulla voce stessa. */
    max-width:var(--max-w, 88%); max-height:100%;
    width:auto; height:auto;
    object-fit:contain; display:block;
    filter:grayscale(100%);
    opacity:.72;
    transition:filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.partner:hover img { filter:grayscale(0%); opacity:1; transform:scale(1.04); }

/* Senza mouse non c'e' modo di rivelare il colore: mostriamoli pieni. */
@media (hover: none) {
    .partner img { filter:none; opacity:.9; }
}

/* Ripiego testuale: compare solo se il file del logo manca
   (gestito da global.js via data-se-manca="mostra-successivo"). */
.partner-nome {
    display:none;
    font-family:var(--font-ui); font-size:.8rem; font-weight:600;
    line-height:1.3; text-align:center; color:var(--text-soft);
}