/* =========================================================================
   ATHESIS — Escursioni Alto Adige · Delta del Po · Nordic Walking
   Concept: "Athesis" è il nome latino dell'Adige, il fiume che lega le due
   terre della guida — dalle vette dell'Alto Adige fino al Delta del Po.
   Tutta la pagina segue la sua discesa: un filo che scorre dall'alto al mare.
   ========================================================================= */

:root{
  /* palette — radicata nel soggetto */
  --slate:#16222B;        /* notte alpina · titoli, hero, footer */
  --slate-2:#20313C;
  --stone:#54646E;        /* testo secondario */
  --stone-soft:#8593 9b;
  --mist:#EBEEEC;         /* pietra dolomitica chiara · sfondo pagina */
  --paper:#FBFCFC;        /* schede */
  --line:rgba(22,34,43,.12);
  --teal:#1F8FA3;         /* acqua dell'Adige / laguna · accento primario */
  --teal-d:#15707F;
  --amber:#D9741B;        /* sole del marchio / tramonto sul Delta */
  --amber-deep:#B95E12;
  --amber-bright:#F2B14B;

  --font-display:'Jost', system-ui, sans-serif;
  --font-body:'Roboto', system-ui, sans-serif;
  --font-mono:'Roboto Slab', Georgia, serif;

  --maxw:1200px;
  --gutter:clamp(1.1rem, 4vw, 2.6rem);
  --radius:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root{ --stone-soft:#85939b; }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

body{
  font-family:var(--font-body);
  color:var(--slate);
  background:var(--mist);
  line-height:1.62;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* contour-line ambient texture, very subtle */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(120% 80% at 80% -10%, rgba(31,143,163,.05), transparent 60%),
    radial-gradient(120% 80% at -10% 110%, rgba(217,116,27,.05), transparent 60%);
}

.container{width:min(100% - var(--gutter)*2, var(--maxw));margin-inline:auto}
.wide{--maxw:1320px}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--teal-d);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:2.2em;height:2px;background:var(--amber);border-radius:2px}
.eyebrow--light{color:var(--amber-bright)}
.eyebrow--light::before{background:var(--amber-bright)}

h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.01em}
.section-title{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.1rem);font-weight:600;color:var(--slate)}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.22rem);color:var(--stone);max-width:60ch}
.kicker-mono{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;color:var(--stone)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--slate);--fg:#fff;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:.01em;
  padding:.85em 1.5em;border-radius:var(--radius);
  background:var(--bg);color:var(--fg);
  text-decoration:none;position:relative;isolation:isolate;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn svg{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(22,34,43,.5)}
.btn:hover svg{transform:translateX(4px)}
.btn--amber{--bg:var(--amber-bright);--fg:var(--slate)}
.btn--amber:hover{--bg:#f6bd5e}
.btn--ghost{--bg:transparent;--fg:var(--slate);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--slate);transform:translateY(-2px)}
.btn--on-dark.btn--ghost{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.btn--on-dark.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}

.textlink{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);
  font-weight:600;text-decoration:none;color:var(--teal-d);
}
.textlink svg{width:1em;height:1em;transition:transform .25s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ---------- skip link & focus ---------- */
.skip{position:absolute;left:.6rem;top:-3rem;z-index:200;background:var(--slate);color:#fff;
  padding:.6rem 1rem;border-radius:var(--radius);transition:top .2s}
.skip:focus{top:.6rem}
:focus-visible{outline:3px solid var(--amber-bright);outline-offset:3px;border-radius:3px}

/* ---------- top scroll progress (mobile/tablet) ---------- */
.progress-top{position:fixed;top:0;left:0;height:3px;z-index:120;width:100%;
  transform:scaleX(var(--p,0));transform-origin:left;
  background:linear-gradient(90deg,var(--teal),var(--amber-bright));}
@media (min-width:1180px){.progress-top{display:none}}

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .35s var(--ease), box-shadow .35s, padding .35s;
  padding:1.1rem 0;
}
.site-header.scrolled{
  background:rgba(18,28,35,.86);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 14px 30px -22px rgba(0,0,0,.7);
  padding:.6rem 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* brand lockup */
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff}
.brand__mark{width:42px;height:42px;flex:0 0 auto}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:1.32rem;letter-spacing:.16em}
.brand__tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-top:.32em}

.nav__links{display:flex;align-items:center;gap:.3rem}
.nav__links a{
  text-decoration:none;color:rgba(255,255,255,.86);font-family:var(--font-display);
  font-weight:500;font-size:.97rem;padding:.5rem .8rem;border-radius:var(--radius);
  position:relative;transition:color .2s;
}
.nav__links a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;
  background:var(--amber-bright);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{margin-left:.4rem}

.nav__toggle{display:none;width:46px;height:46px;border-radius:var(--radius);
  align-items:center;justify-content:center;color:#fff}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:"";display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}
.nav__toggle span{position:relative}
.nav__toggle span::before{position:absolute;top:-7px}
.nav__toggle span::after{position:absolute;top:7px}
body.nav-open .nav__toggle span{background:transparent}
body.nav-open .nav__toggle span::before{top:0;transform:rotate(45deg)}
body.nav-open .nav__toggle span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1000px){
  .nav__toggle{display:flex}
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(86vw,360px);
    flex-direction:column;align-items:stretch;justify-content:center;gap:.2rem;
    background:var(--slate);padding:5rem 1.6rem 2rem;
    transform:translateX(100%);transition:transform .4s var(--ease);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.7);
  }
  body.nav-open .nav__links{transform:translateX(0)}
  .nav__links a{font-size:1.15rem;padding:.7rem .4rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__links a::after{display:none}
  .nav__cta{margin:1rem 0 0}
  .nav__cta .btn{width:100%;justify-content:center}
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:#fff;isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.08);animation:heroPan 22s ease-in-out infinite alternate}
@keyframes heroPan{from{transform:scale(1.08) translateY(0)}to{transform:scale(1.16) translateY(-2%)}}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(18,28,35,.62) 0%, rgba(18,28,35,.28) 32%, rgba(18,28,35,.5) 64%, var(--slate) 100%),
    linear-gradient(90deg, rgba(18,28,35,.7), rgba(18,28,35,0) 62%);}

.hero__inner{padding:9rem 0 3.4rem;width:100%}
.hero__eyebrow{margin-bottom:1.3rem}
.hero h1{
  font-size:clamp(2.5rem,1.6rem + 5vw,5.3rem);font-weight:600;
  text-shadow:0 2px 30px rgba(0,0,0,.35);max-width:16ch;
}
.hero h1 .accent{color:var(--amber-bright)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;transform:translateY(110%);
  animation:lineUp .9s var(--ease) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s}
.hero h1 .line:nth-child(3) > span{animation-delay:.24s}
@keyframes lineUp{to{transform:translateY(0)}}
.hero__sub{margin-top:1.5rem;max-width:48ch;font-size:clamp(1.05rem,1rem + .5vw,1.28rem);
  color:rgba(255,255,255,.9);opacity:0;animation:fadeUp .8s .5s var(--ease) forwards}
.hero__actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.9rem;
  opacity:0;animation:fadeUp .8s .66s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* credential chips — segnale E-E-A-T già nell'hero */
.creds{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.7rem;
  opacity:0;animation:fadeUp .8s .82s var(--ease) forwards}
.creds li{display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;
  padding:.5em .9em;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.creds svg{width:1.05em;height:1.05em;color:var(--amber-bright);flex:0 0 auto}

.hero__scroll{position:absolute;right:var(--gutter);bottom:2.2rem;z-index:2;
  display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero__scroll .dot{width:26px;height:42px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;position:relative}
.hero__scroll .dot::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;
  background:var(--amber-bright);border-radius:2px;animation:scrollDot 1.7s var(--ease) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(12px)}}
@media (max-width:680px){.hero__scroll{display:none}}

/* =========================================================================
/* =========================================================================
   SECTION SHELL
   ========================================================================= */
.section{position:relative;padding:clamp(2.75rem,2rem + 3vw,4.5rem) 0;z-index:1}
.section__head{max-width:64ch;margin-bottom:clamp(2.2rem,1.4rem + 2vw,3.4rem)}
.section__head .eyebrow{margin-bottom:1rem}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero h1 .line > span,.hero__sub,.hero__actions,.creds{animation:none;opacity:1;transform:none}
  .hero__bg img{animation:none;transform:scale(1.04)}
}

/* =========================================================================
   CHI SONO — autore / E-E-A-T
   ========================================================================= */
