/* ============================================================
   BLOG — Camp ComeUnaVolta
   Stile coerente con la homepage (home-prova).
   Token, nav, footer e bottoni ripresi 1:1 dalla home.
   ============================================================ */
:root{
  --panna:        #FAF7F0;
  --panna-2:      #F0EBDF;
  --bosco:        #213528;
  --bosco-2:      #1A2A20;
  --inchiostro:   #2A2417;
  --inchiostro-2: #6B5E4C;
  --crema-su-scuro:#EFE7D6;
  --crema-muta:   #B4A88D;
  --verde:        #4A7C59;
  --verde-scuro:  #3A6347;
  --arancio:      #D4773A;
  --arancio-scuro:#BB6630;
  /* arancio dei bottoni: piu scuro per contrasto WCAG 4.5:1 col testo bianco */
  --arancio-azione:#B05A1E;
  --arancio-azione-hover:#9E5220;
  --ocra:         #C2902F;
  --blu-neve:     #5E86A8;
  --bordo:        #E4DBC9;
  --bordo-scuro:  rgba(239,231,214,.16);

  --maxw: 1180px;
  --r:    14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--panna);
  color:var(--inchiostro);
  font-family:"Figtree",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .25vw,1.12rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.05; margin:0; letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{display:block; max-width:100%; height:auto}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem)}
.eyebrow{
  font-family:"Figtree",sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--arancio);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:30px; height:1.5px; background:var(--arancio); display:inline-block; flex:none}
.eyebrow.on-dark{color:var(--ocra)}
.eyebrow.on-dark::before{background:var(--ocra)}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem; cursor:pointer;
  font-family:"Figtree",sans-serif; font-weight:700; font-size:1rem;
  padding:.95rem 1.7rem; border-radius:100px; border:1.5px solid transparent;
  text-decoration:none; transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  min-height:48px;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--arancio-azione); color:#fff}
.btn-primary:hover{background:var(--arancio-azione-hover)}
.btn-ghost{background:transparent; color:var(--inchiostro); border-color:var(--inchiostro)}
.btn-ghost:hover{background:var(--inchiostro); color:var(--panna)}
.btn-ghost.on-dark{color:#fff; border-color:rgba(255,255,255,.55)}
.btn-ghost.on-dark:hover{background:#fff; color:var(--bosco)}
.btn svg{width:18px;height:18px;flex:none}

:where(a,button,summary):focus-visible{outline:3px solid var(--ocra); outline-offset:3px; border-radius:6px}

/* ============================================================
   TOPBAR + NAV (1:1 con la home)
   ============================================================ */
header.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--panna) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bordo);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.55rem}
.brand{display:flex; flex-direction:column; line-height:1; text-decoration:none}
.brand b{font-family:"Fraunces",serif; font-weight:700; font-size:1.12rem; letter-spacing:-.02em; color:var(--inchiostro)}
.brand b span{color:var(--verde)}
.brand small{font-size:.54rem; letter-spacing:.26em; text-transform:uppercase; color:var(--inchiostro-2); margin-top:.28rem; font-weight:600}
.nav-links{display:flex; align-items:center; gap:1.4rem}
.nav-links a{text-decoration:none; font-weight:600; font-size:.88rem; color:var(--inchiostro); position:relative; padding-block:.2rem}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--arancio); transition:width .25s var(--ease)}
.nav-links a:hover::after,.nav-links a.current::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:.8rem}
.nav-cta .btn{font-size:.9rem; padding:.62rem 1.25rem; min-height:42px}
.menu-toggle{display:none; background:none; border:0; cursor:pointer; padding:.4rem; color:var(--inchiostro)}
.menu-toggle svg{width:28px; height:28px}

section{position:relative; z-index:2}

/* ============================================================
   INDICE BLOG
   ============================================================ */
.blog-hero{background:var(--panna-2); border-bottom:1px solid var(--bordo)}
.blog-hero .wrap{padding-block:clamp(.6rem,1.2vw,.9rem); max-width:760px}
.blog-hero h1{font-size:clamp(2rem,1.5rem + 2.4vw,3rem); margin-top:.5rem; text-wrap:balance}
.blog-hero p{color:var(--inchiostro-2); margin-top:.8rem; font-size:1.08rem; line-height:1.55}

