/* ═══════════════════════════════════════════════════════════
   DANIELA RIGHI — BOZZA 1 · "Carta di rotta"
   Fondo inchiostro prugna, inserti in carta, strumenti in ottone.
   Palette e font sono i suoi: cambia il ruolo che hanno.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* colore */
  --inchiostro:   #1B0F15;
  --inchiostro-2: #241520;
  --bordeaux:     #94284F;
  --bordeaux-up:  #A82F5A;
  --carta:        #F3EFE9;
  --cipria:       #D4AFAD;
  --ottone:       #AE9573;
  --prugna:       #603F5D;

  --su-ink:        #F3EFE9;
  --su-ink-soft:   rgba(243,239,233,.74);
  --su-ink-faint:  rgba(243,239,233,.42);

  /* tipografia */
  --display: "Noto Serif Display", Georgia, serif;
  --testo:   "DM Sans", system-ui, sans-serif;
  --dato:    "DM Mono", ui-monospace, monospace;

  /* spazio */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 1240px;
  --sez: clamp(5rem, 9vw, 8.5rem);

  --tempo: .55s cubic-bezier(.22,.61,.36,1);
}

/* ── reset ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
/* `overflow-x:clip` e NON `hidden`: hidden sul body lo trasforma in
   contenitore di scroll e gli eventi di scroll non arrivano più a window
   (header, reveal e disegno della rotta smettono di funzionare). */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  background:var(--inchiostro);
  color:var(--su-ink-soft);
  font-family:var(--testo);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; line-height:1.02; color:var(--su-ink); }
p{ margin:0 0 1.05em; }
em{ font-style:italic; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{ outline:2px solid var(--cipria); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--carta); color:var(--inchiostro); padding:.75rem 1.25rem;
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{ width:min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline:auto; }

/* ── reveal (rete di sicurezza: nasconde SOLO se il JS gira) ── */
html.js .reveal{ opacity:0; transform:translateY(20px); }
html.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity var(--tempo), transform var(--tempo);
}
html.js .reveal.d1.in{ transition-delay:.09s; }
html.js .reveal.d2.in{ transition-delay:.18s; }
html.js .reveal.d3.in{ transition-delay:.27s; }
html.js .reveal.d4.in{ transition-delay:.36s; }

/* ── atomi ───────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--dato); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ottone); margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{ content:""; width:2.25rem; height:1px; background:var(--ottone); opacity:.6; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 1.7rem; border-radius:999px;
  font-size:.92rem; font-weight:500; letter-spacing:.045em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .3s, color .3s, border-color .3s, transform .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-lg{ min-height:58px; padding:0 2.2rem; }
.btn-sm{ min-height:42px; padding:0 1.15rem; font-size:.76rem; }

.btn-primary{ background:var(--bordeaux); color:var(--carta); }
.btn-primary:hover{ background:var(--bordeaux-up); }

.btn-ghost{ border-color:rgba(212,175,173,.5); color:var(--carta); }
.btn-ghost:hover{ background:rgba(212,175,173,.14); border-color:var(--cipria); }

.btn-outline{ border-color:var(--bordeaux); color:var(--bordeaux); }
.btn-outline:hover{ background:var(--bordeaux); color:var(--carta); }

.btn-cream{ background:var(--carta); color:var(--bordeaux); }
.btn-cream:hover{ background:#fff; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--dato); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ottone);
  border-bottom:1px solid rgba(174,149,115,.4); padding-bottom:.3rem;
  transition:color .3s, border-color .3s, gap .3s;
}
.link-arrow::after{ content:"→"; }
.link-arrow:hover{ color:var(--cipria); border-color:var(--cipria); gap:.95rem; }
.link-arrow.light{ color:rgba(243,239,233,.85); border-color:rgba(243,239,233,.4); }
.link-arrow.light:hover{ color:#fff; border-color:#fff; }

.section{ padding-block:var(--sez); position:relative; }
.sec-lede{ font-size:clamp(1.02rem,1.4vw,1.15rem); max-width:56ch; }

/* ═══ HEADER ═══════════════════════════════════════════════ */
.site-head{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background-color .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
  padding-block:1.15rem;
}
.site-head.scrolled{
  background:rgba(27,15,21,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(174,149,115,.22);
  padding-block:.7rem;
}
.head-in{ display:flex; align-items:center; gap:2rem; }
.brand{ flex:0 0 auto; }
.brand img{ width:clamp(150px,15vw,196px); }

.nav-desk{ display:flex; gap:1.9rem; margin-left:auto; }
.nav-desk a{
  font-size:.86rem; letter-spacing:.03em; text-decoration:none;
  color:var(--su-ink-soft); padding-bottom:.28rem;
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.nav-desk a:hover{ color:var(--carta); border-bottom-color:var(--ottone); }

.burger{ display:none; width:44px; height:44px; margin-left:auto; position:relative; }
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--carta);
  transition:transform .3s;
}
.burger span:first-child{ top:19px; }
.burger span:last-child{ top:25px; }