#chi-sono{background:linear-gradient(180deg,var(--slate) 0, var(--mist) 3.5rem);padding-top:clamp(3.75rem,2.8rem + 3vw,5.5rem);padding-bottom:clamp(2.5rem,1.8rem + 3vw,4.25rem)}
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.about__media{position:relative}
.about__photo{border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -30px rgba(22,34,43,.5);
  border:1px solid var(--line);background:#fff}
.about__photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.about__badge{position:absolute;left:-1rem;bottom:-1rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;
  box-shadow:0 20px 40px -24px rgba(22,34,43,.45);max-width:230px}
.about__badge .who{font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.about__badge .role{font-family:var(--font-mono);font-size:.72rem;color:var(--teal-d);
  letter-spacing:.04em;margin-top:.25em}
.about__sign{font-family:var(--font-mono);font-size:.7rem;color:var(--stone);margin-top:.8em;letter-spacing:.04em}

.about__title{margin:.4rem 0 1.2rem}
.about p + p{margin-top:1rem}
.about__creds{margin-top:1.8rem;display:grid;gap:.7rem}
.about__creds li{display:flex;gap:.85rem;align-items:flex-start;
  padding:.5rem 0;border-top:1px solid var(--line)}
.about__creds svg{width:1.4rem;height:1.4rem;color:var(--teal);flex:0 0 auto;margin-top:.15rem}
.about__creds strong{font-family:var(--font-display);font-weight:600}
.about__creds span{display:block;font-size:.92rem;color:var(--stone)}

@media (max-width:860px){
  .about{grid-template-columns:1fr;gap:2.4rem}
  .about__media{max-width:340px}
  .about__badge{left:auto;right:-.4rem}
}

/* =========================================================================
   ITINERARI — schede tour
   ========================================================================= */
.tours{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,.6rem + 2vw,2rem)}
@media (max-width:760px){.tours{grid-template-columns:1fr}}
.tour{position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.tour:hover{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(22,34,43,.45)}
.tour__media{position:relative;aspect-ratio:16/11;overflow:hidden}
.tour__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tour:hover .tour__media img{transform:scale(1.07)}
.tour__place{position:absolute;left:1rem;top:1rem;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(18,28,35,.6);backdrop-filter:blur(4px);padding:.4em .8em;border-radius:100px}
.tour__body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.tour__title{font-size:1.42rem;margin-bottom:.5rem}
.tour__desc{color:var(--stone);font-size:.98rem;flex:1}
.tour__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:.4rem 0 1rem;
  font-family:var(--font-mono);font-size:.72rem;color:var(--stone)}
.tour__meta span{display:inline-flex;align-items:center;gap:.4em}
.tour__meta svg{width:1em;height:1em;color:var(--teal)}
.tour__link{margin-top:1rem}

/* =========================================================================
   NORDIC WALKING band
   ========================================================================= */
.nordic{position:relative;overflow:hidden;background:var(--slate);color:#fff}
.nordic__grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:0}
@media (max-width:880px){.nordic__grid{grid-template-columns:1fr}}
.nordic__text{padding:clamp(3rem,2rem + 4vw,6rem) var(--gutter)}
.nordic__text .container{width:100%;max-width:560px;margin-inline:0 auto}
.nordic__media{position:relative;min-height:340px}
.nordic__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nordic__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--slate),rgba(22,34,43,0) 30%)}
@media (max-width:880px){.nordic__media{min-height:300px}.nordic__media::after{background:linear-gradient(180deg,var(--slate),transparent 30%)}}
.nordic h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);margin:.8rem 0 1rem}
.nordic p{color:rgba(255,255,255,.84);max-width:46ch}
.nordic__list{margin:1.4rem 0 1.8rem;display:grid;gap:.6rem}
.nordic__list li{display:flex;gap:.7rem;align-items:flex-start;color:rgba(255,255,255,.9);font-size:.97rem}
.nordic__list svg{width:1.2rem;height:1.2rem;color:var(--amber-bright);flex:0 0 auto;margin-top:.2rem}

/* =========================================================================
   PERCHÉ CON ME — fiducia
   ========================================================================= */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,.5rem + 1.5vw,1.8rem)}
@media (max-width:900px){.values{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.values{grid-template-columns:1fr}}
.value{padding:1.6rem 1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .3s var(--ease), border-color .3s}
.value:hover{transform:translateY(-3px);border-color:var(--teal)}
.value__ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(31,143,163,.1);color:var(--teal-d);margin-bottom:1rem}
.value__ic svg{width:1.5rem;height:1.5rem}
.value h3{font-size:1.18rem;margin-bottom:.4rem}
.value p{color:var(--stone);font-size:.94rem}

/* =========================================================================
   CONTATTI
   ========================================================================= */
#contatti{background:linear-gradient(180deg,var(--mist) 0%, #e3e8e7 100%)}
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}
@media (max-width:880px){.contact{grid-template-columns:1fr;gap:2.6rem}}

.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,1rem + 2vw,2.4rem);box-shadow:0 30px 60px -40px rgba(22,34,43,.4)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-display);font-weight:500;font-size:.92rem;margin-bottom:.4rem}
.field label .req{color:var(--amber-deep)}
.field input,.field textarea,.field select{
  width:100%;padding:.8rem .9rem;font:inherit;color:var(--slate);
  background:var(--mist);border:1.5px solid transparent;border-radius:var(--radius);
  transition:border-color .2s, background .2s}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;background:#fff;border-color:var(--teal)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}
.form__consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--stone);margin:.2rem 0 1.2rem}
.form__consent input{width:auto;margin-top:.25rem;accent-color:var(--teal)}
.form__consent a{color:var(--teal-d)}
.form button[type=submit]{width:100%;justify-content:center}
.form__note{font-family:var(--font-mono);font-size:.72rem;color:var(--stone);margin-top:.9rem;text-align:center}

.contact__aside h3{font-size:1.5rem;margin-bottom:1.2rem}
.contact__list{display:grid;gap:1rem;margin-bottom:1.8rem}
.contact__item{display:flex;gap:.9rem;align-items:flex-start;text-decoration:none;color:var(--slate)}
.contact__item .ic{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--slate);color:#fff;transition:background .25s}
.contact__item .ic svg{width:1.15rem;height:1.15rem}
.contact__item:hover .ic{background:var(--teal)}
.contact__item .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.contact__item .v{font-family:var(--font-display);font-weight:600;font-size:1.05rem;word-break:break-word}
.contact__legal{font-family:var(--font-mono);font-size:.74rem;color:var(--stone);line-height:1.8;
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.contact__social{display:flex;gap:.6rem;margin-top:1.1rem}
.contact__social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--slate);transition:.25s var(--ease)}
.contact__social a:hover{background:var(--slate);color:#fff;transform:translateY(-2px)}
.contact__social svg{width:1.2rem;height:1.2rem}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--slate);color:rgba(255,255,255,.75);padding:3.4rem 0 2rem;position:relative;z-index:1}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;
  padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:760px){.footer__top{grid-template-columns:1fr;gap:1.6rem}}
.footer .brand{margin-bottom:1rem}
.footer__about{max-width:38ch;font-size:.92rem}
.footer__col h4{font-family:var(--font-display);font-weight:600;color:#fff;font-size:.92rem;
  letter-spacing:.04em;margin-bottom:.9rem;text-transform:uppercase}
.footer__col a{display:block;text-decoration:none;color:rgba(255,255,255,.72);padding:.28rem 0;font-size:.94rem;transition:color .2s}
.footer__col a:hover{color:var(--amber-bright)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  align-items:center;padding-top:1.6rem;font-family:var(--font-mono);font-size:.74rem;color:rgba(255,255,255,.55)}
.footer__bottom a{color:rgba(255,255,255,.7);text-decoration:none}
.footer__bottom a:hover{color:#fff}
.footer__legal-links{display:flex;flex-wrap:wrap;gap:1rem}

/* full-bleed della home nel <main> del canvas */
.home-main{padding:0;margin:0}

/* =========================================================================
   BLOCCO 2 — Navigazione dropdown, header solido, pagine Itinerari
   ========================================================================= */

/* Header solido per le pagine senza hero trasparente */
.site-header.is-solid{
  background:rgba(18,28,35,.92);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 14px 30px -22px rgba(0,0,0,.7);
}
.page-main{padding:0;margin:0}

/* Dropdown del menu principale */
.nav__item.has-dropdown{position:relative}
.nav__ddtoggle{
  display:inline-flex;align-items:center;gap:.35em;cursor:pointer;
  background:none;border:0;color:rgba(255,255,255,.86);font-family:var(--font-display);
  font-weight:500;font-size:.97rem;padding:.5rem .8rem;border-radius:var(--radius);transition:color .2s;
}
.nav__ddtoggle:hover{color:#fff}
.nav__caret{width:.8em;height:.8em;transition:transform .25s var(--ease)}
.has-dropdown:hover .nav__caret,.has-dropdown.is-open .nav__caret{transform:rotate(180deg)}
.nav__dropdown{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:230px;
  background:var(--paper);border-radius:var(--radius);padding:.5rem;margin:0;list-style:none;
  box-shadow:0 24px 50px -24px rgba(22,34,43,.55);border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.25s var(--ease);z-index:20;
}
.has-dropdown:hover .nav__dropdown,
.has-dropdown:focus-within .nav__dropdown,
.has-dropdown.is-open .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav__dropdown a{
  display:block;padding:.55rem .8rem;border-radius:8px;text-decoration:none;
  color:var(--slate);font-family:var(--font-display);font-weight:500;font-size:.95rem;transition:background .18s,color .18s;
}
.nav__dropdown a::after{display:none}
.nav__dropdown a:hover{background:var(--mist);color:var(--teal-d)}
.nav__dropdown-all{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.35rem}
.nav__dropdown-all a{color:var(--teal-d);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:1000px){
  .nav__ddtoggle{width:100%;justify-content:space-between;font-size:1.15rem;padding:.7rem .4rem;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;padding:.2rem 0 .4rem .6rem;display:none}
  .has-dropdown.is-open .nav__dropdown{display:block}
  .nav__dropdown a{color:rgba(255,255,255,.82)}
  .nav__dropdown a:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav__dropdown-all{border-color:rgba(255,255,255,.12)}
  .nav__dropdown-all a{color:var(--amber-bright)}
}

/* Fascia intestazione pagina (Itinerari / categoria) */
.page-hero{background:var(--slate);color:#fff;padding:calc(4.75rem + 2.6rem) 0 2.6rem}
.page-hero__title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,1.6rem + 3vw,3.4rem);
  line-height:1.05;margin:.3rem 0 0}
.page-hero__lead{color:rgba(255,255,255,.82);max-width:60ch;margin-top:.9rem;font-size:1.05rem}
.page-hero__crumb{color:var(--amber-bright);text-decoration:none}
.page-hero__crumb:hover{text-decoration:underline}
.eyebrow--light{color:var(--amber-bright)}

.muted{color:var(--stone)}

/* Griglia categorie */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,.6rem + 2vw,2rem)}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cat-grid{grid-template-columns:1fr}}
.cat-card{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--line);
  box-shadow:0 18px 40px -30px rgba(22,34,43,.4);transition:transform .3s var(--ease),box-shadow .3s}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(22,34,43,.45)}
.cat-card__media{aspect-ratio:16/11;overflow:hidden;background:var(--mist)}
.cat-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat-card:hover .cat-card__media img{transform:scale(1.07)}
.cat-card__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--stone-soft)}
.cat-card__ph svg{width:2.4rem;height:2.4rem}
.cat-card__body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.cat-card__title{font-size:1.35rem}
.cat-card__desc{color:var(--stone);font-size:.96rem;flex:1}
.cat-card__meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-d)}

