/* =========================================================
   MEDITAZIONE EVOLUTIVA — Design System
   Minimal · editorial · nature-led
   ========================================================= */

:root {
  /* — Palette — */
  --ink:        #23302a;   /* testo principale */
  --ink-soft:   #4c5b52;   /* testo secondario */
  --ink-faint:  #8a978d;   /* testo tenue / eyebrow */

  --forest:     #33493e;   /* verde foresta — brand */
  --forest-deep:#233329;
  --sage:       #6f8c7b;   /* verde salvia */
  --mist:       #8fb0bc;   /* azzurro nebbia */
  --sky:        #5e8598;   /* azzurro profondo */

  --ivory:      #faf8f3;   /* sfondo caldo */
  --ivory-2:    #f2efe6;   /* sfondo alternato */
  --paper:      #ffffff;
  --line:       #e4e0d5;   /* hairline */

  /* — Tipografia — */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* — Spazi / misure — */
  --container: 1180px;
  --gutter: clamp(1.4rem, 5vw, 4rem);
  --header-h: 88px;

  --radius: 18px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--sage); color: #fff; }

/* ---------------- Utility ---------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* nascosto visivamente ma accessibile agli screen reader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.6rem;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--forest-deep);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--sage);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.28s var(--ease), box-shadow 0.28s var(--ease), height 0.28s var(--ease);
}
.site-header.scrolled {
  height: 68px;
  /* Sfondo quasi opaco: evita il costoso ricalcolo del blur durante lo scroll. */
  background: rgba(250, 248, 243, 0.96);
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand { display: block; position: relative; }
/* area interattiva ≥44px senza alterare la dimensione visiva del logo:
   pseudo-elemento invisibile centrato sul logo che estende la zona cliccabile */
.brand::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: 44px;
  height: 44px;
}
.brand-logo {
  height: 30px;
  width: auto;
  transition: opacity 0.5s var(--ease);
}
.brand-logo--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.site-header.scrolled .brand-logo--light { opacity: 0; }
.site-header.scrolled .brand-logo--dark  { opacity: 1; }

.nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.nav a {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.35s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.site-header.scrolled .nav a { color: var(--ink-soft); }
.site-header.scrolled .nav a:hover { color: var(--forest); }

/* CTA Area riservata — pill piena in --mist con testo scuro ad alto contrasto
   e piccola icona lucchetto. Specificità .nav .nav-cta per vincere su .nav a. */
.nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.52rem 1.15rem;
  border-radius: 100px;
  border: 1px solid transparent;
  background: var(--mist);
  color: var(--forest-deep);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  box-shadow: 0 2px 12px -5px rgba(20, 34, 28, 0.5);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav .nav-cta::after { display: none; }        /* niente sottolineatura da .nav a */
.nav-cta-lock {
  width: 14px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.nav .nav-cta:hover {
  background: #a9cad5;                          /* mist leggermente più chiaro */
  color: var(--forest-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(20, 34, 28, 0.55);
}
.nav .nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px -6px rgba(20, 34, 28, 0.5);
}
.nav .nav-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 5px var(--sky);
}
/* header chiaro (scrolled): mantiene contrasto, hover vira al verde brand */
.site-header.scrolled .nav .nav-cta {
  background: var(--mist);
  color: var(--forest-deep);
  box-shadow: inset 0 0 0 1px rgba(35, 51, 41, 0.12), 0 2px 10px -6px rgba(35, 51, 41, 0.4);
}
.site-header.scrolled .nav .nav-cta:hover {
  background: var(--forest);
  color: #fff;
}
.site-header.scrolled .nav .nav-cta:focus-visible {
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--sky);
}

/* burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.site-header.scrolled .nav-toggle span { background: var(--forest); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(250, 248, 243, 0.98);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 1rem var(--gutter) 1.6rem;
}
/* senza questa riga l'attributo hidden viene sovrascritto dal display:flex
   qui sopra e il menu mobile resta aperto, impossibile da chiudere */
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--forest-deep);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  /* area di tocco minima garantita su mobile */
  display: flex;
  align-items: center;
  min-height: 44px;
}
.mobile-menu a:last-child { border-bottom: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../assets/landscapes/veronza-hero.webp") center 38% / cover no-repeat;
  transform: scale(1.06);
  will-change: transform;
}
/* velatura verde per legibilità del logo bianco + brand mood */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 34, 28, 0.55) 0%, rgba(20, 34, 28, 0.12) 32%, rgba(20, 34, 28, 0.18) 70%, rgba(15, 26, 21, 0.62) 100%),
    linear-gradient(105deg, rgba(24, 40, 33, 0.5) 0%, rgba(24, 40, 33, 0) 55%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: var(--header-h);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2rem;
}

.hero-left { max-width: 40rem; }
.hero-title {
  margin-top: 0;
}
/* resa visiva del titolo: scritta calligrafica "Dalla ferita al talento"
   (occupa lo spazio precedentemente riservato al logo nella hero).
   Il file WebP ha un margine trasparente interno (bbox 77..792 su 866 di
   larghezza, 98..200 su 288 di altezza): lo compenso via margini negativi,
   in frazione della larghezza resa, così l'inizio visivo della "D" cade
   esattamente sul margine sinistro del paragrafo sottostante. */
.hero-title-img {
  --title-w: min(100%, 38rem);
  display: block;
  width: var(--title-w);
  height: auto;
  /* -77/866 ≈ -0.089 → azzera il vuoto trasparente a sinistra */
  margin-left: calc(var(--title-w) * -0.089);
  /* riduce i vuoti trasparenti sopra/sotto per un ritmo verticale equilibrato */
  margin-top: calc(var(--title-w) * -0.055);
  margin-bottom: calc(var(--title-w) * -0.075);
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.55));
}
.hero-tagline {
  margin-top: 1.2rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
  max-width: 40ch;
}

.hero-left .btn { margin-top: 2.6rem; }

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-ovoide {
  width: min(88%, 30rem);
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.32));
  animation: floaty 9s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(-8px); }
  50%      { transform: translateY(8px); }
}

.scroll-cue {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 26px; height: 46px;
  display: grid; place-items: start center;
}
.scroll-cue-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  animation: cue 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(20px); opacity: 0; }
}

/* =========================================================
   SECTIONS (generic)
   ========================================================= */
.section {
  position: relative;
  padding-block: clamp(5.5rem, 12vw, 9.5rem);
}
.section-head { max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-intro {
  margin-top: 1.6rem;
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 52ch;
}

/* Fotografie editoriali aggiuntive: per scelta progettuale sono presenti
   esclusivamente nella variante desktop. */
.desktop-photo { display: none; }

/* INTRO */
.intro { background: var(--ivory); }
/* stessa impostazione della hero: testi a sinistra, immagine a destra */
.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.intro-media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.intro-star {
  width: min(80%, 23rem);   /* leggermente più piccola dell'ovoide */
  height: auto;
  object-fit: contain;      /* immagine sempre integra, mai tagliata */
  animation: floaty 9s ease-in-out infinite;  /* stessa animazione dell'ovoide */
}
.intro .lede {
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 400;
  line-height: 1.42;
  color: var(--ink);
  max-width: 40ch;
}
.intro .lede i { font-style: italic; color: var(--sky); }

/* enfasi editoriale riutilizzabile: corsivo serif elegante, azzurro sky
   (stesso trattamento di "Psicosintesi" nella bio di Thomas) */
.accent-sky {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sky);
}
.body-lg {
  margin-top: 1.8rem;
  color: var(--ink-soft);
  font-size: 1.12rem;
  max-width: 58ch;
}

/* =========================================================
   METODO — pillars
   ========================================================= */
.metodo { background: var(--ivory-2); }
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.method-swipe-hint { display: none; }
.pillar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.6rem 2rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(35, 51, 41, 0.28);
  border-color: transparent;
}
.pillar-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--mist);
  display: block;
  margin-bottom: 1.4rem;
}
.pillar-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--forest);
  line-height: 1.15;
  margin-bottom: 0.9rem;
}
.pillar-text { color: var(--ink-soft); font-size: 1rem; }
.video-trigger {
  border: 0;
  font: inherit;
  cursor: pointer;
}
.method-video-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0;
  min-height: 44px;
  color: var(--forest);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.method-video-trigger svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--forest);
  fill: #fff;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.method-video-trigger:hover { color: var(--sky); transform: translateX(3px); }
