/* ============================================================
   linea.css — "linea grafica home04" per le pagine interne (sito02)
   Estende homepage.css. Solo aggiustamenti grafici (niente cambi
   di copy né di struttura): topbar maggiorata trasparente→solida,
   hero full-bleed con scrim verde, divisore a onda, CTA immersiva.
   Palette = token di homepage.css (design.md §2–§4).
   ============================================================ */

/* ---- Resa più generosa su schermi ampi (come home04) ---- */
:root{--container:1380px; --band:#c6ceba}

/* ============================================================
   TOPBAR — trasparente sull'hero, solida chiara allo scroll,
   logo e voci maggiorati (come home04).
   ============================================================ */
.topbar{background:transparent;border-bottom-color:transparent;transition:background .35s var(--ease),border-color .35s,height .4s var(--ease)}
.topbar .bar{height:120px;gap:22px}
.topbar.shrink .bar{height:90px}
.topbar .logo{position:relative;display:block}
.topbar .logo img{position:relative;height:86px}
.topbar.shrink .logo img{transform:scale(.72)}
.topbar .logo .lg-light{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease)}
.topbar .logo .lg-dark{opacity:1;transition:opacity .35s var(--ease)}
.topbar .nav{gap:5px}
.topbar .nav a,.topbar .nav .navbtn{color:rgba(255,255,255,.92);font-size:1.02rem;padding:11px 14px}
.topbar .nav a:hover,.topbar .nav .navbtn:hover{color:#fff;background:rgba(255,255,255,.14)}
/* link/pagina attiva: arancio acceso sull'hero scuro */
.topbar .nav > a[aria-current],.topbar .nav .has-drop .navbtn[aria-current]{color:var(--orange-400)}
/* CTA "Diventa socio" sull'hero: arancio pieno */
.topbar:not(.shrink) .nav a.nav-cta{background:var(--orange-500);color:#fff}
.topbar:not(.shrink) .nav a.nav-cta:hover{background:var(--orange-600);color:#fff}
.topbar .nav a.nav-cta.btn-sm{height:54px;padding:0 26px;font-size:1.02rem}
.topbar .burger svg{stroke:#fff}
/* le tendine restano pannello bianco: link scuri (mai bianco su bianco) */
.topbar .nav .drop a{color:var(--ink-700);font-size:1rem;padding:11px 14px}
.topbar .nav .drop a:hover{color:var(--green-700);background:var(--green-50)}

/* stato solido (scroll) */
.topbar.shrink{background:rgba(251,248,241,.9);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
.topbar.shrink .logo .lg-dark{opacity:0}
.topbar.shrink .logo .lg-light{opacity:1}
.topbar.shrink .nav a,.topbar.shrink .nav .navbtn{color:var(--ink-700)}
.topbar.shrink .nav a:hover,.topbar.shrink .nav .navbtn:hover{color:var(--green-700);background:var(--green-50)}
.topbar.shrink .nav > a[aria-current],.topbar.shrink .nav .has-drop .navbtn[aria-current]{color:var(--green-700)}
.topbar.shrink .nav a.nav-cta{background:var(--green-700);color:#fff}
.topbar.shrink .nav a.nav-cta:hover{background:var(--green-600);color:#fff}
.topbar.shrink .burger svg{stroke:var(--ink-900)}

@media (max-width:1200px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* ============================================================
   HERO FULL-BLEED — foto a tutta fascia + scrim verde.
   Leggibilità garantita da doppio gradiente (più denso a sinistra,
   con velo superiore per il menù).
   ============================================================ */
.hero-bg{position:relative;overflow:hidden;color:#fff;margin-top:-120px;padding-top:120px;background:var(--green-900)}
.hero-bg .hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
.hero-bg .hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(95deg, rgba(9,48,25,.94) 0%, rgba(9,48,25,.80) 32%, rgba(9,48,25,.46) 62%, rgba(9,48,25,.18) 100%),
  linear-gradient(180deg, rgba(9,48,25,.42) 0%, rgba(9,48,25,0) 30%, rgba(9,48,25,.55) 100%)}
.hero-bg .hb-inner{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(110px,13vw,180px);min-height:clamp(520px,76vh,720px)}
.hero-bg .hb-copy{max-width:760px}
.hero-bg .eyebrow{color:var(--orange-400)}
.hero-bg h1{color:#fff;margin:16px 0 0}
.hero-bg h1 .accent-it{color:var(--orange-400)}
.hero-bg .hb-intro{margin-top:22px;max-width:660px;font-size:clamp(1.06rem,1.45vw,1.24rem);line-height:1.62;color:rgba(255,255,255,.92)}
.hero-bg .hb-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---- Divisore a onda (acqua/collina) ---- */
.wave{position:absolute;left:0;right:0;width:100%;line-height:0;z-index:2;pointer-events:none}
.wave.bottom{bottom:-1px}
.wave svg{display:block;width:100%;height:clamp(60px,7vw,104px)}
.wave .w-back{opacity:.5}

/* ============================================================
   CTA IMMERSIVA — identica alla home (.cta-imm): sezione full-bleed
   centrata, verde profondo + luce dorata, orb sfocata e marchio in filigrana.
   ============================================================ */
.cta-imm{position:relative;overflow:hidden;color:#fff;padding:clamp(96px,13vw,150px) 0;
  background:
    radial-gradient(52% 50% at 80% 54%, rgba(236,154,78,.24), transparent 60%),
    radial-gradient(60% 62% at 10% 96%, rgba(46,148,86,.34), transparent 60%),
    linear-gradient(178deg, var(--green-800) 0%, var(--green-800) 16%, var(--green-900) 90%)}
.cta-imm .orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.cta-imm .orb.a{width:480px;height:480px;background:rgba(46,148,86,.4);bottom:-160px;left:30%}
.cta-imm .hi-mark{position:absolute;right:-30px;bottom:-40px;width:380px;opacity:.08;filter:brightness(0) invert(1);z-index:0;pointer-events:none}
.cta-imm .inner{position:relative;z-index:3;max-width:760px;margin:0 auto;text-align:center}
.cta-imm .eyebrow{color:var(--orange-400);justify-content:center}
.cta-imm h2{color:#fff;font-size:clamp(2.1rem,3.8vw,3.1rem);margin-top:14px}
.cta-imm h2 .accent-it{color:var(--orange-400)}
.cta-imm p{margin:18px auto 0;color:rgba(255,255,255,.9);font-size:clamp(1.04rem,1.5vw,1.18rem);line-height:1.6;max-width:600px}
.cta-imm .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;justify-content:center}

/* ============================================================
   NASTRO DELLA STAGIONE (parco) — calendario inline, versione LEGGERA.
   Niente pannello: vive sul fondo chiaro della sezione, separato da
   un filo sottile in alto. Solo la linea-calendario porta il colore.
   ============================================================ */
.season{position:relative;margin-top:30px;padding-top:24px;border-top:1px solid var(--rule)}
.season-title{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--ink-900);margin:0}
.season-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.season-range{font-family:var(--font-mono);font-weight:500;font-size:clamp(1.04rem,1.5vw,1.3rem);color:var(--ink-900);letter-spacing:.01em}
.season-range strong{color:var(--orange-600);font-weight:500}
.season-range .arrow{color:var(--ink-300);margin:0 .35em}
.season-track{position:relative;margin-top:20px}
.season-rail{height:7px;border-radius:99px;background:var(--sand-200)}
.season-fill{position:absolute;top:0;height:7px;border-radius:99px;
  background:linear-gradient(90deg, var(--green-500), var(--orange-400))}
.season-fill::before,.season-fill::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  transform:translateY(-50%);border:2px solid var(--bg-base);box-shadow:var(--shadow-sm)}
.season-fill::before{left:-3px;background:var(--green-500)}
.season-fill::after{right:-3px;background:var(--orange-500)}
.season-months{display:grid;grid-template-columns:repeat(12,1fr);margin-top:12px}
.season-months span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.03em;text-align:center;
  color:var(--ink-300);text-transform:uppercase}
.season-months span.on{color:var(--ink-900);font-weight:500}
.season-note{margin-top:16px;font-size:.92rem;line-height:1.62;color:var(--ink-700)}

/* ============================================================
   Tabella comparativa (.cmp) — condivisa con la landing diventa-socio.
   Usata in "Come partecipare": colonne Corso / Prezzo / Orario.
   ============================================================ */
.cmp-intro{color:var(--ink-700);margin-top:16px;font-size:1.05rem}
.cmp{margin-top:30px;border:1px solid var(--rule-strong);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-elevated)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1.5fr 1fr 1fr}
.cmp-head{background:var(--green-800);color:#fff}
.cmp-head .cmp-c{padding:15px 20px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.cmp-head .cmp-plan{justify-content:center;border-left:1px solid rgba(255,255,255,.15)}
.cmp-head .cmp-svc{color:#fff}
.cmp-head .cmp-plan.base{color:#fff}
.cmp-row{border-top:1px solid var(--rule)}
.cmp-row:nth-child(even){background:var(--bg-base)}
.cmp-c{padding:15px 20px;display:flex;align-items:center}
.cmp-svc{font-size:.97rem;color:var(--ink-900);font-weight:600}
.cmp-row .cmp-c:not(.cmp-svc){justify-content:center;border-left:1px solid var(--rule)}
.cmp-flag{font-family:"Montserrat",system-ui,sans-serif;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-500);background:var(--sand-100);border:1px dashed var(--rule-strong);border-radius:var(--radius-pill);padding:3px 11px}
.cmp-note{margin-top:24px;font-size:.96rem;color:var(--ink-700);line-height:1.6}
@media (max-width:680px){
  .cmp{border:none;background:none;border-radius:0;overflow:visible}
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;border:1px solid var(--rule-strong);border-radius:var(--radius-md);
    overflow:hidden;margin-bottom:14px;background:var(--bg-elevated)}
  .cmp-row:nth-child(even){background:var(--bg-elevated)}
  .cmp-svc{background:var(--green-800);color:#fff;padding:13px 18px}
  .cmp-row .cmp-c:not(.cmp-svc){justify-content:space-between;border-left:none;border-top:1px solid var(--rule)}
  .cmp-row .cmp-c:not(.cmp-svc)::before{content:attr(data-plan);font-family:"Montserrat",system-ui,sans-serif;font-size:.64rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
}

/* ---- Responsive ---- */
@media (max-width:560px){
  .hero-bg .hb-cta .btn{width:auto}
  .season-months span{font-size:.54rem}
}

/* blocco-persona senza card bianca: testo e foto direttamente sulla fascia */
.persona{background:transparent;border:none;padding:0}
/* foto reale dentro un .media (sezioni testo+immagine): riempie il riquadro */
.media .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}
/* corpo persona: testo su due colonne */
.p-cols{margin-top:16px;column-count:2;column-gap:clamp(24px,3vw,40px)}
.p-cols p{margin-top:0;max-width:none;break-inside:avoid}
.p-cols p + p{margin-top:13px}
@media (max-width:680px){ .p-cols{column-count:1} }
/* sottotitolo-citazione del blocco persona */
.p-quote{margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.38;color:var(--ink-900);max-width:30ch}