/* Link con freccia */
.link-arrow{display:inline-flex;align-items:center;gap:.4em;color:var(--teal-d);text-decoration:none;
  font-family:var(--font-display);font-weight:600}
.link-arrow svg{width:1.1em;height:1.1em;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* Dettaglio itinerario */
.itin-hero{position:relative;color:#fff;overflow:hidden;background:var(--slate-2);
  padding:calc(4.75rem + 3rem) 0 2.8rem;isolation:isolate}
.itin-hero__bg{position:absolute;inset:0;z-index:-2}
.itin-hero__bg img{width:100%;height:100%;object-fit:cover}
.itin-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,28,35,.55),rgba(18,28,35,.85))}
.itin-hero__title{font-family:var(--font-display);font-weight:600;line-height:1.05;
  font-size:clamp(2.1rem,1.5rem + 3vw,3.3rem);margin:.4rem 0 0}
.itin-hero__crumb{color:var(--amber-bright);text-decoration:none}
.itin-hero__crumb:hover{text-decoration:underline}
.itin-hero__sep{opacity:.6;margin:0 .1rem}
.itin-hero__area{display:inline-flex;align-items:center;gap:.45em;margin-top:.8rem;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;color:rgba(255,255,255,.9)}
.itin-hero__area svg{width:1.1em;height:1.1em;color:var(--amber-bright)}

.itin-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1.5rem,1rem + 3vw,3rem);align-items:start}
@media (max-width:900px){.itin-layout{grid-template-columns:1fr}}
.itin-lead{font-size:1.2rem;line-height:1.6;color:var(--slate-2);margin-bottom:1.4rem}
.richtext{color:var(--slate-2);line-height:1.75}
.richtext p{margin:0 0 1rem}
.richtext h2,.richtext h3{font-family:var(--font-display);color:var(--slate);margin:1.6rem 0 .6rem}
.richtext img{max-width:100%;height:auto;border-radius:var(--radius);margin:1rem 0}
.richtext ul,.richtext ol{margin:0 0 1rem 1.2rem}
.itin-block{margin-top:1.8rem;padding:1.4rem 1.5rem;background:var(--mist);border-radius:var(--radius)}
.itin-block__title{display:flex;align-items:center;gap:.5em;font-size:1.2rem;margin-bottom:.6rem}
.itin-block__title svg{width:1.1em;height:1.1em;color:var(--teal)}
.itin-block__body{color:var(--slate-2);line-height:1.7}

.itin-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.8rem}
@media (max-width:600px){.itin-gallery{grid-template-columns:repeat(2,1fr)}}
.itin-gallery__item{display:block;aspect-ratio:1;overflow:hidden;border-radius:10px}
.itin-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.itin-gallery__item:hover img{transform:scale(1.06)}

.itin-aside{position:sticky;top:5.5rem}
.itin-specs{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:0 18px 40px -30px rgba(22,34,43,.4)}
.itin-specs__title{font-size:1.1rem;margin-bottom:1rem}
.spec-list{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0 0 1.3rem}
.spec-list dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--stone);align-self:center}
.spec-list dd{margin:0;font-weight:500;color:var(--slate)}
.itin-specs__cta{width:100%;justify-content:center}
.itin-specs__back{display:block;text-align:center;margin-top:.9rem;color:var(--stone);text-decoration:none;font-size:.9rem}
.itin-specs__back:hover{color:var(--teal-d)}

/* ============================================================
   Scheda itinerario — revisione 30/07/2026
   Blocco aggiunto in coda: sovrascrive per cascata, nessuna
   regola preesistente e' stata modificata.
   ============================================================ */

/* --- Hero -------------------------------------------------
   Prima l'altezza dipendeva solo dal padding: su schermi larghi
   object-fit:cover ritagliava una fascia centrale dell'immagine,
   perdendo cielo e cime. Con una min-height proporzionale e il
   punto di fuoco spostato in alto si vede il soggetto. */
.itin-hero{min-height:clamp(340px,36vw,500px);display:flex;align-items:flex-end}
.itin-hero__inner{margin-inline:auto}
.itin-hero__bg img{object-position:center 35%}
.itin-hero::after{background:linear-gradient(180deg,
  rgba(18,28,35,.28) 0%,rgba(18,28,35,.48) 45%,rgba(18,28,35,.86) 100%)}

/* --- Impaginato ------------------------------------------
   Colonna laterale piu' larga: a 320px "Alto Adige · Val di Funes"
   andava a capo. Sticky rimosso: con il form la colonna supera
   l'altezza della finestra e lo sticky smetterebbe di scorrere. */
.itin-layout{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width:900px){.itin-layout{grid-template-columns:1fr}}
.itin-aside{position:static}

/* --- Contenuto -------------------------------------------
   width:100% (non solo max-width) perche' immagini di larghezza
   diversa occupino tutte la colonna piena: senza, mappe e foto
   risultano di misure differenti. */
.richtext img{width:100%;display:block;margin:1.4rem 0}
.richtext ul{list-style:disc}
.richtext ol{list-style:decimal}
.richtext li{margin:.3rem 0}
.richtext h2{font-size:1.55rem;margin-top:2.2rem}
.richtext h3{font-size:1.2rem;margin-top:1.6rem}

/* --- Cosa portare ----------------------------------------- */
.itin-block__list{list-style:none;margin:0;padding:0;color:var(--slate-2);line-height:1.7}
.itin-block__list li{position:relative;padding-left:1.4rem;margin:.35rem 0}
.itin-block__list li::before{content:"";position:absolute;left:.25rem;top:.65em;
  width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* --- Form di richiesta ------------------------------------ */
.itin-req{margin-top:1.1rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;box-shadow:0 18px 40px -30px rgba(22,34,43,.4)}
.itin-req__title{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .35rem}
.itin-req__intro{font-size:.86rem;color:var(--stone);line-height:1.55;margin:0 0 1.1rem}
.itin-req .field{margin-bottom:.85rem}
.itin-req .field label{font-size:.85rem;margin-bottom:.3rem}
.itin-req .field input,.itin-req .field textarea{padding:.6rem .75rem;font-size:.92rem}
.itin-req .field textarea{min-height:96px}
.itin-req__consent{display:flex;gap:.55rem;align-items:flex-start;
  font-size:.78rem;color:var(--stone);line-height:1.5;margin:.2rem 0 1.1rem}
.itin-req__consent input{width:auto;margin-top:.2rem;accent-color:var(--teal)}
.itin-req__consent a{color:var(--teal-d)}
.itin-req button[type=submit]{width:100%;justify-content:center}
.itin-req button[type=submit]:disabled{opacity:.6;cursor:progress}

/* Honeypot: fuori schermo, non display:none (i bot ignorano i campi nascosti) */
.itin-req__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Esito invio */
.itin-req__msg{display:none;margin:.9rem 0 0;padding:.7rem .85rem;
  border-radius:10px;font-size:.86rem;line-height:1.5}
.itin-req__msg.is-ok{display:block;background:rgba(31,143,163,.1);color:var(--teal-d)}
.itin-req__msg.is-err{display:block;background:rgba(185,94,18,.1);color:var(--amber-deep)}

/* ============================================================
   Scheda itinerario — impianto v3
   Prefissi: .ith (hero) · .itr (nastro dati) · .itb (corpo)
             .itp (profilo) · .itst (tappe) · .itrq (richiesta)
             .itkit .itsh .itmore (fasce di chiusura)
   Il blocco .itin-* precedente resta in uso per .richtext e per il
   form: non va rimosso.
   ============================================================ */

/* Il form vive dentro la card .itrq: qui perde il proprio contenitore */
.itrq .itin-req{margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}

/* --- Hero ------------------------------------------------- */
.ith{position:relative;min-height:min(72vh,620px);display:flex;align-items:flex-end;
  padding:calc(4.75rem + 3.4rem) 0 3.2rem;color:#fff;overflow:hidden;
  isolation:isolate;background:var(--slate)}
.ith__bg{position:absolute;inset:0;z-index:-2}
.ith__bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.ith::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,
  rgba(18,28,35,.60) 0%,rgba(18,28,35,.12) 32%,rgba(18,28,35,.72) 78%,rgba(18,28,35,.95) 100%)}
.ith__inner{margin-inline:auto}
.ith__crumb{display:flex;align-items:center;gap:.7rem;margin:0 0 1.3rem;flex-wrap:wrap}
.ith__rule{width:34px;height:2px;background:var(--amber-bright);flex:none}
.ith__crumb a{color:var(--amber-bright);text-decoration:none;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.ith__crumb a:hover{text-decoration:underline}
.ith__sep{color:rgba(255,255,255,.4)}
.ith__title{font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.4rem,1.4rem + 4.2vw,4.4rem);line-height:.99;letter-spacing:-.022em;
  margin:0;max-width:17ch;text-wrap:balance}
.ith__area{display:flex;align-items:center;gap:.55rem;margin:1.25rem 0 0;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.09em;color:rgba(255,255,255,.84)}
.ith__area::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--amber-bright);flex:none}

/* --- Nastro dati ------------------------------------------ */
.itr{background:var(--slate);color:#fff}
.itr__grid{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);
  gap:1px;background:rgba(255,255,255,.1)}
.itr__cell{background:var(--slate);padding:1.7rem 1.3rem 1.6rem}
.itr__v{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.35rem,1.05rem + .8vw,1.95rem);line-height:1.1;letter-spacing:-.01em;
  color:#fff;margin:0 0 .45rem;text-wrap:balance}
.itr__k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin:0}
.itr__cell--accent .itr__v{color:var(--amber-bright)}
@media(max-width:900px){
  .itr__grid{grid-template-columns:repeat(2,1fr)}
  .itr__cell:last-child:nth-child(odd){grid-column:1/-1}
}

/* --- Corpo ------------------------------------------------ */
.itb{padding:clamp(2.8rem,2rem + 3.5vw,5rem) 0 0}
.itb__grid{display:grid;grid-template-columns:minmax(0,1fr) 366px;
  gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}
@media(max-width:1000px){.itb__grid{grid-template-columns:1fr}}
.itb__lead{font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.24rem,1.08rem + .55vw,1.58rem);line-height:1.5;
  color:var(--slate);margin:0 0 2.4rem;text-wrap:balance}
