/* ============================================================
   EMPATIA CO. — Foglio di stile principale
   ------------------------------------------------------------
   Design system "luxury wellness editorial":
   • palette nude/cream, mai bianco puro né nero puro
   • tipografia Fraunces (display/serif italic) + Inter (UI/body)
   • spacing molto ampio, ritmo verticale lento e respirato
   • animazioni morbide, reveal allo scroll, parallax leggerissimo
   ============================================================ */


/* ============================================================
   1. RESET / BASE
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Niente scroll orizzontale, mai. Su mobile le sezioni con
       margini negativi (es. .service--alt) devono rispettarlo. */
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--c-ink);
    background: var(--c-cream);
    overflow-x: hidden;
    max-width: 100vw;
    /* Letter spacing molto leggero per dare aria al testo */
    letter-spacing: 0.005em;
}

/* Garanzia anti-overflow: tutti i contenitori principali si
   contengono dentro il viewport, anche quando il loro contenuto
   tenta di sforare (typografia gigante, marquee, immagini). */
main, section, article, header, footer, figure, picture {
    max-width: 100%;
}

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

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

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

ul,
ol {
    list-style: none;
}

::selection {
    background: var(--c-terracotta);
    color: var(--c-cream);
}


/* ============================================================
   2. DESIGN TOKENS — :root variables
   ------------------------------------------------------------
   Tutti i valori chiave del design system stanno qui.
   Cambiando un token, l'intera estetica si adegua.
   ============================================================ */

:root {
    /* Palette nude / cream — derivata dall'identità originale ma
       raffinata in chiave editoriale luxury */
    --c-cream:        #f5efe8;   /* sfondo principale */
    --c-cream-warm:   #efe3d8;   /* sezioni alternate, calde */
    --c-cream-deep:   #ebdfd2;   /* leggera variazione per overlap */
    --c-beige:        #d8c2b5;   /* divisori, elementi decorativi */
    --c-nude:         #c7a999;   /* nude rosato come accento gentile */
    --c-rose:         #d4b5ae;   /* rosa cipria per micro-accenti */
    --c-terracotta:   #c03457;   /* PRIMARIO brand Empatia: rosa magenta. Usato
                                    su CTA, link hover, italic accents, KPI.
                                    Storica del nome: l'idea iniziale era un
                                    terracotta caldo, poi la brand identity ha
                                    portato il rosa scuro originale del logo. */
    --c-primary:      #c03457;   /* alias semantico per il colore primario */
    --c-primary-soft: #f5c9d3;   /* secondario soft del brand: rosa cipria */
    --c-olive:        #8a8870;   /* oliva soft, accento secondario decorativo */

    /* Giallo senape: accento didattico usato sulla pagina corsi
       in equilibrio con il magenta del brand. Tre tonalità per
       coprire fondi, highlights e contrasti. */
    --c-mustard:      #e8b53d;   /* senape primario per accenti e chip */
    --c-mustard-soft: #f5e3a8;   /* highlight chiaro / pannelli soft */
    --c-mustard-deep: #b88e25;   /* hover e contrasti più scuri */

    --c-ink:          #2d2a26;   /* testo principale (non nero puro) */
    --c-ink-soft:     #4a443e;   /* testo secondario */
    --c-ink-mute:     #7a716a;   /* metadata, eyebrow */
    --c-line:         rgba(45, 42, 38, 0.14);

    /* Sezione contatti scura — calda, mai nera */
    --c-dark:         #2d2a26;
    --c-dark-soft:    #3b3631;

    /* Tipografia
       Fraunces è una serif variabile (asse opsz 9-144 e wght 300-700)
       perfetta per i display giganti. Inter resta per UI e leggibilità. */
    --font-serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Scala tipografica con clamp() per essere fluida */
    --fs-display:   clamp(3.4rem, 8.5vw, 9.5rem);
    --fs-display-s: clamp(2.4rem, 5.2vw, 5rem);
    --fs-display-m: clamp(1.9rem, 3.6vw, 3.4rem);
    --fs-h2:        clamp(1.5rem, 2.4vw, 2.4rem);
    --fs-lead:      clamp(1.05rem, 1.4vw, 1.4rem);
    --fs-body:      clamp(0.95rem, 1.05vw, 1.06rem);
    --fs-eyebrow:   0.7rem;

    /* Spacing system: 8px base, scala generosa */
    --sp-1:  0.5rem;
    --sp-2:  1rem;
    --sp-3:  1.5rem;
    --sp-4:  2.5rem;
    --sp-5:  4rem;
    --sp-6:  6rem;
    --sp-7:  9rem;
    --sp-8:  12rem;

    /* Section gutter: padding orizzontale standard delle sezioni */
    --gutter: clamp(1.25rem, 5vw, 5rem);

    /* Border radius coerenti */
    --radius-s: 4px;
    --radius:   8px;
    --radius-l: 18px;
    --radius-xl: 28px;

    /* Ombre morbide (mai dure) */
    --shadow-soft: 0 30px 60px -30px rgba(45, 42, 38, 0.18);
    --shadow-card: 0 20px 50px -25px rgba(45, 42, 38, 0.16);

    /* Transizioni consistenti */
    --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:   cubic-bezier(0.19, 1, 0.22, 1);
    --t-fast:     280ms;
    --t-base:     520ms;
    --t-slow:     900ms;
}


/* ============================================================
   3. UTILITIES — eyebrow, display, lead, cta
   ============================================================ */

/* Etichetta sopra-titolo: piccola, uppercase, lettera spaziata.
   Funziona come timbro editoriale. */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    font-weight: 500;
}
.eyebrow--center { text-align: center; }
.eyebrow--mt     { margin-top: var(--sp-5); }
.eyebrow--mini   { font-size: 0.62rem; letter-spacing: 0.26em; margin-bottom: var(--sp-2); }
.eyebrow--light,
.eyebrow--on-dark { color: rgba(245, 239, 232, 0.7); }

/* Display: titoli giganti, serif italic come accento */
.display {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 350;
    line-height: 0.96;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    /* opsz axis di Fraunces: ottico per display */
    font-variation-settings: "opsz" 144;
}
.display em {
    font-style: italic;
    font-weight: 350;
    color: var(--c-terracotta);
}
.display--small {
    font-size: var(--fs-display-s);
    line-height: 1.04;
}
.display--mini {
    font-family: var(--font-serif);
    font-size: var(--fs-display-m);
    font-weight: 350;
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.display--mini em { font-style: italic; color: var(--c-terracotta); }
.display--on-dark { color: var(--c-cream); }
.display--on-dark em { color: var(--c-rose); }

.display__sub {
    margin-top: var(--sp-3);
    max-width: 38ch;
    color: var(--c-ink-soft);
    font-size: var(--fs-lead);
    line-height: 1.5;
}

/* Lead — paragrafo introduttivo più grande */
.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--c-ink);
}
.lead--small { font-size: 1.15rem; }


/* CTA: pulsanti minimal, mai pesanti */
.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.6rem;
    background: var(--c-ink);
    color: var(--c-cream);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transition: transform var(--t-fast) var(--ease-soft),
                background var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft);
}
.cta svg {
    width: 16px; height: 16px;
    transition: transform var(--t-fast) var(--ease-soft);
}
.cta:hover {
    background: var(--c-terracotta);
    transform: translateY(-2px);
}
.cta:hover svg { transform: translateX(4px); }

.cta--ghost {
    background: transparent;
    color: var(--c-ink);
    border: 1px solid var(--c-ink);
}
.cta--ghost:hover {
    background: var(--c-ink);
    color: var(--c-cream);
}

.cta--solid {
    background: var(--c-cream);
    color: var(--c-ink);
}
.cta--solid:hover {
    background: var(--c-rose);
    color: var(--c-ink);
}

.cta--big {
    padding: 1.2rem 2.2rem;
    font-size: 0.85rem;
}

/* CTA inline: utilizzata dentro paragrafi, sembra un link tipografico */
.cta--inline {
    background: transparent;
    color: var(--c-terracotta);
    padding: 0;
    border-bottom: 1px solid var(--c-terracotta);
    border-radius: 0;
    margin-top: var(--sp-3);
    text-transform: none;
    letter-spacing: 0.04em;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 400;
    padding-bottom: 0.2rem;
}
.cta--inline:hover {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
    transform: none;
}


/* ============================================================
   4. PRELOADER
   ------------------------------------------------------------
   Un sipario crema con il marchio e una barra che si riempie.
   Dopo il caricamento si solleva con un movimento morbido.
   ============================================================ */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--c-cream);
    display: grid;
    place-items: center;
    transition: transform 1.2s var(--ease-out), opacity 0.5s ease 0.7s;
}
.preloader.is-done {
    transform: translateY(-101%);
    opacity: 0;
    pointer-events: none;
}
.preloader__inner {
    text-align: center;
}
.preloader__mark {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 350;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.preloader__mark em {
    font-style: italic;
    color: var(--c-terracotta);
}
.preloader__bar {
    display: block;
    width: 220px;
    max-width: 50vw;
    height: 1px;
    margin: 1.4rem auto 0;
    background: var(--c-line);
    overflow: hidden;
}
.preloader__bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--c-terracotta);
    animation: preloaderFill 1.4s var(--ease-out) forwards;
}
@keyframes preloaderFill {
    to { width: 100%; }
}


/* ============================================================
   5. BARRA PROGRESSO SCROLL
   ============================================================ */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 90;
    pointer-events: none;
}
.scroll-progress > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--c-terracotta);
    transition: width 80ms linear;
}


/* ============================================================
   6. NAVBAR
   ============================================================ */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--sp-3);
    padding: 1.4rem var(--gutter);
    z-index: 80;
    transition: background var(--t-base) var(--ease-soft),
                box-shadow var(--t-base) var(--ease-soft),
                padding var(--t-base) var(--ease-soft);
}
.nav.is-scrolled {
    background: rgba(245, 239, 232, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    box-shadow: 0 1px 0 var(--c-line);
}
/* Nota: la navbar resta sempre visibile durante lo scroll. La logica di
   hide/show è stata rimossa di proposito: vogliamo la navigazione
   sempre raggiungibile. */

.nav__brand {
    display: inline-flex;
    align-items: center;
    color: var(--c-ink);
    transition: opacity var(--t-fast) var(--ease-soft);
}
.nav__brand:hover {
    opacity: 0.75;
}

/* Logo immagine (PNG a colore in assets/logo-colore-empatia.png) */
.nav__logo {
    display: block;
    height: 38px;
    width: auto;
    user-select: none;
}

.nav__menu {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
}
.nav__link {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--c-ink);
    letter-spacing: 0.04em;
    position: relative;
    padding: 0.4rem 0.2rem;
    transition: color var(--t-fast) var(--ease-soft);
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 0.1rem;
    height: 1px;
    background: var(--c-terracotta);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--t-base) var(--ease-soft);
}
.nav__link:hover { color: var(--c-terracotta); }
.nav__link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Stato attivo della voce di navigazione: identifica la pagina corrente.
   La sottolineatura resta visibile in modo permanente. */
.nav__link.is-active,
.nav__link[aria-current="page"] {
    color: var(--c-terracotta);
}
.nav__link.is-active::after,
.nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: var(--c-ink);
    color: var(--c-cream);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    transition: background var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-soft);
}
.nav__cta svg {
    width: 13px; height: 13px;
    transition: transform var(--t-fast) var(--ease-soft);
}
.nav__cta:hover {
    background: var(--c-terracotta);
    transform: translateY(-1px);
}
.nav__cta:hover svg { transform: translateX(3px); }

/* Hamburger: visibile solo da tablet in giù */
.nav__hamburger {
    display: none;
    width: 40px; height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.nav__hamburger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--c-ink);
    transition: transform var(--t-fast) var(--ease-soft),
                opacity   var(--t-fast) var(--ease-soft);
}
.nav__hamburger.is-open span:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}
.nav__hamburger.is-open span:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
}


/* ============================================================
   7. OVERLAY MENU (mobile)
   ============================================================ */

.overlay-menu {
    position: fixed;
    inset: 0;
    background: var(--c-cream-warm);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease-soft);
    display: grid;
    place-items: center;
    padding: var(--gutter);
    overflow: auto;
}
.overlay-menu.is-open {
    opacity: 1;
    pointer-events: auto;
}
.overlay-menu__inner {
    width: 100%;
    max-width: 720px;
}
.overlay-menu__label {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    margin-bottom: var(--sp-3);
}
.overlay-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.overlay-menu__nav a {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 7vw, 3.8rem);
    font-weight: 350;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-style: italic;
    color: var(--c-ink);
    display: flex;
    align-items: baseline;
    gap: 1rem;
    transition: color var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-soft);
    transform: translateY(20px);
    opacity: 0;
}
.overlay-menu__nav a span {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    text-transform: uppercase;
    /* Allinea il numerino in baseline col grande titolo */
    transform: translateY(-0.4em);
}
.overlay-menu.is-open .overlay-menu__nav a {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.7s var(--ease-out) calc(0.06s * var(--i, 0)),
                opacity 0.7s var(--ease-out) calc(0.06s * var(--i, 0));
}
.overlay-menu__nav a:hover {
    color: var(--c-terracotta);
    transform: translateX(8px);
}

.overlay-menu__foot {
    margin-top: var(--sp-5);
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    color: var(--c-ink-soft);
    font-size: 0.85rem;
}
.overlay-menu__foot a:hover { color: var(--c-terracotta); }


/* ============================================================
   8. HERO
   ============================================================ */

.hero {
    position: relative;
    min-height: 100vh;
    padding: var(--sp-7) var(--gutter) var(--sp-5);
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    align-items: end;
    gap: var(--sp-5);
    overflow: hidden;
    background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-deep) 100%);
}

.hero__meta {
    position: absolute;
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    font-weight: 500;
}
.hero__meta--tl { top: 6rem; left: var(--gutter); }
.hero__meta--tr { top: 6rem; right: var(--gutter); }

.hero__inner {
    z-index: 2;
    position: relative;
}

.hero__title {
    margin-top: 1.2rem;
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 350;
    line-height: 0.94;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    font-variation-settings: "opsz" 144;
}
.hero__word {
    display: block;
    /* Lo spazio negativo tra le righe è voluto: dà profondità editoriale */
    margin-top: -0.05em;
    transform: translateY(60px);
    opacity: 0;
    transition: transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out);
}
.hero__word.is-revealed,
body.is-loaded .hero__word {
    transform: translateY(0);
    opacity: 1;
}
.hero__word:nth-child(1) { transition-delay: 0.10s; }
.hero__word:nth-child(2) { transition-delay: 0.20s; }
.hero__word:nth-child(3) { transition-delay: 0.30s; }
.hero__word:nth-child(4) { transition-delay: 0.40s; }
.hero__word:nth-child(5) { transition-delay: 0.50s; }