/* menu mobile */
.menu-overlay{
  position:fixed; inset:0; z-index:150; background:var(--carta);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; padding:2rem;
}
.menu-overlay[hidden]{ display:none; }
.menu-close{ position:absolute; top:1rem; right:1.25rem; font-size:2.4rem; line-height:1; color:var(--bordeaux); }
.menu-logo{ width:220px; }
.menu-overlay nav{ display:flex; flex-direction:column; gap:1.4rem; text-align:center; }
.menu-overlay nav a{
  font-family:var(--display); font-size:1.6rem; text-transform:uppercase;
  letter-spacing:.02em; color:var(--prugna); text-decoration:none;
}

/* ═══ 1 · HERO ═════════════════════════════════════════════ */
.hero{ position:relative; padding-block:clamp(9rem,16vh,12rem) clamp(2.5rem,5vw,4rem); overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:72% 28%; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--inchiostro) 34%, rgba(27,15,21,.9) 48%, rgba(27,15,21,.2) 70%, rgba(27,15,21,.5) 100%),
    linear-gradient(to top, var(--inchiostro) 2%, transparent 30%);
}
/* .hero-in è anche .wrap: il max-width va sui figli, altrimenti
   i margini automatici del wrap centrano tutto il blocco. */
.hero-in{ position:relative; z-index:1; }
.hero-in > *{ max-width:600px; }

.hero h1{
  font-size:clamp(2.9rem, 5.6vw, 4.9rem);
  letter-spacing:-.015em; margin:0 0 1.5rem;
}
.hero h1 em{ color:var(--cipria); display:inline-block; }
.hero-lede{ font-size:clamp(1.05rem,1.6vw,1.22rem); max-width:44ch; color:var(--su-ink-soft); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }

.creds{
  position:relative; z-index:1;
  margin-top:clamp(3.5rem,8vw,6rem);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:rgba(174,149,115,.28);
  border-block:1px solid rgba(174,149,115,.28);
}
.creds li{ background:var(--inchiostro); padding:1.5rem 1.4rem; }
.creds b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,2vw,1.6rem); color:var(--carta); line-height:1.1;
}
.creds span{
  display:block; margin-top:.45rem;
  font-family:var(--dato); font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ottone);
}

/* ═══ 2 · RICONOSCIMENTO ═══════════════════════════════════ */
.sec-riconoscimento{ background:var(--inchiostro-2); }
.lede-big{
  font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.5;
  max-width:44ch; color:var(--su-ink); font-weight:400;
}

.negazioni{ margin:clamp(3rem,6vw,5rem) 0; }
.neg{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.5rem,4vw,2.9rem); line-height:1.28;
  color:var(--cipria); opacity:.44; margin:0 0 .2em;
}
.neg span{ position:relative; display:inline; }
.neg span::after{
  content:""; position:absolute; left:-.06em; right:-.06em; top:.56em;
  height:1px; background:var(--ottone);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s cubic-bezier(.22,.61,.36,1) .25s;
}
html.js .neg.in span::after{ transform:scaleX(1); }