.blog-list{padding-block:clamp(3rem,7vw,5.5rem)}

/* Articolo in evidenza (primo) */
.feature{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  align-items:center; margin-bottom:clamp(2.5rem,5vw,4rem);
  background:#fff; border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature:hover{transform:translateY(-5px); box-shadow:0 30px 60px -30px rgba(33,40,25,.45)}
.feature__media{aspect-ratio:16/11; overflow:hidden; background:var(--panna-2); height:100%}
.feature__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.feature:hover .feature__media img{transform:scale(1.05)}
.feature__body{padding:clamp(1.6rem,3vw,2.6rem)}
.feature__body .cat{font-family:"Figtree",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verde)}
.feature__body h2{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.2rem); margin:.7rem 0 .8rem; line-height:1.15}
.feature__body p{color:var(--inchiostro-2); font-size:1.02rem; line-height:1.6}
.feature__body .more{margin-top:1.2rem; font-weight:700; font-size:.95rem; color:var(--arancio); display:inline-flex; align-items:center; gap:.5rem}
.feature__body .more svg{width:17px; height:17px; transition:transform .25s var(--ease)}
.feature:hover .feature__body .more svg{transform:translateX(4px)}

/* Griglia card */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,1.6rem)}
.post-card{
  background:#fff; border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card:hover{transform:translateY(-6px); box-shadow:0 28px 50px -28px rgba(33,40,25,.4)}
.post-card__media{aspect-ratio:16/10; overflow:hidden; background:var(--panna-2)}
.post-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.06)}
.post-card__body{padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.post-card__body .cat{font-family:"Figtree",sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--verde)}
.post-card__body h3{font-size:1.16rem; line-height:1.3; color:var(--inchiostro)}
.post-card__body .excerpt{color:var(--inchiostro-2); font-size:.92rem; line-height:1.55}
.post-card__body .more{margin-top:auto; padding-top:.4rem; font-weight:700; font-size:.88rem; color:var(--arancio); display:inline-flex; align-items:center; gap:.4rem}
.post-card__body .more svg{width:15px; height:15px; transition:transform .25s var(--ease)}
.post-card:hover .post-card__body .more svg{transform:translateX(4px)}
.meta-row{display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--inchiostro-2)}
.meta-row .dot{color:var(--bordo)}

/* ============================================================
   ARTICOLO
   ============================================================ */
/* Testata immersiva: foto cover a tutta pagina + testo sopra */
.art-hero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--bosco);
  min-height:min(70vh,620px); display:flex; align-items:flex-end; color:var(--crema-su-scuro);
}
.art-hero__bg{position:absolute; inset:0; z-index:-2}
.art-hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 38%}
.art-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,32,24,.34) 0%, rgba(20,32,24,.46) 45%, rgba(20,32,24,.78) 76%, rgba(20,32,24,.96) 100%);
}
.art-hero__inner{max-width:820px; margin-inline:auto; width:100%; padding-inline:clamp(1.25rem,5vw,2.5rem); padding-block:clamp(2rem,4.5vw,3.2rem)}
.crumbs{font-size:.82rem; color:var(--inchiostro-2); margin-bottom:1.4rem}
.crumbs a{color:var(--inchiostro-2); text-decoration:none}
.crumbs a:hover{color:var(--arancio)}
.crumbs span{color:var(--bordo); margin-inline:.5rem}
.art-cat{font-family:"Figtree",sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ocra); text-shadow:0 1px 8px rgba(0,0,0,.6)}
.art-hero h1{color:#fff; font-size:clamp(2rem,1.4rem + 3vw,3.3rem); margin:.7rem 0 .9rem; line-height:1.1; text-wrap:balance; text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 30px rgba(0,0,0,.7)}
.art-sub{font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:clamp(1.1rem,1rem + .6vw,1.45rem); color:#f3ece0; line-height:1.4; text-shadow:0 2px 16px rgba(0,0,0,.7); max-width:60ch}
.art-meta{display:flex; align-items:center; gap:.7rem; margin-top:1.5rem; font-size:.86rem; color:var(--crema-su-scuro)}
.art-meta .dot{color:rgba(255,255,255,.45)}

/* Corpo prosa */
.prose{max-width:680px; margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); padding-block:clamp(2.5rem,5vw,3.5rem)}
.prose > p{margin-bottom:1.4rem; font-size:1.08rem; line-height:1.75; color:var(--inchiostro)}
.prose > p:first-of-type::first-letter{
  font-family:"Fraunces",serif; font-weight:600; font-size:3.4rem; line-height:.8;
  float:left; margin:.35rem .7rem .1rem 0; color:var(--arancio);
}
.prose h2{font-size:clamp(1.45rem,1.2rem + 1.2vw,1.9rem); margin:2.6rem 0 1rem; color:var(--inchiostro)}
.prose h3{font-size:1.25rem; margin:2rem 0 .7rem; color:var(--verde-scuro)}
.prose ul,.prose ol{margin:0 0 1.4rem; padding-left:1.4rem}
.prose li{margin-bottom:.7rem; line-height:1.7}
.prose li strong{color:var(--inchiostro); font-weight:700}
.prose strong{color:var(--inchiostro); font-weight:700}
.prose a{color:var(--verde-scuro); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--arancio)}