.hero__word--ital {
    font-style: italic;
    color: var(--c-terracotta);
    margin-left: 0.5em;
}
.hero__word--small {
    font-size: 0.45em;
    color: var(--c-ink-soft);
    margin-left: 1.6em;
    font-style: italic;
    /* Numerini editoriali */
}

.hero__lead {
    z-index: 2;
    position: relative;
    max-width: 36ch;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1.2s var(--ease-out) 0.6s,
                opacity 1.2s var(--ease-out) 0.6s;
    padding-bottom: 1rem;
}
body.is-loaded .hero__lead {
    transform: translateY(0);
    opacity: 1;
}
.hero__lead p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-ink-soft);
    margin-bottom: var(--sp-3);
}
.hero__lead .cta { font-size: 0.7rem; }

.hero__image {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* L'immagine non è hero in senso classico: è uno sfondo soffuso
       a destra, mascherato da un gradient per non sopraffare il testo */
    -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000 70%);
            mask-image: linear-gradient(110deg, transparent 30%, #000 70%);
}
.hero__image img,
.hero__image video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.55;
    /* Filtro per uniformare al mood crema */
    filter: saturate(0.8) hue-rotate(-5deg);
    /* Block per evitare spazi inline sotto */
    display: block;
}

.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--c-ink-mute);
    z-index: 2;
}
.hero__scroll-line {
    width: 1px;
    height: 38px;
    background: linear-gradient(to bottom, transparent, var(--c-ink-soft), transparent);
    animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; }
    50%      { transform: scaleY(1);   transform-origin: top; }
}


/* ============================================================
   9. MARQUEE (striscia tipografica scorrevole)
   ============================================================ */

.marquee {
    overflow: hidden;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    background: var(--c-cream);
    padding: 1.4rem 0;
}
.marquee__track {
    display: flex;
    gap: 2.4rem;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.marquee__track em {
    font-style: italic;
    color: var(--c-terracotta);
}
.marquee__dot {
    color: var(--c-beige);
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ============================================================
   10. SECTION COMUNI
   ============================================================ */

.section {
    padding: var(--sp-7) var(--gutter);
    position: relative;
}

.section__head {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    max-width: 1400px;
}
.section__head--split {
    grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr);
    gap: var(--sp-5);
    align-items: end;
}

.section__number {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 300;
    line-height: 1;
    color: var(--c-beige);
    font-style: italic;
    display: block;
    margin-bottom: var(--sp-2);
}
.section__number--light { color: rgba(245, 239, 232, 0.35); }


/* ============================================================
   11. CONOSCIAMOCI — Manifesto
   ============================================================ */

.manifesto {
    padding: var(--sp-7) var(--gutter);
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}
.manifesto .eyebrow {
    margin-bottom: var(--sp-3);
}
.manifesto__text {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    font-weight: 350;
    line-height: 1.32;
    color: var(--c-ink);
    letter-spacing: -0.005em;
}
.manifesto__text em {
    font-style: italic;
    color: var(--c-terracotta);
}


.section--conosciamoci {
    background: var(--c-cream);
}

.conosciamoci__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sp-5);
    align-items: start;
    max-width: 1400px;
}
.conosciamoci__figure {
    position: relative;
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 4/5;
}
.conosciamoci__figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Soft transition per il parallax leggero */
    transition: transform 1.6s var(--ease-out);
}
.conosciamoci__figure:hover img { transform: scale(1.04); }
.conosciamoci__figure figcaption {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    color: var(--c-cream);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.conosciamoci__copy {
    display: grid;
    gap: var(--sp-3);
    color: var(--c-ink-soft);
    line-height: 1.7;
    font-size: 1.02rem;
}
.conosciamoci__copy strong { color: var(--c-ink); font-weight: 500; }
.conosciamoci__copy em { color: var(--c-terracotta); font-style: italic; }


/* ============================================================
   12. VALORI — claim "Entriamo in Empatia"
   ============================================================ */

.valori {
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-line);
    text-align: center;
}
.valori__title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 350;
    line-height: 1.15;
    margin-top: var(--sp-3);
    color: var(--c-ink);
}
.valori__title em {
    font-style: italic;
    color: var(--c-terracotta);
}

.valori__grid {
    margin-top: var(--sp-6);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    text-align: left;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}
.valore {
    padding: var(--sp-4) var(--sp-3);
    border-top: 1px solid var(--c-line);
    transition: background var(--t-base) var(--ease-soft);
}
.valore:hover { background: var(--c-cream-deep); }
.valore__num {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--c-terracotta);
    margin-bottom: var(--sp-3);
}
.valore h4 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.valore p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--c-ink-soft);
}


/* ============================================================
   13. DUAL BLOCK — supporto clienti / formazione
   ============================================================ */

.dual-block {
    margin-top: var(--sp-7);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
    max-width: 1400px;
    align-items: start;
}
.dual-block--reverse .dual-block__item { order: 1; }
.dual-block--reverse .dual-block__figure { order: 2; }

.dual-block__item p {
    color: var(--c-ink-soft);
    line-height: 1.7;
    margin-top: var(--sp-3);
}
.dual-block__item h3 { margin-top: var(--sp-2); }
.dual-block__item em { font-style: italic; color: var(--c-terracotta); }
.dual-block__item .cta { margin-top: var(--sp-4); }

.dual-block__figure {
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 4/5;
}
.dual-block__figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease-out);
}

.attestazioni {
    margin-top: var(--sp-4);
    border-top: 1px solid var(--c-line);
}
.attestazioni li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--c-ink);
}
.attestazioni li span {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-ink-mute);
}


/* ============================================================
   14. BIG QUOTE
   ============================================================ */

.big-quote {
    margin: var(--sp-7) auto;
    padding: var(--sp-6) var(--gutter);
    text-align: center;
    max-width: 1100px;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.big-quote p {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    font-weight: 350;
    line-height: 1.3;
    color: var(--c-ink);
}
.big-quote em {
    font-style: italic;
}
.big-quote cite {
    display: block;
    margin-top: var(--sp-3);
    font-style: normal;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
}


/* ============================================================
   15. SECTION COMUNICAZIONE
   ============================================================ */

.section--comunicazione {
    background: var(--c-cream);
    padding-top: var(--sp-7);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: var(--sp-5);
    align-items: start;
    max-width: 1400px;
    margin-bottom: var(--sp-6);
}
.intro-grid__copy p {
    color: var(--c-ink-soft);
    line-height: 1.7;
    margin-bottom: var(--sp-3);
}
.intro-grid__copy em { color: var(--c-terracotta); font-style: italic; }
.intro-grid__list .eyebrow { margin-bottom: var(--sp-2); }

.ranged-list {
    border-top: 1px solid var(--c-line);
}
.ranged-list li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--c-ink);
    transition: padding-left var(--t-base) var(--ease-soft),
                color var(--t-base) var(--ease-soft);
}
.ranged-list li:hover {
    padding-left: 0.6rem;
    color: var(--c-terracotta);
}
.ranged-list li > span:first-child {
    font-style: italic;
    color: var(--c-ink-mute);
    font-size: 0.95rem;
}

/* Strategia */
.strategia {
    max-width: 1400px;
    margin: var(--sp-6) 0;
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.strategia__copy {
    margin-top: var(--sp-3);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--c-ink);
    max-width: 70ch;
}
.strategia__copy strong { color: var(--c-terracotta); font-weight: 500; }
.strategia__cta {
    margin-top: var(--sp-4);
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}


/* ============================================================
   16. SERVICE BLOCK (sotto-sezioni)
   ============================================================ */

.service {
    max-width: 1400px;
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--sp-5);
    align-items: start;
}
.service .eyebrow { grid-column: 1; }
.service > h3      { grid-column: 1; }
.service__body     { grid-column: 2; }
.service__body--wide { grid-column: 1 / -1; max-width: 75ch; }
.service__body p {
    color: var(--c-ink-soft);
    line-height: 1.7;
    margin-bottom: var(--sp-3);
}
.service__body strong { color: var(--c-ink); font-weight: 500; }
.service__body em { color: var(--c-terracotta); font-style: italic; }

.service .eyebrow.eyebrow--mt {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: var(--sp-3);
}
.service .fasi {
    grid-column: 1 / -1;
}

.service--alt { background: var(--c-cream-warm); margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }

.service--feature {
    grid-template-columns: 1fr;
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
}

.fasi {
    margin-top: var(--sp-4);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
.fase {
    padding: var(--sp-4) var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-l);
    background: var(--c-cream);
    transition: transform var(--t-base) var(--ease-soft),
                box-shadow var(--t-base) var(--ease-soft),
                border-color var(--t-base) var(--ease-soft);
}
.fase:hover {
    transform: translateY(-4px);
    border-color: var(--c-terracotta);
    box-shadow: var(--shadow-card);
}
.fase__num {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-terracotta);
    font-size: 1.4rem;
    margin-bottom: var(--sp-3);
}
.fase h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
    color: var(--c-ink);
}
.fase p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
}

/* Domande retoriche dentro il blocco consulenza */
.domande {
    margin: var(--sp-3) 0;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.domande li {
    padding: 0.6rem 0;
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    line-height: 1.4;
    color: var(--c-terracotta);
}


/* ============================================================
   17. SECTION CONSULENZA (sfondo caldo)
   ============================================================ */

.section--consulenza {
    background: var(--c-cream-warm);
}

/* All'interno di una sezione cremosa, le sezioni alt invertono i ruoli */
.section--consulenza .service--alt {
    background: var(--c-cream);
}

/* Data block: foto + scrolly testuale */
.data-block {
    max-width: 1400px;
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-5);
    align-items: start;
    margin: var(--sp-6) 0;
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--c-line);
}
.data-block__photo {
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 3/4;
    /* Sticky così la foto resta ferma mentre il copy scorre */
    position: sticky;
    top: 6rem;
}
.data-block__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.data-block__copy p {
    color: var(--c-ink-soft);
    line-height: 1.7;
    margin-bottom: var(--sp-3);
}
.data-block__copy strong { color: var(--c-ink); font-weight: 500; }

.quote-inline {
    margin: var(--sp-3) 0;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--c-terracotta);
    line-height: 1.4;
    font-style: italic;
    text-align: center;
}


/* ============================================================
   18. END CTA (chiamata d'azione finale di sezione)
   ============================================================ */

.end-cta {
    max-width: 1400px;
    margin: var(--sp-6) 0 0;
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-5);
    align-items: center;
}
.end-cta__text {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    font-weight: 350;
    line-height: 1.05;
    color: var(--c-ink);
}
.end-cta__text em {
    font-style: italic;
    color: var(--c-terracotta);
}


/* ============================================================
   19. PORTFOLIO — Casi studio
   ============================================================ */

.section--portfolio {
    background: var(--c-cream);
}

.caso {
    position: relative;
    max-width: 1400px;
    padding: var(--sp-6) 0 var(--sp-6) 4.5rem;
    border-top: 1px solid var(--c-line);
}
.caso:last-child {
    border-bottom: 1px solid var(--c-line);
}

/* Etichetta verticale tipografica a sinistra */
.caso__num {
    position: absolute;
    top: var(--sp-6);
    left: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: var(--c-terracotta);
    line-height: 1;
}
.caso__tag {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: 0 50%;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--c-ink-mute);
    white-space: nowrap;
    /* Su mobile la riposizioniamo in flusso normale (in media query) */
}

.caso__head { margin-bottom: var(--sp-4); }


/* ============================================================
   CASO MEDIA — confronto "Prima / Dopo"
   ------------------------------------------------------------
   Due immagini affiancate con un'etichetta tipografica italic
   in alto a sinistra. Il box vuoto ha un fondo cream-deep così
   anche se l'immagine non è ancora stata caricata in
   assets/portfolio/, la composizione resta coerente.
   ============================================================ */

.caso__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.caso__media-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-cream-deep);
}

.caso__media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out);
}
.caso__media-item:hover img {
    transform: scale(1.04);
}

/* Etichetta "Prima" / "Dopo" in alto a sinistra */
.caso__media-label {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    padding: 0.4rem 0.9rem;
    background: rgba(245, 239, 232, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--c-terracotta);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    border-radius: 999px;
    z-index: 2;
    letter-spacing: 0.02em;
}

.caso__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--sp-4);
}
.caso__col p {
    color: var(--c-ink-soft);
    line-height: 1.65;
    font-size: 0.95rem;
}

.caso__list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink);
    font-size: 0.95rem;
}
.caso__list li:first-child { border-top: 1px solid var(--c-line); }

.caso__kpi {
    display: grid;
    gap: 1rem;
}
.caso__kpi li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--c-line);
}
.caso__kpi li strong {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--c-terracotta);
    min-width: 4rem;
    line-height: 1;
}
.caso__kpi li span {
    font-size: 0.85rem;
    color: var(--c-ink-soft);
    line-height: 1.4;
}


/* ============================================================
   20. CORSI
   ============================================================ */

.section--corsi { background: var(--c-cream-warm); }

.corsi__intro,
.corsi__outro {
    max-width: 70ch;
    margin: 0 auto var(--sp-6);
    text-align: center;
}
/* L'outro vive sotto al carosello: invertiamo i margini verticali
   così resta separato dal carosello sopra e dal next-page sotto. */
.corsi__outro {
    margin: var(--sp-6) auto 0;
}
.corsi__intro p,
.corsi__outro p {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--c-ink);
}
.corsi__intro em,
.corsi__outro em { color: var(--c-terracotta); font-style: italic; }

.corso-card {
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-5);
    background: var(--c-cream);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.corso-card__media {
    position: relative;
    overflow: hidden;
    /* L'immagine deve riempire tutta l'altezza della card: niente
       aspect-ratio fisso, così la colonna media segue il body in
       altezza grazie al comportamento "stretch" del display grid.
       min-height tiene comunque una soglia minima per le card con
       body molto corto (es. layout mobile). */
    min-height: 26rem;
}
.corso-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease-out);
}
.corso-card:hover .corso-card__media img { transform: scale(1.04); }

.corso-card__chip {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    padding: 0.4rem 0.8rem;
    background: var(--c-cream);
    color: var(--c-terracotta);
    border-radius: 999px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 600;
}

.corso-card__body {
    padding: var(--sp-5) var(--sp-4);
}
.corso-card__body h3 {
    margin: 0.6rem 0 var(--sp-3);
}
.corso-card__body p {
    color: var(--c-ink-soft);
    line-height: 1.7;
    font-size: 0.96rem;
    margin-bottom: var(--sp-4);
}

/* ------------------------------------------------------------
   Card corso — varianti aggiunte con il redesign
   ------------------------------------------------------------ */