.affermazione{
  font-family:var(--display);
  font-size:clamp(1.9rem,5.2vw,3.7rem); line-height:1.18;
  color:var(--carta); margin:.55em 0 0; letter-spacing:-.01em;
}
.affermazione mark{
  background:var(--bordeaux); color:var(--carta);
  padding:.04em .26em .1em; border-radius:2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

.chiusura{ max-width:52ch; }
.chiusura.strong{ color:var(--carta); font-size:1.1rem; }

/* ═══ 3 · LA ROTTA ═════════════════════════════════════════ */
.sec-rotta h2{ font-size:clamp(2rem,4.4vw,3.4rem); margin:0 0 1.4rem; }
.sec-rotta h2 em{ color:var(--cipria); }

/* carta di rotta */
.rotta{ position:relative; margin:clamp(3.5rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem); color:var(--ottone); }
.rotta-svg{ display:block; width:100%; height:130px; overflow:visible; }
.rotta-line{ stroke-dasharray:2400; stroke-dashoffset:2400; }
html.js .rotta.in .rotta-line{ transition:stroke-dashoffset 2.1s cubic-bezier(.4,0,.2,1); stroke-dashoffset:0; }
html:not(.js) .rotta-line{ stroke-dashoffset:0; }
.rotta-svg .tick{ stroke:currentColor; stroke-width:1; opacity:.22; vector-effect:non-scaling-stroke; }
.wp{ fill:var(--inchiostro); stroke:var(--ottone); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:0; }
html.js .rotta.in .wp{ transition:opacity .5s; opacity:1; }
html:not(.js) .wp{ opacity:1; }
.rotta.in .wp:nth-of-type(1){ transition-delay:.5s; }
.rotta.in .wp:nth-of-type(2){ transition-delay:1.1s; }
.rotta.in .wp:nth-of-type(3){ transition-delay:1.7s; }

.rotta-legend{ position:relative; height:5.5rem; margin-top:.5rem; }
.rotta-legend li{ position:absolute; top:0; transform:translateX(-50%); width:min(200px,32vw); text-align:center; }
.rotta-legend li:nth-child(1){ left:15%; }
.rotta-legend li:nth-child(2){ left:50%; }
.rotta-legend li:nth-child(3){ left:85%; }
.rotta-legend a{ text-decoration:none; display:block; }
.rotta-legend b{
  display:block; font-family:var(--dato); font-size:.72rem; letter-spacing:.14em;
  color:var(--ottone); margin-bottom:.35rem;
}
.rotta-legend a{ font-family:var(--display); font-size:1.05rem; color:var(--carta); transition:color .3s; }
.rotta-legend a:hover{ color:var(--cipria); }
.rotta-legend span{
  display:block; margin-top:.3rem; font-family:var(--testo);
  font-size:.8rem; color:var(--su-ink-faint);
}

/* i tre percorsi */
.percorsi{ display:grid; gap:clamp(4rem,8vw,7rem); }
.percorso{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.percorso.alt .p-figura{ order:2; }

/* Le illustrazioni hanno un fondo carta semitrasparente: sul fondo scuro
   si spengono. Vanno montate su una tavola color carta, come un inserto. */
.p-figura{ position:relative; background:var(--carta); padding:clamp(.7rem,1.4vw,1.2rem); }
.p-figura img{ position:relative; z-index:1; width:100%; }
.p-figura::before{
  content:""; position:absolute; z-index:0;
  inset:16px -16px -16px 16px;
  border:1px solid rgba(174,149,115,.42);
}

.p-num{
  font-family:var(--dato); font-size:.78rem; letter-spacing:.2em;
  color:var(--ottone); margin:0 0 .7rem;
}
.p-testo h3{ font-size:clamp(1.85rem,3.6vw,2.7rem); margin:0 0 .2rem; }
.p-sub{
  font-family:var(--dato); font-size:.8rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--cipria); margin:0 0 1.3rem;
}
.p-lede{ max-width:50ch; }
.p-label{
  font-size:.94rem; color:var(--carta); margin:1.8rem 0 .8rem;
  padding-top:1.1rem; border-top:1px solid rgba(174,149,115,.25);
}
.p-list{ display:grid; gap:.55rem; margin-bottom:1.9rem; }
.p-list li{ position:relative; padding-left:1.5rem; font-size:.97rem; }
.p-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.45rem; height:.45rem; border:1px solid var(--ottone); transform:rotate(45deg);
}

/* metodo */
.metodo{
  margin-top:clamp(4rem,8vw,6.5rem); padding-top:2.5rem;
  border-top:1px solid rgba(174,149,115,.25);
  display:flex; flex-wrap:wrap; align-items:center; gap:2rem 3rem; justify-content:space-between;
}
.metodo-q{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,2vw,1.5rem); color:var(--carta);
  max-width:34ch; margin:0;
}
.metodo-tag{ display:flex; flex-wrap:wrap; gap:.6rem; }
.metodo-tag li{
  font-family:var(--dato); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ottone); border:1px solid rgba(174,149,115,.35);
  padding:.5rem .9rem; border-radius:999px;
}