/* Blockquote citazione */
.prose blockquote{
  border-left:4px solid var(--arancio); padding:.4rem 0 .4rem 1.4rem; margin:1.9rem 0;
  font-family:"Fraunces",serif; font-style:italic; font-size:1.2rem; line-height:1.45; color:var(--inchiostro);
}
.prose blockquote p{margin:0}

/* Box "Lo sapevi?" */
.callout{
  background:#EDF4EF; border:1.5px solid var(--verde); border-radius:var(--r);
  padding:1.5rem 1.6rem 1.35rem; margin:2.2rem 0;
}
.callout__label{font-family:"Figtree",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-scuro); margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem}
.callout__label svg{width:16px; height:16px}
.callout p{font-size:1rem; line-height:1.65; color:var(--inchiostro); margin:0}

/* CTA finale soft */
.art-cta{
  background:var(--bosco); color:var(--crema-su-scuro); border-radius:var(--r);
  padding:clamp(1.8rem,4vw,2.6rem); margin:2.8rem 0 1rem; text-align:center;
}
.art-cta .eyebrow{justify-content:center; color:var(--ocra)}
.art-cta .eyebrow::before{background:var(--ocra)}
.art-cta h2{color:#fff; font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); margin:.9rem auto .8rem; max-width:22ch; line-height:1.2}
.art-cta p{color:var(--crema-su-scuro); font-size:1rem; line-height:1.6; max-width:54ch; margin:0 auto 1.6rem}
.art-cta .btn-primary{background:#fff; color:var(--bosco); border-color:#fff}
.art-cta .btn-primary:hover{background:var(--ocra); color:var(--bosco); border-color:var(--ocra)}

/* Fonti */
.sources{max-width:680px; margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); padding-bottom:1rem}
.sources details{border-top:1px solid var(--bordo); padding-top:1.2rem}
.sources summary{font-family:"Figtree",sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--inchiostro-2); cursor:pointer; list-style:none}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:"▸ "; color:var(--arancio)}
.sources details[open] summary::before{content:"▾ "}
.sources ul{margin:1rem 0 0; padding-left:1.2rem}
.sources li{font-size:.86rem; line-height:1.55; color:var(--inchiostro-2); margin-bottom:.6rem}

/* Articoli correlati */
.related{background:var(--panna-2); border-top:1px solid var(--bordo)}
.related .wrap{padding-block:clamp(3rem,6vw,4.5rem)}
.related h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem); text-align:center; margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,1.6rem)}

/* ============================================================
   CTA CONTATTI + FOOTER (1:1 con la home)
   ============================================================ */