/* Indice numerico sovrapposto in basso a destra sull'immagine:
   ha un ruolo puramente decorativo (simile alla numerazione
   tipografica già usata nei page-hero) e dialoga con il
   counter dello slideshow in homepage. */
.corso-card__index {
    position: absolute;
    right: 1rem;
    bottom: 0.4rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(3.2rem, 8vw, 5.4rem);
    line-height: 1;
    color: var(--c-cream);
    opacity: 0.95;
    pointer-events: none;
    /* Leggera ombra per garantire leggibilità su tutte le foto */
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

/* Lead: paragrafo introduttivo in serif, più "presente" del
   testo dei paragrafi successivi. Sovrascrive il colore di
   default dei <p> dentro la card. */
.corso-card__lead {
    color: var(--c-ink) !important;
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.45;
    margin-bottom: var(--sp-4) !important;
}

/* Meta-info: griglia con i parametri pratici del corso
   (durata, livello, formato, sede). Bordi orizzontali sopra
   e sotto per separare il blocco dal resto del contenuto. */
.corso-card__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    margin: 0 0 var(--sp-4);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.corso-card__meta-item dt {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    margin-bottom: 0.35rem;
}
.corso-card__meta-item dd {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--c-ink);
    line-height: 1.25;
}

/* Titoletto sopra la lista degli highlights ("Cosa imparerai") */
.corso-card__list-title {
    font-size: 0.72rem !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-ink-soft) !important;
    margin: 0 0 var(--sp-2) !important;
    line-height: 1.2 !important;
}

/* Lista highlights: bullet custom con trattino in terracotta */
.corso-card__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
    display: grid;
    gap: 0.55rem;
}
.corso-card__highlights li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--c-ink);
    line-height: 1.5;
    font-size: 0.95rem;
}
.corso-card__highlights li::before {
    content: "—";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--c-terracotta);
    font-weight: 600;
}

/* Su schermi stretti la meta-grid passa a 2 colonne per
   evitare colonne troppo compresse e mantenere la leggibilità. */
@media (max-width: 720px) {
    .corso-card__meta { grid-template-columns: repeat(2, 1fr); }
    .corso-card__index { font-size: 3rem; right: 0.8rem; bottom: 0.2rem; }
}


/* ============================================================
   20-bis. CAROSELLO CORSI
   ------------------------------------------------------------
   Track scrollabile orizzontalmente con card compatte in
   verticale. Lo scroll-snap-x rende lo swipe touch naturale,
   mentre le due frecce laterali permettono la navigazione
   con click. Il comportamento JS vive in inizializzaCorsiSlider.
   ============================================================ */

.corsi-slider {
    position: relative;
    /* Padding orizzontale interno per lasciare spazio alle frecce
       senza far uscire il primo/ultimo elemento dal viewport */
    padding: 0 var(--sp-4);
    margin: 0 auto;
    /* Allargato per occupare praticamente tutta la fascia centrale
       della pagina: lascia il carosello respirare e le card non
       si compattano a centro pagina. */
    max-width: 1700px;
    width: 100%;
}

/* Sulla pagina corsi rilassiamo il max-width del .page-content
   (di base 1400px) così il carosello può estendersi davvero in
   larghezza. L'intro testuale ha già un suo max-width più stretto
   quindi non viene impattato. */
.page-corsi .page-content {
    max-width: 1700px;
}

/* Track: lista orizzontale che scorre */
.corsi-slider__track {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Padding verticale per non tagliare l'ombra delle card */
    padding: 0.4rem 0.2rem;
    /* Nasconde la scrollbar mantenendo lo scroll funzionale */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.corsi-slider__track::-webkit-scrollbar { display: none; }

/* Frecce di navigazione: cerchi che galleggiano sopra il track,
   con look coerente con i bottoni ghost del sito. */
.corsi-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    color: var(--c-ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-soft);
    transition: background var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft),
                opacity var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-soft);
    z-index: 2;
}
.corsi-slider__btn svg { width: 18px; height: 18px; }
.corsi-slider__btn:hover {
    background: var(--c-ink);
    color: var(--c-cream);
}
.corsi-slider__btn--prev { left: -0.4rem; }
.corsi-slider__btn--next { right: -0.4rem; }

/* Stato disabilitato (gestito da JS in base alla posizione di scroll) */
.corsi-slider__btn[disabled],
.corsi-slider__btn.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}


/* ============================================================
   20-ter. CARD CORSO — variante POSTER (per il carosello)
   ------------------------------------------------------------
   Layout "manifesto": immagine full-bleed che riempie tutta la
   card, gradient scuro graduato dal centro verso il basso,
   testo bianco sovrapposto in basso. In alto a sx il chip di
   stato, in alto a dx un numero progressivo decorativo.
   La card intera è cliccabile tramite .corso-card__link.
   ============================================================ */

.corso-card--poster {
    /* Reset rispetto alla variante feature (grid 2 colonne):
       qui la card è un blocco singolo con immagine in fondo. */
    display: block;
    flex: 0 0 clamp(260px, 26vw, 320px);
    width: clamp(260px, 26vw, 320px);
    aspect-ratio: 3/4;
    max-width: none;
    min-height: 0;
    padding: 0;
    background: var(--c-ink);
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* Niente ombra sotto le card: look più pulito e piatto,
       coerente con lo sfondo cream della sezione. */
    box-shadow: none;
    scroll-snap-align: start;
    position: relative;
    transition: transform var(--t-base) var(--ease-soft);
}
.corso-card--poster:hover {
    transform: translateY(-4px);
}

/* Link wrapper che copre l'intera area cliccabile */
.corso-card__link {
    position: absolute;
    inset: 0;
    display: block;
    color: var(--c-cream);
    text-decoration: none;
}

/* Immagine di copertina full-bleed */
.corso-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease-out);
}
.corso-card--poster:hover .corso-card__img {
    transform: scale(1.06);
}

/* Overlay: gradient scuro che parte trasparente in alto e
   diventa quasi opaco in basso per dare leggibilità al testo. */
.corso-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 18, 16, 0)   0%,
        rgba(20, 18, 16, 0)   30%,
        rgba(20, 18, 16, 0.45) 60%,
        rgba(20, 18, 16, 0.88) 100%);
    pointer-events: none;
}

/* Chip di stato in alto a sx: testo + dot davanti.
   Sfondo semi-trasparente molto leggero per integrarsi al poster. */
.corso-card--poster .corso-card__chip {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 600;
    line-height: 1;
    z-index: 2;
}
.corso-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Numero progressivo decorativo in alto a destra */
.corso-card__num {
    position: absolute;
    top: 0.4rem;
    right: 1rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(3rem, 5.5vw, 4.2rem);
    line-height: 1;
    color: var(--c-cream);
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Caption: blocco di testo ancorato in basso */
.corso-card__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.2rem 1.2rem 1.2rem;
    z-index: 2;
    color: var(--c-cream);
}

/* Eyebrow piccolo sopra il titolo, sempre chiaro per
   leggibilità sul gradient scuro. */
.corso-card__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-cream);
    opacity: 0.8;
}

/* Titolo del corso: serif italic per la parola chiave (em),
   stesso ritmo dei display del sito ma dimensione ridotta. */
.corso-card__title {
    margin: 0 0 0.7rem;
    font-family: var(--font-serif);
    font-weight: 350;
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--c-cream);
}
.corso-card__title em {
    font-style: italic;
    color: var(--c-rose);
}

/* Meta inline: lista orizzontale di tre voci separate da
   punti color terracotta. Compare sopra la freccia in basso. */
.corso-card__meta-inline {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-cream);
    opacity: 0.82;
}
.corso-card__meta-inline li {
    position: relative;
}
.corso-card__meta-inline li + li::before {
    content: "·";
    position: absolute;
    left: -0.5rem;
    color: var(--c-rose);
}

/* Freccia "Scopri" in basso: solo testo + freccia, niente
   bottone pill. Sposta la freccia in avanti al passaggio. */
.corso-card__arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--c-cream);
}
.corso-card__arrow svg {
    width: 16px;
    height: 16px;
    transition: transform var(--t-fast) var(--ease-soft);
}
.corso-card--poster:hover .corso-card__arrow svg {
    transform: translateX(4px);
}

/* Varianti chip: cambia solo il colore del dot/testo */
.corso-card__chip--live  { color: var(--c-terracotta); }
.corso-card__chip--soon  { color: var(--c-ink-soft); }


/* ============================================================
   20-quater. CARD CORSO — variante FLIP (solo card "Inglese")
   ------------------------------------------------------------
   Al click sulla freccia la card ruota su Y mostrando il retro
   con la descrizione completa del corso. Il flip è puro CSS
   (transform 3D), il toggle della classe .is-flipped è gestito
   da JS in inizializzaCardFlip.
   ============================================================ */

.corso-card--flip {
    /* Sfondo trasparente: il colore lo danno le due facce */
    background: transparent;
    /* Prospettiva per dare profondità alla rotazione */
    perspective: 1400px;
}

/* Inner: il contenitore che effettivamente ruota.
   Position absolute così le due facce si sovrappongono. */
.corso-card__inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.7, 0, 0.3, 1);
    will-change: transform;
}

/* Stato girato (la classe la mette il JS al click) */
.corso-card--flip.is-flipped .corso-card__inner {
    transform: rotateY(180deg);
}

/* Le due facce: identiche per dimensioni e angoli arrotondati,
   con backface-visibility hidden per non vedere il "rovescio". */
.corso-card__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* pointer-events ESPLICITI: alcuni browser, anche con
   backface-visibility:hidden, continuano a far ricevere click alla
   faccia "girata dietro". Senza queste regole il front intercettava
   ogni click anche quando la card era flippata, bloccando i link
   sul back (es. il bottone "Prenota corso"). */
.corso-card--flip .corso-card__face--back {
    pointer-events: none;       /* di default il retro non è cliccabile */
}
.corso-card--flip.is-flipped .corso-card__face--front {
    pointer-events: none;       /* quando flip → front dietro = inerte */
}
.corso-card--flip.is-flipped .corso-card__face--back {
    pointer-events: auto;       /* quando flip → back davanti = cliccabile */
}

/* Il retro parte già ruotato di 180°: così quando l'inner ruota
   l'intera card di 180°, il retro arriva dritto verso l'utente. */
.corso-card__face--back {
    transform: rotateY(180deg);
    background: var(--c-ink);
    color: var(--c-cream);
    padding: 1.4rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Body del retro: testo centrato verticalmente */
.corso-card__back-body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Eyebrow sul retro: piccola etichetta sopra il titolo */
.corso-card__face--back .corso-card__eyebrow {
    margin: 0;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-cream);
    opacity: 0.75;
}

/* Titolo sul retro: stesso stile del front ma con colore chiaro */
.corso-card__face--back .corso-card__title {
    margin: 0;
    color: var(--c-cream);
}

/* Descrizione: testo del corso, font piccolo e line-height
   compatto per stare nell'altezza della card senza scroll. */
.corso-card__desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--c-cream);
    opacity: 0.9;
}

/* Freccia "Prenota corso" sul retro: come link sotto al testo */
.corso-card__face--back .corso-card__arrow {
    margin-top: 0.4rem;
    text-decoration: none;
}

/* Bottone "×" in alto a destra per tornare alla copertina */
.corso-card__close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--c-cream);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--t-fast) var(--ease-soft);
    z-index: 3;
}
.corso-card__close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.corso-card__close svg {
    width: 14px;
    height: 14px;
}

/* Variante "arrow come button": rimuove gli stili di default
   del <button> perché il pulsante sul front deve restare
   visivamente identico a una freccia di testo. */
.corso-card__arrow--btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

/* Sulla card flippata disabilitiamo il translate al hover
   per non far "saltare" l'animazione di rotazione. */
.corso-card--flip:hover {
    transform: none;
}
.corso-card--flip:hover .corso-card__img {
    transform: none;
}

/* Su mobile riduciamo un filo i padding del retro per
   far stare comodamente la descrizione. */
@media (max-width: 720px) {
    .corso-card__face--back { padding: 1.1rem 1rem 1rem; }
    .corso-card__desc { font-size: 0.82rem; line-height: 1.45; }
}

/* Adattamenti mobile */
@media (max-width: 720px) {
    .corsi-slider { padding: 0 var(--sp-3); }
    .corso-card--poster {
        flex: 0 0 78vw;
        width: 78vw;
    }
    .corso-card__num { font-size: 2.6rem; right: 0.8rem; }
    .corso-card__caption { padding: 1rem 1rem 1rem; }
    .corso-card__title { font-size: 1.25rem; }
    .corsi-slider__btn {
        width: 40px;
        height: 40px;
    }
    .corsi-slider__btn svg { width: 16px; height: 16px; }
    .corsi-slider__btn--prev { left: 0; }
    .corsi-slider__btn--next { right: 0; }
}


/* ============================================================
   21. BLOG — Articoli
   ============================================================ */

.section--blog {
    background: var(--c-cream);
}

.articolo {
    max-width: 1400px;
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--sp-5);
    align-items: start;
}
.articolo:last-child { border-bottom: 1px solid var(--c-line); }
.articolo--alt { background: var(--c-cream-warm); margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }

.articolo__head h3 { margin-top: var(--sp-2); }
.articolo__body p {
    color: var(--c-ink-soft);
    line-height: 1.75;
    margin-bottom: var(--sp-3);
    font-size: 1rem;
}
.articolo__body em { color: var(--c-terracotta); font-style: italic; }
.articolo__body .lead {
    color: var(--c-terracotta);
    font-family: var(--font-serif);
    font-style: italic;
    margin-bottom: var(--sp-3);
}

.articolo__h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 1.35rem;
    margin: var(--sp-4) 0 var(--sp-2);
    color: var(--c-ink);
}
.articolo__cta {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
    font-size: 1.15rem;
    color: var(--c-terracotta);
    font-family: var(--font-serif);
    line-height: 1.4;
}


/* ============================================================
   21-bis. BLOG ACCORDION
   ------------------------------------------------------------
   Lista articoli del blog: ogni voce è collassabile. In stato
   chiuso mostra solo thumbnail + categoria + titolo + icona +/−.
   Al click si espande il corpo completo dell'articolo, con una
   transizione morbida ottenuta tramite la tecnica grid-template-rows
   (supportata da Chrome 117+, Firefox 119+, Safari 17.4+).
   ============================================================ */

.blog-list {
    max-width: 1400px;
    margin: 0 auto;
    /* La lista non ha bullet né padding: i bordi tra entry creano
       da soli il ritmo verticale. */
}

.blog-entry {
    border-top: 1px solid var(--c-line);
}
.blog-entry:last-child {
    border-bottom: 1px solid var(--c-line);
}
/* L'entry aperta resta trasparente: niente sfondo evidenziato,
   l'unico feedback visivo dell'apertura sono l'icona "+"/"−"
   e il body che si espande. */