.method-video-trigger:hover svg { background: var(--sky); transform: scale(1.08); }
.video-trigger:focus-visible,
.video-modal__close:focus-visible {
  outline: 3px solid var(--mist);
  outline-offset: 4px;
}

body.video-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.method-video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity 0.28s var(--ease);
}
.method-video-cover__play,
.portrait-video-trigger__play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  color: #fff;
  background: rgba(25, 38, 31, 0.44);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.method-video-cover:hover .method-video-cover__play,
.portrait-video-trigger:hover .portrait-video-trigger__play {
  background: var(--forest);
  transform: translate(-50%, -50%) scale(1.08);
}
.method-video-cover__play svg,
.portrait-video-trigger__play svg { width: 22px; height: 22px; fill: currentColor; }
.method-video-cover { display: none; }

/* =========================================================
   GUIDE
   ========================================================= */
.guide { background: var(--ivory); }
.guides {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.guide-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 2.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.guide-portrait {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, var(--mist), var(--sage));
  color: #fff;
  font-family: var(--serif);
  font-size: 2rem;
  margin-bottom: 1.2rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.guide-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.guide-portrait--sky img { object-position: center 20%; }
.guide-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.9rem;
  color: var(--forest-deep);
}
.guide-role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.9rem;
}
.guide-text { color: var(--ink-soft); }

/* =========================================================
   VIDEO — lightbox minimale, iframe creato solo al clic
   ========================================================= */
.video-modal {
  position: relative;
  width: min(calc(100% - 2rem), 50.625dvh);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.video-modal::backdrop { background: rgba(10, 17, 14, 0.84); backdrop-filter: blur(7px); }
.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0b0e0c;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
}
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal__close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  color: #fff;
  background: rgba(16, 26, 21, 0.86);
  cursor: pointer;
  transform: translate(38%, -38%);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.video-modal__close:hover { background: var(--forest); transform: translate(38%, -38%) scale(1.06); }
.video-modal__close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 620px) {
  .video-modal { width: min(calc(100% - 1.5rem), 50.625dvh); }
}

/* =========================================================
   PERCORSI
   ========================================================= */
.percorsi { background: var(--forest-deep); }
.percorsi .eyebrow { color: var(--mist); }
.percorsi .display { color: #f4f1e9; }
.percorsi .display em { color: var(--mist); }
.percorsi .section-intro { color: rgba(255, 255, 255, 0.7); }

.paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.path-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 3rem 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* più lento e contemplativo (≈1s) rispetto ai precedenti 0.55s */
  transition: transform 1.0s var(--ease), background 1.0s var(--ease),
    border-color 1.0s var(--ease), box-shadow 1.0s var(--ease);
}
/* le schede portano anche la classe .reveal, la cui transition (opacity/
   transform/filter) — dichiarata dopo — vincerebbe azzerando il rallentamento
   di background/bordo/ombra. Qui, con specificità maggiore (.paths .path-card),
   reimposto tutte le transizioni: conservo l'ingresso reveal e mantengo lento
   anche l'hover. */
.paths .path-card {
  transition:
    opacity 0.95s var(--ease),
    filter 0.9s var(--ease),
    transform 1.0s var(--ease),
    background 1.0s var(--ease),
    border-color 1.0s var(--ease),
    box-shadow 1.0s var(--ease);
}
/* linea d'accento superiore che si disegna */
.path-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 0px; width: 100%;
  background: linear-gradient(90deg, var(--mist), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.0s var(--ease);
  z-index: 2;
}
/* riflesso di luce che attraversa la scheda */
.path-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 65%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transform: translateX(-180%) skewX(-14deg);
  /* riflesso luminoso più lento e disteso (≈3.4s) rispetto ai precedenti 2s */
  transition: transform 3.4s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.path-card:hover {
  /* sollevamento più contenuto per un effetto meno reattivo */
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(143, 176, 188, 0.55);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(143, 176, 188, 0.15);
}
.path-card:hover::before { transform: scaleX(1); }
.path-card:hover::after { transform: translateX(240%) skewX(-14deg); }

/* — INTENSIVO: risalto permanente + hover più marcato — */
.path-card--featured {
  background:
    linear-gradient(150deg, rgba(143, 176, 188, 0.18), rgba(143, 176, 188, 0.04) 60%),
    rgba(255, 255, 255, 0.02);
  border-color: rgba(143, 176, 188, 0.45);
  box-shadow: 0 0 0 1px rgba(143, 176, 188, 0.12), 0 24px 50px -34px rgba(143, 176, 188, 0.5);
}
.path-card--featured::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent); }
.path-card--featured:hover {
  /* conserva un sollevamento leggermente maggiore del Base, ma più morbido */
  transform: translateY(-8px);
  border-color: rgba(166, 198, 209, 0.85);
  box-shadow: 0 44px 80px -32px rgba(0, 0, 0, 0.6),
    0 0 40px -6px rgba(143, 176, 188, 0.45);
}
/* badge d'accento sull'Intensivo */
.path-card--featured .path-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--forest-deep);
  background: var(--mist);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
}
.path-tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 1.4rem;
}
.path-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.1rem;
  color: #f4f1e9;
  margin-bottom: 1.8rem;
}
.path-meta {
  display: flex;
  gap: 2.6rem;
  padding-block: 1.6rem;
  margin-bottom: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  width: 100%;
}
.path-num {
  display: block;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: #fff;
}
.path-unit {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.4rem;
}
.path-text {
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 2rem;
}
.path-card .btn { margin-top: auto; }
.path-card .btn { position: relative; z-index: 2; }

/* =========================================================
   CONTATTI
   ========================================================= */
.contatti { background: var(--ivory); text-align: center; }
.contatti-inner { display: flex; flex-direction: column; align-items: center; }
.contatti .section-intro { text-align: center; }
.contatti .btn { margin-top: 2.6rem; }
.contatti-email {
  margin-top: 1.4rem;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.contatti-email a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s var(--ease);
}
.contatti-email a:hover { color: var(--forest-deep); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--ivory-2);
  border-top: 1px solid var(--line);
  padding-block: 3.4rem;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.footer-logo { height: 30px; width: auto; opacity: 0.9; }