/* ═══ 4 · DUE PORTE ════════════════════════════════════════ */
.sec-porte{ background:var(--inchiostro-2); }
.porte{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
.porta{
  background:var(--carta); color:var(--prugna);
  padding:clamp(2rem,3.6vw,3.2rem);
  display:flex; flex-direction:column; position:relative;
}
.porta-eyebrow{
  font-family:var(--dato); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bordeaux); margin:0 0 .8rem;
}
.porta h3{
  font-size:clamp(1.7rem,3vw,2.35rem); color:var(--inchiostro);
  margin:0 0 1rem; letter-spacing:.05em;
}
.porta-lede{ color:var(--prugna); }
.porta-list{ display:grid; gap:.7rem; margin:1.4rem 0 2.2rem; }
.porta-list li{
  padding-top:.7rem; border-top:1px solid rgba(96,63,93,.16);
  font-size:.95rem; color:var(--prugna);
}
.porta .btn{ align-self:flex-start; margin-top:auto; }
.porta-mark{ position:absolute; top:clamp(2rem,3.6vw,3.2rem); right:clamp(2rem,3.6vw,3.2rem); width:52px; height:52px; }
.porta-b{ box-shadow:inset 0 4px 0 var(--bordeaux); }

/* ═══ 5 · IL LIBRO ═════════════════════════════════════════ */
.sec-libro{ background:var(--bordeaux); color:rgba(243,239,233,.86); }
.sec-libro .eyebrow{ color:var(--cipria); }
.sec-libro .eyebrow::before{ background:var(--cipria); }
.libro-in{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.libro-img img{ width:100%; filter:drop-shadow(0 26px 46px rgba(0,0,0,.32)); }
.sec-libro h2{ font-size:clamp(2.2rem,5vw,3.8rem); color:var(--carta); margin:0 0 .4rem; }
.libro-sub{ font-family:var(--display); font-size:clamp(1.05rem,1.9vw,1.35rem); color:var(--cipria); margin:0 0 1.6rem; }
.libro-passi{ display:grid; gap:.6rem; margin:1.6rem 0; }
.libro-passi li{
  padding-left:1.6rem; position:relative; font-size:.98rem;
}
.libro-passi li::before{
  content:""; position:absolute; left:0; top:.62em; width:.5rem; height:1px; background:var(--cipria);
}
.libro-passi b{ color:var(--carta); font-weight:500; }
.libro-meta{
  font-family:var(--dato); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cipria); margin:0 0 1.9rem;
}
.libro-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; }

/* ═══ 6 · BLOG ═════════════════════════════════════════════ */
.blog-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:2.5rem; align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-blog h2{ font-size:clamp(1.9rem,4vw,3rem); }
.sec-blog h2 em{ color:var(--cipria); }

.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
.post{
  display:flex; flex-direction:column; text-decoration:none;
  border-top:1px solid rgba(174,149,115,.3); padding-top:1.4rem;
  transition:border-color .35s;
}
.post:hover{ border-top-color:var(--cipria); }
.post-img{ display:block; overflow:hidden; margin-bottom:1.2rem; background:var(--carta); }
.post-img img{ width:100%; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.post:hover .post-img img{ transform:scale(1.045); }
.post-cat{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ottone); margin-bottom:.7rem;
}
.post-title{
  font-family:var(--display); font-size:1.22rem; line-height:1.25;
  color:var(--carta); margin-bottom:.7rem; transition:color .3s;
}
.post:hover .post-title{ color:var(--cipria); }
.post-hook{ font-size:.94rem; color:var(--su-ink-soft); margin-bottom:1.1rem; }
.post-meta{
  margin-top:auto; font-family:var(--dato); font-size:.7rem;
  letter-spacing:.1em; color:var(--su-ink-faint);
}

/* ═══ 7 · CONTATTO ═════════════════════════════════════════ */
.sec-contatto{ background:var(--inchiostro-2); }
.contatto-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.64fr); gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.sec-contatto h2{ font-size:clamp(2.4rem,5.5vw,4.2rem); margin:0 0 1.2rem; }
.contatto-testo p{ max-width:48ch; }
.badge{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--dato); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ottone); border:1px solid rgba(174,149,115,.4);
  padding:.6rem 1.1rem; border-radius:999px; margin-bottom:2rem;
}
.badge::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--ottone); }
.contatto-img img{ width:100%; }