/* HEADER cliccabile: layout a 4 colonne (numero, thumb, meta, icona) */
.blog-entry__head {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 1.6rem 0;
    display: grid;
    grid-template-columns: 3rem 88px minmax(0, 1fr) 3rem;
    gap: var(--sp-3);
    align-items: center;
    color: var(--c-ink);
    transition: padding var(--t-base) var(--ease-soft);
}
.blog-entry__head:hover {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.blog-entry__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--c-terracotta);
    line-height: 1;
}

.blog-entry__thumb {
    width: 88px;
    height: 110px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-cream-deep);
    flex-shrink: 0;
}
.blog-entry__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}
.blog-entry__head:hover .blog-entry__thumb img {
    transform: scale(1.08);
}

.blog-entry__meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.blog-entry__cat {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    font-weight: 500;
}
.blog-entry__title {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    /* Italic accent in lowercase, in linea con tutto il resto */
}
.blog-entry__title em {
    font-style: italic;
    color: var(--c-terracotta);
}

/* Icona +/−: due linee SVG. Quella verticale ruota di 90° per
   diventare un solo segno orizzontale (=) quando l'entry è aperta. */
.blog-entry__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    display: grid;
    place-items: center;
    color: var(--c-ink);
    transition: background var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft),
                border-color var(--t-fast) var(--ease-soft),
                transform var(--t-base) var(--ease-soft);
    flex-shrink: 0;
    justify-self: end;
}
.blog-entry__icon svg {
    width: 18px;
    height: 18px;
}
/* La linea verticale dell'icona +: ruota e svanisce quando aperta,
   trasformando il "+" in "−" */
.blog-entry__icon svg line:first-child {
    transform-origin: center;
    transition: transform var(--t-base) var(--ease-soft),
                opacity   var(--t-fast) var(--ease-soft);
}
.blog-entry.is-open .blog-entry__icon {
    background: var(--c-terracotta);
    color: var(--c-cream);
    border-color: var(--c-terracotta);
    transform: rotate(90deg);
}
.blog-entry.is-open .blog-entry__icon svg line:first-child {
    opacity: 0;
}

/* BODY collassabile.
   ------------------------------------------------------------------
   In stato chiuso il body è completamente nascosto (max-height 0):
   l'utente vede solo immagine e titolo nell'header. Al click il JS
   misura scrollHeight e imposta max-height al valore esatto del
   contenuto, ottenendo un'animazione perfettamente proporzionata
   anche per articoli molto lunghi.
   ------------------------------------------------------------------ */
.blog-entry__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s var(--ease-soft);
}

/* Quando l'entry è aperta, il body cresce. La max-height viene
   impostata inline da script.js (scrollHeight + piccolo buffer);
   il valore qui sotto è solo un fallback abbondante nel caso il
   JS sia disabilitato, in modo che il contenuto resti accessibile. */
.blog-entry.is-open .blog-entry__body {
    max-height: 4000px;
}

.blog-entry__inner {
    padding-top: var(--sp-2);
    padding-left: calc(3rem + var(--sp-3) + 88px + var(--sp-3));
    padding-bottom: var(--sp-5);
    max-width: 75ch;
}
.blog-entry__inner p {
    color: var(--c-ink-soft);
    line-height: 1.75;
    margin-bottom: var(--sp-3);
    font-size: 1rem;
}
.blog-entry__inner em {
    font-style: italic;
    color: var(--c-terracotta);
}
.blog-entry__inner .lead {
    color: var(--c-terracotta);
    font-family: var(--font-serif);
    font-style: italic;
    margin-bottom: var(--sp-3);
}
.blog-entry__inner .articolo__h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 1.3rem;
    margin: var(--sp-4) 0 var(--sp-2);
    color: var(--c-ink);
}
.blog-entry__inner .articolo__cta {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
    font-size: 1.1rem;
    color: var(--c-terracotta);
    font-family: var(--font-serif);
    line-height: 1.4;
}


/* ============================================================
   22. CONTATTI
   ============================================================ */

.section--contatti {
    background: var(--c-dark);
    color: var(--c-cream);
    padding: var(--sp-7) var(--gutter);
}

.contatti__inner {
    max-width: 1400px;
    margin: 0 auto;
}

.contatti__head {
    margin-bottom: var(--sp-6);
}
.contatti__head .eyebrow { margin-bottom: var(--sp-3); }

.eyebrow--on-dark { color: rgba(245, 239, 232, 0.55); }

.contatti__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    /* stretch: i due box (form a sx e info a dx) prendono la stessa
       altezza, così sono visivamente allineati su entrambe le linee. */
    align-items: stretch;
}

.contatti__form {
    display: grid;
    gap: var(--sp-3);
    background: var(--c-dark-soft);
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--radius-xl);
    /* Contenuto allineato in alto (lascia la CTA dove naturalmente cade) */
    align-content: start;
}
.field {
    display: grid;
    gap: 0.5rem;
}
.field__label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(245, 239, 232, 0.55);
    font-weight: 500;
}
.field input,
.field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(245, 239, 232, 0.25);
    padding: 0.7rem 0;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--c-cream);
    outline: none;
    resize: vertical;
    transition: border-color var(--t-fast) var(--ease-soft);
}
.field input::placeholder,
.field textarea::placeholder {
    color: rgba(245, 239, 232, 0.4);
    font-style: italic;
}
.field input:focus,
.field textarea:focus {
    border-color: var(--c-rose);
}
.contatti__form .cta { justify-self: start; margin-top: var(--sp-2); }

/*
   Il blocco "info + mappa" condivide ora lo stesso "wrapper" visivo del
   form: stesso background scuro, stesso padding, stesso radius. In questo
   modo le due colonne hanno la stessa "scatola" e si allineano sia in
   alto che ai lati del titolo.
*/
.contatti__info {
    display: grid;
    gap: var(--sp-3);
    background: var(--c-dark-soft);
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--radius-xl);
    align-content: start;
}
.contatti__list {
    margin: 0;
    border-top: 1px solid rgba(245, 239, 232, 0.15);
}
.contatti__list li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(245, 239, 232, 0.15);
    align-items: baseline;
}
.contatti__list li > span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(245, 239, 232, 0.5);
}
.contatti__list li > a {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--c-cream);
    line-height: 1.4;
    transition: color var(--t-fast) var(--ease-soft);
}
.contatti__list li > a:hover { color: var(--c-rose); }

.contatti__map {
    margin-top: var(--sp-4);
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--c-dark-soft);
    /* Filtro per uniformare la mappa al mood scuro/caldo */
    filter: grayscale(0.4) contrast(0.92) saturate(0.7) sepia(0.1);
}
.contatti__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* ============================================================
   21-ter. FAQ — Sezione domande frequenti
   ------------------------------------------------------------
   Lista di accordion verticali. Stesso paradigma del blog
   (header cliccabile + body collassabile via max-height
   calcolata in JS), ma con layout più semplice: numero a
   sinistra, domanda al centro, icona +/− a destra.
   ============================================================ */

.faq-section {
    background: var(--c-cream);
    padding: var(--sp-7) var(--gutter);
    border-top: 1px solid var(--c-line);
}

.faq-section__head {
    text-align: center;
    margin-bottom: var(--sp-6);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.faq-section__head .eyebrow {
    margin-bottom: var(--sp-3);
}
.faq-section__title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 350;
    line-height: 1.05;
    color: var(--c-ink);
    letter-spacing: -0.015em;
}
.faq-section__title em {
    font-style: italic;
    color: var(--c-terracotta);
}
.faq-section__sub {
    margin-top: var(--sp-3);
    color: var(--c-ink-soft);
    font-size: var(--fs-lead);
    line-height: 1.55;
}

.faq-list {
    max-width: 1100px;
    margin: 0 auto;
}

.faq {
    border-top: 1px solid var(--c-line);
}
.faq:last-child {
    border-bottom: 1px solid var(--c-line);
}
/* L'accordion aperto resta trasparente: niente sfondo evidenziato,
   l'unica differenza visiva è l'icona "+" che diventa "−" e
   l'apertura del corpo della FAQ. */

/* HEADER cliccabile della singola FAQ */
.faq__head {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 1.4rem 0;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    gap: var(--sp-3);
    align-items: center;
    color: var(--c-ink);
    transition: padding var(--t-base) var(--ease-soft);
}
.faq__head:hover {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.faq__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--c-terracotta);
    line-height: 1;
}

.faq__question {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.faq__question em {
    font-style: italic;
    color: var(--c-terracotta);
}

/* Icona +/− identica a quella del blog accordion: la linea
   verticale ruota e svanisce per trasformare il "+" in "−". */
.faq__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    display: grid;
    place-items: center;
    color: var(--c-ink);
    transition: background var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft),
                border-color var(--t-fast) var(--ease-soft),
                transform var(--t-base) var(--ease-soft);
    justify-self: end;
}
.faq__icon svg {
    width: 16px;
    height: 16px;
}
.faq__icon svg line:first-child {
    transform-origin: center;
    transition: transform var(--t-base) var(--ease-soft),
                opacity   var(--t-fast) var(--ease-soft);
}
.faq.is-open .faq__icon {
    background: var(--c-terracotta);
    color: var(--c-cream);
    border-color: var(--c-terracotta);
    transform: rotate(90deg);
}
.faq.is-open .faq__icon svg line:first-child {
    opacity: 0;
}

/* BODY collassabile.
   Stesso meccanismo del blog: max-height 0 in chiusura, valore
   esatto inline da script.js in apertura. */
.faq__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s var(--ease-soft);
}
.faq.is-open .faq__body {
    /* Fallback se JS è disabilitato — abbondante per ogni risposta */
    max-height: 800px;
}
.faq__inner {
    padding: 0 calc(3rem + var(--sp-3)) var(--sp-4);
    max-width: 70ch;
}
.faq__inner p {
    color: var(--c-ink-soft);
    line-height: 1.7;
    font-size: 1rem;
}
.faq__inner em {
    font-style: italic;
    color: var(--c-terracotta);
}


/* ============================================================
   22-bis. LOGHI CLIENTI — dual marquee
   ------------------------------------------------------------
   Due nastri di loghi che scorrono in direzioni opposte. Il loop
   è seamless: la lista è duplicata in HTML e il track viene
   traslato di -50% (o da -50% a 0 nel verso opposto), così la
   seconda metà entra in scena prima che la prima esca, senza
   stacchi visibili.
   ============================================================ */

.logos {
    padding: var(--sp-7) 0;
    background: var(--c-cream-warm);
    border-top: 1px solid var(--c-line);
    overflow: hidden;
}

.logos__head {
    text-align: center;
    margin-bottom: var(--sp-5);
    padding: 0 var(--gutter);
}
.logos__head .eyebrow {
    margin-bottom: var(--sp-3);
}
.logos__title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 350;
    line-height: 1.15;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.logos__title em {
    font-style: italic;
    color: var(--c-terracotta);
}

/* Singola riga: contenitore con overflow hidden e velo ai bordi */
.logos__row {
    overflow: hidden;
    margin: var(--sp-3) 0;
    /* Maschera ai due lati: i loghi compaiono e svaniscono dolcemente,
       evitando il bordo netto che spezzerebbe il senso di "infinito". */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%);
}

/* Track: flex container con larghezza naturale (max-content) per
   contenere tutti i loghi affiancati. La animation lo trasla. */
.logos__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    width: max-content;
    padding: 0 clamp(1.25rem, 5vw, 5rem);
    /* Animazione: 50 secondi per un giro completo. La velocità è
       calibrata per essere percepibile ma calma, in linea col mood. */
    animation: logosScrollLeft 50s linear infinite;
    will-change: transform;
}

/* Direzione opposta */
.logos__row--reverse .logos__track {
    animation-name: logosScrollRight;
}

@keyframes logosScrollLeft {
    from { transform: translate3d(0, 0, 0); }
    /* -50% perché la lista è duplicata: a metà siamo allo stesso punto
       visivo dell'inizio, quindi il loop si chiude senza stacchi */
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes logosScrollRight {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.logos__track li {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logos__track img {
    height: clamp(48px, 6vw, 78px);
    width: auto;
    max-width: 220px;
    object-fit: contain;
    /* I loghi originali sono già nei toni del brand (rosa/magenta).
       Una leggera opacità li uniforma al mood editoriale. */
    opacity: 0.75;
    transition: opacity var(--t-fast) var(--ease-soft),
                transform var(--t-fast) var(--ease-soft);
}
.logos__track img:hover {
    opacity: 1;
    transform: scale(1.06);
}

/* Pausa dell'animazione al passaggio del mouse: lascia tempo
   all'utente di leggere un logo specifico. */
.logos__row:hover .logos__track {
    animation-play-state: paused;
}

/* Rispetto della preferenza utente: niente movimento se richiesto.
   La lista resta visibile ma statica (i loghi rimangono allineati). */
@media (prefers-reduced-motion: reduce) {
    .logos__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sp-3);
        width: 100%;
    }
    .logos__row {
        -webkit-mask-image: none;
                mask-image: none;
    }
}


/* ============================================================
   23. FOOTER
   ============================================================ */

.footer {
    background: var(--c-cream);
    padding: var(--sp-5) var(--gutter) var(--sp-3);
    overflow: hidden;
}
/* Wrapper del logo: centra l'immagine e mantiene la stessa spaziatura
   inferiore che separava il wordmark dal blocco legale. */
.footer__mark {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--sp-4);
    user-select: none;
}
/* Logo aziendale nel footer.
   Larghezza fluida per adattarsi al viewport, ma con un tetto massimo
   per evitare che diventi sproporzionato sui monitor grandi. */
.footer__logo {
    width: clamp(220px, 32vw, 420px);
    height: auto;
    display: block;
    /* Leggera trasparenza per integrarsi con il fondo crema del footer
       senza risultare troppo "stampato" sopra. */
    opacity: 0.92;
}
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
    font-size: 0.72rem;
    color: var(--c-ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.footer__legal { display: flex; gap: 0.6rem; align-items: center; }
.footer__legal a:hover { color: var(--c-terracotta); }
.footer__legal span { opacity: 0.5; }


/* ============================================================
   24. SCROLL REVEAL
   ============================================================
   Elementi con [data-reveal] partono opachi e leggermente sotto.
   Quando IntersectionObserver li intercetta, ricevono .is-revealed
   e si stabilizzano con un fade-up morbido.
   ============================================================ */

[data-reveal],
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--ease-out),
                transform 1s var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal].is-revealed,
[data-reveal-stagger].is-revealed > * {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.45s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.55s; }