.footer-note { color: var(--ink-soft); font-size: 0.92rem; }
.footer-copy { color: var(--ink-faint); font-size: 0.82rem; }
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--ink-faint);
  font-size: 0.82rem;
}
.footer-legal a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--forest-deep); }
.footer-legal a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.footer-social,
.mobile-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.footer-social a,
.mobile-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--forest);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-social svg,
.mobile-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-social .social-dot,
.mobile-social .social-dot { fill: currentColor; stroke: none; }
.footer-social .social-play,
.mobile-social .social-play { fill: currentColor; stroke: none; }
.footer-social a:hover,
.mobile-social a:hover { color: #fff; background: var(--forest); border-color: var(--forest); transform: translateY(-2px); }
.footer-social a:focus-visible,
.mobile-social a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.mobile-social {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.mobile-menu .mobile-social a {
  padding: 0;
  min-height: 44px;
  border: 1px solid var(--line);
}

/* Contatto immediato: visibile soltanto nell'intervallo mobile del menu. */
.whatsapp-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 12px;
  color: #fff;
  background: #267d4e;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 12px 28px -12px rgba(20, 48, 32, 0.72);
  transition: background 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.whatsapp-fab svg { width: 100%; height: 100%; fill: currentColor; }
.whatsapp-fab:hover { background: #1e6840; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(20, 48, 32, 0.78); }
.whatsapp-fab:active { transform: translateY(0); }
.whatsapp-fab:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.whatsapp-fab--hidden { display: none !important; }

/* =========================================================
   BOTTONI
   Pill con riempimento che sale in hover + freccia che scorre.
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.9rem;
  border-radius: 100px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease),
    transform 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.btn__text { position: relative; }
.btn__arrow {
  width: 15px; height: 15px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.45s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
/* riempimento che sale */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(100%);
  transition: transform 0.55s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mist); }

/* chiaro — su fondi scuri (hero, percorso base) */
.btn--light { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn--light::before { background: var(--ivory); }
.btn--light:hover {
  color: var(--forest-deep);
  border-color: var(--ivory);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}

/* accento — pieno, per esaltare il Percorso Intensivo */
.btn--accent { color: var(--forest-deep); border-color: transparent; background: var(--mist); }
.btn--accent::before { background: #b6d2db; }
.btn--accent:hover {
  color: var(--forest-deep);
  transform: translateY(-3px);
  box-shadow: 0 20px 46px -14px rgba(143, 176, 188, 0.75);
}

/* scuro — su fondi chiari (contatti) */
.btn--dark { color: var(--forest); border-color: var(--forest); }
.btn--dark::before { background: var(--forest); }
.btn--dark:hover {
  color: var(--ivory);
  border-color: var(--forest);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(35, 51, 41, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn__arrow,
  .path-card, .paths .path-card, .path-card::before, .path-card::after {
    transition: none;
  }
  .btn:hover, .path-card:hover, .path-card--featured:hover { transform: none; }
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.55s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* varianti direzionali opzionali */
.reveal--left  { transform: translateX(-46px); }
.reveal--right { transform: translateX(46px); }
.reveal--left.is-visible,
.reveal--right.is-visible { transform: none; }

/* =========================================================
   INTRO D'INGRESSO — hero & page-hero (pura CSS, senza JS)
   ========================================================= */
@keyframes introUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes introMedia {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.hero-left > * { opacity: 0; animation: introUp 0.6s var(--ease) both; }
.hero-left > *:nth-child(1) { animation-delay: 0.05s; }
.hero-left > *:nth-child(2) { animation-delay: 0.13s; }
.hero-left > *:nth-child(3) { animation-delay: 0.21s; }
.hero-left > *:nth-child(4) { animation-delay: 0.29s; }
.hero-right { opacity: 0; animation: introMedia 0.7s var(--ease) 0.12s both; }

.page-hero .container > * { opacity: 0; animation: introUp 0.55s var(--ease) both; }
.page-hero .container > *:nth-child(1) { animation-delay: 0.04s; }
.page-hero .container > *:nth-child(2) { animation-delay: 0.12s; }
.page-hero .container > *:nth-child(3) { animation-delay: 0.20s; }
.page-hero .container > *:nth-child(4) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right { opacity: 1; transform: none; filter: none; transition: none; }
  .hero-left > *, .hero-right, .page-hero .container > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-ovoide, .intro-star, .scroll-cue-line { animation: none; }
}

/* mobile: intro più rapida per non lasciare titolo/testo/CTA invisibili a lungo.
   Le regole senza !important non scavalcano prefers-reduced-motion qui sopra. */
@media (max-width: 720px) {
  .hero-left > * { animation-duration: 0.45s; }
  .hero-left > *:nth-child(1) { animation-delay: 0s; }
  .hero-left > *:nth-child(2) { animation-delay: 0.07s; }
  .hero-left > *:nth-child(3) { animation-delay: 0.14s; }
  .hero-left > *:nth-child(4) { animation-delay: 0.21s; }
  .hero-right { animation-duration: 0.5s; animation-delay: 0.06s; }

  .page-hero .container > * { animation-duration: 0.42s; }
  .page-hero .container > *:nth-child(1) { animation-delay: 0s; }
  .page-hero .container > *:nth-child(2) { animation-delay: 0.07s; }
  .page-hero .container > *:nth-child(3) { animation-delay: 0.14s; }
  .page-hero .container > *:nth-child(4) { animation-delay: 0.21s; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero-left { max-width: 40rem; }
  .hero-tagline { margin-inline: auto; }
  /* layout centrato: la scritta è già centrata nel WebP, quindi niente
     compensazione orizzontale; resto fluido e senza overflow */
  .hero-title-img {
    --title-w: min(90%, 30rem);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--title-w) * -0.05);
    margin-bottom: calc(var(--title-w) * -0.06);
  }
  .hero-right { order: -1; margin-bottom: 1rem; }
  .hero-ovoide { width: min(58%, 18rem); }
  /* stella sotto i testi, centrata */
  .intro-grid { grid-template-columns: 1fr; }
  .intro-media { order: 2; margin-top: clamp(1.6rem, 5vw, 2.6rem); }
  .intro-star { width: min(56%, 17rem); }
  .pillars {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 1.2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .pillars::-webkit-scrollbar { display: none; }
  .method-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.9rem;
    color: var(--forest);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .method-swipe-hint span { color: var(--sky); font-size: 1.25rem; line-height: 1; }
  .pillar {
    flex: 0 0 min(76vw, 25rem);
    scroll-snap-align: start;
    padding: 1.35rem;
  }
  .pillar:hover { transform: none; }
  .pillar:focus-within {
    box-shadow: 0 24px 48px -30px rgba(35, 51, 41, 0.28);
    border-color: transparent;
  }
  .method-video-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    margin-bottom: 1.45rem;
    overflow: hidden;
    border-radius: calc(var(--radius-lg) - 6px);
    background: var(--forest-deep);
  }
  .method-video-cover:focus-visible { outline: 3px solid var(--mist); outline-offset: 3px; }
  .method-video-trigger { display: none; }
  .guides, .paths { grid-template-columns: 1fr; }
  .guide-portrait--sky img { object-position: center 6%; }
  .scroll-cue { display: none; }
}

/* =========================================================
   HOME — VARIANTE FOTOGRAFICA DESKTOP
   Le regole sono volutamente isolate sopra i 900px: sotto questa soglia
   la composizione approvata resta identica e le nuove foto non occupano spazio.
   ========================================================= */
@media (min-width: 901px) {
  .desktop-photo { display: block; }

  .metodo-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 0.78fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 5.5rem);
    margin-bottom: clamp(3.2rem, 5vw, 4.5rem);
  }
  .metodo-intro-grid .section-head { margin-bottom: 0; }
  .metodo-intro-grid .section-intro { max-width: 46ch; }

  /* Composizione: foto grande orizzontale (ATB, 2000x1497) + dettaglio verticale
     (Thomas in aula, 1200x1600) sovrapposto in basso a sinistra. Le proporzioni dei
     riquadri seguono quelle degli scatti, cosi' il ritaglio resta minimo e i soggetti
     in primo piano non vengono tagliati. */
  .method-photos {
    position: relative;
    padding: 0 0 clamp(2.2rem, 4vw, 3.2rem) clamp(2.5rem, 6vw, 4.5rem);
  }
  .method-photo {
    overflow: hidden;
    border: 1px solid rgba(35, 51, 41, 0.12);
    background: var(--paper);
  }
  .method-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .method-photo--main {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    box-shadow: 0 32px 70px -44px rgba(35, 51, 41, 0.5);
  }
  .method-photo--main img { object-position: center 45%; }
  .method-photo--detail {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44%;
    aspect-ratio: 3 / 4;
    border: 7px solid var(--ivory-2);
    border-radius: var(--radius);
    box-shadow: 0 26px 56px -34px rgba(35, 51, 41, 0.65);
  }
  .method-photo--detail img { object-position: center 42%; }

  .percorsi-intro-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(3rem, 5vw, 5rem);
    margin-bottom: clamp(3rem, 5vw, 4.2rem);
  }
  .percorsi-intro-grid .section-head { margin-bottom: 0; }
  .percorsi-photo {
    position: relative;
    height: clamp(15rem, 20vw, 19rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    box-shadow: 0 34px 72px -42px rgba(0, 0, 0, 0.85);
  }
  .percorsi-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(35, 51, 41, 0.14), transparent 52%);
    pointer-events: none;
  }
  .percorsi-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 54%;
  }
}


@media (max-width: 720px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .whatsapp-fab { display: grid; }
  .mobile-menu-open .whatsapp-fab { display: none; }
  .hero-ovoide { width: min(52%, 15rem); }
  .hero-content { padding-bottom: 3.5rem; }
  .hero-title-img { margin-bottom: calc(var(--title-w) * -0.01); }
  .hero-tagline { margin-top: 1.45rem; }
  .hero-left .btn { margin-top: 2.25rem; }
  .intro-star { width: min(60%, 15rem); }
}

@media (min-width: 721px) {
  .mobile-menu { display: none !important; }
}