.cta{background:var(--arancio); color:#fff; text-align:center}
.cta .wrap{padding-block:clamp(3.5rem,8vw,5.5rem)}
.cta h2{color:#fff; font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem)}
.cta p{margin:1.1rem auto 1.6rem; max-width:48ch; color:#fff; opacity:.95; font-size:1.1rem}
.cta-contacts{display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; font-weight:600}
.cta-contacts a{color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem}
.cta-contacts a:hover{text-decoration:underline}
.cta-contacts svg{width:20px; height:20px}
.cta .btn-light{background:#fff; color:var(--arancio-scuro)}
.cta .btn-light:hover{background:var(--bosco); color:#fff}

footer.foot{background:var(--bosco); color:var(--crema-muta); font-size:.92rem}
.foot .wrap{padding-block:3.4rem; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem}
.foot .brand b{color:#fff} .foot .brand b span{color:var(--ocra)} .foot .brand small{color:var(--crema-muta)}
.foot h5{font-family:"Figtree",sans-serif; color:var(--crema-su-scuro); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; font-weight:700}
.foot a{color:var(--crema-muta); text-decoration:none; display:block; padding:.25rem 0}
.foot a:hover{color:var(--ocra)}
.foot p{margin-top:1rem; max-width:36ch; line-height:1.6}
.foot-bottom{border-top:1px solid var(--bordo-scuro)}
.foot-bottom .wrap{padding-block:1.3rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem}
.foot-bottom a{display:inline; color:var(--crema-muta)} .foot-bottom a:hover{color:var(--ocra)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .45s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature__media{aspect-ratio:16/9}
  .post-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; height:100dvh; overflow-y:auto;
    width:min(82vw,330px); background:var(--panna);
    flex-direction:column; align-items:flex-start; padding:6rem 2rem 2rem; gap:1.4rem;
    /* da chiuso e display:none (non translateX fuori schermo: un fixed oltre il
       bordo destro allarga la pagina e crea scroll orizzontale su mobile) */
    display:none;
    transform:translateX(100%);
    transition:transform .35s var(--ease), display .35s allow-discrete;
    box-shadow:-20px 0 60px -30px rgba(0,0,0,.5); z-index:60;
  }
  .nav-links.open{display:flex; transform:none}
  @starting-style{
    .nav-links.open{transform:translateX(100%)}
  }
  .nav-links a{font-size:1.2rem}
  .menu-toggle{display:block; z-index:61}
  .nav .nav-cta .btn{display:none}
  .post-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .prose > p:first-of-type::first-letter{font-size:2.8rem}
  .art-hero{min-height:62vh}
  .art-hero__inner{padding-block:1.8rem}
}
.scrim{position:fixed; inset:0; background:rgba(26,42,32,.45); opacity:0; visibility:hidden; transition:opacity .3s; z-index:48}
.scrim.show{opacity:1; visibility:visible}

/* ============================================================
   PAGINE INTERNE — header pagina
   ============================================================ */
.page-hero{background:var(--panna-2); border-bottom:1px solid var(--bordo)}
.page-hero .wrap{padding-block:clamp(.9rem,2vw,1.3rem); max-width:820px}
.page-hero h1{font-size:clamp(2rem,1.5rem + 2.4vw,3rem); margin-top:.5rem; text-wrap:balance; line-height:1.1}
.page-hero p{color:var(--inchiostro-2); margin-top:.8rem; font-size:1.08rem; line-height:1.55; max-width:62ch}
.crumbs{font-size:.82rem; color:var(--inchiostro-2); margin-bottom:.2rem}
.crumbs a{color:var(--inchiostro-2); text-decoration:none}
.crumbs a:hover{color:var(--arancio)}
.crumbs span{color:var(--bordo); margin-inline:.5rem}

/* Sezioni generiche (come home) */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section-head{max-width:62ch; margin-bottom:clamp(2rem,4.5vw,3rem)}
.section-head h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.2rem); margin-top:.8rem}
.section-head p{color:var(--inchiostro-2); margin-top:1rem; font-size:1.08rem}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}

/* ---- Chi siamo ---- */
.chisiamo{background:var(--panna-2)}
.chisiamo .grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2.5rem,6vw,5rem); align-items:center}
.chisiamo-photo{border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px -28px rgba(33,40,25,.5)}
.chisiamo-photo img{width:100%; height:100%; object-fit:cover}
.chisiamo .body p{color:var(--inchiostro-2); margin-top:1.1rem; font-size:1.06rem}
.chisiamo .body p strong{color:var(--inchiostro); font-weight:600}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 2rem; margin-top:2.2rem}
.fact{border-top:2px solid var(--arancio); padding-top:.8rem}
.fact b{font-family:"Fraunces",serif; font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem); display:block; line-height:1; letter-spacing:-.02em; color:var(--inchiostro)}
.fact span{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--inchiostro-2); margin-top:.5rem; display:block; line-height:1.3}