.itb__prose p{max-width:66ch}
.itb__back{display:inline-block;margin-top:1.2rem;color:var(--stone);
  text-decoration:none;font-size:.9rem}
.itb__back:hover{color:var(--teal-d)}

.ith2{font-family:var(--font-display);font-weight:500;color:var(--slate);
  font-size:clamp(1.45rem,1.28rem + .65vw,1.9rem);line-height:1.2;letter-spacing:-.015em;
  margin:3rem 0 1rem;position:relative;padding-top:1.4rem}
.ith2::before{content:"";position:absolute;top:0;left:0;width:32px;height:2px;background:var(--teal)}

/* --- Profilo altimetrico: la firma della pagina ----------- */
.itp{background:var(--slate);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.1rem;margin:0 0 2.8rem;color:#fff}
.itp__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:.4rem;flex-wrap:wrap}
.itp__tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.itp__range{font-family:var(--font-mono);font-size:.68rem;color:rgba(255,255,255,.45)}
.itp svg{width:100%;height:auto;display:block;overflow:visible}
.itp__area{fill:url(#itpGrad)}
.itp__line{fill:none;stroke:var(--amber-bright);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.itp__dot{fill:var(--amber-bright)}
.itp__marks{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem;
  font-family:var(--font-mono);font-size:.66rem;color:rgba(255,255,255,.55)}
.itp__marks b{display:block;color:#fff;font-weight:500;font-size:.78rem}
.itp__mid{text-align:center}
.itp__end{text-align:right}
@media(max-width:560px){.itp__marks{font-size:.6rem}.itp__marks b{font-size:.7rem}}

/* --- Tappe: sequenza reale, quindi numerata --------------- */
.itst{list-style:none;margin:1.3rem 0 0;padding:0;counter-reset:itst}
.itst li{position:relative;padding:0 0 1.5rem 3.2rem;counter-increment:itst}
.itst li::before{content:counter(itst,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  font-family:var(--font-mono);font-size:.74rem;color:var(--teal);letter-spacing:.06em}
.itst li::after{content:"";position:absolute;left:.62rem;top:1.7rem;bottom:.15rem;
  width:1px;background:var(--line)}
.itst li:last-child{padding-bottom:0}
.itst li:last-child::after{display:none}
.itst b{display:block;font-family:var(--font-display);font-weight:500;color:var(--slate);
  font-size:1.02rem;line-height:1.35}
.itst span{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone-soft);margin:.15rem 0 .35rem}
.itst p{margin:0;max-width:60ch}

/* --- Soste: coppie nome/nota, quindi tabella -------------- */
.itstops{margin:1.1rem 0 0;border-top:1px solid var(--line)}
.itstops div{display:flex;gap:1.2rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.itstops dt{flex:none;width:9.5rem;font-family:var(--font-display);
  font-weight:500;color:var(--slate)}
.itstops dd{margin:0;font-size:.95rem;color:var(--stone)}
@media(max-width:560px){.itstops div{flex-direction:column;gap:.2rem}.itstops dt{width:auto}}

/* --- Colonna azione --------------------------------------- */
.itrq{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:0 30px 60px -48px rgba(22,34,43,.7)}
.itrq__price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding-bottom:1.1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.itrq__price strong{font-family:var(--font-display);font-weight:500;font-size:1.7rem;
  color:var(--slate);line-height:1}
.itrq__who{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone-soft)}

.itgd{display:flex;gap:.9rem;align-items:center;margin-top:1rem;
  padding:1rem 1.1rem;background:var(--slate);border-radius:var(--radius);color:#fff}
.itgd__ph{flex:none;width:44px;height:44px;border-radius:50%;background:var(--teal);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:500;font-size:1.05rem}
.itgd b{display:block;font-family:var(--font-display);font-weight:500;font-size:.95rem}
.itgd span span{font-family:var(--font-mono);font-size:.66rem;color:rgba(255,255,255,.6);line-height:1.45}

/* --- Cosa portare: fascia scura a tutta pagina ------------ */
.itkit{margin-top:clamp(3rem,2rem + 4vw,5.5rem);background:var(--slate);color:#fff;
  padding:clamp(2.4rem,1.8rem + 2.6vw,3.8rem) 0}
.itkit__head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.8rem;flex-wrap:wrap}
.itkit h2{font-family:var(--font-display);font-weight:500;font-size:1.65rem;
  margin:0;letter-spacing:-.015em}
.itkit__tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.itkit ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 2.4rem}
.itkit li{padding:.8rem 0;border-top:1px solid rgba(255,255,255,.13);
  display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.86)}
.itkit li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62rem;
  border-radius:50%;background:var(--amber-bright)}

/* --- Galleria a mosaico ----------------------------------- */
.itsh{padding:clamp(2.6rem,2rem + 3vw,4.5rem) 0 0}
.itsh__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem}
.itsh__grid a{display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3}
.itsh__grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.itsh__grid a:hover img{transform:scale(1.05)}
@media(min-width:701px){
  .itsh__grid--mosaic{grid-template-columns:2fr 1fr;grid-auto-rows:1fr;aspect-ratio:16/8}
  .itsh__grid--mosaic a{aspect-ratio:auto}
  .itsh__grid--mosaic a:first-child{grid-row:span 2}
  .itsh__grid--mosaic a:nth-child(n+4){display:none}
}

/* --- Altri itinerari -------------------------------------- */
.itmore{padding:clamp(2.6rem,2rem + 3vw,4.5rem) 0 clamp(3.5rem,2.5rem + 4vw,6rem)}
.itmore__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.itmore h2{font-family:var(--font-display);font-weight:500;font-size:1.55rem;
  margin:0;color:var(--slate);letter-spacing:-.015em}
.itmore .itkit__tag{color:var(--stone-soft)}
.itmore__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1.3rem}
.ittour{display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ittour:hover{transform:translateY(-3px);box-shadow:0 24px 44px -34px rgba(22,34,43,.6)}
.ittour__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.ittour__img img{width:100%;height:100%;object-fit:cover}
.ittour__b{display:block;padding:1rem 1.2rem 1.25rem}
.ittour__b .itkit__tag{display:block;color:var(--stone-soft)}
.ittour__t{display:block;font-family:var(--font-display);font-weight:500;font-size:1.06rem;
  color:var(--slate);margin:.4rem 0 .5rem;line-height:1.3}
.ittour__m{display:block;font-family:var(--font-mono);font-size:.7rem;
  color:var(--stone-soft);letter-spacing:.05em}

/* --- Correzioni v3.1 -------------------------------------- */

/* La colonna azione torna sticky: senza le specifiche è corta, e
   lasciava un vuoto lungo tutta la parte bassa della pagina.
   Il limite di altezza evita che su schermi bassi il fondo della
   card resti tagliato fuori. */
@media(min-width:1001px){
  .itb__rail{position:sticky;top:1.8rem;max-height:calc(100vh - 3.6rem);overflow-y:auto;
    scrollbar-width:thin}
}

/* Il profilo guadagna respiro: a 154px la curva si leggeva appena */
.itp svg{min-height:190px}
@media(max-width:700px){.itp svg{min-height:150px}}

/* ============================================================
   Homepage — revisione 30/07/2026
   Hero a due colonne, categorie in evidenza, filtro per localita'.
   Riusa .tour, .eyebrow, .btn, .section del tema: le schede in home
   sono le stesse della pagina categoria.
   ============================================================ */

/* --- Hero a due colonne ----------------------------------- */
.hero--split{position:relative;min-height:0;background:var(--mist);
  padding:calc(4.75rem + 2.4rem) 0 0;color:var(--slate-2);overflow:hidden}
.hero--split::after{display:none}
.hero__split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:stretch;gap:clamp(1.6rem,1rem + 3vw,3.4rem)}
@media(max-width:900px){.hero__split{grid-template-columns:1fr;gap:1.8rem}}
.hero__col{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,1rem + 2.4vw,3.4rem) 0}
.hero--split .hero__eyebrow{color:var(--stone)}
.hero--split .hero__eyebrow span{background:var(--amber)}
.hero__season{font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.35rem,1.05rem + 1.3vw,2rem);color:var(--stone);
  margin:0;line-height:1.1}
.hero__h1{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.95rem,1.3rem + 2.7vw,3.2rem);line-height:1.04;letter-spacing:-.022em;
  color:var(--slate);margin:.15rem 0 1rem;max-width:15ch;text-wrap:balance}
.hero__h1 .accent{color:var(--teal-d)}
.hero--split .hero__sub{color:var(--stone);max-width:46ch;margin:0 0 1.6rem}
.hero--split .hero__actions{margin-bottom:1.7rem}
.creds--light{color:var(--stone);border-top:1px solid var(--line);padding-top:1.1rem}
.creds--light svg{color:var(--teal)}
.hero__figure{position:relative;min-height:clamp(260px,34vw,470px);
  border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.hero__figure img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%}
/* il territorio in filigrana, non lo slogan */
.hero__ghost{position:absolute;left:var(--gutter);bottom:-.16em;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3rem,8.5vw,7.5rem);color:rgba(22,34,43,.05);
  letter-spacing:-.03em;line-height:1;pointer-events:none;user-select:none;white-space:nowrap}

/* --- Le due categorie ------------------------------------- */
.homecats{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
  margin-bottom:clamp(2.2rem,1.6rem + 2.4vw,3.4rem)}
@media(max-width:800px){.homecats{grid-template-columns:1fr}}
.homecat{position:relative;display:flex;align-items:flex-end;min-height:208px;
  padding:1.4rem;border-radius:var(--radius);overflow:hidden;isolation:isolate;
  background:var(--slate);color:#fff;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.homecat:hover{transform:translateY(-3px);box-shadow:0 26px 48px -34px rgba(22,34,43,.7)}
.homecat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.72}
.homecat::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,28,35,.3),rgba(18,28,35,.92))}
.homecat__n{position:absolute;top:1.1rem;right:1.3rem;font-family:var(--font-display);
  font-weight:300;font-size:2.5rem;line-height:1;color:rgba(255,255,255,.34)}