/* =========================================================
   NAV — menu a tendina (Le Guide / I Percorsi)
   ========================================================= */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
  padding-block: 0.4rem;
  transition: color 0.35s var(--ease);
}
.site-header.scrolled .nav-trigger { color: var(--ink-soft); }
.nav-trigger:hover,
.nav-item.open .nav-trigger { color: #fff; }
.site-header.scrolled .nav-trigger:hover,
.site-header.scrolled .nav-item.open .nav-trigger { color: var(--forest); }
.nav-caret {
  width: 13px; height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}
.nav-item:hover .nav-caret,
.nav-item.open .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 230px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
  box-shadow: 0 24px 50px -22px rgba(35, 51, 41, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0.32s;
}
.nav-menu::before {
  /* ponte invisibile per l'hover */
  content: "";
  position: absolute;
  top: -0.9rem; left: 0; right: 0; height: 0.9rem;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.open .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-menu a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  color: var(--ink);
  transition: background 0.28s var(--ease), color 0.28s var(--ease);
}
.nav-menu a::after { display: none; }
.nav-menu a:hover { background: var(--ivory-2); }
.nav-menu-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--forest-deep);
  line-height: 1.1;
}
.nav-menu a:hover .nav-menu-name { color: var(--forest); }
.nav-menu-desc {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* mobile menu — gruppi */
.mobile-group {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  padding: 1.1rem 0 0.3rem;
}
.mobile-menu a.mobile-sub {
  font-size: 1.2rem;
  padding-left: 1rem;
  border-bottom: 1px solid var(--line);
}

/* =========================================================
   BOTTONE — variante azzurra (Thomas / accenti sky)
   ========================================================= */
.btn--sky { color: var(--sky); border-color: var(--sky); }
.btn--sky::before { background: var(--sky); }
.btn--sky:hover {
  color: var(--ivory);
  border-color: var(--sky);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(94, 133, 152, 0.6);
}

/* =========================================================
   HOME — card guide: link + varianti colore
   ========================================================= */
.guide-card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); }
.guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(35, 51, 41, 0.24);
  border-color: transparent;
}
.guide-card-link { margin-top: 1.6rem; }
.guide-portrait--sky { background: radial-gradient(circle at 30% 30%, #a7c7d3, var(--sky)); }
.guide-role--sky { color: var(--sky); }

/* =========================================================
   SOTTOPAGINE — hero / banner
   ========================================================= */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  color: #fff;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 120% at 15% 0%, rgba(255,255,255,0.08), transparent 55%);
}
/* tema foresta (Tania / percorso base) */
.theme-forest .page-hero::before {
  background:
    radial-gradient(90% 120% at 85% 10%, rgba(111, 140, 123, 0.55), transparent 60%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
}
/* tema azzurro (Thomas) */
.theme-sky .page-hero::before {
  background:
    radial-gradient(90% 120% at 85% 10%, rgba(143, 176, 188, 0.5), transparent 60%),
    linear-gradient(160deg, #33555f 0%, #223a42 100%);
}
/* tema intensivo — più profondo e drammatico */
.theme-intensive .page-hero {
  min-height: 72vh;
}
.theme-intensive .page-hero::before {
  background:
    radial-gradient(80% 100% at 80% 0%, rgba(143, 176, 188, 0.42), transparent 55%),
    radial-gradient(90% 120% at 10% 100%, rgba(111, 140, 123, 0.4), transparent 60%),
    linear-gradient(155deg, #24413a 0%, #16241d 100%);
}

.page-hero .eyebrow { color: rgba(255, 255, 255, 0.82); margin-bottom: 1.1rem; }
.theme-sky .page-hero .eyebrow { color: var(--mist); }
.page-hero-title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-size: clamp(3rem, 8vw, 6rem);
  color: #fff;
}
.page-hero-title em { font-style: italic; font-weight: 300; color: rgba(255,255,255,0.72); }
.page-hero-sub {
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
}
.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.6rem;
  margin-top: 2.4rem;
}
.page-hero-meta > div { display: flex; flex-direction: column; }
.page-hero-meta .m-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: #fff;
}
.page-hero-meta .m-unit {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0.5rem;
}

/* =========================================================
   GUIDA — pagina di dettaglio (Tania / Thomas)
   ========================================================= */
.guru { background: var(--ivory); }
.guru-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.guru--reverse .guru-grid { grid-template-columns: 1.15fr 0.85fr; }
.guru--reverse .guru-portrait-col { order: 2; }

/* ritratto (placeholder elegante, sostituibile con foto reale) */
.guru-portrait-col { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(35, 51, 41, 0.4);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(160deg, var(--sage), var(--forest));
}
.portrait-video-trigger {
  display: block;
  width: min(100%, 21rem);
  aspect-ratio: 9 / 16;
  padding: 0;
  cursor: pointer;
}
.theme-sky .portrait-frame {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(160deg, var(--mist), var(--sky));
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.theme-forest .portrait-frame,
.theme-sky .portrait-frame { aspect-ratio: 9 / 16; }
.guru--reverse .portrait-video-trigger { margin-left: auto; }

.guru-bio .eyebrow { color: var(--sage); }
.theme-sky .guru-bio .eyebrow { color: var(--sky); }
.guru-bio h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  color: var(--forest-deep);
  margin-bottom: 1.6rem;
}
.guru-bio p { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 1.3rem; }
.guru-bio p.lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.8rem;
}
.guru-bio p.lead em { font-style: italic; color: var(--sage); }
.theme-sky .guru-bio p.lead em { color: var(--sky); }

/* citazione */
.guru-quote {
  margin: clamp(2.4rem, 5vw, 3.6rem) 0;
  padding: 2rem 2.4rem;
  border-left: 3px solid var(--sage);
  background: var(--ivory-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.theme-sky .guru-quote { border-left-color: var(--sky); }
.guru-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--forest-deep);
  margin: 0;
}

/* tag / focus */
.guru-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.guru-tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--ivory-2);
  border: 1px solid var(--line);
  padding: 0.5rem 1rem;
  border-radius: 100px;
}
.theme-sky .guru-tag { color: var(--sky); }

/* =========================================================
   BANDA FOTOGRAFICA — pausa visiva editoriale tra sezioni
   ========================================================= */
.photo-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ivory-2);
}
.photo-band img {
  display: block;
  width: 100%;
  height: clamp(360px, 42vw, 760px);
  object-fit: cover;
  object-position: center 38%;
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(35, 51, 41, 0.12), transparent 22%, transparent 76%, rgba(35, 51, 41, 0.12));
}

/* =========================================================
   CURRICULUM — formazione (timeline verticale)
   ========================================================= */
.curriculum { background: var(--ivory-2); }
.cv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.cv-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.9rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.cv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 55px -30px rgba(35, 51, 41, 0.26);
  border-color: transparent;
}
.cv-year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sage);
  margin-bottom: 0.6rem;
}
.theme-sky .cv-year { color: var(--sky); }
.cv-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.42rem;
  color: var(--forest-deep);
  line-height: 1.2;
  margin-bottom: 0.7rem;
}
.cv-card p { color: var(--ink-soft); font-size: 0.98rem; }
.cv-place {
  display: block;
  margin-top: auto;
  padding-top: 0.8rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =========================================================
   PERCORSI — pagina di dettaglio (timeline lezioni)
   ========================================================= */
.path-detail { background: var(--ivory); }
.path-lead {
  max-width: 52rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.path-lead .lede {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.path-lead .lede em { font-style: italic; color: var(--sage); }
.theme-intensive .path-lead .lede em { color: var(--sky); }
.path-lead p { color: var(--ink-soft); font-size: 1.1rem; max-width: 56ch; }

/* stat strip */
.path-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.stat {
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  text-align: center;
}
.theme-intensive .stat { background: var(--forest-deep); border-color: rgba(255,255,255,0.12); }
.stat .s-num {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1;
  color: var(--forest);
}
.theme-intensive .stat .s-num { color: #fff; }
.stat .s-unit {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.theme-intensive .stat .s-unit { color: rgba(255,255,255,0.6); }

/* timeline */
.timeline { background: var(--ivory-2); }
.tl {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-left: 0;
}
/* traccia verticale neutra (percorso base) */
.tl::before {
  content: "";
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
/* linea colorata progressiva sopra la traccia: si riempie dall'alto verso il
   basso mentre l'utente attraversa la timeline (--tl-progress 0→1, impostato in JS) */
.tl::after {
  content: "";
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sage), var(--mist) 55%, var(--sky));
  clip-path: inset(0 0 calc((1 - var(--tl-progress, 0)) * 100%) 0);
  transition: clip-path 0.7s var(--ease);
  z-index: 1;
}
.theme-intensive .tl::before { background: linear-gradient(180deg, var(--mist), var(--sky), var(--sage)); width: 3px; left: 26px; }
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.4rem;
  padding-bottom: 1.4rem;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-node {
  position: relative;
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  border: 2px solid var(--sage);
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--forest);
  box-shadow: 0 6px 18px -8px rgba(35, 51, 41, 0.4);
  transition: transform 0.6s var(--ease), background 0.6s var(--ease),
    border-color 0.6s var(--ease), color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.theme-intensive .tl-node { border-color: var(--sky); color: var(--sky); }
.tl-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.tl-card:hover {
  transform: translateX(6px);
  box-shadow: 0 24px 48px -28px rgba(35, 51, 41, 0.24);
  border-color: transparent;
}
.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
  margin-bottom: 0.6rem;
}
/* card senza descrizione (es. lezione 3): niente margine residuo sotto il titolo */
.tl-head:last-child { margin-bottom: 0; }
.tl-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--forest-deep);
  line-height: 1.15;
}
.tl-card p { color: var(--ink-soft); font-size: 1rem; }

/* blocco "cosa include" */
.includes { background: var(--ivory); }
.inc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.inc-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
}
.inc-item .inc-mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--forest);
  color: #fff;
  margin-top: 0.1rem;
}
.theme-intensive .inc-item .inc-mark { background: var(--sky); }
.inc-item .inc-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inc-item h4 { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--forest-deep); margin-bottom: 0.3rem; }
.inc-item p { font-size: 0.95rem; color: var(--ink-soft); }