/* ---- Hotel Bucaneve (foto + testo) ---- */
.basecamp .grid{display:grid; grid-template-columns:1fr .9fr; gap:clamp(2.5rem,6vw,5rem); align-items:center}
.basecamp .body p{color:var(--inchiostro-2); margin-top:1.1rem; font-size:1.06rem}
.basecamp .body p strong{color:var(--inchiostro); font-weight:600}
.basecamp-photo{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; box-shadow:0 30px 60px -28px rgba(33,40,25,.5)}
.basecamp-photo img{width:100%; height:100%; object-fit:cover}
.base-addr{margin-top:1.6rem; padding:1.1rem 1.3rem; background:#fff; border:1px solid var(--bordo); border-radius:var(--r); display:flex; align-items:flex-start; gap:.8rem; font-size:.98rem; color:var(--inchiostro-2)}
.base-addr svg{width:20px; height:20px; color:var(--arancio); flex:none; margin-top:2px}
.base-addr b{color:var(--inchiostro); font-weight:600}

/* ---- Metodo (dark) ---- */
.metodo{position:relative; color:var(--crema-su-scuro); isolation:isolate; background:radial-gradient(130% 100% at 78% -12%, #284432 0%, #1b2c21 48%, #121d16 100%)}
.metodo::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(52% 44% at 82% 13%, rgba(194,144,47,.13), transparent 72%)}
.metodo .wrap{padding-block:clamp(4rem,9vw,7rem)}
.metodo-title{color:#fff; margin-top:1rem; line-height:1; letter-spacing:-.015em}
.metodo-title .pre{display:block; font-family:"Figtree",sans-serif; font-weight:700; font-size:clamp(1rem,.9rem + .8vw,1.5rem); letter-spacing:.16em; text-transform:uppercase; color:var(--crema-su-scuro); margin-bottom:.25em}
.metodo-title .dd{display:block; font-family:"Fraunces",serif; font-style:italic; font-weight:500; font-size:clamp(2.8rem,1.8rem + 6.2vw,6rem); color:var(--ocra); line-height:1.04; padding-bottom:.08em; text-shadow:0 2px 40px rgba(0,0,0,.35)}
.metodo-title .dd-sub{display:block; font-family:"Figtree",sans-serif; font-weight:700; font-size:clamp(.95rem,.85rem + .5vw,1.2rem); letter-spacing:.18em; text-transform:uppercase; color:var(--crema-su-scuro); margin-top:1.3rem}
.metodo .intro{margin-top:1.6rem; font-size:clamp(1.05rem,1rem + .4vw,1.24rem); color:var(--crema-su-scuro); line-height:1.6}
.metodo-grid{display:grid; grid-template-columns:0.86fr 1.14fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; margin-top:clamp(2.2rem,4vw,3rem)}
.metodo-lead{position:sticky; top:96px}
.metodo-nota{margin-top:2rem; padding:1.3rem 1.5rem; border-left:3px solid var(--ocra); background:rgba(255,255,255,.05); border-radius:0 10px 10px 0; font-size:.98rem; line-height:1.55; color:var(--crema-su-scuro)}
.metodo-nota b{color:#fff; font-weight:600}
.fasi{list-style:none; margin:0; padding:0; max-width:none; position:relative}
.fasi::before{content:""; position:absolute; left:26px; top:16px; bottom:32px; width:2px; background:repeating-linear-gradient(var(--ocra) 0 9px, transparent 9px 18px)}
.fase{position:relative; padding:0 0 2rem 84px; min-height:54px}
.fase:last-child{padding-bottom:0}
.fase-n{position:absolute; left:0; top:0; width:54px; height:54px; border-radius:50%; background:var(--ocra); color:var(--bosco); font-family:"Fraunces",serif; font-weight:700; font-size:1.55rem; display:grid; place-content:center; z-index:2; box-shadow:0 8px 22px -8px rgba(0,0,0,.6)}
.fase-day{font-family:"Figtree",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ocra); display:block; margin-bottom:.25rem}
.fase h3{color:#fff; font-size:1.32rem; margin-bottom:.45rem}
.fase p{color:var(--crema-su-scuro); font-size:1.02rem; line-height:1.55; max-width:52ch}
.manifesto{font-family:"Fraunces",serif; font-style:italic; font-weight:500; font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem); color:#fff; text-align:center; max-width:24ch; margin:clamp(3rem,6vw,4.5rem) auto 0; line-height:1.25}
.manifesto .accent{color:var(--ocra)}

/* ---- Giornali ---- */
.giornali .grid{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:1rem; align-items:start}
.giornale{background:#fff; border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.giornale:hover{transform:translateY(-5px); box-shadow:0 26px 46px -28px rgba(33,40,25,.4)}
.giornale .clip{overflow:hidden; background:var(--panna-2); border-bottom:1px solid var(--bordo); padding:1.4rem}
.giornale .clip img{width:100%; height:auto; object-fit:contain; box-shadow:0 14px 30px -18px rgba(33,40,25,.55); transition:transform .5s var(--ease)}
.giornale:hover .clip img{transform:scale(1.02)}
.giornale .body{padding:1.6rem 1.7rem; border-left:4px solid var(--arancio)}
.giornale blockquote{margin:0; font-family:"Fraunces",serif; font-style:italic; font-size:1.22rem; line-height:1.35; color:var(--inchiostro)}
.giornale cite{display:flex; align-items:center; gap:.5rem; font-style:normal; margin-top:1rem; font-weight:700; font-size:.82rem; letter-spacing:.04em; color:var(--arancio)}
.giornale cite svg{width:15px; height:15px}

/* ---- I nostri camp (card grandi) ---- */
.camp-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); max-width:920px; margin-inline:auto}
.ccard{position:relative; border-radius:var(--r); overflow:hidden; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; isolation:isolate; text-decoration:none}
.ccard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease)}
.ccard:hover img{transform:scale(1.06)}
.ccard::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(26,42,32,0) 28%, rgba(26,42,32,.55) 60%, rgba(26,42,32,.93) 100%)}
.ccard .inner{padding:1.8rem 1.7rem 1.9rem}
.ccard .season{font-family:"Figtree",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--arancio); padding:.32rem .8rem; border-radius:100px; display:inline-block; margin-bottom:.9rem}
.ccard.neve .season{background:var(--blu-neve)}
.ccard h3{color:#fff; font-size:1.7rem; margin-bottom:.4rem}
.ccard p{color:rgba(255,255,255,.92); font-size:.98rem; margin-bottom:1.1rem; line-height:1.5}
.ccard .link{font-family:"Figtree",sans-serif; font-weight:700; font-size:.95rem; color:#fff; display:inline-flex; align-items:center; gap:.5rem}
.ccard .link svg{width:18px; height:18px; transition:transform .25s var(--ease)}
.ccard:hover .link svg{transform:translateX(4px)}
.ccard.soon{cursor:default}
.ccard.soon::after{background:linear-gradient(180deg, rgba(26,42,32,.15) 0%, rgba(26,42,32,.55) 55%, rgba(26,42,32,.95) 100%)}
.ccard.soon img{filter:saturate(.85)}
.ccard .badge-soon{position:absolute; top:1.2rem; right:1.2rem; z-index:1; background:rgba(255,255,255,.95); color:var(--bosco); font-family:"Figtree",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .9rem; border-radius:100px}
.ccard .link.disabled{opacity:.85; color:var(--crema-su-scuro)}

/* ---- Contatti ---- */
.contatti-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.contatti-card{background:var(--panna-2); border:1px solid var(--bordo); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem)}
.contatti-card h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem); margin-bottom:1.4rem}
.contatti-list{display:flex; flex-direction:column; gap:1.2rem; margin:0; padding:0; list-style:none}
.contatti-list li{display:flex; align-items:flex-start; gap:.9rem}
.contatti-list .ico{width:42px; height:42px; flex:none; border-radius:50%; background:#fff; border:1px solid var(--bordo); display:grid; place-content:center; color:var(--arancio)}
.contatti-list .ico svg{width:20px; height:20px}
.contatti-list .lab{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--inchiostro-2); font-weight:700; margin-bottom:.15rem}
.contatti-list a, .contatti-list .val{color:var(--inchiostro); text-decoration:none; font-size:1.05rem; font-weight:600}
.contatti-list a:hover{color:var(--arancio)}
.contatti-list .val small{display:block; font-weight:400; font-size:.9rem; color:var(--inchiostro-2)}
.contatti-social{display:flex; gap:.8rem; margin-top:1.8rem; flex-wrap:wrap}
.contatti-social a{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; color:var(--inchiostro); text-decoration:none; padding:.7rem 1.2rem; border:1.5px solid var(--bordo); border-radius:100px; transition:border-color .25s, color .25s, transform .2s var(--ease)}
.contatti-social a:hover{border-color:var(--verde); color:var(--verde); transform:translateY(-2px)}
.contatti-social svg{width:20px; height:20px}
.contatti-map{border-radius:var(--r); overflow:hidden; border:1px solid var(--bordo); box-shadow:0 26px 50px -30px rgba(33,40,25,.4); min-height:420px; height:100%}
.contatti-map iframe{width:100%; height:100%; min-height:420px; border:0; display:block}