/* ============================================================
   24-bis. PAGE HERO (header pagine interne)
   ------------------------------------------------------------
   Versione compatta dell'hero per le pagine interne:
   numerone gigante della sezione (01, 02, …), eyebrow, titolo
   serif italic e sottotitolo. Niente immagini di sfondo per
   non sovraffollare: la pagina interna parla con tipografia.
   ============================================================ */

.page-hero {
    position: relative;
    padding: calc(var(--sp-7) + 4rem) var(--gutter) var(--sp-6);
    background: var(--c-cream);
    overflow: hidden;
    border-bottom: 1px solid var(--c-line);
}
/* Hero "warm" e "accent": entrambi sul cream chiaro (bianco caldo
   del sito). In passato la variante --warm usava --c-cream-warm
   (#efe3d8), che virava sul rosato: l'abbiamo allineata al cream
   neutro per avere hero più pulite e luminose su tutto il sito. */
.page-hero--warm    { background: var(--c-cream); }
.page-hero--accent  { background: var(--c-cream); }

.page-hero__inner {
    max-width: 1400px;
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 3.2fr);
    gap: var(--sp-5);
    align-items: end;
}

.page-hero__num {
    font-family: var(--font-serif);
    font-size: clamp(4rem, 12vw, 11rem);
    font-weight: 300;
    font-style: italic;
    line-height: 0.85;
    color: var(--c-beige);
    letter-spacing: -0.04em;
    /* L'opacità un filo ridotta restituisce l'idea del "filigrana" */
    opacity: 0.85;
}
.page-hero__num span {
    /* Accento sottile sul punto tipografico finale */
    color: var(--c-terracotta);
}

.page-hero__copy .eyebrow {
    margin-bottom: var(--sp-3);
}
.page-hero__copy h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    font-weight: 350;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    font-variation-settings: "opsz" 144;
}
.page-hero__copy h1 em {
    font-style: italic;
    color: var(--c-terracotta);
}

.page-hero__lead {
    margin-top: var(--sp-3);
    max-width: 50ch;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--c-ink-soft);
}

/* Breadcrumb minimale: home › pagina */
.breadcrumb {
    position: absolute;
    top: 6.4rem;
    left: var(--gutter);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    z-index: 2;
}
.breadcrumb a {
    color: var(--c-ink-mute);
    transition: color var(--t-fast) var(--ease-soft);
}
.breadcrumb a:hover { color: var(--c-terracotta); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb__current { color: var(--c-ink); }


/* ============================================================
   24-ter. NEXT PAGE — pre-footer link alla pagina successiva
   ------------------------------------------------------------
   Card finale di ogni pagina interna che invita a proseguire
   nel viaggio. Gigantesco titolo serif italic, freccia diagonale.
   ============================================================ */

.next-page {
    padding: var(--sp-7) var(--gutter);
    background: var(--c-cream-warm);
    border-top: 1px solid var(--c-line);
}
.next-page--dark {
    background: var(--c-dark);
    color: var(--c-cream);
    border-top: none;
}
.next-page--dark .next-page__eyebrow,
.next-page--dark .next-page__hint { color: rgba(245, 239, 232, 0.55); }
.next-page--dark .next-page__title { color: var(--c-cream); }
.next-page--dark .next-page__title em { color: var(--c-rose); }
.next-page--dark .next-page__arrow { color: var(--c-cream); }

.next-page__link {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-5);
    align-items: center;
    color: inherit;
}
.next-page__eyebrow {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    margin-bottom: var(--sp-3);
}
.next-page__title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 350;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c-ink);
}
.next-page__title em {
    font-style: italic;
    color: var(--c-terracotta);
}
.next-page__hint {
    margin-top: var(--sp-3);
    font-size: 0.85rem;
    color: var(--c-ink-mute);
}

.next-page__arrow {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: grid;
    place-items: center;
    transition: transform var(--t-base) var(--ease-soft),
                background var(--t-base) var(--ease-soft),
                color var(--t-base) var(--ease-soft);
    flex-shrink: 0;
}
.next-page__arrow svg {
    width: 22px;
    height: 22px;
}
.next-page__link:hover .next-page__arrow {
    transform: rotate(-45deg) scale(1.05);
    background: var(--c-terracotta);
    color: var(--c-cream);
    border-color: var(--c-terracotta);
}


/* ============================================================
   24-quater. CONTENT — wrapper sezioni pagine interne
   ------------------------------------------------------------
   Le pagine interne non hanno il numerone e l'header split:
   il page-hero li sostituisce. Il contenuto scorre quindi più
   diretto, dentro un wrapper standard.
   ============================================================ */

.page-content {
    padding: var(--sp-6) var(--gutter);
    max-width: 1400px;
    margin: 0 auto;
}
.page-content--narrow {
    max-width: 1100px;
}

/* Su pagine interne, la prima sezione non ha border-top (lo dà la page-hero) */
.page-content > .service:first-child,
.page-content > .articolo:first-child,
.page-content > .caso:first-child {
    border-top: none;
    padding-top: 0;
}

/* Marquee leggero su pagine interne, senza bordi forti */
.page-marquee {
    overflow: hidden;
    background: var(--c-cream);
    padding: 1.2rem 0;
}
.page-marquee .marquee__track {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}


/* ============================================================
   24-quinquies. HOMEPAGE TEASERS — anteprime sezioni in home
   ------------------------------------------------------------
   In homepage non riportiamo l'intero contenuto delle pagine
   interne, ma blocchi "teaser" che invitano alla scoperta.
   ============================================================ */

.teasers {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-7) var(--gutter);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
}

.teaser {
    position: relative;
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--radius-xl);
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 360px;
    transition: transform var(--t-base) var(--ease-soft),
                box-shadow var(--t-base) var(--ease-soft),
                border-color var(--t-base) var(--ease-soft);
}
.teaser:hover {
    transform: translateY(-4px);
    border-color: var(--c-terracotta);
    box-shadow: var(--shadow-card);
}
.teaser__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--c-terracotta);
}
.teaser__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 350;
    line-height: 1.05;
    color: var(--c-ink);
    letter-spacing: -0.015em;
}
.teaser__title em {
    font-style: italic;
    color: var(--c-terracotta);
}
.teaser__lead {
    color: var(--c-ink-soft);
    line-height: 1.6;
    font-size: 0.96rem;
    margin-top: auto;
}
.teaser__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
    transition: color var(--t-fast) var(--ease-soft),
                gap var(--t-fast) var(--ease-soft);
}
.teaser__link svg {
    width: 14px; height: 14px;
    transition: transform var(--t-fast) var(--ease-soft);
}
.teaser:hover .teaser__link {
    color: var(--c-terracotta);
    gap: 0.9rem;
}
.teaser:hover .teaser__link svg {
    transform: translateX(4px);
}

/* Variante teaser "feature": occupa due colonne, con foto a sinistra */
.teaser--feature {
    grid-column: span 2;
    flex-direction: row;
    min-height: 420px;
    padding: 0;
}
.teaser--feature .teaser__media {
    flex: 0 0 50%;
    overflow: hidden;
    position: relative;
}
.teaser--feature .teaser__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease-out);
}
.teaser--feature:hover .teaser__media img { transform: scale(1.04); }
.teaser--feature .teaser__copy {
    padding: var(--sp-5) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1 1 50%;
}


/* ============================================================
   24-sexies. TEASER ROW — riga editoriale grande in homepage
   ------------------------------------------------------------
   Una "riga" che alterna copy + foto a 50/50, in versione grande
   per richiamare le sezioni principali. La direzione (foto a
   sinistra o destra) viene invertita con --reverse.
   ============================================================ */

.section--teaser {
    background: var(--c-cream);
}
.section--teaser-warm {
    background: var(--c-cream-warm);
}

.teaser-row {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: center;
}
.teaser-row--reverse .teaser-row__copy   { order: 2; }
.teaser-row--reverse .teaser-row__figure { order: 1; }

.teaser-row__copy {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    align-items: flex-start;
}
.teaser-row__copy .display { margin-bottom: var(--sp-2); }

.teaser-row__lead {
    color: var(--c-ink-soft);
    line-height: 1.7;
    max-width: 50ch;
    font-size: 1rem;
}
.teaser-row__sub {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-style: italic;
    color: var(--c-terracotta);
    line-height: 1.2;
}

.teaser-row__figure {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-l);
    overflow: hidden;
}
.teaser-row__figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease-out);
}
.teaser-row__figure:hover img { transform: scale(1.04); }


/* ============================================================
   24-septies. SLIDESHOW (carousel a cross-fade)
   ------------------------------------------------------------
   Le slide sono tutte sovrapposte in posizione assoluta. Quella
   "is-active" arriva a opacity 1 con un piccolo zoom-in di 1.05x
   (effetto Ken Burns morbido), le altre sono nascoste a opacity 0.
   Cross-fade lento (1.4s) per restare in linea con il mood
   editoriale calmo del resto del sito.
   ============================================================ */

.slideshow {
    /* Eredita aspect-ratio e border-radius da .teaser-row__figure.
       Aggiunge solo background per evitare lampi bianchi durante
       il caricamento delle foto. */
    background: var(--c-cream-deep);
}
.slideshow__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    /* Quando una slide è inattiva resta sotto, leggermente zoomata.
       Quando diventa attiva, si rivela e torna allo zoom 1: l'effetto
       è un Ken Burns molto morbido. */
    transition: opacity 1.4s var(--ease-soft),
                transform 6s var(--ease-out);
    pointer-events: none;
}
.slideshow__slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Hover dell'intero figure: blocco lo zoom default per non sovrapporlo
   al transform interno della slide attiva. Il container resta fermo. */
.slideshow:hover .slideshow__slide.is-active { transform: scale(1.02); }

/* Counter numerico tipografico in basso a destra */
.slideshow__counter {
    position: absolute;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.5rem 0.85rem;
    background: rgba(245, 239, 232, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--c-ink);
    letter-spacing: 0.02em;
}
.slideshow__current {
    font-style: italic;
    color: var(--c-terracotta);
    font-weight: 500;
}
.slideshow__total {
    color: var(--c-ink-mute);
    font-size: 0.78rem;
}

/* Dots di navigazione: piccola riga sotto al counter, allineati a destra */
.slideshow__dots {
    position: absolute;
    bottom: 1.4rem;
    left: 1.2rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    background: rgba(245, 239, 232, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
}
.slideshow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(45, 42, 38, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--t-fast) var(--ease-soft),
                width var(--t-base) var(--ease-soft);
}
.slideshow__dot:hover {
    background: rgba(45, 42, 38, 0.55);
}
.slideshow__dot.is-active {
    background: var(--c-terracotta);
    /* Il dot attivo si allunga in una pillola — è la firma del controllo */
    width: 22px;
    border-radius: 999px;
}


/* ============================================================
   25. RESPONSIVE — mobile first refinement
   ------------------------------------------------------------
   Tipografia e layout già fluidi via clamp(). Qui sistemiamo
   breakpoint specifici per la composizione.
   ============================================================ */