/* CTA finale sottopagina */
.page-cta {
  text-align: center;
  background: var(--forest-deep);
}
.theme-sky .page-cta { background: #223a42; }
.page-cta .eyebrow { color: var(--mist); }
.page-cta .display { color: #f4f1e9; }
.page-cta .display em { color: var(--mist); }
.page-cta-inner { display: flex; flex-direction: column; align-items: center; }
.page-cta .section-intro { color: rgba(255,255,255,0.72); text-align: center; margin-inline: auto; }
.page-cta .btn { margin-top: 2.6rem; }

/* =========================================================
   RESPONSIVE — sottopagine
   ========================================================= */
@media (max-width: 900px) {
  .guru-grid, .guru--reverse .guru-grid { grid-template-columns: 1fr; }
  .guru--reverse .guru-portrait-col { order: 0; }
  .guru-portrait-col { position: static; width: min(100%, 21rem); max-width: 21rem; margin-inline: auto; }
  .portrait-video-trigger { width: 100%; }
  .cv-grid, .inc-grid { grid-template-columns: 1fr; }
  .skills-list { grid-template-columns: 1fr 1fr; }
  .path-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .skills-list { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 44px 1fr; gap: 1rem; }
  .tl-node { width: 44px; height: 44px; font-size: 1.2rem; }
  .tl::before, .tl::after { left: 21px; }
  .theme-intensive .tl::before { left: 20px; }
  .page-hero-meta { gap: 1.6rem; }
}

/* =========================================================
   AREA RISERVATA — CTA mobile (link nel menu)
   ========================================================= */
/* pill piena in --mist, ben visibile e facilmente premibile.
   Specificità .mobile-menu .mobile-area per vincere su .mobile-menu a. */
.mobile-menu .mobile-area {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--forest-deep);
  background: var(--mist);
  border: none;
  border-bottom: none;
  border-radius: 100px;
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(35, 51, 41, 0.5);
  transition: background 0.35s var(--ease), transform 0.2s var(--ease);
}
.mobile-menu .mobile-area:hover { background: #a9cad5; }
.mobile-menu .mobile-area:active { transform: translateY(1px); }
.mobile-menu .mobile-area:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sky);
}

/* =========================================================
   ICONA WHATSAPP nei bottoni CTA
   ========================================================= */
.btn__wa {
  width: 17px; height: 17px;
  fill: currentColor;
  transition: transform 0.45s var(--ease);
}
.btn:hover .btn__wa { transform: scale(1.12) rotate(-4deg); }

/* =========================================================
   PREZZI — sezione finale percorsi
   ========================================================= */
.pricing { background: var(--forest-deep); }
.theme-intensive .pricing {
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(143, 176, 188, 0.16), transparent 55%),
    #17251e;
}
.pricing .section-head { text-align: center; margin-inline: auto; }
.pricing .eyebrow { color: var(--mist); }
.pricing .display { color: #f4f1e9; }
.pricing .display em { color: var(--mist); }
.pricing .section-intro { color: rgba(255, 255, 255, 0.72); text-align: center; margin-inline: auto; }

.price-wrap { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.price-card {
  width: 100%;
  max-width: 34rem;
  background: var(--ivory);
  border-radius: var(--radius-lg);
  padding: clamp(2.4rem, 5vw, 3.4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6);
}
.price-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sage), var(--mist));
}
.theme-intensive .price-card::before { background: linear-gradient(90deg, var(--mist), var(--sky)); }
.price-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.4rem;
}
.theme-intensive .price-tag { color: var(--sky); }
.price-amount {
  font-family: var(--serif);
  color: var(--forest-deep);
  line-height: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
}
.price-amount .price-cur {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  margin-top: 0.7rem;
  color: var(--sage);
}
.theme-intensive .price-amount .price-cur { color: var(--sky); }
.price-amount .price-value { font-size: clamp(4rem, 11vw, 6rem); font-weight: 500; }
.price-per {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.price-list {
  list-style: none;
  text-align: left;
  max-width: 23rem;
  margin: 1.9rem auto 0;
  display: grid;
  gap: 0.85rem;
}
.price-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.price-list li svg {
  flex: none;
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--sage);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 0.15rem;
}
.theme-intensive .price-list li svg { stroke: var(--sky); }
.price-card .btn { margin-top: 2.2rem; }
.price-cross {
  margin-top: 1.8rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}
.price-cross a { color: var(--mist); text-decoration: underline; text-underline-offset: 4px; }
.price-cross a:hover { color: #fff; }

/* =========================================================
   PERCORSO BASE — timeline viva (nodo attivo + accenti ritmici)
   ========================================================= */
/* nodo che si attiva quando la lezione entra in vista:
   riempimento, leggero ingrandimento e alone molto discreto */
.tl-item.is-active .tl-node {
  background: linear-gradient(160deg, var(--sage), var(--mist));
  border-color: var(--mist);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(143, 176, 188, 0.14),
    0 10px 22px -10px rgba(35, 51, 41, 0.45);
}

/* accento laterale alternato sulle card (sobrio, si rinforza da attivo) */
.tl-card { position: relative; }
.tl-card::before {
  content: "";
  position: absolute;
  left: 0; top: 1.1rem; bottom: 1.1rem;
  width: 3px;
  border-radius: 3px;
  background: var(--sage);
  opacity: 0.25;
  transition: opacity 0.6s var(--ease), background 0.6s var(--ease);
}
.tl-item:nth-child(even) .tl-card::before { background: var(--mist); }
.tl-item.is-active .tl-card::before { opacity: 0.85; }

/* piccolo scostamento ritmico pari/dispari — solo su desktop */
@media (min-width: 621px) {
  .tl-item:nth-child(even) .tl-card { margin-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl::after, .tl-node, .tl-card::before { transition: none; }
}

.tl-io {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1.1rem;
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--line);
}
.tl-io-col { display: flex; flex-direction: column; gap: 0.35rem; }
.tl-io-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tl-io-from .tl-io-label { color: var(--ink-faint); }
.tl-io-to .tl-io-label { color: var(--sage); }
.tl-io-col p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
.tl-io-to p { color: var(--ink); }
.tl-io-arrow { align-self: center; color: var(--sage); display: grid; place-items: center; }
.tl-io-arrow svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 540px) {
  .tl-io { grid-template-columns: 1fr; gap: 0.7rem; }
  .tl-io-arrow { transform: rotate(90deg); justify-self: start; margin: 0.1rem 0; }
}

/* =========================================================
   PERCORSO BASE — quaderno di viaggio editoriale e fotografico
   Sul desktop: cinque doppie pagine alternate. Sul mobile: un unico
   filo verticale che attraversa lezioni e fotografie nell'ordine di lettura.
   ========================================================= */