/* ============================================================
   CTA CHE SEGUE (articoli) — desktop a lato, mobile barra
   ============================================================ */
.float-cta{
  position:fixed; right:24px; bottom:24px; z-index:45; max-width:300px;
  background:var(--bosco); color:var(--crema-su-scuro); border:1px solid var(--bordo-scuro);
  border-radius:14px; padding:1.1rem 1.2rem; box-shadow:0 26px 50px -18px rgba(0,0,0,.55);
  transform:translateY(140%); opacity:0; transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.float-cta.show{transform:none; opacity:1}
/* col footer in vista si ritira: non copre i link Privacy/Cookie/Preferenze */
.float-cta.show.hide-at-foot{transform:translateY(140%); opacity:0; pointer-events:none}
.float-cta p{font-family:"Fraunces",serif; font-size:1.02rem; line-height:1.3; color:#fff; margin-bottom:.8rem}
.float-cta .btn{width:100%; font-size:.92rem; padding:.7rem 1rem; min-height:42px; background:#fff; color:var(--bosco); border-color:#fff}
.float-cta .btn:hover{background:var(--ocra); color:var(--bosco); border-color:var(--ocra)}
.float-cta .close{position:absolute; top:6px; right:9px; background:none; border:0; color:var(--crema-muta); font-size:1.1rem; cursor:pointer; line-height:1; padding:4px}
.float-cta .close:hover{color:#fff}
@media (max-width:560px){
  .float-cta{right:10px; left:10px; bottom:10px; max-width:none; display:flex; align-items:center; gap:.9rem; padding:.8rem .9rem}
  .float-cta p{margin-bottom:0; font-size:.92rem; flex:1}
  .float-cta .btn{width:auto; white-space:nowrap}
  .float-cta .close{position:static; align-self:flex-start}
}

/* ============================================================
   RESPONSIVE pagine interne
   ============================================================ */
@media (max-width:900px){
  .chisiamo .grid{grid-template-columns:1fr}
  .chisiamo-photo{max-width:460px; order:-1; aspect-ratio:4/3}
  .basecamp .grid{grid-template-columns:1fr}
  .basecamp-photo{max-width:520px}
  .metodo-grid{grid-template-columns:1fr; gap:2.2rem}
  .metodo-lead{position:static}
  .giornali .grid{grid-template-columns:1fr}
  .camp-grid{grid-template-columns:1fr; max-width:520px}
  .contatti-grid{grid-template-columns:1fr}
  .contatti-map{min-height:340px}
}