@media (max-width: 1100px) {
    .hero {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .hero__lead { max-width: 50ch; }
    .hero__image {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
                mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
    }

    .section__head--split {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        align-items: start;
    }

    .conosciamoci__body,
    .dual-block,
    .intro-grid,
    .data-block,
    .corso-card,
    .articolo {
        grid-template-columns: 1fr;
    }
    .dual-block--reverse .dual-block__item,
    .dual-block--reverse .dual-block__figure { order: initial; }

    .data-block__photo { position: static; }

    .valori__grid    { grid-template-columns: repeat(2, 1fr); }
    .fasi            { grid-template-columns: 1fr; }
    .caso__grid      { grid-template-columns: 1fr; }

    .service { grid-template-columns: 1fr; gap: var(--sp-2); }
    .service > h3 { margin-bottom: var(--sp-3); }

    .end-cta { grid-template-columns: 1fr; gap: var(--sp-3); }

    .contatti__grid { grid-template-columns: 1fr; }

    /* Page hero e teasers diventano monocolonna sotto i 1100px */
    .page-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .teasers { grid-template-columns: 1fr; }
    .teaser--feature {
        grid-column: span 1;
        flex-direction: column;
    }
    .teaser--feature .teaser__media { flex: 0 0 auto; aspect-ratio: 16/10; }

    .next-page__link {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }

    /* Teaser-row monocolonna */
    .teaser-row {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .teaser-row--reverse .teaser-row__copy,
    .teaser-row--reverse .teaser-row__figure { order: initial; }
    .teaser-row__figure { aspect-ratio: 16/10; }
}

@media (max-width: 760px) {
    /* ============================================================
       MOBILE — ridefinizione globale dei token di spacing.
       Riducendo le variabili al :root, tutta la pagina diventa
       più compatta in modo coerente, senza dover toccare ogni
       sezione una per una. Le sezioni che usano sp-7/sp-6 per
       il padding-y diventano automaticamente più ariose ma
       proporzionate a uno schermo da 380-760px.
       ============================================================ */
    :root {
        --sp-7: 4.5rem;   /* da 9rem    → metà */
        --sp-6: 3.5rem;   /* da 6rem    */
        --sp-5: 2.5rem;   /* da 4rem    */
        --sp-4: 1.75rem;  /* da 2.5rem  */
        --sp-3: 1.1rem;   /* da 1.5rem  */
        --gutter: 1.25rem;
    }

    .nav__menu { display: none; }
    .nav__cta { display: none; }
    .nav__hamburger { display: flex; }

    .nav {
        grid-template-columns: 1fr auto;
        gap: 0;
        padding: 1rem var(--gutter);
    }
    /* Logo leggermente più piccolo su tablet */
    .nav__logo { height: 32px; }

    /*
       HERO HOMEPAGE — su mobile la cover prende TUTTA l'altezza dello
       schermo (100dvh = dynamic viewport, compensa la barra di Safari).
       Il video di copertina è full-bleed dietro al testo; un overlay
       gradient sottile aumenta il contrasto del titolo/lead in primo
       piano senza coprire il video.
    */
    .hero {
        display: flex;
        flex-direction: column;
        /* Titolo in alto, lead/CTA in basso: il video resta protagonista
           dello spazio centrale. */
        justify-content: space-between;
        /* Su desktop il .hero ha align-items: end (per allineare le due
           colonne del grid in basso); in colonna mobile questo manderebbe
           i children sul cross-axis = destra. Resetto a stretch così
           inner, lead e cta partono tutti dal bordo sinistro del padding. */
        align-items: stretch;
        padding: 6rem var(--gutter) var(--sp-4);
        min-height: 100vh;
        min-height: 100dvh;
        position: relative;
        /* Sfondo neutro nel caso il video non carichi */
        background: var(--c-cream-deep);
    }
    .hero__meta--tl,
    .hero__meta--tr { display: none; }
    .hero__title {
        font-size: clamp(2.6rem, 13vw, 4.6rem);
        line-height: 1;
    }
    /* Tutte le parole del titolo a filo del bordo sinistro: si allineano
       con il lead e la CTA sotto, dando coerenza al layout mobile. */
    .hero__word--ital  { margin-left: 0; }
    .hero__word--small { margin-left: 0; font-size: 0.45em; }
    .hero__title       { margin-top: 0.6rem; }
    .hero__lead {
        max-width: 100%;
        margin-top: var(--sp-3);
        padding-bottom: 0;
    }
    .hero__lead p {
        font-size: 0.96rem;
        line-height: 1.55;
        margin-bottom: var(--sp-2);
    }
    .hero__scroll { display: none; }

    /*
       Su mobile l'immagine/video diventa cover FULL-BLEED. Niente più
       maschera diagonale (su un layout a colonna unica risultava
       coprire troppo): un semplice gradient scuro dal basso garantisce
       la leggibilità del titolo bianco/scuro in primo piano.
    */
    .hero__image {
        -webkit-mask-image: none;
                mask-image: none;
    }
    /*
       Overlay a doppio gradient: una sfumatura cream sopra (per il
       contrasto del titolo) e una sotto (per il contrasto del
       lead + CTA). Il centro resta trasparente: lì il video è ben
       visibile.
    */
    .hero__image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
            rgba(245, 239, 232, 0.78) 0%,
            rgba(245, 239, 232, 0.30) 30%,
            rgba(245, 239, 232, 0)    50%,
            rgba(245, 239, 232, 0.55) 75%,
            rgba(245, 239, 232, 0.95) 100%);
        pointer-events: none;
    }
    .hero__image img,
    .hero__image video {
        opacity: 1;
        filter: saturate(0.95);
    }

    /* MARQUEE testuale — fontsize ridotta */
    .marquee { padding: 0.9rem 0; }
    .marquee__track { gap: 1.4rem; font-size: 1.3rem; }

    /* MANIFESTO — testo più piccolo ma comunque imponente */
    .manifesto {
        padding: var(--sp-6) var(--gutter);
    }
    .manifesto__text {
        font-size: clamp(1.15rem, 4.6vw, 1.7rem);
        line-height: 1.4;
    }

    /* SECTION HEAD — numero gigante ridotto, head sempre stack */
    .section__number {
        font-size: clamp(2.4rem, 10vw, 4.5rem);
        margin-bottom: var(--sp-1);
    }
    .section__head {
        margin-bottom: var(--sp-4);
    }
    .section__head--split {
        display: block;        /* niente più 2 colonne residue */
    }
    .section__head--split > div + div {
        margin-top: var(--sp-3);
    }

    /* DISPLAY — gerarchia tipografica calibrata */
    .display {
        font-size: clamp(2.2rem, 9.5vw, 5.2rem);
        line-height: 1.02;
    }
    .display--small {
        font-size: clamp(1.7rem, 6.5vw, 3rem);
    }
    .display--mini {
        font-size: clamp(1.5rem, 5.5vw, 2.4rem);
    }

    /* VALORI */
    .valori {
        padding-top: var(--sp-4);
        margin-top: var(--sp-4);
    }
    .valori__grid { grid-template-columns: 1fr; gap: 0; }
    .valore { padding: var(--sp-3) var(--sp-1); }
    .valori__title {
        font-size: clamp(1.5rem, 6vw, 2.4rem);
    }

    /* DUAL-BLOCK — stack più ravvicinato */
    .dual-block {
        margin-top: var(--sp-4);
        gap: var(--sp-4);
    }

    /* BIG QUOTE — più contenuta */
    .big-quote {
        margin: var(--sp-5) auto;
        padding: var(--sp-4) var(--gutter);
    }
    .big-quote p {
        font-size: clamp(1.3rem, 5.4vw, 2rem);
    }

    /* SERVICE blocks — su mobile diventano editoriali stacked.
       Tutto il contenuto si dispone verticalmente: eyebrow, h3,
       body, eventuale eyebrow extra, fasi. Niente residuo della
       grid 1fr/2fr del desktop. */
    .service {
        display: block;          /* da grid a block: stack pulito */
        padding: var(--sp-4) 0;
    }
    .service > .eyebrow,
    .service > h3,
    .service__body,
    .service__body--wide {
        max-width: 100%;
    }
    .service > h3 {
        margin: 0.4rem 0 var(--sp-2);
    }
    .service__body p {
        font-size: 0.96rem;
        line-height: 1.65;
    }

    /* Sezione "alt" a tutta larghezza con margini negativi del gutter:
       extend visivo da edge a edge per cambiare ritmo. */
    .service--alt,
    .articolo--alt {
        margin-left: calc(-1 * var(--gutter));
        margin-right: calc(-1 * var(--gutter));
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        padding-top: var(--sp-4);
        padding-bottom: var(--sp-4);
    }

    /* INTRO grid */
    .intro-grid { gap: var(--sp-3); margin-bottom: var(--sp-4); }
    .ranged-list li { font-size: 1.15rem; padding: 0.8rem 0; }

    /* STRATEGIA — CTA in colonna */
    .strategia { margin: var(--sp-4) 0; padding: var(--sp-4) 0; }
    .strategia__cta {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-1);
    }
    .strategia__cta .cta {
        justify-content: center;
        width: 100%;
    }

    /* FASI cards — sempre full-width su mobile, padding bilanciato */
    .fasi {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
        margin-top: var(--sp-3);
    }
    .fase {
        padding: var(--sp-3);
        border-radius: var(--radius);
    }
    .fase__num { font-size: 1.1rem; margin-bottom: var(--sp-1); }
    .fase h4 { font-size: 1.2rem; margin-bottom: 0.4rem; }
    .fase p { font-size: 0.92rem; line-height: 1.55; }

    /* DATA BLOCK — su mobile la foto smette di essere sticky e si
       posiziona sopra il copy in proporzione 16:10 più larga */
    .data-block {
        display: block;
        margin: var(--sp-4) 0;
        padding: var(--sp-4) 0;
    }
    .data-block__photo {
        position: static;
        aspect-ratio: 16/10;
        margin-bottom: var(--sp-3);
        border-radius: var(--radius);
    }
    .data-block__copy p { font-size: 0.96rem; line-height: 1.65; }
    .quote-inline {
        font-size: 1.1rem;
        line-height: 1.4;
        padding: var(--sp-2) 0;
    }
    .domande li {
        font-size: clamp(1.05rem, 4.5vw, 1.4rem);
        line-height: 1.4;
        padding: 0.4rem 0;
    }

    /* END CTA */
    .end-cta {
        margin-top: var(--sp-4);
        padding: var(--sp-4) 0;
        gap: var(--sp-3);
    }
    .end-cta__text { font-size: clamp(1.8rem, 8vw, 3.2rem); }

    /* PORTFOLIO casi — il numero gigante e il tag verticale tornano
       in flusso normale; la griglia è una colonna sola con sezioni
       chiare (Richiesta, Operato, Risultati). */
    .caso {
        padding: var(--sp-4) 0;
        padding-left: 0;          /* override del padding-left desktop */
    }
    .caso__num {
        position: static;
        display: block;
        margin-bottom: var(--sp-1);
        font-size: 1.3rem;
    }
    .caso__tag {
        position: static;
        transform: none;
        display: block;
        margin-bottom: var(--sp-2);
        font-size: 0.62rem;
    }
    .caso__head { margin-bottom: var(--sp-3); }
    /* Su mobile prima/dopo restano affiancate (sono già 4:3 ciascuna),
       ma con gap ridotto e label tipografica più piccola. */
    .caso__media {
        gap: 0.5rem;
        margin-bottom: var(--sp-3);
    }
    .caso__media-label {
        top: 0.5rem;
        left: 0.5rem;
        padding: 0.3rem 0.7rem;
        font-size: 0.78rem;
    }
    .caso__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .caso__col p { font-size: 0.95rem; }
    .caso__kpi { gap: 0.6rem; }
    .caso__kpi li {
        align-items: baseline;
        padding-bottom: 0.6rem;
    }
    .caso__kpi li strong { font-size: 1.35rem; min-width: 4rem; }
    .caso__kpi li span { font-size: 0.82rem; }

    /* CORSI card */
    .corsi__intro { margin: 0 auto var(--sp-4); }
    .corso-card__body { padding: var(--sp-4) var(--sp-3); }

    /* BLOG accordion */
    .blog-entry__head {
        grid-template-columns: 1.6rem 64px minmax(0, 1fr) 36px;
        gap: var(--sp-2);
        padding: 1.1rem 0;
    }
    .blog-entry__num { font-size: 1rem; }
    .blog-entry__thumb { width: 64px; height: 80px; }
    .blog-entry__icon { width: 36px; height: 36px; }
    .blog-entry__icon svg { width: 14px; height: 14px; }
    .blog-entry__cat { font-size: 0.6rem; letter-spacing: 0.18em; }
    .blog-entry__inner {
        padding-left: calc(1.6rem + var(--sp-2) + 64px + var(--sp-2));
        padding-bottom: var(--sp-4);
    }

    /* FAQ accordion */
    .faq-section { padding: var(--sp-5) var(--gutter); }
    .faq-section__head { margin-bottom: var(--sp-4); }
    .faq-section__title { font-size: clamp(1.7rem, 7vw, 3rem); }
    .faq-section__sub { font-size: 1rem; }
    .faq__head {
        grid-template-columns: 1.6rem minmax(0, 1fr) 36px;
        gap: var(--sp-2);
        padding: 1rem 0;
    }
    .faq__num { font-size: 1rem; }
    .faq__icon { width: 36px; height: 36px; }
    .faq__icon svg { width: 14px; height: 14px; }
    .faq__inner {
        padding: 0 0 var(--sp-3) calc(1.6rem + var(--sp-2));
    }

    /* CTA — pulsanti più tascabili ma sempre belli */
    .cta { padding: 0.85rem 1.3rem; font-size: 0.7rem; }
    .cta--big { padding: 1rem 1.6rem; font-size: 0.78rem; }
    .cta--inline { font-size: 1rem; }

    /* CONTATTI section — stack pulito form + info, mappa più tall */
    .section--contatti {
        padding: var(--sp-5) var(--gutter);
    }
    .contatti__head { margin-bottom: var(--sp-4); }
    .contatti__head .display { font-size: clamp(2.2rem, 10vw, 4.4rem); }
    .contatti__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .contatti__form {
        padding: var(--sp-3);
        border-radius: var(--radius-l);
    }
    .contatti__list li {
        grid-template-columns: 3rem 1fr;
        gap: 0.8rem;
        padding: 0.8rem 0;
    }
    .contatti__list li > span { font-size: 0.6rem; }
    .contatti__list li > a { font-size: 1rem; line-height: 1.35; }
    .contatti__map {
        aspect-ratio: 4/3;
    }

    /* PAGE HERO interno — numerone tipografico in alto + h1 sotto.
       Niente più split orizzontale, sempre stack verticale per
       leggibilità immediata su mobile. */
    .page-hero {
        padding: 5.2rem var(--gutter) var(--sp-4);
        border-bottom: 1px solid var(--c-line);
    }
    .page-hero__inner {
        display: block;
    }
    .page-hero__num {
        display: block;
        font-size: clamp(2.6rem, 12vw, 4.5rem);
        line-height: 0.9;
        margin-bottom: var(--sp-2);
    }
    .page-hero__copy {
        display: block;
    }
    .page-hero__copy .eyebrow { margin-bottom: var(--sp-2); }
    .page-hero__copy h1 {
        font-size: clamp(2rem, 9.5vw, 4rem);
        line-height: 1.02;
    }
    .page-hero__lead {
        margin-top: var(--sp-2);
        font-size: 0.96rem;
        line-height: 1.5;
    }
    .breadcrumb { top: 4.6rem; }

    /* NEXT PAGE */
    .next-page { padding: var(--sp-5) var(--gutter); }
    .next-page__title { font-size: clamp(1.8rem, 8vw, 3.5rem); }
    .next-page__arrow { width: 3rem; height: 3rem; }
    .next-page__arrow svg { width: 18px; height: 18px; }

    /* TEASER row su mobile: gap interno ridotto */
    .teaser-row { gap: var(--sp-3); }
    .teaser-row__copy { gap: var(--sp-2); }
    .teaser-row__lead { font-size: 0.95rem; }

    /* ARTICOLI nella pagina blog (ora in accordion ma tengo per fallback) */
    .articolo { gap: var(--sp-2); padding: var(--sp-4) 0; }
    .articolo--alt {
        margin: 0 calc(-1 * var(--gutter));
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    /* LOGHI marquee */
    .logos { padding: var(--sp-5) 0; }
    .logos__head { margin-bottom: var(--sp-3); padding: 0 var(--gutter); }
    .logos__title { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
    .logos__track {
        gap: 2.4rem;
        animation-duration: 35s;
    }
    .logos__track img { height: 44px; max-width: 160px; }

    /* SLIDESHOW: counter e dots un po' più piccoli */
    .slideshow__counter,
    .slideshow__dots {
        bottom: 0.8rem;
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
    }
    .slideshow__counter { right: 0.8rem; }
    .slideshow__dots { left: 0.8rem; }

    /* CONOSCIAMOCI body — figure su tutta la larghezza, copy a seguire */
    .conosciamoci__body {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .conosciamoci__figure {
        aspect-ratio: 4/5;
        max-height: 60vh;
        border-radius: var(--radius);
    }
    .conosciamoci__copy { font-size: 0.95rem; line-height: 1.65; }
    .conosciamoci__copy p { margin-bottom: var(--sp-2); }

    /* DUAL BLOCK figure quando c'è — niente più aspect 4/5 enorme */
    .dual-block__figure {
        aspect-ratio: 16/11;
        max-height: 50vh;
    }

    /* ATTESTAZIONI */
    .attestazioni li {
        font-size: 1rem;
        padding: 0.8rem 0;
    }
    .attestazioni li span { font-size: 0.65rem; }

    /* FOOTER logo — più contenuto su mobile */
    .footer { padding: var(--sp-4) var(--gutter) var(--sp-2); }
    .footer__mark { margin-bottom: var(--sp-2); }
    .footer__logo { width: clamp(180px, 55vw, 300px); }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .footer__bottom > * { font-size: 0.65rem; }
}

@media (max-width: 480px) {
    /* Su schermi molto stretti il padding del body torna a essere
       allineato al bordo sinistro della card per non sprecare spazio */
    .blog-entry__inner {
        padding-left: 0;
    }
    /* FAQ: padding del body azzerato a sinistra per leggibilità */
    .faq__inner {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 760px) {
    /* FAQ mobile: header più compatto, icona ridotta */
    .faq__head {
        grid-template-columns: 1.6rem minmax(0, 1fr) 36px;
        gap: var(--sp-2);
        padding: 1.1rem 0;
    }
    .faq__num { font-size: 1rem; }
    .faq__icon { width: 36px; height: 36px; }
    .faq__icon svg { width: 14px; height: 14px; }
    .faq__inner {
        padding: 0 var(--sp-2) var(--sp-4) calc(1.6rem + var(--sp-2));
    }
}

@media (max-width: 480px) {
    /* ============================================================
       SMALL MOBILE — schermi 320-480px
       Tightening finale: gutter ridotto, tipografia leggermente più
       contenuta, alcune liste fluide diventano colonna singola.
       ============================================================ */
    :root {
        --gutter: 1rem;
        --sp-7: 3.6rem;
        --sp-6: 2.8rem;
        --sp-5: 2rem;
    }

    .nav { padding: 0.85rem var(--gutter); }
    /* Logo ulteriormente compatto su mobile piccolo */
    .nav__logo { height: 28px; }

    .hero { padding-top: 5.4rem; }
    .hero__title { font-size: clamp(2.2rem, 14vw, 3.6rem); }
    /* Stesso allineamento anche su mobile piccolo: niente offset di
       margin sulle parole del titolo, tutto contro il bordo sinistro. */
    .hero__word--ital  { margin-left: 0; }
    .hero__word--small { margin-left: 0; font-size: 0.5em; }
    .hero__lead p { font-size: 0.9rem; line-height: 1.5; }

    .display { letter-spacing: -0.015em; font-size: clamp(2rem, 9.5vw, 4.4rem); }
    .display--small { font-size: clamp(1.5rem, 7vw, 2.6rem); }

    /* MANIFESTO ancora più contenuto */
    .manifesto__text { font-size: clamp(1.05rem, 4.6vw, 1.4rem); }

    /* SECTION number */
    .section__number { font-size: clamp(2rem, 11vw, 3.8rem); }

    /* TEASER row */
    .teaser-row__lead { font-size: 0.92rem; }

    /* BLOG accordion: header ulteriormente compattato per evitare
       overflow del titolo su 320-360px */
    .blog-entry__head {
        grid-template-columns: 1.4rem 56px minmax(0, 1fr) 32px;
        gap: 0.7rem;
    }
    .blog-entry__thumb { width: 56px; height: 70px; }
    .blog-entry__icon { width: 32px; height: 32px; }
    .blog-entry__icon svg { width: 12px; height: 12px; }
    .blog-entry__title { font-size: 1rem; line-height: 1.3; }
    .blog-entry__inner {
        padding-left: 0;
    }

    /* FAQ */
    .faq__head {
        grid-template-columns: 1.4rem minmax(0, 1fr) 32px;
        gap: 0.7rem;
    }
    .faq__icon { width: 32px; height: 32px; }
    .faq__icon svg { width: 12px; height: 12px; }
    .faq__question { font-size: 1rem; line-height: 1.35; }
    .faq__inner { padding: 0 0 var(--sp-3); }

    /* CASO */
    .caso__kpi li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    .caso__kpi li strong { min-width: auto; font-size: 1.3rem; }

    /* DUAL block */
    .dual-block { gap: var(--sp-3); }

    /* BIG QUOTE */
    .big-quote p { font-size: clamp(1.15rem, 5.8vw, 1.6rem); }

    /* LOGHI */
    .logos__track img { height: 38px; max-width: 140px; }

    /* CONTATTI */
    .field input, .field textarea { font-size: 0.95rem; padding: 0.6rem 0; }

    /* MAP iframe ratio più tall su mobile per leggibilità */
    .contatti__map { aspect-ratio: 4/3; }

    /* FOOTER logo — ulteriore restringimento su schermi molto piccoli */
    .footer__logo { width: clamp(160px, 60vw, 240px); }
}


/* ============================================================
   26. MOTION REDUCED
   ------------------------------------------------------------
   Rispettiamo la preferenza utente di ridurre le animazioni.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal],
    [data-reveal-stagger] > *,
    .hero__word,
    .hero__lead {
        opacity: 1 !important;
        transform: none !important;
    }
    .marquee__track { animation: none; }
    .preloader { display: none; }
}


/* ============================================================
   PAGINA CONOSCIAMOCI — sezioni riprogettate
   ============================================================
   Due sezioni dedicate sostituiscono il vecchio dual-block:
     .about-section       — chi siamo, layout magazine
     .formation-section   — formazione, layout spec-table

   Sono volutamente "ariose": tanti spazi, tipografia grande,
   griglie 1:1 che si trasformano in colonna singola sotto i
   900px per non comprimere il copy.
   ============================================================ */

/* === CHI SIAMO — layout magazine ============================ */
.about-section {
    padding: var(--sp-7) var(--gutter);
}
.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-6);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}
.about-content .eyebrow {
    margin-bottom: 1.2rem;
}
.about-title {
    font-family: var(--font-serif);
    font-weight: 350;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    margin: 0 0 1.6rem;
    font-variation-settings: "opsz" 144;
}
.about-title em {
    color: var(--c-terracotta);
    font-style: italic;
}
.about-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
    max-width: 46ch;
    margin: 0 0 var(--sp-4);
}
.about-lead em {
    color: var(--c-terracotta);
    font-style: italic;
}