.timeline--base {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 96% 8%, rgba(143, 176, 188, 0.13), transparent 24rem),
    radial-gradient(circle at 2% 62%, rgba(111, 140, 123, 0.1), transparent 22rem),
    var(--ivory-2);
}
.timeline--base::before {
  content: "";
  position: absolute;
  width: 34rem;
  aspect-ratio: 1;
  right: -24rem;
  top: 9rem;
  border: 1px solid rgba(111, 140, 123, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.timeline--base .container,
.timeline--base .section-head { position: relative; z-index: 1; }

.base-journey {
  position: relative;
  display: grid;
  gap: clamp(3.2rem, 10vw, 4.8rem);
  margin-top: clamp(2.8rem, 7vw, 4rem);
}
/* Il tracciato è volutamente mobile-first: diventa una guida visiva stabile
   senza costringere fotografie o titoli dentro card strette. */
.base-journey::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 1.8rem;
  bottom: 1.8rem;
  width: 1px;
  background: linear-gradient(180deg, var(--sage), var(--mist) 52%, var(--sky));
  opacity: 0.55;
}
.base-journey::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 1.5rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 6px rgba(94, 133, 152, 0.1);
}
.journey-spread {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding-left: 2.85rem;
}
.journey-step {
  position: relative;
  min-width: 0;
  padding: 1.25rem 0 1.55rem;
  border-top: 1px solid rgba(35, 51, 41, 0.16);
}
.journey-step::before {
  content: "";
  position: absolute;
  left: -2.72rem;
  top: 1.53rem;
  width: 9px;
  height: 9px;
  border: 2px solid var(--ivory-2);
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 1px var(--sage);
  z-index: 2;
}
.journey-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: min(8rem, 45%);
  height: 2px;
  background: linear-gradient(90deg, var(--sage), var(--mist));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s var(--ease);
}
.journey-step.is-visible::after { transform: scaleX(1); }
.journey-step-number {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--serif);
  color: var(--sage);
  line-height: 0.8;
  margin-bottom: 0.9rem;
}
.journey-step-number b {
  font-size: clamp(3.8rem, 17vw, 4.8rem);
  font-weight: 300;
  letter-spacing: -0.06em;
  opacity: 0.22;
  transition: color 0.7s var(--ease), opacity 0.7s var(--ease);
}
.journey-step-number small {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.journey-step.is-visible .journey-step-number b {
  color: var(--forest);
  opacity: 0.48;
}
.journey-step-copy { position: relative; z-index: 1; }
.journey-step-copy h3 {
  max-width: 16ch;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 9vw, 2.45rem);
  font-weight: 500;
  line-height: 1.03;
  color: var(--forest-deep);
  text-wrap: balance;
}
.journey-step-copy p {
  max-width: 31ch;
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}
.journey-photo {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin-block: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: 0 20px 42px -32px rgba(35, 51, 41, 0.48);
}
.journey-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(35, 51, 41, 0.03), rgba(35, 51, 41, 0.16));
  pointer-events: none;
}
.journey-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: none;
}
.journey-photo--group img { object-position: 43% center; }
.journey-photo--presence img { object-position: 63% center; }
.journey-photo--landscape img { object-position: center 48%; }
.journey-photo--practice img { object-position: 45% center; }
.journey-photo--summit img { object-position: 52% center; }

@media (min-width: 901px) {
  .timeline--base .section-head { max-width: 48rem; }
  .base-journey {
    display: block;
    margin-top: clamp(3.5rem, 5vw, 5rem);
  }
  .base-journey::before,
  .base-journey::after { display: none; }
  .journey-spread {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(180px, 1fr));
    gap: clamp(1.6rem, 2.4vw, 2.5rem) clamp(2rem, 3.2vw, 3.5rem);
    min-height: clamp(480px, 40vw, 560px);
    padding: clamp(4rem, 6vw, 5.8rem) 0;
    border-top: 1px solid rgba(35, 51, 41, 0.13);
  }
  .journey-spread:first-child { border-top: 0; padding-top: 0; }
  .journey-spread:last-child { padding-bottom: 0; }
  .journey-step {
    align-self: center;
    padding: 1.45rem 0 1.8rem;
  }
  .journey-step::before { display: none; }
  .journey-step-number { margin-bottom: 1rem; }
  .journey-step-number b { font-size: clamp(5.4rem, 7.5vw, 7rem); }
  .journey-step-copy h3 { font-size: clamp(2.15rem, 3.2vw, 3rem); }
  .journey-step-copy p { font-size: 1rem; }
  .journey-photo {
    width: 100%;
    height: 100%;
    min-height: 440px;
    margin: 0;
    aspect-ratio: auto;
  }
  .journey-spread--photo-left .journey-photo {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    border-radius: var(--radius) 9rem var(--radius) var(--radius);
  }
  .journey-spread--photo-left .journey-step--first {
    grid-column: 9 / 13;
    grid-row: 1;
  }
  .journey-spread--photo-left .journey-step--second {
    grid-column: 8 / 12;
    grid-row: 2;
  }
  .journey-spread--photo-right .journey-photo {
    grid-column: 6 / 13;
    grid-row: 1 / 3;
    border-radius: 9rem var(--radius) var(--radius) var(--radius);
  }
  .journey-spread--photo-right .journey-step--first {
    grid-column: 1 / 5;
    grid-row: 1;
  }
  .journey-spread--photo-right .journey-step--second {
    grid-column: 2 / 6;
    grid-row: 2;
  }
  .journey-spread--wide-photo .journey-photo { grid-column: 1 / 9; }
  .journey-spread--wide-photo .journey-step--first { grid-column: 10 / 13; }
  .journey-spread--wide-photo .journey-step--second { grid-column: 9 / 13; }
  .journey-spread--final .journey-photo {
    border-radius: var(--radius) var(--radius) 9rem var(--radius);
  }
}

@media (max-width: 420px) {
  .journey-spread { padding-left: 2.55rem; }
  .journey-step::before { left: -2.42rem; }
  .journey-step-copy h3 { font-size: clamp(1.75rem, 8.8vw, 2.1rem); }
}

@media (max-width: 720px) {
  .journey-photo { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-step::after,
  .journey-step-number b,
  .journey-photo img { transition: none; }
  .journey-photo img { transform: none; }
}

/* =========================================================
   PERCORSO INTENSIVO — step cinematici a schermo intero
   ========================================================= */
.steps-intro { padding-bottom: clamp(2rem, 4vw, 3rem); }
.steps {
  position: relative;
  background: #0d1512;
}
.step {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Gli sfondi delle tappe sono dichiarati qui e non piu' in un custom property
   inline: un url() dentro una variabile viene risolto rispetto al foglio di stile
   in alcuni browser e rispetto al documento in altri, quindi il percorso relativo
   non sarebbe affidabile. Qui la base e' sempre css/, quindi "../assets/...".
   L'inquadratura (--pos) e l'eventuale velo (--veil) restano inline sull'<article>. */
.step-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/landscapes/dolomiti.webp");
  background-position: var(--pos, center);
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.28);
  opacity: 0.35;
  transition: transform 1.2s var(--ease), opacity 0.75s var(--ease);
}
/* I sette weekend, nell'ordine in cui compaiono in percorso-intensivo.html */
#weekend-steps .step:nth-of-type(1) .step-media { background-image: url("../assets/steps/mappe.webp"); }      /* mappe */
#weekend-steps .step:nth-of-type(2) .step-media { background-image: url("../assets/steps/bosco-luce.webp"); } /* bosco illuminato dal sole */
#weekend-steps .step:nth-of-type(3) .step-media { background-image: url("../assets/steps/puzzle.webp"); }     /* pezzi di puzzle */
#weekend-steps .step:nth-of-type(4) .step-media { background-image: url("../assets/steps/bussola.webp"); }    /* bussola */
#weekend-steps .step:nth-of-type(5) .step-media { background-image: url("../assets/steps/cervo.webp"); }      /* cervo */
#weekend-steps .step:nth-of-type(6) .step-media { background-image: url("../assets/landscapes/Dolomiti-3.webp"); } /* Dolomiti 3 */
#weekend-steps .step:nth-of-type(7) .step-media { background-image: url("../assets/steps/fuoco.webp"); }      /* fuoco */
.step.is-visible .step-media { transform: scale(1.06); opacity: 1; }
.step-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* velo uniforme facoltativo: serve solo alle tappe con sfondo molto chiaro
     (mappe, puzzle, bosco controluce) per tenere leggibile il testo bianco.
     Si regola per singola tappa con --veil sull'<article>. */
  background-color: rgba(12, 20, 16, var(--veil, 0));
  background-image: linear-gradient(180deg, rgba(12, 20, 16, 0.5) 0%, rgba(12, 20, 16, 0.12) 35%, rgba(12, 20, 16, 0.7) 100%);
}
.step--forest .step-overlay {
  background-image:
    linear-gradient(180deg, rgba(12, 20, 16, 0.55), rgba(12, 20, 16, 0.15) 35%, rgba(12, 20, 16, 0.75)),
    linear-gradient(115deg, rgba(35, 51, 41, 0.6), rgba(35, 51, 41, 0) 62%);
}
.step--sky .step-overlay {
  background-image:
    linear-gradient(180deg, rgba(10, 18, 22, 0.55), rgba(10, 18, 22, 0.15) 35%, rgba(10, 18, 22, 0.75)),
    linear-gradient(115deg, rgba(34, 58, 66, 0.62), rgba(34, 58, 66, 0) 62%);
}
.step-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 7rem;
  color: #fff;
}
.step-content { max-width: 42rem; }
.step--right .step-content { margin-left: auto; text-align: right; }
.step--right .step-focus { justify-content: flex-end; }