.homecat__b{display:block}
.homecat__t{display:block;font-family:var(--font-display);font-weight:500;
  font-size:1.45rem;margin:.3rem 0 .3rem;letter-spacing:-.015em}
.homecat__d{display:block;font-size:.9rem;color:rgba(255,255,255,.8);max-width:40ch;line-height:1.6}

/* --- Filtro per localita' --------------------------------- */
.places{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0 0 1.6rem;padding:0}
.place{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.07em;
  padding:.42rem .85rem;border:1px solid var(--line);border-radius:100px;
  background:var(--paper);color:var(--stone);cursor:pointer;transition:all .2s var(--ease)}
.place:hover{border-color:var(--teal);color:var(--teal-d)}
.place[aria-pressed="true"]{background:var(--slate);border-color:var(--slate);color:#fff}
.place b{font-weight:500;opacity:.55;margin-left:.35rem}
.places__empty{padding:2.4rem 0;text-align:center;color:var(--stone-soft);font-size:.94rem}

/* --- Segnaposto per le schede senza foto ------------------
   Tratteggio dichiarato invece di un vuoto bianco: in fase di
   sviluppo rende evidente quali schede mancano di immagine. */
.tour__ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#E4E8E6 0 12px,#EBEEEC 12px 24px)}
.tour__ph span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone-soft)}

/* ============================================================
   Homepage — correzioni v2.1
   Le regole dell'hero originale erano scritte per fondo scuro e
   vincono per specificita' su quelle nuove. Qui vengono neutralizzate
   in modo mirato, senza toccare le originali (l'hero scuro resta
   disponibile per altre pagine).
   ============================================================ */

/* .hero e' display:flex/align-items:flex-end: nella versione a due
   colonne il contenuto va in flusso normale. */
.hero.hero--split{display:block;align-items:initial;min-height:0;
  color:var(--slate-2);isolation:auto}

/* .hero h1 ha specificita' (0,1,1) e font-size fino a 5,3rem con
   text-shadow da fondo scuro: serve (0,2,0) per sovrascriverlo. */
.hero--split .hero__h1{font-size:clamp(1.9rem,1.25rem + 2.3vw,2.9rem);
  text-shadow:none;max-width:16ch;line-height:1.06}
.hero--split .hero__h1 .accent{color:var(--teal-d)}

/* Le pastiglie credenziali erano bianche su bianco. */
.hero--split .creds{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.hero--split .creds li{background:var(--paper);border-color:var(--line);color:var(--stone);
  font-size:.74rem}
.hero--split .creds svg{color:var(--teal)}

.hero--split .hero__sub{color:var(--stone)}
.hero--split .hero__eyebrow{color:var(--stone)}
.hero--split .hero__eyebrow span{background:var(--amber)}

/* Immagine: rapporto dichiarato invece di stiramento, e taglio piu'
   alto per tenere dentro le cime invece della sola parete. */
.hero__figure{min-height:0;aspect-ratio:4/3;align-self:center;
  border-radius:var(--radius);box-shadow:0 30px 60px -44px rgba(22,34,43,.75)}
.hero__figure img{object-position:center 28%}
@media(max-width:900px){.hero__figure{aspect-ratio:16/10}}

/* Il gradiente scuro in testa a #chi-sono si saldava all'hero scuro
   precedente: con l'hero chiaro diventa una banda estranea. */
#chi-sono{background:var(--mist)}

/* --- Home: pulsante verso il catalogo completo ------------- */
.tours__more{margin:2rem 0 0;text-align:center}
.tours__more .btn{background:var(--paper);border:1px solid var(--line);color:var(--slate)}
.tours__more .btn:hover{background:var(--mist)}

/* --- Catalogo a tre colonne -------------------------------
   .tours era a due colonne fisse: con schede piu' strette la
   tipografia va riscalata, altrimenti il titolo occupa da solo
   meta' della card. Vale per home e pagine categoria. */
@media(min-width:1080px){
  .tours{grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,.6rem + 1.4vw,1.6rem)}
  .tours .tour__title{font-size:1.18rem;line-height:1.3}
  .tours .tour__desc{font-size:.92rem;line-height:1.65}
  .tours .tour__meta{gap:.35rem .8rem;font-size:.74rem}
  .tours .tour__body{padding:1.1rem 1.2rem 1.3rem}
}
@media(min-width:761px) and (max-width:1079px){
  .tours .tour__title{font-size:1.26rem}
}

/* ============================================================
   Hero a vetrina — due diapositive, una per categoria
   ============================================================ */

/* Testo per i soli lettori di schermo */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.hero--slider .heroslides{position:relative}
.heroslide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s var(--ease),visibility .55s}
.heroslide.is-active{opacity:1;visibility:visible;pointer-events:auto}
/* le diapositive si sovrappongono nella stessa cella: niente salti d'altezza */
.hero--slider .heroslides{display:grid}

.heroslide__t{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.75rem,1.2rem + 2vw,2.65rem);line-height:1.06;letter-spacing:-.02em;
  color:var(--slate);margin:.1rem 0 .8rem;max-width:17ch;text-wrap:balance}
.heroslide__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0 0 1rem;
  font-family:var(--font-mono);font-size:.76rem;color:var(--stone);letter-spacing:.04em}
.heroslide__meta span{display:inline-flex;align-items:center;gap:.42em}
.heroslide__meta svg{width:1em;height:1em;color:var(--teal)}

/* Pannello al posto della foto mancante: dichiarato, non finto */
.hero__figph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;background:var(--slate);
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.03) 0 14px,transparent 14px 28px)}
.hero__figph-k{font-family:var(--font-display);font-weight:500;font-size:1.25rem;
  color:rgba(255,255,255,.9);text-align:center;padding:0 1.5rem;text-wrap:balance}
.hero__figph-n{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}

/* Comandi */
.heroctl{display:flex;align-items:center;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.heroctl__dots{display:flex;gap:.5rem;flex-wrap:wrap}
.heroctl__dot{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.45rem .95rem;border:1px solid var(--line);
  border-radius:100px;background:var(--paper);color:var(--stone);cursor:pointer;
  transition:all .25s var(--ease)}
.heroctl__dot:hover{border-color:var(--teal);color:var(--teal-d)}
.heroctl__dot.is-active{background:var(--slate);border-color:var(--slate);color:#fff}
.heroctl__play{display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);
  color:var(--stone);cursor:pointer;transition:all .25s var(--ease)}
.heroctl__play:hover{border-color:var(--teal);color:var(--teal-d)}
.heroctl__play svg{width:11px;height:11px;fill:currentColor}
.heroctl__play[aria-pressed="true"] svg{clip-path:polygon(0 0,100% 50%,0 100%)}

@media(prefers-reduced-motion:reduce){
  .heroslide{transition:none}
}

/* --- Larghezza della prosa nella scheda itinerario ---------
   66ch e' la misura tipografica ideale, ma nella colonna da 880px
   lascia un vuoto vistoso: tutto il resto (nastro dati, tappe,
   soste, immagini) occupa la colonna piena e solo il testo si
   ritraeva. 78ch resta entro il limite di leggibilita' e riempie
   la colonna alle larghezze in uso. */
.itb__prose p{max-width:78ch}
.itb__lead{max-width:34ch}
.itst p{max-width:74ch}

/* --- Colonna azione: rispetta l'header fisso ---------------
   .site-header e' position:fixed e alto circa 4.75rem. Con
   top:1.8rem la card sticky finiva sotto la barra su schermi
   bassi (15"), dove la pagina scorre molto di piu'. */
@media(min-width:1001px){
  .itb__rail{top:calc(4.75rem + 1.2rem);
    max-height:calc(100vh - 4.75rem - 2.4rem)}
}

/* --- Testo giustificato -----------------------------------
   La giustificazione senza sillabazione produce spazi larghi e
   "fiumi" bianchi verticali. hyphens:auto lo evita: il documento
   dichiara lang="it", quindi il browser sillaba in italiano.
   text-align:last:left impedisce che l'ultima riga di paragrafo
   venga stirata. */
.itb__prose p,
.itst p,
.itstops dd{
  text-align:justify;
  text-align-last:left;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}

/* L'estratto resta allineato a sinistra: e' corto e in corpo
   grande, giustificarlo produrrebbe buchi evidenti. */
.itb__lead{text-align:left}

/* Su schermo stretto le righe sono troppo corte perche' la
   giustificazione funzioni: si torna a bandiera. */
@media(max-width:640px){
  .itb__prose p,.itst p,.itstops dd{text-align:left;text-align-last:auto}
}

/* --- Colonna azione piu' larga -----------------------------
   Da 366 a 420px: il form guadagna respiro e la colonna del
   testo resta comunque ampia. Sopra i 1400px si allarga ancora. */
@media(min-width:1001px){
  .itb__grid{grid-template-columns:minmax(0,1fr) 420px}
}
@media(min-width:1400px){
  .itb__grid{grid-template-columns:minmax(0,1fr) 450px}
}

/* Il box guida e' stato rimosso dalla scheda: la colonna finisce
   con il form, poi il link di ritorno. */
.itgd{display:none}

/* --- Form con soli placeholder -----------------------------
   Le etichette restano nel DOM per lettori di schermo e
   riempimento automatico, ma non occupano spazio. */
.itin-req .field{margin-bottom:.7rem}
.itin-req .field input,
.itin-req .field textarea{padding:.72rem .85rem;font-size:.94rem}
.itin-req .field textarea{min-height:110px}
.itin-req .field input::placeholder,
.itin-req .field textarea::placeholder{color:var(--stone-soft);opacity:1}
.itin-req .field input:focus::placeholder,
.itin-req .field textarea:focus::placeholder{opacity:.55}

.itin-req__req{margin:.7rem 0 0;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.06em;color:var(--stone-soft);text-align:center}

/* --- Estratto: nessun vincolo di larghezza -----------------
   Segue la colonna come il resto del testo. Il limite a 34ch
   spezzava la frase in righe troppo corte. */
.itb__lead{max-width:none}

/* ============================================================
   BLOG — indice, articolo, archivi, paginazione
   Blocco aggiunto in coda: sovrascrive per cascata, nessuna
   regola preesistente e' stata modificata.
   Prefissi: .post-* (articolo) · .pag (paginazione) · .blog-cta
   Le griglie riusano .tours/.tour delle schede itinerario.
   ============================================================ */

/* --- Voce di menu attiva -----------------------------------
   Il sottolineato ambra della navigazione era solo :hover: con
   una sezione a se' (il blog) serve anche lo stato corrente. */
.nav__links a[aria-current="page"]{color:#fff}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

/* --- Navigazione a sei voci --------------------------------
   Con "Blog" la barra si allunga: tra 1001 e 1220px, dove il
   menu e' gia' orizzontale ma lo spazio e' poco, si stringono
   spaziature e corpo invece di lasciar andare a capo. */
@media (min-width:1001px) and (max-width:1220px){
  .nav__links{gap:0}
  .nav__links a,.nav__ddtoggle{padding-inline:.5rem;font-size:.92rem;white-space:nowrap}
  .nav__cta{margin-left:.25rem}
  .nav__cta .btn{padding:.7em 1.05em;font-size:.94rem}
}
@media (min-width:1001px){
  .nav__links > li > a{white-space:nowrap}
}

/* --- Titolo delle schede articolo -------------------------- */
.post-card__link{text-decoration:none;color:inherit}
.post-card__link:hover{color:var(--teal-d)}
.tour__media{display:block}

/* --- La barra .places usata come filtro-link --------------- */
.places a.place{text-decoration:none;display:inline-block}
.places .place[aria-current="page"]{background:var(--slate);border-color:var(--slate);color:#fff}

/* --- Intestazione dell'articolo ---------------------------- */
.post-hero{position:relative;background:var(--slate);color:#fff;isolation:isolate;
  padding:calc(4.75rem + 2.8rem) 0 2.8rem}
.post-hero.has-img{min-height:clamp(300px,30vw,420px);display:flex;align-items:flex-end;overflow:hidden}
.post-hero__bg{position:absolute;inset:0;z-index:-2}
.post-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.post-hero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,28,35,.35) 0%,rgba(18,28,35,.6) 45%,rgba(18,28,35,.9) 100%)}
.post-hero .container{width:min(100% - var(--gutter)*2, 820px)}
.post-hero.has-img .container{margin-inline:auto}
.post-hero__crumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.post-hero__crumb a{color:var(--amber-bright);text-decoration:none}
.post-hero__crumb a:hover{text-decoration:underline}
.post-hero__title{font-family:var(--font-display);font-weight:600;line-height:1.08;
  font-size:clamp(1.9rem,1.4rem + 2.6vw,2.9rem);margin:.75rem 0 0;text-wrap:balance}