/* Spec sheet: tabella tipografica con divisori sottili */
.about-specs {
    margin: 0;
    border-top: 1px solid var(--c-line);
    max-width: 480px;
}
.about-specs > div {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1.2rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--c-line);
    align-items: baseline;
}
.about-specs dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-ink-mute);
    font-weight: 500;
}
.about-specs dd {
    margin: 0;
    font-size: 1rem;
    color: var(--c-ink);
    line-height: 1.4;
}

/* Figura: foto verticale stile ritratto */
.about-figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-xl, 22px);
}
.about-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.2s var(--ease-out);
}
.about-figure:hover img {
    transform: scale(1.03);
}
.about-figure figcaption {
    position: absolute;
    bottom: 1rem;
    left: 1.2rem;
    color: var(--c-cream);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 500;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}


/* === FORMAZIONE — layout spec-table =========================== */
.formation-section {
    padding: var(--sp-7) var(--gutter);
    background: var(--c-cream-warm);
}
.formation-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--sp-6);
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}
.formation-intro .eyebrow {
    margin-bottom: 1.2rem;
}
.formation-title {
    font-family: var(--font-serif);
    font-weight: 350;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    margin: 0 0 1.4rem;
    font-variation-settings: "opsz" 144;
}
.formation-title em {
    color: var(--c-terracotta);
    font-style: italic;
}
.formation-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-ink-soft);
    margin: 0 0 var(--sp-3);
    max-width: 44ch;
}
.formation-cta {
    margin-top: 0.4rem;
}

/* Lista corsi: tabella tipografica con 3 colonne (area, corso, ente) */
.formation-list__label {
    margin-bottom: 1.2rem;
}
.formation-courses {
    margin: 0;
    border-top: 1px solid var(--c-ink-soft);
    border-top-color: rgba(40, 25, 20, 0.18);
}
.formation-course {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.4rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid rgba(40, 25, 20, 0.18);
    align-items: baseline;
}
.formation-course__area {
    grid-row: 1 / span 2;
    align-self: start;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-terracotta);
    font-weight: 600;
    padding-top: 4px;
}
.formation-course__name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--c-ink);
    font-weight: 400;
    font-variation-settings: "opsz" 36;
}
.formation-course__ente {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--c-ink-mute);
    letter-spacing: 0.02em;
}


/* === Responsive — sotto 900px le due sezioni impilano ======== */
@media (max-width: 900px) {
    .about-grid,
    .formation-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
    .about-figure {
        aspect-ratio: 4 / 5;
        max-width: 480px;
        justify-self: start;
    }
    .about-specs {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .about-section,
    .formation-section {
        padding: var(--sp-6) var(--gutter);
    }
    .formation-course {
        grid-template-columns: 4rem 1fr;
        padding: 1rem 0;
    }
    .formation-course__name {
        font-size: 1.1rem;
    }
}


/* ============================================================
   31. PAGINA COMUNICAZIONE — restyling dedicato
   ------------------------------------------------------------
   Tutte le regole qui sotto vivono sotto lo scope `.page-comunicazione`
   per non impattare le altre pagine del sito. La comunicazione è il
   fulcro dell'azienda: il magenta del brand (--c-terracotta) viene
   spinto un po' di più sia come accento sia come pannello pieno.
   ============================================================ */

/* --- Hero rinforzato ----------------------------------------
   Il page-hero di base resta, qui aggiungiamo solo un piccolo
   "tab" verticale magenta sul lato destro e leggermente più
   colore nei dettagli (numero, em). */
.page-comunicazione .page-hero--comm {
    position: relative;
    overflow: hidden;
}
.page-comunicazione .page-hero--comm .page-hero__num {
    /* Numero gigante con piccolo bagliore magenta dietro:
       senza esagerare, è un alone soft. */
    color: var(--c-terracotta);
    text-shadow: 0 0 60px rgba(192, 52, 87, 0.15);
}
.page-comunicazione .page-hero--comm h1 em {
    /* Italic magenta default — niente sottolineature colorate
       dietro: la hero resta pulita sul cream. */
    font-style: italic;
}

/* --- Ribbon / marquee magenta -------------------------------
   Banda piena magenta con i termini dei servizi che scorrono.
   Usa esattamente i 5 elementi della ranged-list già in pagina.
   La track è duplicata nell'HTML così il loop è continuo. */
.comm-ribbon {
    background: var(--c-terracotta);
    color: var(--c-cream);
    overflow: hidden;
    /* Padding simmetrico: il testo è centrato dalla simmetria stessa,
       senza bisogno di flex tricks o min-height. */
    padding: 1.1rem 0;
}
.comm-ribbon__track {
    /* Block container: il single child da animare. Usiamo display:block
       e white-space:nowrap per ottenere il marquee senza inline-flex
       (che fa apparire l'overlay flex nei DevTools). */
    display: block;
    white-space: nowrap;
    line-height: 1;
    /* Animazione lineare infinita: 38s, coerente con la .marquee
       originale del sito. */
    animation: comm-ribbon-scroll 38s linear infinite;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 350;
    letter-spacing: -0.005em;
}
/* Spaziatura tra i termini gestita direttamente sugli span: niente
   gap del flex, solo margin orizzontale stabile. */
.comm-ribbon__track > span {
    display: inline-block;
    margin: 0 1.1rem;
    vertical-align: middle;
}
.comm-ribbon__track > span:first-child {
    margin-left: 0;
}
.comm-ribbon__track > span {
    font-style: italic;
}
.comm-ribbon__dot {
    font-style: normal;
    color: var(--c-primary-soft);
    font-size: 0.9em;
    opacity: 0.85;
}
@keyframes comm-ribbon-scroll {
    /* Sposta di metà track (la track è raddoppiata nell'HTML) */
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* --- Intro grid: lista servizi più scenografica -------------- */
.page-comunicazione .intro-grid--comm {
    /* Lascia inalterato il layout 2-col, ma da più aria sopra
       perché ora c'è la ribbon a separare. */
    padding-top: var(--sp-5);
}
.page-comunicazione .intro-grid--comm .intro-grid__copy .lead {
    /* Lead più importante: serif, sized up. */
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.35;
    color: var(--c-ink);
    font-weight: 350;
}
.page-comunicazione .intro-grid--comm .intro-grid__copy em {
    /* Em magenta + piccolo highlight rosato dietro */
    background: linear-gradient(180deg, transparent 60%, var(--c-primary-soft) 60%);
    padding: 0 0.15em;
}

/* Ranged list rinforzata: ogni voce ha un piccolo "marker"
   magenta sulla sinistra che pulsa all'hover. */
.ranged-list--comm li {
    position: relative;
    padding-left: 1.2rem;
}
.ranged-list--comm li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    width: 6px;
    height: 6px;
    background: var(--c-terracotta);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-soft),
                transform var(--t-base) var(--ease-soft);
}
.ranged-list--comm li:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.ranged-list--comm li > span:first-child {
    color: var(--c-terracotta);
    font-weight: 500;
}


/* --- STRATEGIA come PANNELLO MAGENTA -------------------------
   Diventa il fulcro visivo della pagina: blocco pieno magenta,
   testo crema, CTA invertite, e un watermark tipografico dietro. */
.page-comunicazione .strategia--panel {
    position: relative;
    background: var(--c-terracotta);
    color: var(--c-cream);
    /* Sfondo che esce dai gutter per occupare tutta la larghezza
       del viewport (come fa .service--alt nel codice esistente). */
    margin: var(--sp-6) calc(-1 * var(--gutter));
    padding: var(--sp-6) var(--gutter);
    border: 0;
    border-radius: 0;
    overflow: hidden;
}
.page-comunicazione .strategia--panel .strategia__inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
}
.page-comunicazione .strategia--panel .strategia__copy {
    color: var(--c-cream);
    max-width: 70ch;
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    line-height: 1.65;
}
.page-comunicazione .strategia--panel .strategia__copy strong {
    /* Strong su sfondo magenta: niente colore, solo peso e
       leggero highlight rosato sotto. */
    color: var(--c-cream);
    font-weight: 500;
    background: linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, 0.18) 70%);
    padding: 0 0.1em;
}
.page-comunicazione .strategia--panel .strategia__cta {
    margin-top: var(--sp-4);
}

/* Watermark: parola gigante in serif italic, dietro al copy.
   Niente contenuto nuovo nel DOM visibile (aria-hidden). */
.strategia__watermark {
    position: absolute;
    right: var(--gutter);
    bottom: -2.4rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 350;
    font-size: clamp(6rem, 18vw, 16rem);
    line-height: 1;
    color: rgba(245, 239, 232, 0.08);
    pointer-events: none;
    z-index: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

/* Variante CTA chiara con bordo, pensata per il pannello magenta:
   trasparente con bordo crema, hover che inverte i colori. */
.cta--outline-light {
    background: transparent;
    color: var(--c-cream);
    border: 1px solid rgba(245, 239, 232, 0.7);
}
.cta--outline-light:hover {
    background: var(--c-cream);
    color: var(--c-terracotta);
    border-color: var(--c-cream);
}


/* --- COMM-CARD: cards visive per i servizi ------------------- */
/* Ogni card ha: header (indice 02.A + icona SVG), titolo,
   corpo a colonna larga, e (per il primo) le fasi sotto. */
.page-comunicazione .comm-card {
    position: relative;
    max-width: 1400px;
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--c-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
}

/* Header verticale a sinistra: indice + icona impilati */
.comm-card__head {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    position: sticky;
    top: 6rem; /* segue lo scroll restando sotto la navbar */
}
.comm-card__index {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-terracotta);
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--c-terracotta);
    border-radius: 999px;
}

/* Icona SVG: cerchio crema con stroke magenta.
   Le icone usano currentColor → il colore si controlla qui. */