.step-index,
.step-badge,
.step-date,
.step-title,
.step-text,
.step-focus {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
}
.step.is-visible .step-index  { opacity: 1; transform: none; transition-delay: 0.10s; }
.step.is-visible .step-badge  { opacity: 1; transform: none; transition-delay: 0.20s; }
.step.is-visible .step-date   { opacity: 1; transform: none; transition-delay: 0.28s; }
.step.is-visible .step-title  { opacity: 1; transform: none; transition-delay: 0.36s; }
.step.is-visible .step-text   { opacity: 1; transform: none; transition-delay: 0.46s; }
.step.is-visible .step-focus  { opacity: 1; transform: none; transition-delay: 0.56s; }

.step-index {
  display: block;
  font-family: var(--serif);
  font-size: clamp(4rem, 13vw, 9.5rem);
  font-weight: 300;
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 0.4rem;
}
.step-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest-deep);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.95rem;
  border-radius: 100px;
  margin-bottom: 0.7rem;
}
/* data del weekend, subito sotto il badge "Weekend · 10 ore" */
.step-date {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 1.3rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.step-title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  color: #fff;
  margin-bottom: 1.3rem;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
.step-text {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 44ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.step--right .step-text { margin-left: auto; }
.step-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.step-focus span {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.45rem 0.95rem;
  border-radius: 100px;
}

/* indicatore di avanzamento (numero + barra) */
.steps-progress {
  position: fixed;
  right: clamp(1rem, 3vw, 2.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.steps-progress.is-on { opacity: 1; visibility: visible; }
.steps-progress-count { font-family: var(--serif); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.steps-progress-count b { font-size: 1.7rem; font-weight: 500; }
.steps-progress-count span { font-size: 0.8rem; opacity: 0.7; margin-top: 0.2rem; }
.steps-progress-track {
  width: 2px;
  height: 130px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}
.steps-progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: top;
  transform: scaleY(0.14);
  transition: transform 0.6s var(--ease);
}

@media (max-width: 720px) {
  .steps-progress { display: none; }
  .step-inner { padding-block: 6rem; }
  .step--right .step-content { text-align: left; margin-left: 0; }
  .step--right .step-focus { justify-content: flex-start; }
  .step--right .step-text { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .step-media { transform: none; opacity: 1; transition: none; }
  .step-index, .step-badge, .step-title, .step-text, .step-focus { opacity: 1; transform: none; transition: none; }
  .steps-progress-bar { transition: none; }
}

/* =========================================================
   AREA RISERVATA — pagine dimostrative (accesso + contenuti)
   Riusa i token del design system; header/footer identici al sito.
   ========================================================= */
/* --- Accesso --- */
.auth {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 3.5rem;
  isolation: isolate;
  color: #fff;
}
/* fondo scuro e sereno: mantiene leggibile il logo/nav bianchi in cima */
.auth::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 120% at 85% 5%, rgba(143, 176, 188, 0.40), transparent 60%),
    radial-gradient(90% 120% at 10% 100%, rgba(111, 140, 123, 0.35), transparent 60%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
}
.auth-card {
  width: 100%;
  max-width: 30rem;
  background: var(--ivory);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.2rem);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.6);
}
.auth-card .eyebrow { color: var(--sage); margin-bottom: 1rem; }
.auth-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 2.9rem);
  line-height: 1.05;
  color: var(--forest-deep);
  margin-bottom: 0.7rem;
}
.auth-lead { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 1.9rem; }
.auth-form { display: flex; flex-direction: column; gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.field input {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input::placeholder { color: var(--ink-faint); }
.field input:focus-visible {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(111, 140, 123, 0.22);
}
.field input[aria-invalid="true"] {
  border-color: #b4553f;
  box-shadow: 0 0 0 3px rgba(180, 85, 63, 0.15);
}
.field-error { min-height: 1.15em; font-size: 0.82rem; color: #a24732; }
.auth-submit { margin-top: 0.5rem; width: 100%; justify-content: center; }
.auth-status {
  margin-top: 0.9rem; min-height: 1.15em;
  font-size: 0.9rem; color: var(--sage); text-align: center;
}
.auth-links { margin-top: 1.7rem; text-align: center; font-size: 0.92rem; color: var(--ink-faint); }
.auth-links a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.auth-links a:hover { color: var(--forest); }
.auth-note {
  margin-top: 1.6rem;
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5;
}
.auth-note svg {
  flex: none; width: 16px; height: 16px;
  stroke: var(--sage); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; margin-top: 0.15rem;
}

/* --- Contenuti riservati (empty state) --- */
.vault { background: var(--ivory); }
.vault-empty { text-align: center; max-width: 48rem; margin-inline: auto; }
.vault-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.vault-card {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--ivory-2);
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.9rem;
  color: var(--ink-faint); text-align: center; padding: 1.4rem;
}
.vault-icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); color: var(--sage);
}
.vault-icon svg { width: 22px; height: 22px; fill: currentColor; }
.vault-card span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.vault-actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { .vault-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vault-grid { grid-template-columns: 1fr; } }

/* variante ghost sobria per azioni secondarie (es. "Esci") */
.btn--ghost { color: var(--ink-soft); border-color: var(--line); }
.btn--ghost::before { background: var(--ivory-2); }
.btn--ghost:hover {
  color: var(--forest-deep);
  border-color: var(--sage);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(35, 51, 41, 0.4);
}

/* =========================================================
   BLOG — pagina dimostrativa (griglia articoli segnaposto)
   Riusa i token del design system; header/footer identici al sito.
   ========================================================= */
.blog { background: var(--ivory); }

.nav a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu a[aria-current="page"] { color: var(--forest); }

/* avviso "anteprima demo" — riusa il linguaggio visivo di .auth-note */
.blog-note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  max-width: 52rem;
  margin: 0 auto clamp(2.6rem, 5vw, 3.6rem);
  background: var(--ivory-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}
.blog-note svg {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blog-note strong { color: var(--forest); font-weight: 700; }
.blog-note em { font-style: italic; color: var(--sky); }

/* media segnaposto — gradiente di brand, chiaramente non una foto reale */
.blog-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.32), transparent 55%),
    linear-gradient(160deg, var(--sage), var(--forest));
}
.blog-media--sky {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.32), transparent 55%),
    linear-gradient(160deg, var(--mist), var(--sky));
}
.blog-media--mist {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.32), transparent 55%),
    linear-gradient(160deg, var(--mist), var(--sage));
}
.blog-media--deep {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(160deg, var(--forest), var(--forest-deep));
}
/* immagine reale che riempie il contenitore media */
.blog-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.blog-card:hover .blog-media img,
.blog-featured:hover .blog-media img { transform: scale(1.04); }
/* card interamente cliccabili e navigabili da tastiera */
a.blog-card, a.blog-featured { color: inherit; text-decoration: none; }
a.blog-card:focus-visible,
a.blog-featured:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--sky);
}
.blog-media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
}
.blog-media-ph svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* categoria + data */
.blog-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}
.blog-date {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* "leggi" — stesso vocabolario visivo della freccia dei .btn */
.blog-card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
}
.blog-card-more svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--ease);
}