.post-hero__meta{display:flex;flex-wrap:wrap;gap:.45rem .6rem;align-items:center;margin-top:.9rem;
  font-family:var(--font-mono);font-size:.78rem;color:rgba(255,255,255,.78)}
.post-hero__meta span[aria-hidden]{opacity:.45}

/* --- Impaginato: testo + colonna della guida --------------- */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(1.6rem,1rem + 3vw,3rem);align-items:start}
@media (max-width:960px){.post-layout{grid-template-columns:1fr}}
.post-body{min-width:0;max-width:74ch}

/* --- Indice interno ----------------------------------------
   Compare solo da tre titoli in su (lo decide il template):
   sotto quella soglia e' rumore, non una scorciatoia. */
.post-toc{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin:0 0 2rem}
.post-toc__title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);margin-bottom:.6rem}
.post-toc ol{margin:0;padding-left:1.1rem;list-style:decimal;color:var(--stone)}
.post-toc li{margin:.3rem 0}
.post-toc a{color:var(--slate-2);text-decoration:none;font-size:.95rem}
.post-toc a:hover{color:var(--teal-d);text-decoration:underline}

/* --- Corpo del testo ---------------------------------------
   scroll-margin-top: l'header e' fisso, senza questo le ancore
   dell'indice finiscono sotto la barra. */
.richtext h2{scroll-margin-top:6rem}
.richtext h3{scroll-margin-top:6rem}
.richtext > *:first-child{margin-top:0}
.richtext a{color:var(--teal-d);text-decoration:underline;text-underline-offset:.16em}
.richtext a:hover{color:var(--amber-deep)}
.richtext strong{font-weight:600;color:var(--slate)}
.richtext blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--amber);color:var(--slate-2);font-size:1.06rem;line-height:1.7}
.richtext blockquote p:last-child{margin-bottom:0}
.richtext figure{margin:1.6rem 0}
.richtext figcaption{font-family:var(--font-mono);font-size:.74rem;color:var(--stone);
  margin-top:.5rem;text-align:center}
.richtext hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}

/* Tabelle: scorrono in orizzontale sotto i 560px invece di
   allargare la pagina. */
.richtext table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem;
  display:block;overflow-x:auto}
@media (min-width:560px){.richtext table{display:table}}
.richtext th,.richtext td{padding:.6rem .8rem;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
.richtext thead th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stone);border-bottom:2px solid var(--line);white-space:nowrap}
.richtext tbody tr:last-child td{border-bottom:0}

/* Riquadro di richiamo dentro l'articolo */
.richtext .callout{background:var(--mist);border-radius:var(--radius);
  padding:1.1rem 1.3rem;margin:1.8rem 0}
.richtext .callout p:last-child{margin-bottom:0}
.richtext .callout > strong:first-child{display:block;font-family:var(--font-display);
  font-size:1.05rem;margin-bottom:.35rem}

/* Domande frequenti */
.richtext .faq h3{font-size:1.08rem;margin-top:1.5rem}
.richtext .faq h3 + p{margin-top:.3rem}

/* --- Tag in coda all'articolo ------------------------------ */
.post-tags{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:2.4rem 0 0;padding:0}
.post-tags a.place{text-decoration:none;display:inline-block}
.post-back{margin:2rem 0 0}

/* --- Colonna della guida ----------------------------------- */
.post-aside{position:sticky;top:5.5rem}
@media (max-width:960px){.post-aside{position:static}}
.post-author{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;text-align:center;box-shadow:0 18px 40px -30px rgba(22,34,43,.4)}
.post-author__ph{width:92px;height:92px;border-radius:50%;object-fit:cover;
  margin:0 auto .9rem;display:block}
.post-author__name{font-family:var(--font-display);font-weight:600;font-size:1.12rem}
.post-author__role{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-d);margin-top:.2rem}
.post-author__bio{color:var(--stone);font-size:.92rem;line-height:1.65;margin:.9rem 0 1.2rem}
.post-author__cta{width:100%;justify-content:center}

/* --- Fascia articoli correlati ----------------------------- */
.post-related{background:var(--paper);border-top:1px solid var(--line)}

/* --- Richiamo in fondo all'elenco -------------------------- */
.blog-cta__box{background:var(--slate);color:#fff;border-radius:var(--radius);
  padding:clamp(1.8rem,1.2rem + 2vw,3rem);text-align:center}
.blog-cta__box .eyebrow{color:var(--amber-bright);justify-content:center;display:inline-flex}
.blog-cta__box .eyebrow::before{background:var(--amber-bright)}
.blog-cta__box .section-title{color:#fff;margin:.6rem 0 .7rem}
.blog-cta__box .lead{color:rgba(255,255,255,.82);margin-inline:auto}
.blog-cta__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.5rem}
.blog-cta__box .btn--ghost{border:1px solid rgba(255,255,255,.3);color:#fff;background:transparent}
.blog-cta__box .btn--ghost:hover{background:rgba(255,255,255,.08)}

/* --- Paginazione ------------------------------------------- */
.pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;
  margin-top:clamp(2rem,1.4rem + 2vw,3rem)}
.pag__pages{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.pag__link,.pag__num,.pag__gap{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:100px;background:var(--paper);
  color:var(--stone);text-decoration:none;transition:all .2s var(--ease);display:inline-block}
.pag__link:hover,.pag__num:hover{border-color:var(--teal);color:var(--teal-d)}
.pag__num.is-current{background:var(--slate);border-color:var(--slate);color:#fff}
.pag__link.is-disabled{opacity:.4;pointer-events:none}
.pag__gap{border-color:transparent;background:transparent}
@media (max-width:520px){
  .pag__pages{order:-1;width:100%;justify-content:center;margin-bottom:.4rem}
}

/* ============================================================
   ITINERARI — schede categoria senza immagine di anteprima
   Blocco aggiunto in coda: sovrascrive per cascata, nessuna
   regola preesistente e' stata modificata. Le vecchie .cat-card
   restano nel foglio ma non sono piu' richiamate dal template.
   Prefisso: .catx
   ============================================================ */

/* --- Griglia -----------------------------------------------
   Il numero di colonne segue il numero di categorie: con due
   schede, tre colonne fisse lasciavano un terzo di riga vuoto.
   Il tetto e' tre: oltre, si va a capo. */
.catx-grid{display:grid;gap:clamp(1.2rem,.6rem + 2vw,1.8rem);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.catx-grid--1{grid-template-columns:minmax(0,520px)}
.catx-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px}
@media (max-width:900px){
  .catx-grid,.catx-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .catx-grid,.catx-grid--1,.catx-grid--2{grid-template-columns:1fr;max-width:none}
}

/* --- Scheda ------------------------------------------------
   Angoli vivi: il bordo colorato e' su un lato solo, e con il
   raggio sugli altri tre lo stacco si vedrebbe agli spigoli. */
.catx{
  display:flex;flex-direction:column;position:relative;
  background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--line);border-radius:0;
  padding:clamp(1.4rem,1rem + 1.4vw,1.9rem);
  text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.catx--amber{border-top-color:var(--amber)}
.catx--teal{border-top-color:var(--teal)}
.catx:hover{transform:translateY(-4px);box-shadow:0 26px 48px -32px rgba(22,34,43,.5)}

/* --- Numero ------------------------------------------------ */
.catx__n{font-family:var(--font-display);font-weight:600;line-height:.95;
  font-size:clamp(2.6rem,2rem + 2.6vw,3.7rem);color:var(--slate);
  transition:color .3s var(--ease)}
.catx--amber:hover .catx__n{color:var(--amber-deep)}
.catx--teal:hover .catx__n{color:var(--teal-d)}
.catx__lab{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--stone);margin-top:.35rem}

.catx__rule{display:block;height:1px;background:var(--line);margin:1.2rem 0 1.1rem}

/* --- Testo -------------------------------------------------- */
.catx__t{font-family:var(--font-display);font-weight:600;line-height:1.2;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);color:var(--slate);text-wrap:balance}
.catx__d{color:var(--stone);font-size:.95rem;line-height:1.65;margin-top:.6rem}