.comm-card__icon {
    width: clamp(96px, 12vw, 140px);
    height: clamp(96px, 12vw, 140px);
    border-radius: 50%;
    background: var(--c-cream-warm);
    color: var(--c-terracotta);
    display: grid;
    place-items: center;
    transition: transform var(--t-base) var(--ease-soft),
                background var(--t-base) var(--ease-soft);
}
.comm-card__icon svg {
    width: 58%;
    height: 58%;
    display: block;
}
.page-comunicazione .comm-card:hover .comm-card__icon {
    transform: rotate(-4deg) scale(1.04);
    background: var(--c-primary-soft);
}

/* Titolo e body sulla colonna destra */
.comm-card__title {
    grid-column: 2;
    margin: 0;
}
.comm-card__body {
    grid-column: 2;
}
.comm-card__body p {
    color: var(--c-ink-soft);
    line-height: 1.75;
    margin-bottom: var(--sp-3);
    font-size: 1.02rem;
}

/* Eyebrow "tre fasi" e fasi vanno a tutta larghezza */
.page-comunicazione .comm-card .eyebrow--mt {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: var(--sp-4);
}
.page-comunicazione .comm-card .fasi {
    grid-column: 1 / -1;
}

/* Variante alternata: sfondo crema-caldo che sfonda i gutter,
   stesso pattern di .service--alt. */
.page-comunicazione .comm-card--alt {
    background: var(--c-cream-warm);
    margin: 0 calc(-1 * var(--gutter));
    padding: var(--sp-6) var(--gutter);
    border-top: 1px solid var(--c-line);
}
.page-comunicazione .comm-card--alt .comm-card__icon {
    background: var(--c-cream);
}


/* --- FASI con rail connettore -------------------------------- */
/* Le tre fasi mantengono la stessa griglia, ma aggiungiamo
   una linea tratteggiata orizzontale che le attraversa
   suggerendo un percorso step-by-step. */
.fasi--rail {
    position: relative;
}
.fasi--rail::before {
    content: '';
    position: absolute;
    top: calc(var(--sp-4) + 0.7rem); /* allineata sul numero della fase */
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        var(--c-terracotta) 0,
        var(--c-terracotta) 6px,
        transparent 6px,
        transparent 12px
    );
    opacity: 0.45;
    z-index: 0;
}
.fasi--rail .fase {
    position: relative;
    z-index: 1;
    background: var(--c-cream);
}
.fasi--rail .fase__num {
    /* Numero più grande e con cerchietto magenta sopra,
       per dare un punto di riferimento sulla "rail". */
    position: relative;
    display: inline-block;
    font-size: 1.6rem;
    padding-top: 1.2rem;
}
.fasi--rail .fase__num::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--c-terracotta);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--c-cream);
}


/* --- Responsive ---------------------------------------------- */

/* Tablet: la sticky-head non ha senso su schermi medi. */
@media (max-width: 960px) {
    .page-comunicazione .comm-card {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .comm-card__head {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-3);
    }
    .comm-card__title,
    .comm-card__body { grid-column: 1; }

    .fasi--rail::before { display: none; }
}

/* Mobile: pannello strategia più compatto, ribbon più piccola,
   watermark ridotto per non rubare spazio. */
@media (max-width: 760px) {
    .comm-ribbon {
        padding: 0.85rem 0;
    }
    .comm-ribbon__track {
        font-size: 1.05rem;
        animation-duration: 28s;
    }
    .comm-ribbon__track > span {
        margin: 0 0.7rem;
    }

    .page-comunicazione .strategia--panel {
        margin: var(--sp-5) calc(-1 * var(--gutter));
        padding: var(--sp-5) var(--gutter);
    }
    .strategia__watermark {
        font-size: 6rem;
        bottom: -1.4rem;
        opacity: 0.85;
    }

    .page-comunicazione .comm-card {
        /* Solo padding verticale: quello orizzontale lo gestisce
           il genitore .page-content (o la variante --alt, che ha
           bisogno del padding pieno per non far toccare il testo
           ai bordi quando va edge-to-edge). */
        padding-top: var(--sp-5);
        padding-bottom: var(--sp-5);
    }
    /* Variante a tutta larghezza: ribadiamo margin negativo e
       padding interno anche su mobile, stesso pattern di
       .service--alt. */
    .page-comunicazione .comm-card--alt {
        margin-left: calc(-1 * var(--gutter));
        margin-right: calc(-1 * var(--gutter));
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
    .comm-card__icon {
        width: 72px;
        height: 72px;
    }
    .comm-card__index {
        font-size: 0.7rem;
        padding: 0.35rem 0.7rem;
    }
}

/* Riduzione movimento: chi ha prefers-reduced-motion
   non vede la ribbon che scorre. */
@media (prefers-reduced-motion: reduce) {
    .comm-ribbon__track { animation: none; }
}


/* ============================================================
   32. PAGINA CORSI — bicromia giallo senape + magenta
   ------------------------------------------------------------
   Restyling medio: la pagina mantiene la struttura attuale
   (hero + intro + carosello + outro + next-page) e introduce
   il giallo senape (--c-mustard) come secondo colore in
   equilibrio col magenta del brand. Tutte le regole sono
   sotto lo scope `.page-corsi` per non sporcare le altre
   pagine del sito.
   ============================================================ */

/* --- HERO ----------------------------------------------------
   L'hero resta sui toni cream/warm del sito, senza giallo:
   gli accenti vivono nel resto della pagina. Aggiungiamo solo
   un piccolo alone magenta dietro al numero e tono primary
   sull'italic del lead, coerente col linguaggio delle altre
   pagine interne. */
.page-corsi .page-hero {
    position: relative;
}
.page-corsi .page-hero__num {
    color: var(--c-terracotta);
    text-shadow: 0 0 60px rgba(192, 52, 87, 0.15);
}
.page-corsi .page-hero__lead em {
    /* Tono magenta sul lead "Chi si forma non si ferma." per
       legarlo al display em. Niente highlight di colore. */
    color: var(--c-terracotta);
    font-style: italic;
}


/* --- INTRO ---------------------------------------------------
   Sopra l'intro aggiungiamo due piccoli tratti decorativi —
   uno magenta e uno giallo — affiancati: micro-marchio della
   bicromia, ricorda l'eyebrow "—" usato in tutto il sito. */
.page-corsi .corsi__intro {
    position: relative;
    padding-top: var(--sp-4);
}
.page-corsi .corsi__intro::before {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    margin: 0 auto var(--sp-3);
    background: linear-gradient(
        to right,
        var(--c-terracotta)   0%,
        var(--c-terracotta)   50%,
        var(--c-mustard)      50%,
        var(--c-mustard)      100%
    );
    border-radius: 2px;
}
.page-corsi .corsi__intro em {
    /* La citazione «chi si forma non si ferma» rimane magenta
       (coerente col resto del sito) ma ottiene il highlight
       giallo come marker del concetto chiave della pagina. */
    background: linear-gradient(180deg, transparent 68%, var(--c-mustard-soft) 68%);
    padding: 0 0.1em;
}


/* --- CAROSELLO: CHIP DI STATO --------------------------------
   "In partenza" resta magenta: comunica urgenza/attualità.
   "In programmazione" diventa giallo senape: comunica futuro
   in arrivo, mantiene la coppia cromatica della pagina. */
.page-corsi .corso-card__chip--soon {
    color: var(--c-mustard-deep);
    background: var(--c-mustard-soft);
}
/* Sul chip della variante poster il fondo è semi-trasparente
   bianco: vogliamo mantenere lo sfondo cipria/giallo per
   leggibilità sul gradient scuro del poster. */
.page-corsi .corso-card--poster .corso-card__chip--soon {
    background: rgba(245, 227, 168, 0.92);
}
.page-corsi .corso-card--poster .corso-card__chip--live {
    background: rgba(245, 201, 211, 0.95);
}


/* --- NUMERO PROGRESSIVO SULLE CARD ---------------------------
   Alterniamo: i num delle card dispari (1, 3, 5) restano sul
   tono caldo del brand (rosa-magenta soft), quelle pari (2, 4)
   passano al senape soft. L'alternanza dà ritmo cromatico
   senza dover toccare l'HTML. */
.page-corsi .corso-card--poster:nth-of-type(odd) .corso-card__num {
    color: var(--c-primary-soft);
}
.page-corsi .corso-card--poster:nth-of-type(even) .corso-card__num {
    color: var(--c-mustard-soft);
}


/* --- TITLE EM DELLE CARD -------------------------------------
   Stessa logica: dispari magenta-rose (default attuale),
   pari mustard. Mantiene la lettura del numero coerente
   con la parola chiave del corso. */
.page-corsi .corso-card--poster:nth-of-type(even) .corso-card__title em {
    color: var(--c-mustard-soft);
}


/* --- FRECCE NAVIGAZIONE SLIDER -------------------------------
   "Indietro" colora di magenta al hover, "Avanti" di giallo:
   gesto di direzione coerente col gioco cromatico. */
.page-corsi .corsi-slider__btn--prev:hover {
    background: var(--c-terracotta);
    color: var(--c-cream);
    border-color: var(--c-terracotta);
}
.page-corsi .corsi-slider__btn--next:hover {
    background: var(--c-mustard);
    color: var(--c-ink);
    border-color: var(--c-mustard);
}


/* --- BOTTONE "SCOPRI DI PIÙ" SULLA CARD FLIP -----------------
   La card 01 (Inglese, card "live") ha un bottone interno per
   ruotare verso il back: lo coloriamo di giallo soft, in modo
   che sia ben distinguibile sul gradient scuro e leghi il
   "chip live magenta" alla scoperta del retro tramite contrasto
   col secondo colore della pagina. */
.page-corsi .corso-card--flip .corso-card__arrow--btn {
    color: var(--c-mustard-soft);
}
.page-corsi .corso-card--flip:hover .corso-card__arrow--btn {
    color: var(--c-mustard);
}
/* Pulsante "chiudi" (X) sul retro: hover giallo per coerenza */
.page-corsi .corso-card__close:hover {
    background: var(--c-mustard);
    color: var(--c-ink);
}


/* --- OUTRO ---------------------------------------------------
   Sotto il carosello aggiungiamo lo stesso tratto bicromatico
   dell'intro, ma rovesciato (giallo a sinistra, magenta a destra)
   per chiudere il pattern cromatico della pagina. */
.page-corsi .corsi__outro {
    position: relative;
    padding-top: var(--sp-4);
}
.page-corsi .corsi__outro::before {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    margin: 0 auto var(--sp-3);
    background: linear-gradient(
        to right,
        var(--c-mustard)      0%,
        var(--c-mustard)      50%,
        var(--c-terracotta)   50%,
        var(--c-terracotta)   100%
    );
    border-radius: 2px;
}


/* --- RESPONSIVE ----------------------------------------------
   Su mobile manteniamo gli stessi accenti ma riduciamo la
   larghezza dei tratti decorativi per non rubare spazio. */
@media (max-width: 720px) {
    .page-corsi .corsi__intro::before,
    .page-corsi .corsi__outro::before {
        width: 48px;
        height: 3px;
    }
}


/* ============================================================
   DETTAGLIO DINAMICO — articolo / corso
   ------------------------------------------------------------
   Layout per le pagine dettaglio-articolo.html e dettaglio-corso.html.
   Le sezioni vengono iniettate da script.js → renderSezioneDettaglio,
   alternando immagine a sinistra (default) o a destra (.--reverse),
   sullo stesso paradigma usato dal front Angular del gestionale ma
   con la palette/tipografia del sito nuovo.
   ============================================================ */

.dettaglio-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--c-terracotta);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity .2s ease;
}
.dettaglio-back:hover { opacity: .75; }

/* Singola sezione: immagine + colonna testuale */
.dettaglio-sezione {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--c-line);
}
/* La prima sezione eredita il border-top dalla page-hero,
   evitiamo la doppia linea */
.dettaglio-sezione:first-child { border-top: 0; padding-top: var(--sp-4); }

/* Variante con media a destra (sezioni di indice dispari) */
.dettaglio-sezione--reverse .dettaglio-sezione__media { order: 2; }
.dettaglio-sezione--reverse .dettaglio-sezione__copy  { order: 1; }

.dettaglio-sezione__media {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg, 18px);
    background: var(--c-cream);
    aspect-ratio: 4 / 3;
}
.dettaglio-sezione__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dettaglio-sezione__copy {
    max-width: 56ch;
}

.dettaglio-sezione__title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 350;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    margin: 0 0 var(--sp-3);
}
.dettaglio-sezione__title em {
    font-style: italic;
    color: var(--c-terracotta);
}

.dettaglio-sezione__body {
    font-size: var(--fs-body, 1rem);
    line-height: 1.65;
    color: var(--c-ink-soft);
}
.dettaglio-sezione__body p { margin: 0 0 1em; }
.dettaglio-sezione__body p:last-child { margin-bottom: 0; }
.dettaglio-sezione__body em { font-style: italic; color: var(--c-ink); }

/* CTA finale del dettaglio corso */
.dettaglio-cta {
    margin-top: var(--sp-6);
    padding: var(--sp-5);
    border-radius: var(--radius-lg, 18px);
    background: var(--c-cream);
    text-align: center;
}
.dettaglio-cta p {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 350;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 var(--sp-3);
}
.dettaglio-cta .cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.4rem;
    border: 1px solid var(--c-ink);
    border-radius: 999px;
    color: var(--c-ink);
    text-decoration: none;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transition: background .25s ease, color .25s ease;
}
.dettaglio-cta .cta-link:hover {
    background: var(--c-ink);
    color: var(--c-cream);
}
.dettaglio-cta .cta-link svg {
    width: 1.2em; height: 1.2em;
}

/* Layout responsive: su tablet/mobile passiamo a colonna singola
   con immagine sopra il testo, per tutte le sezioni (anche quelle
   con .--reverse). */
@media (max-width: 860px) {
    .dettaglio-sezione,
    .dettaglio-sezione--reverse {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .dettaglio-sezione--reverse .dettaglio-sezione__media { order: 0; }
    .dettaglio-sezione--reverse .dettaglio-sezione__copy  { order: 1; }
}

/* Mini meta-riga sulle card corso (data/orario) */
.corso-card__meta {
    font-size: 0.78rem;
    color: rgba(255,255,255,.85);
    margin: 0.2rem 0 0.6rem;
    letter-spacing: 0.02em;
}

/* Stato placeholder/error per blog e corsi dinamici: stile leggero,
   senza interazione, così è chiaro che si tratta di stato transitorio. */
.blog-entry--placeholder .blog-entry__head,
.blog-entry--empty       .blog-entry__head,
.blog-entry--error       .blog-entry__head,
.corso-card--placeholder,
.corso-card--empty,
.corso-card--error {
    cursor: default;
}