/* ---- articolo in evidenza ---- */
.blog-featured {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.blog-featured:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 66px -34px rgba(35, 51, 41, 0.28);
  border-color: transparent;
}
.blog-featured:hover .blog-card-more svg { transform: translateX(4px); }
.blog-featured .blog-media { aspect-ratio: 4 / 3; height: 100%; }
.blog-featured-body { display: flex; flex-direction: column; align-items: flex-start; }
.blog-featured-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.blog-featured-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  color: var(--forest-deep);
  margin-bottom: 1rem;
}
.blog-featured-excerpt {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 46ch;
  margin-bottom: 1.6rem;
}

/* ---- griglia articoli ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(35, 51, 41, 0.26);
  border-color: transparent;
}
.blog-card:hover .blog-card-more svg { transform: translateX(4px); }
.blog-card .blog-media { border-radius: 0; }
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.7rem 1.8rem 1.9rem;
}
.blog-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.blog-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--forest-deep);
  margin-bottom: 0.7rem;
}
.blog-card-excerpt {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin-bottom: 1.4rem;
}

@media (max-width: 900px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured .blog-media { aspect-ratio: 16 / 9; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PAGINE ARTICOLO (blog)
   ========================================================= */
.article { background: var(--ivory); }
.article-wrap { max-width: 44rem; margin: 0 auto; }
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  transition: color 0.3s var(--ease);
}
.article-back svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
}
.article-back:hover { color: var(--forest); }
.article-figure {
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.article-figure img { width: 100%; height: auto; display: block; }
.article-body p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.8;
  margin-bottom: 1.35rem;
}
.article-body p.lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--forest-deep);
  margin-bottom: 1.6rem;
}
.article-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  color: var(--forest-deep);
  margin: 2.2rem 0 1rem;
}

/* =========================================================
   HOME — TESTIMONIANZE
   Composizione editoriale: una citazione guida (grandi virgolette serif),
   due schede sfalsate a destra. Sfondo con aloni e cerchi a filo,
   come la timeline, che sfuma nell'ivory di Contatti.
   ========================================================= */
.testimonianze {
  overflow: hidden;
  isolation: isolate;
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
  /* dall'ivory-2 all'ivory: si fonde senza stacco con Contatti */
  background:
    radial-gradient(circle at 94% 10%, rgba(143, 176, 188, 0.16), transparent 26rem),
    radial-gradient(circle at 4% 58%, rgba(111, 140, 123, 0.11), transparent 24rem),
    linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory-2) 55%, var(--ivory) 100%);
}
/* cerchi concentrici a filo sottile: un'onda che si allarga */
.testimonianze::before,
.testimonianze::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.testimonianze::before {
  width: 40rem;
  left: -22rem;
  top: 16rem;
  border: 1px solid rgba(111, 140, 123, 0.2);
}
.testimonianze::after {
  width: 26rem;
  left: -15rem;
  top: 23rem;
  border: 1px solid rgba(143, 176, 188, 0.26);
}

.testimonianze-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.testimonianze-lead .section-head { margin-bottom: 0; }
.testimonianze-side {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-top: clamp(2rem, 5vw, 4.5rem);
}

.testimonial { position: relative; }
.testimonial-name {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding-top: 1.5rem;
}

/* — citazione guida — */
.testimonial--hero {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(5.4rem, 9vw, 7.8rem);
}
.testimonial--hero::before {
  content: "“";
  content: "“" / "";
  position: absolute;
  top: 0;
  left: -0.04em;
  font-family: var(--serif);
  font-size: clamp(12rem, 20vw, 19rem);
  font-weight: 300;
  line-height: 0.82;
  color: var(--mist);
  opacity: 0;
  transform: translateY(24px) scale(0.86);
  transform-origin: left bottom;
  transition: opacity 1.1s var(--ease) 0.25s, transform 1.3s var(--ease) 0.25s;
  pointer-events: none;
}
.testimonial--hero.is-visible::before { opacity: 0.7; transform: none; }
.testimonial--hero .testimonial-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.75vw, 2.35rem);
  line-height: 1.3;
  color: var(--forest-deep);
  max-width: 30ch;
  text-wrap: pretty;
}
.testimonial--hero .testimonial-quote em { color: var(--sage); }
/* filo che si disegna davanti al nome */
.testimonial--hero .testimonial-name { padding-top: 2rem; }
.testimonial--hero .testimonial-name::before {
  content: "";
  width: 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--sage), var(--mist));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) 0.55s;
}
.testimonial--hero.is-visible .testimonial-name::before { transform: scaleX(1); }

/* — schede laterali: angolo "a foglia" e virgolette piccole — */
.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 2.2rem 2.2rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
  box-shadow: 0 30px 60px -50px rgba(35, 51, 41, 0.4);
}
.testimonial-card:first-child { margin-left: clamp(0rem, 3vw, 3rem); }
.testimonial-card:last-child { margin-right: clamp(0rem, 3vw, 3rem); }
/* la transition di .reveal (dichiarata prima) resta, con in più ombra e bordo */
.testimonianze-side .testimonial-card {
  transition:
    opacity 0.4s var(--ease),
    transform 0.55s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.testimonial-card::before {
  content: "“";
  content: "“" / "";
  display: block;
  height: 1.9rem;
  margin-bottom: 0.4rem;
  font-family: var(--serif);
  font-size: 4.4rem;
  line-height: 0.9;
  color: var(--sage);
  transition: transform 0.5s var(--ease);
}
.testimonial-card--sky::before { color: var(--sky); }
.testimonial-card .testimonial-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.65vw, 1.38rem);
  line-height: 1.48;
  color: var(--ink);
}
@media (hover: hover) {
  .testimonianze-side .testimonial-card.is-visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(35, 51, 41, 0.26);
    border-color: transparent;
  }
  .testimonial-card:hover::before { transform: translateX(5px); }
}

/* micro-interazione legata allo scroll (solo dove supportata):
   le virgolette salgono piano e i cerchi si allargano */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .testimonial--hero::before {
      animation: testimonial-drift linear both;
      animation-timeline: view();
    }
    .testimonianze::before,
    .testimonianze::after {
      animation: testimonial-ripple linear both;
      animation-timeline: view();
    }
  }
}
@keyframes testimonial-drift {
  from { translate: 0 1.4rem; }
  to   { translate: 0 -1.8rem; }
}
@keyframes testimonial-ripple {
  from { scale: 0.86; }
  to   { scale: 1.1; }
}

@media (max-width: 900px) {
  .testimonianze::before { width: 26rem; left: auto; right: -17rem; top: 22rem; }
  .testimonianze::after  { width: 16rem; left: auto; right: -11rem; top: 27rem; }
  .testimonianze-grid { grid-template-columns: minmax(0, 1fr); }
  .testimonial--hero { margin-top: clamp(1.8rem, 6vw, 2.5rem); }
  .testimonial--hero .testimonial-quote p { max-width: 36ch; }
  /* tablet: le due schede affiancate, la seconda più in basso */
  .testimonianze-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.2rem;
    padding-top: clamp(2.8rem, 7vw, 3.6rem);
  }
  .testimonial-card:first-child { margin-left: 0; }
  .testimonial-card:last-child { margin-right: 0; margin-top: 3rem; }
  .testimonial-card { padding: 1.8rem 1.6rem 1.6rem; }
}
@media (max-width: 620px) {
  .testimonial--hero .testimonial-quote p { max-width: none; }
  .testimonianze-side { display: flex; gap: 1.1rem; }
  /* mobile: impilate, con uno sfalsamento ridotto che conserva l'asimmetria */
  .testimonial-card:first-child { margin-left: 1.1rem; }
  .testimonial-card:last-child { margin-right: 1.1rem; margin-top: 0; }
  .testimonial-card { padding: 1.7rem 1.45rem 1.5rem; }
  .testimonial-card .testimonial-quote p { font-size: 1.26rem; }
}
@media (max-width: 380px) {
  .testimonial-card:first-child { margin-left: 0.6rem; }
  .testimonial-card:last-child { margin-right: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial--hero::before { opacity: 0.7; transform: none; transition: none; }
  .testimonial--hero .testimonial-name::before { transform: none; transition: none; }
  .testimonianze-side .testimonial-card,
  .testimonial-card::before { transition: none; }
  .testimonianze-side .testimonial-card.is-visible:hover,
  .testimonial-card:hover::before { transform: none; }
}