/* --- Localita' ---------------------------------------------
   Non sono filtri: sono un'anteprima di copertura. Nessun
   cursore a mano, nessuno stato attivo. */
.catx__areas{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;
  margin:1.1rem 0 0;padding:0}
.catx__areas li{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--teal-d);border:1px solid var(--line);border-radius:100px;
  padding:.32rem .7rem;white-space:nowrap}

/* --- Richiamo finale ----------------------------------------
   margin-top:auto tiene la riga in fondo anche se una scheda
   ha la descrizione e l'altra no: le due card restano pari. */
.catx__go{display:inline-flex;align-items:center;gap:.4em;margin-top:auto;
  padding-top:1.4rem;font-family:var(--font-display);font-weight:600;font-size:.95rem;
  color:var(--teal-d)}
.catx__go svg{width:1.1em;height:1.1em;transition:transform .25s var(--ease)}
.catx:hover .catx__go svg{transform:translateX(4px)}
.catx--amber .catx__go{color:var(--amber-deep)}

@media (prefers-reduced-motion:reduce){
  .catx,.catx__n,.catx__go svg{transition:none}
  .catx:hover{transform:none}
}

/* ============================================================
   NAVIGAZIONE A SETTE VOCI — dopo l'aggiunta di "Home"
   Blocco aggiunto in coda: nessuna regola preesistente
   modificata, questa fascia sostituisce per cascata quella
   1001-1220px introdotta col blocco Blog.
   ============================================================ */

/* La barra ora porta Home · Chi sono · Itinerari · Nordic Walking ·
   Perche' con me · Blog · Contattami. Appena sopra la soglia del
   menu a panino lo spazio e' al limite: qui si stringono spaziature
   e corpo, e si sale fino a 1280px perche' la fascia critica si e'
   allargata con la voce in piu'. */
@media (min-width:1001px) and (max-width:1280px){
  .nav__links{gap:0}
  .nav__links a,.nav__ddtoggle{padding-inline:.42rem;font-size:.88rem;white-space:nowrap}
  .nav__cta{margin-left:.3rem}
  .nav__cta .btn{padding:.68em 1em;font-size:.9rem}
  .brand__tag{font-size:.56rem;letter-spacing:.2em}
}

/* Sotto i 1120px la riga di firma sotto il logotipo e' la prima cosa
   sacrificabile: non e' navigazione, e' decorazione di marchio. */
@media (min-width:1001px) and (max-width:1120px){
  .brand__tag{display:none}
}

/* ============================================================
   NORDIC WALKING + MAPPA DEL SITO
   Blocco aggiunto in coda l'8 agosto 2026. Nessuna regola
   precedente e' stata modificata: qui dentro ci sono solo
   classi nuove, con prefisso .nwk- e .mds-.
   ============================================================ */

/* --- Azioni nell'intestazione della pagina corso ----------- */
.nwk-heroactions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* --- Spaziatura del corpo redazionale ----------------------
   Il reset globale azzera i margini di h1..h4 e p. Nelle pagine
   dove il testo arriva dal database ci pensa .richtext, ma qui il
   markup e' scritto a mano nel template: senza queste regole i
   titoli restano appiccicati al paragrafo precedente. */
.nwk-prose > p{margin:0 0 1rem}
.nwk-prose > h2{font-size:1.55rem;margin:2.4rem 0 .7rem}
.nwk-prose > h2:first-of-type{margin-top:2rem}
.nwk-prose h3{font-size:1.2rem}
.nwk-prose .itin-block{margin-top:2rem}
.nwk-prose .itin-block + h2{margin-top:2.6rem}
.nwk-prose strong{color:var(--slate);font-weight:600}

/* --- Credenziali su fondo chiaro ---------------------------
   Le pastiglie .creds hanno testo bianco su velo bianco: sono
   fatte per l'hero scuro. Nella card laterale servivano invertite. */
.nwk-creds{list-style:none;margin:1.1rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--line);display:grid;gap:.6rem}
.nwk-creds li{display:flex;align-items:flex-start;gap:.6em;
  font-size:.86rem;line-height:1.45;color:var(--slate-2)}
.nwk-creds svg{width:1.05rem;height:1.05rem;color:var(--teal);
  flex:0 0 auto;margin-top:.15rem}

/* --- Le quattro tappe del corso ---------------------------- */
.nwk-steps{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:none}
.nwk-steps li{display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.2rem 0;border-top:1px solid var(--line)}
.nwk-steps li:first-child{border-top:0;padding-top:.4rem}
.nwk-steps__n{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:#fff;
  font-family:var(--font-display);font-size:.95rem;line-height:1;margin-top:.15rem}
.nwk-steps h3{font-size:1.1rem;margin:0 0 .3rem}
.nwk-steps p{color:var(--slate-2);margin:0;line-height:1.7}

/* --- Domande frequenti ------------------------------------- */
.nwk-faq{margin-top:1.2rem;border-top:1px solid var(--line)}
.nwk-faq__item{border-bottom:1px solid var(--line)}
.nwk-faq__item summary{cursor:pointer;padding:.95rem 2rem .95rem 0;position:relative;
  font-family:var(--font-display);font-size:1.02rem;line-height:1.45;list-style:none}
.nwk-faq__item summary::-webkit-details-marker{display:none}
.nwk-faq__item summary::after{content:"";position:absolute;right:.4rem;top:1.35rem;
  width:.55rem;height:.55rem;border-right:2px solid var(--teal);
  border-bottom:2px solid var(--teal);transform:rotate(45deg);
  transition:transform .25s var(--ease)}
.nwk-faq__item[open] summary::after{transform:rotate(-135deg);top:1.5rem}
.nwk-faq__item summary:hover{color:var(--teal)}
.nwk-faq__item p{margin:0 0 1.05rem;color:var(--slate-2);line-height:1.7;max-width:66ch}

/* --- Riquadro istruttore nella colonna laterale ------------ */
.nwk-teacher{color:var(--slate-2);font-size:.94rem;line-height:1.65;margin:0 0 .3rem}

/* --- Mappa del sito ---------------------------------------- */
.mds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(1.4rem,1rem + 1.5vw,2.4rem)}
.mds-col__t{font-family:var(--font-display);font-size:1.15rem;margin:0 0 .8rem;
  padding-bottom:.6rem;border-bottom:2px solid var(--amber)}
.mds-col__t a{color:inherit;text-decoration:none}
.mds-col__t a:hover{color:var(--teal)}
.mds-sub{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stone);margin:1.1rem 0 .45rem}
.mds-list{list-style:none;margin:0;padding:0}
.mds-list li{margin:.4rem 0;line-height:1.5}
.mds-list a{color:var(--slate-2);text-decoration:none;font-size:.95rem}
.mds-list a:hover{color:var(--teal);text-decoration:underline}
.mds-empty{color:var(--stone);font-size:.9rem;font-style:italic}
.mds-note{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--line);
  color:var(--stone);font-size:.9rem}

/* --- Pagine CMS (template base) ----------------------------
   Colonna unica centrata. La misura sta sui 68 caratteri: sopra i
   75 l'occhio perde la riga tornando a capo, sotto i 45 si spezza
   troppo spesso. L'immagine sfora leggermente il testo per dare
   respiro, ma resta sullo stesso asse. */
.pg-wrap{max-width:68ch;margin-inline:auto}
.pg-figure{margin:0 0 2.4rem;width:min(112%,100vw - var(--gutter)*2);
  margin-inline:auto;position:relative;left:50%;transform:translateX(-50%)}
.pg-figure img{width:100%;height:auto;display:block;border-radius:var(--radius)}

/* Corpo leggermente piu' grande del resto del sito: qui il testo e'
   il contenuto, non un complemento a una scheda. */
.pg-body{font-size:1.03rem;line-height:1.8}
.pg-body > :first-child{margin-top:0}
.pg-body h2{margin-top:2.6rem}
.pg-body h3{margin-top:1.9rem}
.pg-body li{margin:.45rem 0}

@media (max-width:720px){
  .pg-figure{width:100%;left:auto;transform:none}
}

/* ============================================================
   HERO DELLA HOME — composizione a due colonne
   Il titolo stava sopra il carosello come blocco separato da una
   riga: due elementi impilati, con il titolo della diapositiva piu'
   grande dell'H1. Qui il messaggio ha una colonna propria e resta
   fermo; gli itinerari scorrono accanto come prova visiva.
   Nessuna regola precedente e' stata modificata.
   ============================================================ */

.herolead{display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.8rem,1.1rem + 3vw,3.6rem);
  align-items:center;
  padding:clamp(1.6rem,1.1rem + 2vw,3.2rem) 0 clamp(2.2rem,1.6rem + 2vw,3.6rem)}
@media(max-width:900px){
  .herolead{grid-template-columns:1fr;gap:2rem;align-items:start}
}

.herolead__msg{display:flex;flex-direction:column;justify-content:center}
.herolead__msg .hero__eyebrow{margin-bottom:1.1rem}

/* La doppia classe scavalca .hero h1, che imposta clamp(2.5rem,5.3rem),
   ombra e max-width:16ch: regole nate per l'hero a tutto schermo su
   fondo scuro, qui fuori scala. */
.hero--split .hero__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.95rem,1.35rem + 2.5vw,3rem);
  line-height:1.05;letter-spacing:-.022em;
  color:var(--slate);margin:0 0 1rem;max-width:15ch;
  text-shadow:none;text-wrap:balance}

/* .hero h1 .accent e' ambra brillante, pensata per il fondo scuro:
   sul grigio chiaro non si leggerebbe. */
.hero--split .hero__title .accent{color:var(--teal-d)}