/* ═══ FOOTER ═══════════════════════════════════════════════ */
.site-foot{ background:var(--inchiostro); border-top:1px solid rgba(174,149,115,.22); padding-top:clamp(3.5rem,6vw,5rem); }
.foot-in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; }
.foot-brand img{ width:190px; margin-bottom:1.2rem; }
.foot-brand p{ font-size:.9rem; color:var(--su-ink-faint); max-width:34ch; }
.foot-t{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ottone); margin:0 0 1.1rem;
}
.foot-nav, .foot-col{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.foot-nav a, .foot-col a{ font-size:.92rem; text-decoration:none; color:var(--su-ink-soft); transition:color .3s; }
.foot-nav a:hover, .foot-col a:hover{ color:var(--cipria); }
.foot-piva{ font-size:.85rem; color:var(--su-ink-faint); margin:.4rem 0 0; }
.foot-social{ display:flex; gap:.9rem; }
.foot-social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(174,149,115,.35); border-radius:50%; transition:background-color .3s, border-color .3s; }
.foot-social svg{ width:17px; height:17px; fill:var(--ottone); transition:fill .3s; }
.foot-social a:hover{ background:var(--bordeaux); border-color:var(--bordeaux); }
.foot-social a:hover svg{ fill:var(--carta); }

.foot-bar{
  margin-top:clamp(3rem,5vw,4rem); padding-block:1.5rem;
  border-top:1px solid rgba(174,149,115,.18);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.82rem; color:var(--su-ink-faint);
}
.foot-bar p{ margin:0; }
.foot-legal a{ text-decoration:none; }
.foot-legal a:hover{ color:var(--cipria); }

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:1080px){
  .creds{ grid-template-columns:repeat(2,1fr); }
  .foot-in{ grid-template-columns:1fr 1fr; gap:2.5rem 2rem; }
}

@media (max-width:900px){
  .nav-desk, .head-cta{ display:none; }
  .burger{ display:block; }
  .porte{ grid-template-columns:minmax(0,1fr); }
  .posts{ grid-template-columns:minmax(0,1fr); }
  .blog-head{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .libro-in, .contatto-in{ grid-template-columns:minmax(0,1fr); }
  .libro-img{ max-width:330px; }
  .contatto-img{ max-width:420px; }
  .percorso, .percorso.alt{ grid-template-columns:1fr; gap:2rem; }
  .percorso.alt .p-figura{ order:0; }
  .p-figura{ max-width:420px; }
}

@media (max-width:760px){
  body{ font-size:1rem; }
  /* su schermi stretti i pulsanti possono andare a capo: senza questo
     il testo nowrap allarga la colonna della griglia e sfonda a destra */
  .btn{ white-space:normal; text-align:center; padding:.85rem 1.35rem; line-height:1.3; }
  .hero{ padding-top:clamp(7.5rem,22vh,10rem); }
  .hero-media img{ object-position:52% 8%; }
  .hero-scrim{
    background:
      linear-gradient(to bottom, rgba(27,15,21,.6) 0%, rgba(27,15,21,.34) 26%, rgba(27,15,21,.82) 46%, rgba(27,15,21,.97) 60%, var(--inchiostro) 74%);
  }
  .hero-in{ padding-top:clamp(9rem,36vh,17rem); }
  .hero-cta .btn{ flex:1 1 auto; }
  .rotta{ display:none; }
  .percorsi{
    border-left:1px solid rgba(174,149,115,.3);
    padding-left:1.5rem; gap:3.5rem;
  }
  .percorso{ position:relative; }
  .p-num{ position:relative; }
  .p-num::before{
    content:""; position:absolute; left:-1.85rem; top:.45em;
    width:.5rem; height:.5rem; border-radius:50%;
    background:var(--inchiostro); border:1.5px solid var(--ottone);
  }
  .metodo{ flex-direction:column; align-items:flex-start; }
  .foot-in{ grid-template-columns:1fr; }
}

/* ═══ MOTION ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .neg span::after{ transform:scaleX(1) !important; transition:none !important; }
  .rotta-line{ stroke-dashoffset:0 !important; transition:none !important; }
  .wp{ opacity:1 !important; transition:none !important; }
  .btn:hover, .post:hover .post-img img{ transform:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}