.hero__claim{margin:0 0 1.7rem;max-width:44ch;color:var(--stone);
  font-size:clamp(1rem,.95rem + .3vw,1.11rem);line-height:1.65}

.herolead__msg .creds{margin-top:1.9rem}

/* --- Il carosello come oggetto unico ----------------------- */
.herolead__show{min-width:0}
.hero--slider .heroslides{border-radius:var(--radius);overflow:hidden;
  background:var(--slate)}

.heroslide__link{display:block;text-decoration:none;color:inherit;
  position:relative;height:100%}

.heroslide__media{display:block;position:relative;overflow:hidden;
  min-height:clamp(240px,28vw,380px);background:var(--slate)}
.heroslide__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  transition:transform .7s var(--ease)}
.heroslide__link:hover .heroslide__media img{transform:scale(1.035)}

/* La scheda si appoggia sotto l'immagine, dentro la stessa cornice:
   e' cio' che lega la foto al testo invece di lasciarla appesa. */
.heroslide__card{display:block;background:var(--slate);
  padding:clamp(1rem,.8rem + .7vw,1.35rem) clamp(1.1rem,.9rem + .8vw,1.5rem)}
.heroslide__k{display:block;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-bright);
  margin-bottom:.5rem}

/* .heroslide__t era il titolo grande su fondo chiaro: qui e' dentro la
   scheda scura e deve stare sotto l'H1 nella gerarchia. */
.heroslide__card .heroslide__t{display:block;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.08rem,.95rem + .55vw,1.38rem);
  line-height:1.2;letter-spacing:-.015em;color:#fff;
  margin:0 0 .55rem;max-width:26ch;text-wrap:balance}

.heroslide__card .heroslide__meta{display:flex;flex-wrap:wrap;
  gap:.3rem 1.1rem;margin:0;color:rgba(255,255,255,.66)}
.heroslide__card .heroslide__meta svg{color:rgba(255,255,255,.5)}

.heroslide__go{display:inline-flex;align-items:center;gap:.45em;
  margin-top:.85rem;font-family:var(--font-display);font-weight:500;
  font-size:.88rem;color:var(--amber-bright);
  transition:color .25s var(--ease),gap .25s var(--ease)}
/* I simboli dello sprite portano gia' fill/stroke: qui basta la misura. */
.heroslide__go svg{width:.95em;height:.95em}
.heroslide__link:hover .heroslide__go{color:#fff;gap:.75em}

/* I comandi scendono sotto la loro colonna, non a tutta pagina. */
.herolead__show .heroctl{margin-top:1.1rem}

@media(max-width:900px){
  .heroslide__media{min-height:230px}
  .hero--split .hero__title{max-width:20ch}
}

/* =====================================================================
   SELETTORE DI LINGUA  (.langsw-)
   Aggiunto per il multilingua IT / EN / DE. Nessuna regola esistente
   modificata: il blocco vive in coda al foglio come .nwk- e .mds-.

   SPECIFICITA', e non e' un dettaglio: il selettore vive dentro
   .nav__links, che veste TUTTI i suoi <a> con padding .5rem .8rem,
   corpo .97rem e un sottolineato ambra in ::after. Con la sola classe
   .langsw__item (0,1,0) quelle regole (0,1,1) vincevano, e le tre
   sigle uscivano larghe come voci di menu, sottolineate al passaggio
   del mouse e, sul telefono, con un filetto ciascuna. Da qui la
   discendenza .nav__lang .langsw__item (0,2,0), che le batte.
   ===================================================================== */

.nav__lang{
  display:flex;
  align-items:center;
  margin-left:.5rem;
}

.langsw__list{
  display:flex;
  align-items:center;
  gap:.1rem;
  margin:0;
  padding:0;
  list-style:none;
}

.nav__lang .langsw__item{
  display:inline-block;
  padding:.28rem .42rem;
  border-radius:.35rem;
  font-family:var(--font-display);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1;
  text-decoration:none;
  color:rgba(255,255,255,.6);
  transition:color .2s, background-color .2s;
}

/* Il sottolineato ambra e' la firma delle voci di menu: sulle sigle
   di lingua sarebbe rumore. */
.nav__lang .langsw__item::after{
  display:none;
}

.nav__lang .langsw__item:hover,
.nav__lang .langsw__item:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.12);
}

/* La lingua attiva resta cliccabile: toglierla dal flusso sposterebbe
   le altre due a ogni cambio pagina. */
.nav__lang .langsw__item.is-current{
  color:#fff;
  background:rgba(255,255,255,.14);
  cursor:default;
}

/* Fra 1001 e 1220px la barra e' gia' stretta (vedi il blocco
   "Navigazione a sei voci"): qui il selettore si comprime ancora. */
@media (min-width:1001px) and (max-width:1220px){
  .nav__lang{margin-left:.25rem}
  .nav__lang .langsw__item{padding:.28rem .32rem;font-size:.72rem}
}

/* Nel menu a scomparsa le voci sono impilate e larghe: il selettore
   diventa una riga a se', separata da un filetto, e NON eredita ne'
   il corpo grande ne' il bordo inferiore delle voci di menu. */
@media (max-width:1000px){
  .nav__lang{
    justify-content:center;
    margin:.8rem 0 0;
    padding-top:1rem;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .langsw__list{gap:.4rem}

  .nav__lang .langsw__item{
    padding:.55rem .95rem;
    font-size:.9rem;
    border:1px solid rgba(255,255,255,.22);
    border-bottom:1px solid rgba(255,255,255,.22);
  }
}

/* ============================================================
   MENU A SCOMPARSA — il pannello torna alto quanto lo schermo
   Blocco aggiunto in coda il 10 agosto 2026. Nessuna regola
   precedente e' stata modificata: qui si sovrascrive per cascata.
   ============================================================ */

/* CAUSA. backdrop-filter su .site-header fa dell'header il "blocco
   contenitore" dei suoi discendenti position:fixed. Il pannello del
   menu (.nav__links, inset:0 0 0 auto) smetteva quindi di misurarsi
   sulla finestra e si misurava sull'header: alto una ottantina di
   pixel, con le voci che ne uscivano fuori — il Contattami sospeso
   sopra la pagina, le sigle di lingua sovrapposte al titolo, le
   prime voci tagliate in alto.

   Il difetto esisteva da sempre ma si vedeva solo dopo lo
   scorrimento, quando il JS aggiunge .scrolled. Da quando la home
   monta l'header solido (is-solid, che porta la stessa sfocatura)
   e' diventato permanente su ogni pagina.

   Sotto i 1000px la sfocatura si spegne: la barra e' gia' opaca al
   92% e sul telefono non c'e' nulla che scorra dietro l'header
   quando il menu e' aperto. L'alfa sale a .97 per compensare la
   lieve trasparenza che la sfocatura mascherava. */
@media (max-width:1000px){
  .site-header.is-solid,
  .site-header.scrolled{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(18,28,35,.97);
  }

  /* Con sette voci, il sottomenu Itinerari aperto e le tre lingue in
     coda, il contenuto supera l'altezza di un telefono basso.
     justify-content:center su un contenuto piu' alto del contenitore
     lo taglia da entrambi i lati e rende la parte alta irraggiungibile
     anche potendo scorrere: i margini automatici centrano quando lo
     spazio avanza e si azzerano quando manca. */
  .nav__links{
    justify-content:flex-start;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(2rem + env(safe-area-inset-bottom, 0px));
  }
  .nav__links > li:first-child{margin-top:auto}
  .nav__links > li:last-child{margin-bottom:auto}

  /* Il pannello e' fuori dal flusso: senza questo la pagina sotto
     continua a scorrere sotto il dito mentre il menu e' aperto. */
  body.nav-open{overflow:hidden}
}

/* =========================================================================
   PROFILI SOCIAL NEL FOOTER
   Aggiunto: i social erano solo nella sezione contatti della home, dove
   li vede chi arriva dalla homepage e nessun altro. Il blocco riusa la
   stessa struttura di .contact__social ma su fondo scuro, quindi con i
   colori invertiti: bordo e testo chiari, riempimento ambra al passaggio
   del mouse.
   ========================================================================= */
.footer__social{display:flex;gap:.6rem;margin-top:1.2rem}
.footer__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);transition:.25s var(--ease)}
.footer__social a:hover{background:var(--amber);border-color:var(--amber);
  color:var(--slate);transform:translateY(-2px)}
.footer__social svg{width:1.1rem;height:1.1rem}

/* Il focus da tastiera deve restare visibile anche sul fondo scuro:
   l'outline predefinito del browser su .footer sparirebbe. */
.footer__social a:focus-visible{outline:2px solid var(--amber-bright);outline-offset:3px}

/* =========================================================================
   MODULO DI CONTATTO — ERRORI DI VALIDAZIONE E HONEYPOT
   Aggiunto quando il modulo della home ha smesso di aprire il client di
   posta e ha iniziato a inviare davvero al server: da allora la pagina
   puo' tornare indietro con degli errori, e prima non c'era nulla per
   mostrarli.
   ========================================================================= */

/* Riepilogo in cima al modulo. Non usa il rosso pieno: sul fondo caldo
   del tema stona, e l'ambra scuro del marchio segnala altrettanto bene
   restando leggibile (contrasto oltre 4.5:1 su .paper). */
.form__errors{background:rgba(185,94,18,.09);border:1px solid rgba(185,94,18,.25);
  border-radius:var(--radius);padding:.9rem 1rem;margin-bottom:1.3rem;
  font-size:.88rem;color:var(--amber-deep)}
.form__errors p{margin:0 0 .4rem}
.form__errors ul{margin:0;padding-left:1.1rem;list-style:disc}
.form__errors li{margin:.15rem 0}

/* Messaggio sotto il singolo campo. */
.field__error{display:block;margin-top:.35rem;font-size:.8rem;color:var(--amber-deep)}

/* Il bordo del campo respinto: il colore da solo non basta come
   segnale, per questo resta anche il messaggio scritto sotto. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:var(--amber-deep)}

/* Honeypot: fuori schermo e non display:none, perche' i bot saltano i
   campi nascosti ma compilano quelli che il DOM dichiara visibili.
   Stessa tecnica gia' in uso in .itin-req__hp. */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}