/* ==========================================================================
   Camminata Metabolica® — pagine dei trainer
   Stile della pagina master (soluzione grafica A, demo del 29/09/2026) portato su Bricks.

   REGOLE DI QUESTO FILE
   - Si stilano SOLO classi messe da noi sugli elementi Bricks (mai gli id automatici #brxe-…,
     che cambiano quando un elemento si duplica). Gli id usati sono quelli della demo, scelti da noi.
   - Il CSS di Bricks sta in un «cascade layer» (@layer bricks): queste regole, fuori da ogni layer,
     vincono sempre, a parità di selettore.
   - Le decorazioni (onde, nuvole, curve tratteggiate) sono pseudo-elementi con un SVG del tema:
     nessun elemento da non toccare nel builder.
   - Le icone sono <span class="ico ico--nome"> (css/icone.css): Font Awesome Free 6.7.2, CC BY 4.0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Caratteri ospitati sul sito (niente richieste a Google: GDPR)
   Instrument Sans e Caveat, SIL Open Font License 1.1, variabili 400–700.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap;
  src:url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap;
  src:url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Caveat"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/caveat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Caveat"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   Design token — estratti dal CSS di camminatametabolica.it (come la demo)
   ========================================================================== */
:root{
  --green:#66B330;
  --green-deep:#369763;
  --petrol:#294E5E;
  --red:#E20717;
  --ink:#1D1F1C;
  --fg:#000000;
  --muted:#64605E;
  --muted-2:#9A9A9A;
  --bg:#FFFFFF;
  --bg-2:#FBFBFB;
  --warm:#F1F0EF;
  --border:#D9D9D9;
  --error:#E10918;

  --green-5:rgb(102 179 48 / .05);
  --green-10:rgb(102 179 48 / .10);
  --green-15:rgb(102 179 48 / .15);
  --green-25:rgb(102 179 48 / .25);

  --gradient-website:linear-gradient(180deg,#ACC47E42 0%,#FFFFFF42 100%);

  --shadow-card:0px 4px 8.5px 0px rgb(0 0 0 / .10);
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-btn:0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10);
  --shadow-lift:0 22px 44px -22px rgb(41 78 94 / .34), 0 4px 8.5px 0 rgb(0 0 0 / .06);

  --r-4xl:2rem;
  --r-3xl:1.5rem;
  --r-2xl:1rem;
  --r-full:999px;

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:150ms;

  --font:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;

  --header-h:82px;
  --gutter:24px;
  --band-inset:12px;
  --section-gap:clamp(64px, 8vw, 104px);

  --img:"../img";
}
@media (min-width:768px){ :root{ --gutter:40px; --band-inset:20px; } }

/* ==========================================================================
   Base (Bricks porta html a 62,5%: qui torna a 100%, i rem della demo valgono 16px)
   ========================================================================== */
html{
  font-size:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body{
  margin:0;
  background:var(--bg-2);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--green-25); }

:focus-visible{ outline:3px solid rgb(102 179 48 / .55); outline-offset:3px; border-radius:6px; }
.on-dark :focus-visible{ outline-color:rgb(255 255 255 / .85); }

.nw{ white-space:nowrap; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--petrol); color:#fff; padding:12px 18px; border-radius:var(--r-full);
  font-weight:600; font-size:14px; text-decoration:none; transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:12px; }

.wrap{
  width:100%;
  max-width:calc(1200px + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* lo scarto sotto il menu fisso lo dà SOLO scroll-padding-top su html: se anche le sezioni avessero
   scroll-margin-top (come nella demo) i due si sommerebbero e l'ancora finirebbe 94 px troppo in basso */
.section{ margin-top:var(--section-gap); }

/* Titoli ----------------------------------------------------------------- */
.h2{
  font-size:clamp(2rem, 1.3rem + 2.4vw, 3rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
}
/* Caveat: accento calligrafico, solo parole chiave brevi */
.hand{
  font-family:var(--hand);
  font-weight:700;
  font-size:1.32em;
  line-height:.8;
  letter-spacing:0;
  color:var(--green);
  white-space:nowrap;
  margin-inline:.04em;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px 6px 12px;
  border-radius:var(--r-full);
  background:var(--green-10);
  color:var(--petrol);
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  line-height:1.3;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px rgb(102 179 48 / .18);
}
.section-head{ display:grid; gap:18px; justify-items:center; text-align:center; max-width:760px; margin-inline:auto; }
.section-head .sub{ color:var(--muted); font-size:clamp(1rem, .95rem + .3vw, 1.125rem); line-height:1.65; max-width:640px; text-wrap:pretty; }

.micro{
  display:flex; align-items:flex-start; gap:8px;
  font-size:14px; line-height:1.5; color:var(--muted);
}
.micro .ico{ color:var(--green); margin-top:3px; font-size:13px; }

/* ==========================================================================
   Pulsanti — pillola, 48px, come sul sito (sugli elementi Button di Bricks)
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 30px;
  border-radius:var(--r-full);
  border:1px solid transparent;
  font-family:var(--font); font-size:15px; font-weight:600; line-height:1.2; letter-spacing:.005em;
  text-align:center; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn .ico{ font-size:.9em; transition:transform var(--dur) var(--ease); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-btn); }
.btn--primary:hover{ background:rgb(102 179 48 / .9); box-shadow:0 8px 18px -8px rgb(102 179 48 / .75); transform:translateY(-1px); }
.btn--outline{ background:#fff; color:var(--fg); border-color:var(--border); box-shadow:var(--shadow-xs); }
.btn--outline:hover{ background:var(--bg-2); border-color:#BDBDBD; transform:translateY(-1px); }
.btn--light{ background:transparent; color:#fff; border-color:rgb(255 255 255 / .6); }
.btn--light:hover{ background:#fff; color:var(--petrol); border-color:#fff; transform:translateY(-1px); }
/* blu petrolio del brand: il percorso d'acquisto («Acquista», «Continua al pagamento») */
.btn--petrol{ background:var(--petrol); color:#fff; box-shadow:var(--shadow-btn); }
.btn--petrol:hover{ background:rgb(41 78 94 / .9); box-shadow:0 8px 18px -8px rgb(41 78 94 / .75); transform:translateY(-1px); }
.btn:hover .ico--arrow-right{ transform:translateX(3px); }
.btn--sm{ min-height:40px; padding:9px 20px; font-size:14px; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ==========================================================================
   0 — Menu fisso
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgb(255 255 255 / .96);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  transition:box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 4px 8.5px 0 rgb(0 0 0 / .08); }
.header-inner{
  max-width:1440px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px var(--gutter);
}

.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand__logo{ display:block; flex:none; border-radius:6px; }
.brand__logo img{ width:152px; height:auto; }
.brand__divider{ display:block; width:1px; height:30px; background:var(--border); flex:none; }
.brand__trainer{
  display:flex; align-items:baseline; gap:6px; min-width:0;
  font-size:14px; line-height:1.25; text-decoration:none; white-space:nowrap;
}
.brand__trainer strong{ font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.brand__trainer > span{ color:var(--muted); }

.main-nav ul{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  display:inline-flex; align-items:center; height:36px; padding:0 12px;
  border-radius:var(--r-full);
  font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.01em;
  color:var(--fg); text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.main-nav a:hover{ background:rgb(0 0 0 / .04); }
.main-nav a.is-active{ background:var(--green-10); color:var(--petrol); }

.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.header-cta .label-short{ display:none; }
.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border-radius:var(--r-full);
  border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-xs);
  cursor:pointer; font-size:18px; color:var(--ink);
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.menu-toggle:hover{ background:var(--bg-2); border-color:#BDBDBD; }

.mobile-menu{
  position:absolute; left:0; right:0; top:100%;
  background:#fff;
  border-top:1px solid #EEEEEC;
  border-radius:0 0 var(--r-4xl) var(--r-4xl);
  box-shadow:0 24px 40px -24px rgb(41 78 94 / .35);
  padding:10px var(--gutter) 24px;
  visibility:hidden; opacity:0; transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.site-header.menu-open .mobile-menu{
  visibility:visible; opacity:1; transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
.mobile-menu ul{ display:grid; }
.mobile-menu li + li{ border-top:1px solid #F0F0EE; }
.mobile-menu a.mm-link{
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px; padding:0 6px;
  font-size:17px; font-weight:500; color:var(--ink); text-decoration:none;
}
.mobile-menu a.mm-link .ico{ color:var(--green); font-size:13px; transition:transform var(--dur) var(--ease); }
.mobile-menu a.mm-link:hover .ico{ transform:translateX(3px); }
.mobile-menu a.mm-link.is-active{ color:var(--petrol); font-weight:600; }
.mobile-menu .btn{ margin-top:14px; }
.menu-backdrop{
  position:fixed; inset:0; z-index:40; background:rgb(29 31 28 / .28);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.menu-backdrop.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur) var(--ease), visibility 0s; }

@media (max-width:1279px){
  .header-cta .label-full{ display:none; }
  .header-cta .label-short{ display:inline; }
}
@media (max-width:1099px){
  .main-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
}
@media (max-width:639px){
  :root{ --header-h:70px; }
  .header-inner{ padding:12px var(--gutter); gap:12px; }
  .site-header.is-scrolled .header-inner{ padding-top:8px; padding-bottom:8px; }
  .brand{ gap:10px; }
  .brand__logo img{ width:118px; }
  .brand__divider{ height:34px; }
  .brand__trainer{ flex-direction:column; align-items:flex-start; gap:1px; font-size:13px; }
  .brand__trainer > span{ font-size:12px; }
  .brand__trainer .dot{ display:none; }
  .header-cta{ display:none !important; }
}
@media (max-width:359px){
  .brand__logo img{ width:104px; }
  .brand__trainer{ font-size:12px; }
}

/* ==========================================================================
   1 — Testata
   ========================================================================== */
.hero{
  position:relative;
  margin:8px var(--band-inset) 0;
  border-radius:var(--r-4xl);
  background:var(--gradient-website), var(--bg-2);
  overflow:hidden;
  isolation:isolate;
}
/* onde in fondo alla testata */
.hero::after,
.band--sage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  height:clamp(80px, 13vw, 170px);
  background:url("../img/onde-testata.svg") center bottom / 100% 100% no-repeat;
}
.band--sage::after{ background-image:url("../img/onde-invito.svg"); }
.hero__inner{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center;
  gap:clamp(32px, 5vw, 72px);
  min-height:clamp(560px, 48vw, 700px);
  padding-top:clamp(40px, 6vw, 80px);
  padding-bottom:clamp(92px, 11vw, 160px);
}
.hero__text{ display:flex; flex-direction:column; align-items:flex-start; }
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px 7px 8px;
  border-radius:var(--r-full);
  background:#fff; border:1px solid rgb(0 0 0 / .06); box-shadow:var(--shadow-xs);
  font-size:14px; font-weight:500; color:var(--ink); line-height:1.3;
}
.badge__icon{
  display:grid; place-items:center; width:28px; height:28px; flex:none;
  border-radius:50%; background:var(--green-10); color:var(--green); font-size:13px;
}
.hero h1{
  margin-top:22px;
  font-size:clamp(2.35rem, .9rem + 4.2vw, 4.4rem);
  font-weight:700; line-height:1.02; letter-spacing:-.03em; color:var(--fg);
  text-wrap:balance;
}
.hero__zone{
  display:flex; align-items:center; gap:10px; margin-top:14px;
  font-size:clamp(1.05rem, .98rem + .35vw, 1.25rem); font-weight:500; color:var(--ink);
}
.hero__zone .ico{ color:var(--green); }
.hero__hand{
  margin-top:18px;
  font-family:var(--hand); font-weight:700;
  font-size:clamp(2rem, 1.55rem + 1.9vw, 2.9rem); line-height:1.05;
  color:var(--green);
  transform:rotate(-2deg); transform-origin:left center;
}
.hero__lead{
  margin-top:18px; max-width:520px;
  font-size:clamp(1rem, .96rem + .25vw, 1.125rem); line-height:1.7; color:var(--ink);
  text-wrap:pretty;
}
.hero .btn-row{ margin-top:30px; }
.hero .micro{ margin-top:16px; }

.hero__visual{ position:relative; display:grid; place-items:center; }

/* Ritratto circolare con alone ------------------------------------------------
   Il cerchio con le iniziali sta SOTTO la foto: se la foto manca o non si carica, resta lui. */
.portrait{
  position:relative; flex:none;
  width:var(--size, 96px); aspect-ratio:1;
  border-radius:50%;
}
.portrait--s46{ --size:46px; }
.portrait--s52{ --size:52px; }
.portrait__frame{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:#E5F0DD;
}
.portrait__frame img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 34%; }
.portrait__fallback{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font); font-weight:600; letter-spacing:.02em;
  font-size:calc(var(--size, 96px) * .34); line-height:1;
  color:var(--petrol); background:#E5F0DD;
}
.portrait.is-fallback .portrait__frame img{ display:none; }

.portrait--halo .portrait__frame{ box-shadow:0 0 0 4px #fff, 0 0 0 11px var(--green-15); }
.portrait--hero{ --size:clamp(250px, 30vw, 400px); }
.portrait--hero::before{
  content:""; position:absolute; inset:-15%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgb(102 179 48 / .26), rgb(102 179 48 / .12) 55%, rgb(102 179 48 / 0) 100%);
}
.portrait--hero .portrait__frame{
  box-shadow:0 0 0 8px #fff, 0 0 0 22px rgb(102 179 48 / .16), 0 30px 60px -30px rgb(41 78 94 / .45);
}
/* orbita tratteggiata attorno alla foto */
.portrait--hero::after{
  content:""; position:absolute; left:-17%; top:-17%; width:134%; height:134%; pointer-events:none;
  background:url("../img/orbita.svg") center / contain no-repeat;
}
/* due nuvole, come sul sito ufficiale */
.portrait__deco{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.portrait__deco::before,
.portrait__deco::after{ content:""; position:absolute; aspect-ratio:140 / 80; background:url("../img/nuvola.svg") center / contain no-repeat; }
.portrait__deco::before{ top:-7%; right:-3%; width:30%; }
.portrait__deco::after{ top:11%; right:-17%; width:19%; background-image:url("../img/nuvola-spessa.svg"); }

@media (max-width:899px){
  .hero__inner{ grid-template-columns:1fr; min-height:0; text-align:center; gap:40px; padding-top:48px; }
  .hero__visual{ order:-1; }
  .hero__text{ align-items:center; }
  .hero__hand{ transform:rotate(-2deg); transform-origin:center; }
  .hero__lead{ margin-inline:auto; }
  .hero .btn-row{ justify-content:center; }
  .hero .micro{ justify-content:center; text-align:left; }
  .portrait__deco::before{ top:-4%; right:-14%; width:34%; }
  .portrait__deco::after{ top:14%; right:-30%; width:22%; }
}
@media (max-width:559px){
  .hero .btn-row{ flex-direction:column; width:100%; }
  .hero .btn-row .btn{ width:100%; }
  .portrait__deco::before{ top:-7%; right:-8%; width:30%; }
  .portrait__deco::after{ top:15%; right:-13%; width:17%; }
}

/* ==========================================================================
   2 — Chi sono
   ========================================================================== */
.about{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.about__head{ position:sticky; top:calc(var(--header-h) + 32px); display:grid; gap:18px; justify-items:start; }
.about__head .h2{ font-size:clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
.about__head::after{
  content:""; display:block; margin-top:10px; width:150px; aspect-ratio:150 / 60;
  background:url("../img/curva-chi-sono.svg") center / contain no-repeat;
}
.quote-card{
  position:relative;
  background:#fff; border-radius:var(--r-4xl); box-shadow:var(--shadow-card);
  padding:clamp(28px, 4vw, 56px);
}
.quote-card__mark{
  position:absolute; top:clamp(4px, 1vw, 14px); right:clamp(20px, 3vw, 40px);
  font-family:var(--hand); font-weight:700; font-size:clamp(7rem, 5rem + 6vw, 10rem); line-height:1;
  color:var(--green-15); pointer-events:none; user-select:none;
}
.quote-card blockquote{ position:relative; display:grid; gap:18px; margin:0; padding:0; border:0; font-family:var(--font); font-size:inherit; }
.quote-card blockquote p{ font-size:clamp(1rem, .97rem + .2vw, 1.0625rem); line-height:1.75; color:var(--ink); text-wrap:pretty; }
.quote-card blockquote p.lead{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height:1.5; font-weight:500; letter-spacing:-.01em; padding-right:clamp(0px, 6vw, 90px); }
.quote-card blockquote strong{ font-weight:600; }
.quote-card blockquote p.signoff{ font-weight:600; color:var(--petrol); }
.quote-card figcaption{
  display:flex; align-items:center; gap:20px;
  margin:28px 0 0; padding-top:24px; border-top:1px solid #EEEEEC;
  color:inherit; font-size:inherit; text-align:left; /* Bricks centra le figcaption */
}
.quote-card .who{ display:grid; line-height:1.35; }
.quote-card .who strong{ font-size:16px; font-weight:600; color:var(--ink); }
.quote-card .who span{ font-size:14px; color:var(--muted); }

.note{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:16px; padding:16px 20px;
  border-radius:var(--r-3xl);
  background:var(--green-5); border:1px solid var(--green-15);
}
.note__icon{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:50%; background:#fff; color:var(--green); font-size:16px;
}
.note p{ font-size:15px; line-height:1.55; color:var(--ink); padding-top:2px; }
.note strong{ font-weight:600; }

@media (max-width:1099px){
  .about{ grid-template-columns:1fr; gap:28px; }
  .about__head{ position:static; }
  .about__head::after{ display:none; }
}

/* ==========================================================================
   3 — Contattami (scheda, destinatario fisso, modulo Bricks)
   ========================================================================== */
.contact-card{
  max-width:820px; margin:40px auto 0;
  background:#fff; border-radius:var(--r-4xl); box-shadow:var(--shadow-card);
  padding:clamp(22px, 4vw, 48px);
}
.recipient{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px 12px 12px;
  border-radius:var(--r-3xl);
  background:var(--green-5); border:1px dashed rgb(102 179 48 / .45);
}
.recipient__text{ display:grid; line-height:1.35; min-width:0; flex:1; }
.recipient__label{ font-size:13px; color:var(--muted); }
.recipient__name{ font-size:16px; font-weight:600; color:var(--ink); }
.recipient__lock{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:50%; background:#fff; color:var(--petrol); font-size:13px;
}
.form-micro{ margin-top:16px; }

/* Il modulo di Bricks, vestito come la demo -------------------------------------
   Struttura di Bricks: form.brxe-form > div.form-group > label + input/select/textarea;
   caselle: div.form-group[role=group] > div.label + ul.options-wrapper > li > input + label;
   pulsante: div.form-group.submit-button-wrapper > button.bricks-button > span.text + span.loading */
.camm-form{
  display:grid; grid-template-columns:minmax(0,1fr); gap:20px 18px;
  margin-top:28px;
}
@media (min-width:640px){
  .camm-form{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .camm-form > .form-group{ grid-column:1 / -1; }
  .camm-form > .form-group:has(> [name="form-field-nome"]),
  .camm-form > .form-group:has(> [name="form-field-cognome"]),
  .camm-form > .form-group:has(> [name="form-field-email"]),
  .camm-form > .form-group:has(.cf-tel),
  .camm-form > .form-group:has(> [name="form-field-telefono"]){ grid-column:auto; }
}
.camm-form .form-group{ display:grid; gap:8px; min-width:0; width:auto; margin:0; padding:0; align-content:start; }
/* il campo nascosto «prodotto» ha un contenitore senza classe: occuperebbe una riga della griglia (il valore parte lo stesso) */
.camm-form > div:not(.form-group):not(.message){ display:none; }
.camm-form .form-group > label,
.camm-form .form-group > .label{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.4; padding:0; margin:0; text-transform:none; letter-spacing:normal; }
.camm-form .form-group > label .opt{ font-weight:400; color:var(--muted); }
/* le caselle dei consensi hanno l'etichetta di gruppo solo per i lettori di schermo */
.camm-form .form-group > .label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.camm-form input[type="text"],
.camm-form input[type="email"],
.camm-form input[type="tel"],
.camm-form select,
.camm-form textarea{
  width:100%; min-height:52px; margin:0;
  padding:12px 18px;
  border:1px solid var(--border); border-radius:var(--r-2xl);
  background:#fff; color:var(--fg);
  font-family:var(--font); font-size:16px; line-height:1.4;
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  -webkit-appearance:none; appearance:none;
}
.camm-form input::placeholder,
.camm-form textarea::placeholder{ color:var(--muted-2); opacity:1; }
.camm-form input:hover, .camm-form select:hover, .camm-form textarea:hover{ border-color:#BDBDBD; }
.camm-form input:focus, .camm-form select:focus, .camm-form textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgb(102 179 48 / .18); }
.camm-form textarea{ min-height:128px; resize:vertical; }
.camm-form select{
  padding-right:48px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2366B330' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center; background-size:12px 8px;
}
.camm-form select:invalid, .camm-form select.is-vuoto{ color:var(--muted-2); }
.camm-form select option{ color:var(--fg); }
.camm-form .form-group.is-pulsing select{ animation:pulse-ring 1.4s var(--ease) 1; }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgb(102 179 48 / .45); border-color:var(--green); }
  70%{ box-shadow:0 0 0 10px rgb(102 179 48 / 0); border-color:var(--green); }
  100%{ box-shadow:var(--shadow-xs); }
}

/* Messaggi d'errore: uno per campo, sotto il campo */
.camm-form .camm-errore{
  display:none; align-items:center; gap:7px;
  font-size:13.5px; line-height:1.4; color:var(--error);
}
.camm-form .camm-errore::before{
  content:""; flex:none; width:14px; height:14px; background:currentColor;
  -webkit-mask:var(--ico-circle-exclamation) center / contain no-repeat; mask:var(--ico-circle-exclamation) center / contain no-repeat;
}
.camm-form .form-group.has-error .camm-errore{ display:flex; }
.camm-form .form-group.has-error input,
.camm-form .form-group.has-error select,
.camm-form .form-group.has-error textarea{ border-color:var(--error); }
.camm-form .form-group.has-error input:focus,
.camm-form .form-group.has-error select:focus,
.camm-form .form-group.has-error textarea:focus{ box-shadow:0 0 0 4px rgb(225 9 24 / .12); }
.camm-form .form-group-error-message{ display:none !important; } /* i messaggi di Bricks: usiamo i nostri */

/* Caselle dei consensi */
.camm-form .options-wrapper{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.camm-form .options-wrapper li{ display:flex; align-items:flex-start; gap:12px; margin:0; }
.camm-form .options-wrapper input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; flex:none;
  width:22px; height:22px; margin:1px 0 0;
  border:1.5px solid #BDBDBD; border-radius:7px; background:#fff; cursor:pointer;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.camm-form .options-wrapper input[type="checkbox"]:hover{ border-color:var(--green); }
.camm-form .options-wrapper input[type="checkbox"]:focus-visible{ outline:none; box-shadow:0 0 0 4px rgb(102 179 48 / .22); border-color:var(--green); }
.camm-form .options-wrapper input[type="checkbox"]:checked{
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1.5 5.2l3.6 3.3L12.5 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 10px no-repeat;
  border-color:var(--green);
}
.camm-form .options-wrapper label{ font-size:14.5px; font-weight:400; line-height:1.5; color:var(--ink); cursor:pointer; }
.camm-form .options-wrapper label a{ color:var(--petrol); font-weight:500; text-decoration:underline; text-decoration-color:rgb(41 78 94 / .35); text-underline-offset:3px; }
.camm-form .options-wrapper label a:hover{ text-decoration-color:var(--petrol); }
.camm-form .consenso-nota{ display:block; margin-top:4px; font-size:13px; line-height:1.5; color:var(--muted); }
.camm-form .form-group.has-error input[type="checkbox"]{ border-color:var(--error); }
/* Bricks mette role="group" su OGNI campo: le caselle si riconoscono da .options-wrapper */
.camm-form .form-group:has(> .options-wrapper).has-error .camm-errore{ padding-left:34px; }

/* Pulsante d'invio (il pulsante del modulo Bricks, con l'aspetto di .btn--primary) */
.camm-form .submit-button-wrapper{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:6px; }
.camm-form .submit-button-wrapper .bricks-button{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 30px;
  border:1px solid transparent; border-radius:var(--r-full);
  background:var(--green); color:#fff; box-shadow:var(--shadow-btn);
  font-family:var(--font); font-size:15px; font-weight:600; line-height:1.2; letter-spacing:.005em;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.camm-form--acquisto .submit-button-wrapper .bricks-button{ background:var(--petrol); }
.camm-form .submit-button-wrapper .bricks-button:hover{ background:rgb(102 179 48 / .9); box-shadow:0 8px 18px -8px rgb(102 179 48 / .75); transform:translateY(-1px); }
.camm-form--acquisto .submit-button-wrapper .bricks-button:hover{ background:rgb(41 78 94 / .9); box-shadow:0 8px 18px -8px rgb(41 78 94 / .75); }
.camm-form .submit-button-wrapper .bricks-button .text::after{
  content:""; display:inline-block; width:.9em; height:.9em; margin-left:10px; vertical-align:-.1em; background:currentColor;
  -webkit-mask:var(--ico-paper-plane) center / contain no-repeat; mask:var(--ico-paper-plane) center / contain no-repeat;
}
.camm-form--acquisto .submit-button-wrapper .bricks-button .text::after{
  -webkit-mask-image:var(--ico-arrow-right); mask-image:var(--ico-arrow-right);
}
.camm-form .submit-button-wrapper .bricks-button .loading{ display:none; position:absolute; inset:0; place-items:center; animation:none; }
.camm-form .submit-button-wrapper .bricks-button .loading svg{ width:20px; height:20px; animation:spin .8s linear infinite; }
.camm-form .submit-button-wrapper .bricks-button.sending{ pointer-events:none; }
.camm-form .submit-button-wrapper .bricks-button.sending .text{ opacity:0; }
.camm-form .submit-button-wrapper .bricks-button.sending .loading{ display:grid; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width:639px){ .camm-form .submit-button-wrapper .bricks-button{ width:100%; } }

/* Risposte del server (errori di compilazione) */
.camm-form .message{ grid-column:1 / -1; padding:12px 16px; border-radius:var(--r-2xl); font-size:14.5px; line-height:1.5; }
.camm-form .message.error{ background:rgb(225 9 24 / .05); border:1px solid rgb(225 9 24 / .35); color:#9D0712; }
.camm-form .message.success{ display:none; }
.camm-form .message ul{ margin:0; padding-left:18px; list-style:disc; }

/* Telefono con bandierina (js/camminata-telefono.js) */
.cf-tel{ position:relative; display:flex; align-items:stretch; gap:8px; }
.cf-tel input[type="tel"]{ flex:1 1 auto; min-width:0; }
.cf-tel__paese{
  flex:0 0 auto; display:flex; align-items:center; gap:.45em;
  min-height:52px; padding:0 14px;
  font:inherit; font-size:15px; line-height:1.4; color:var(--ink);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl); box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cf-tel__paese:hover{ border-color:#BDBDBD; }
.cf-tel__paese:focus-visible{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgb(102 179 48 / .18); }
.cf-tel__bandiera{ font-size:18px; line-height:1; }
.cf-tel__prefisso{ font-variant-numeric:tabular-nums; }
.cf-tel__freccia{
  width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--green);
}
.cf-tel__menu{
  position:absolute; top:100%; left:0; z-index:20;
  width:min(340px, 100%); margin-top:6px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lift); overflow:hidden;
}
.camm-form input.cf-tel__cerca{
  min-height:44px; border:0; border-bottom:1px solid #EEEEEC; border-radius:0; box-shadow:none; font-size:15px;
}
.camm-form input.cf-tel__cerca:focus{ box-shadow:none; }
.cf-tel__lista{ list-style:none; margin:0; padding:4px 0; max-height:260px; overflow-y:auto; }
.cf-tel__lista li{ display:flex; align-items:center; gap:.6em; padding:9px 14px; font-size:14.5px; cursor:pointer; }
.cf-tel__lista li:hover,
.cf-tel__lista li[aria-selected="true"]{ background:var(--green-5); }
.cf-tel__lista .cf-tel__nome{ flex:1 1 auto; }
.cf-tel__lista .cf-tel__prefisso{ color:var(--muted); }

/* Conferma dopo l'invio (pannello nel template, mostrato dallo script) */
.success{ display:none; text-align:center; padding:clamp(12px, 3vw, 28px) 0; }
.contact-card.is-sent .camm-form,
.contact-card.is-sent .recipient,
.contact-card.is-sent .acq-summary,
.contact-card.is-sent .form-micro{ display:none; }
.contact-card.is-sent .success{ display:block; animation:rise .45s var(--ease) both; }
.success__icon{
  display:grid; place-items:center; width:76px; height:76px; margin:0 auto;
  border-radius:50%; background:var(--green); color:#fff; font-size:30px;
  box-shadow:0 0 0 10px var(--green-15), 0 0 0 22px var(--green-5);
}
.success__icon--petrol{ background:var(--petrol); box-shadow:0 0 0 10px rgb(41 78 94 / .12), 0 0 0 22px rgb(41 78 94 / .05); }
.success h3{ margin-top:34px; font-size:clamp(1.45rem, 1.2rem + 1vw, 1.9rem); font-weight:600; letter-spacing:-.015em; line-height:1.2; }
.success h3:focus{ outline:none; }
.success p{ margin:14px auto 0; max-width:520px; color:var(--muted); font-size:16.5px; line-height:1.65; }
.success .btn{ margin-top:26px; }
.link-btn{
  display:block; margin:14px auto 0; padding:6px 10px;
  background:none; border:0; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--petrol);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgb(41 78 94 / .35);
}
.link-btn:hover{ text-decoration-color:var(--petrol); }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Contatti diretti del trainer (facoltativi) */
.direct{
  max-width:1000px; margin:26px auto 0;
  display:grid; justify-items:center; gap:12px;
  text-align:center;
}
.direct__lead{ font-size:15px; font-weight:600; color:var(--ink); }
.direct__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.direct__item{
  display:inline-flex; align-items:center; gap:9px;
  min-height:42px; padding:8px 16px;
  border-radius:var(--r-full); border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-xs);
  font-size:14.5px; line-height:1.3; color:var(--ink); text-decoration:none;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.direct__item:hover{ border-color:rgb(102 179 48 / .55); background:var(--green-5); color:var(--petrol); transform:translateY(-1px); }
.direct__item .ico{ color:var(--green); font-size:15px; }
.direct__item .handle{ color:var(--muted); }

@media (max-width:639px){
  .contact-card{ padding:18px; }
  .recipient{ position:relative; gap:12px; padding:12px 44px 12px 12px; }
  .recipient .portrait{ --size:40px; }
  .recipient__name{ font-size:15.5px; }
  .recipient__lock{ position:absolute; top:10px; right:10px; width:28px; height:28px; font-size:11px; }
  .direct__list{ display:grid; grid-template-columns:minmax(0,1fr); width:100%; }
  .direct__item{ justify-content:center; flex-wrap:wrap; column-gap:7px; row-gap:2px; min-width:0; border-radius:var(--r-3xl); }
}

/* ==========================================================================
   4 — Prenota una lezione
   ========================================================================== */
.band{
  position:relative;
  margin:var(--section-gap) var(--band-inset) 0;
  border-radius:var(--r-4xl);
  overflow:hidden; isolation:isolate;
}
.band--green{ background:var(--green-15); }
.band--green::before{
  content:""; position:absolute; z-index:-1; pointer-events:none; right:-8px; top:-10px; width:min(30vw, 400px); aspect-ratio:440 / 130;
  background:url("../img/curva-prenota.svg") center / contain no-repeat;
}
.book{
  display:grid; gap:clamp(32px, 4vw, 48px);
  padding-top:clamp(48px, 7vw, 92px); padding-bottom:clamp(48px, 7vw, 92px);
}
.book__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px clamp(32px, 6vw, 96px); align-items:end; }
.book__title{ display:grid; gap:18px; justify-items:start; }
.book__head p.body{ font-size:clamp(1rem, .96rem + .25vw, 1.125rem); line-height:1.7; color:var(--ink); max-width:560px; text-wrap:pretty; }
.eyebrow--on-green{ background:#fff; }
.book__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.book__cta .micro{ flex:1 1 280px; }

.steps{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.step{
  position:relative;
  display:flex; gap:18px; align-items:center;
  padding:22px 22px;
  background:#fff; border-radius:var(--r-3xl); box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.step + .step::before{
  content:""; position:absolute; top:50%; left:-19px; width:20px;
  border-top:2px dashed rgb(102 179 48 / .7);
}
.step__icon{
  position:relative; display:grid; place-items:center; width:54px; height:54px; flex:none;
  border-radius:50%; background:var(--green-10); color:var(--green); font-size:20px;
}
.step__num{
  position:absolute; top:-5px; left:-5px;
  display:grid; place-items:center; width:24px; height:24px;
  border-radius:50%; background:var(--green); color:#fff;
  font-size:12.5px; font-weight:700; box-shadow:0 0 0 3px #fff;
}
.step__text{ display:grid; gap:2px; min-width:0; }
.step__text strong{ font-size:17px; font-weight:600; color:var(--ink); line-height:1.35; }
.step__text span{ font-size:15px; color:var(--muted); line-height:1.5; }

@media (max-width:1023px){
  .steps{ grid-template-columns:1fr; gap:14px; }
  .step:hover{ transform:translateX(4px); }
  .step + .step::before{ top:-15px; left:48px; width:auto; height:16px; border-top:0; border-left:2px dashed rgb(102 179 48 / .7); }
}
@media (max-width:959px){
  .book__head{ grid-template-columns:1fr; }
  .band--green::before{ width:min(64vw, 360px); right:-24px; top:4px; opacity:.85; }
}
@media (max-width:559px){
  .book__cta .btn{ width:100%; }
  .step{ padding:18px; gap:16px; }
  .step + .step::before{ left:44px; }
}

/* ==========================================================================
   5 — Prodotti
   ========================================================================== */
.products{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px, 2vw, 28px); margin-top:48px; }
.product{
  display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0;
  background:#fff; border-radius:var(--r-4xl); box-shadow:var(--shadow-card);
  border:1px solid transparent;
  padding:12px;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@supports not (grid-template-rows:subgrid){
  .product{ display:flex; flex-direction:column; }
  .product__cta{ margin-top:auto; }
}
.product:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:rgb(102 179 48 / .28); }
.product__top{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:118px; padding:18px 20px;
  border-radius:calc(var(--r-4xl) - 8px);
  background:var(--gradient-website), var(--bg-2);
}
.product__top::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:52px; z-index:-1;
  background:url("../img/onda-prodotto-1.svg") center bottom / 100% 100% no-repeat;
}
.product:nth-child(2) .product__top::after{ background-image:url("../img/onda-prodotto-2.svg"); }
.product:nth-child(3) .product__top::after{ background-image:url("../img/onda-prodotto-3.svg"); }
.product__ghost{
  position:absolute; right:18px; top:10px; z-index:-1;
  font-size:92px; line-height:1; color:rgb(102 179 48 / .10);
  transform:rotate(-10deg);
  transition:transform .3s var(--ease);
}
.product:hover .product__ghost{ transform:rotate(-4deg) translateY(-3px); }
.product__icon{
  position:relative; display:grid; place-items:center; width:62px; height:62px; flex:none;
  border-radius:50%; background:#fff; color:var(--green); font-size:24px;
  box-shadow:0 0 0 7px rgb(255 255 255 / .55), var(--shadow-card);
  transition:transform var(--dur) var(--ease);
}
.product:hover .product__icon{ transform:rotate(-6deg) scale(1.04); }
.product__for{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  color:var(--petrol);
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
}
.product__for::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); flex:none; }
.product__body{ padding:24px 14px 0; }
.product__cta{ align-self:end; padding:28px 14px 0; display:grid; gap:10px; }
.product__micro{ padding:12px 14px 10px; font-size:13.5px; }
.product h3{ font-size:clamp(1.35rem, 1.2rem + .5vw, 1.6rem); font-weight:600; line-height:1.2; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.product .desc{ margin-top:12px; font-size:15.5px; line-height:1.7; color:var(--ink); text-wrap:pretty; }
.checks{ display:grid; gap:10px; margin-top:18px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ink); }
.checks li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%;
  background:var(--green-10) var(--ico-check-verde) center / 11px 11px no-repeat;
}
.products-note{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:32px auto 0; max-width:760px;
  font-size:14.5px; line-height:1.55; color:var(--muted); text-align:center;
}
.products-note .ico{ color:var(--green); flex:none; }
.products-note strong{ color:var(--ink); font-weight:600; }

@media (max-width:1023px){
  .products{ grid-template-columns:minmax(0,1fr); max-width:620px; margin-inline:auto; }
}

/* ==========================================================================
   6 — Blocco brand (blu petrolio)
   ========================================================================== */
.band--petrol{ background:var(--petrol); color:#fff; }
.band--petrol::before{
  content:""; position:absolute; z-index:-1; right:-120px; bottom:-160px; width:520px; height:520px; pointer-events:none;
  background:url("../img/anelli.svg") center / contain no-repeat;
}
.band--petrol::after{
  content:""; position:absolute; z-index:-1; left:38%; top:22px; width:280px; aspect-ratio:280 / 90; pointer-events:none; opacity:.9;
  background:url("../img/curva-brand.svg") center / contain no-repeat;
}
.brand-block{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 96px); align-items:center;
  padding-top:clamp(52px, 7vw, 100px); padding-bottom:clamp(52px, 7vw, 100px);
}
.brand-block__logo img{ width:clamp(176px, 16vw, 216px); height:auto; }
.brand-block .h2{ margin-top:30px; color:#fff; }
.brand-block p{ font-size:clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height:1.75; color:rgb(255 255 255 / .86); text-wrap:pretty; }
.brand-block p strong{ color:#fff; font-weight:600; }
.brand-block .btn{ margin-top:30px; }
@media (max-width:899px){
  .brand-block{ grid-template-columns:1fr; }
  .band--petrol::after{ left:auto; right:-40px; top:18px; width:200px; }
  .band--petrol::before{ right:-220px; bottom:-240px; }
}
@media (max-width:559px){ .brand-block .btn{ width:100%; padding-inline:20px; } }
@media (max-width:399px){ .brand-block .btn .ico--arrow-right{ display:none; } }

/* ==========================================================================
   7 — Invito finale
   ========================================================================== */
.band--sage{ background:var(--gradient-website), var(--bg-2); }
.invite{
  display:grid; justify-items:center; text-align:center;
  padding-top:clamp(56px, 7vw, 96px); padding-bottom:clamp(104px, 13vw, 190px);
}
.invite .portrait{ --size:84px; }
.invite__hand{
  position:relative; margin-top:26px;
  font-family:var(--hand); font-weight:700;
  font-size:clamp(2.9rem, 2rem + 4vw, 5rem); line-height:1; color:var(--ink);
  text-wrap:balance;
}
.invite__hand::after{
  content:""; display:block; width:62%; aspect-ratio:300 / 18; margin:6px auto 0;
  background:url("../img/sottolineatura.svg") center / 100% 100% no-repeat;
}
.invite .sub{ margin-top:18px; font-size:clamp(1.02rem, .96rem + .3vw, 1.2rem); color:var(--muted); line-height:1.6; }
.invite .btn-row{ justify-content:center; margin-top:30px; }
@media (max-width:559px){
  .invite .btn-row{ flex-direction:column; width:100%; }
  .invite .btn-row .btn{ width:100%; }
}

/* ==========================================================================
   7b — Inizio acquisto (spento finché CAMM_ACQUISTO_ATTIVO non è vera)
   ========================================================================== */
.acq-summary{ display:grid; gap:12px; }
.acq-item{ transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.acq-item:focus{ outline:none; }
.acq-item:focus-visible{ outline:3px solid rgb(102 179 48 / .55); outline-offset:3px; }
.acq-item__icon{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border-radius:50%; background:#fff; color:var(--green); font-size:17px;
  box-shadow:0 0 0 4px rgb(255 255 255 / .6), var(--shadow-xs);
}
.acq-item__change{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:6px 14px;
  border-radius:var(--r-full); border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-xs);
  font-size:13.5px; font-weight:600; line-height:1.2; color:var(--petrol); text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acq-item__change .ico{ font-size:11px; }
.acq-item__change:hover{ border-color:rgb(41 78 94 / .45); transform:translateY(-1px); }
.acq-item .when-empty{ display:none; }
.acq-item.is-empty .when-empty{ display:inline; }
.acq-item.is-empty .when-filled{ display:none; }
.acq-item.is-empty{ background:var(--bg-2); border-color:#C9C6C3; }
.acq-item.is-empty .acq-item__icon{ color:var(--muted); }
.acq-item.is-empty .recipient__name{ color:var(--muted); font-weight:500; }
.acq-item.is-empty .acq-item__change{ background:var(--petrol); border-color:var(--petrol); color:#fff; }
.acq-item.is-empty .acq-item__change:hover{ background:rgb(41 78 94 / .9); }
.acq-item.is-pulsing{ animation:pulse-ring 1.4s var(--ease) 1; }
.acq-item.has-error{ border-style:solid; border-color:var(--error); background:rgb(225 9 24 / .03); }
.acq-errore{ display:none; align-items:center; gap:7px; margin-top:8px; font-size:13.5px; line-height:1.4; color:var(--error); }
.acq-item.has-error + .acq-errore{ display:flex; }
.acq-recap{
  display:grid; gap:0; max-width:480px; margin:24px auto 0; padding:4px 20px;
  border-radius:var(--r-3xl); background:var(--bg-2); border:1px solid #EEEEEC;
  text-align:left;
}
.acq-recap > div{ display:flex; align-items:baseline; justify-content:space-between; gap:6px 18px; padding:12px 0; }
.acq-recap > div + div{ border-top:1px solid #EEEEEC; }
.acq-recap dt{ font-size:13.5px; color:var(--muted); flex:none; }
.acq-recap dd{ margin:0; font-size:15px; font-weight:600; line-height:1.4; color:var(--ink); text-align:right; min-width:0; }
@media (max-width:639px){
  .recipient.acq-item{ flex-wrap:wrap; row-gap:10px; padding-right:16px; }
  .acq-item .recipient__text{ flex-basis:calc(100% - 52px); }
  .acq-item__icon{ width:40px; height:40px; font-size:15px; }
  .acq-item__change{ margin-left:52px; }
  .acq-recap > div{ flex-direction:column; gap:2px; }
  .acq-recap dd{ text-align:left; }
}

/* ==========================================================================
   8 — Piè di pagina (generato dal codice: mu-plugins/camminata-legale.php)
   Stesse regole del piè di pagina di camminatametabolica.it, come la demo.
   ========================================================================== */
.site-footer{
  margin-top:var(--section-gap);
  padding:40px 24px;
  background:var(--petrol); color:#fff;
  font-size:16px; font-weight:400; line-height:1.5;
}
@media (min-width:1280px){
  .site-footer{ margin:var(--section-gap) 20px 20px; border-radius:var(--r-4xl); }
}
.site-footer a{ color:inherit; text-decoration:inherit; }
.site-footer a:hover{ color:var(--green); }
.site-footer img{ max-width:100%; height:auto; }
.cmf-container{ width:100%; margin-inline:auto; }
@media (min-width:640px){ .cmf-container{ max-width:640px; } }
@media (min-width:768px){ .cmf-container{ max-width:768px; } }
@media (min-width:1024px){ .cmf-container{ max-width:1024px; } }
@media (min-width:1280px){ .cmf-container{ max-width:1280px; } }
@media (min-width:1536px){ .cmf-container{ max-width:1536px; } }
.cmf-top{ display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:32px; }
.cmf-id{ display:flex; flex-direction:column; gap:16px; }
.cmf-logo{ width:205px; }
.cmf-legal{ display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.43; font-weight:300; }
.cmf-legal p{ display:flex; flex-direction:column; }
.cmf-legal__soggetto{ font-weight:500; }
.cmf-legal__label{ font-size:12px; line-height:1.33; color:rgb(255 255 255 / .8); }
.cmf-links{ display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:24px; }
.cmf-group{ display:flex; flex-direction:column; gap:24px; padding-top:20px; }
.cmf-title{ line-height:1; font-weight:500; }
.cmf-list{ display:flex; flex-direction:column; gap:4px; font-weight:300; }
.cmf-dim{ opacity:.8; }
.cmf-social{ display:flex; align-items:center; gap:24px; font-size:20px; line-height:1.4; }
.cmf-social .ico{ color:var(--green); font-size:1.15em; }
.cmf-social a:hover .ico{ color:#fff; }
.cmf-bottom{ margin-top:40px; display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); align-items:end; gap:24px; }
.cmf-recognized, .cmf-badges{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; }
.cmf-recognized span{ line-height:1.25; }
/* larghezza dagli attributi width dell'HTML, altezza in proporzione: mai stirati */
.cmf-recognized img, .cmf-badges img{ flex:none; }
.cmf-copy{ text-align:center; font-size:14px; line-height:1.43; opacity:.8; }
.cmf-copy--link{ margin-top:6px; }
.cmf-copy a{ text-decoration-line:underline; text-underline-offset:3px; }
.cmf-trainer-social{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 14px;
  margin-top:12px; font-size:14px; line-height:1.43;
}
.cmf-trainer-social > span{ opacity:.8; flex-basis:100%; text-align:center; } /* su telefono la scritta sta sopra, i link insieme sotto */
.cmf-trainer-social a{ display:inline-flex; align-items:center; gap:6px; text-decoration:underline; text-underline-offset:3px; }
.cmf-trainer-social .ico{ color:var(--green); }
@media (min-width:768px){
  .cmf-trainer-social > span{ flex-basis:auto; text-align:left; }
  .cmf-top{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .cmf-id{ grid-column:span 2 / span 2; }
  .cmf-links{ grid-column:span 3 / span 3; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 24px; }
  .cmf-bottom{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:32px; }
  .cmf-recognized{ grid-column:span 2 / span 2; justify-content:flex-start; }
  .cmf-copy-cell{ grid-column:span 2 / span 2; }
  .cmf-copy, .cmf-trainer-social{ text-align:left; justify-content:flex-start; }
}
@media (min-width:1024px){
  .cmf-id{ grid-column:span 1 / span 1; }
  .cmf-links{ grid-column:span 4 / span 4; grid-template-columns:repeat(4, minmax(0,1fr)); }
  .cmf-list{ gap:16px; }
}
@media (min-width:1280px){
  .cmf-recognized{ grid-column:span 1 / span 1; }
  .cmf-badges{ grid-column:span 2 / span 2; }
  .cmf-social{ font-size:30px; line-height:1.2; }
}

/* ==========================================================================
   Pulsante «Contattami» fisso in basso (solo telefono)
   ========================================================================== */
.float-cta{
  position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:45;
  transform:translate(-50%, 140%);
  display:none;
  visibility:hidden; /* nascosto davvero (non solo spinto sotto il bordo): niente tab, niente lettori di schermo */
  box-shadow:0 14px 30px -10px rgb(41 78 94 / .55), var(--shadow-btn);
  transition:transform .22s var(--ease), background-color var(--dur) var(--ease), visibility 0s linear .22s;
}
.float-cta.is-visible{ transform:translate(-50%, 0); visibility:visible; transition:transform .22s var(--ease), background-color var(--dur) var(--ease), visibility 0s; }
.float-cta.is-visible:hover{ transform:translate(-50%, -1px); }
@media (max-width:767px){ .float-cta{ display:inline-flex; } }

/* ==========================================================================
   Pagina radice «/» e pagine semplici (privacy, 404)
   ========================================================================== */
.radice{ min-height:calc(100vh - 120px); display:grid; align-content:start; }
.radice-band{
  position:relative; isolation:isolate; overflow:hidden;
  margin:12px var(--band-inset) 0; border-radius:var(--r-4xl);
  background:var(--gradient-website), var(--bg-2);
}
.radice-band::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  height:clamp(80px, 13vw, 170px);
  background:url("../img/onde-testata.svg") center bottom / 100% 100% no-repeat;
}
.radice-inner{
  display:grid; justify-items:center; text-align:center; gap:22px;
  max-width:820px; margin-inline:auto;
  padding:clamp(48px, 8vw, 104px) var(--gutter) clamp(120px, 15vw, 200px);
}
.radice-logo img{ width:clamp(170px, 22vw, 230px); height:auto; }
.radice h1{
  font-size:clamp(2.2rem, 1.2rem + 3.6vw, 3.8rem); font-weight:700; line-height:1.05; letter-spacing:-.03em; color:var(--fg);
  text-wrap:balance;
}
.radice-lead{ max-width:620px; font-size:clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height:1.7; color:var(--ink); text-wrap:pretty; }
.radice-hand{ font-family:var(--hand); font-weight:700; font-size:clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height:1.05; color:var(--green); transform:rotate(-2deg); }
.radice .btn-row{ justify-content:center; margin-top:8px; }
@media (max-width:559px){
  .radice .btn-row{ flex-direction:column; width:100%; }
  .radice .btn-row .btn{ width:100%; }
}

/* ==========================================================================
   Comparsa progressiva (solo con JavaScript attivo, mai in stampa)
   ========================================================================== */
.js [data-reveal]{ opacity:0; }
.js [data-reveal].is-in,
.js.reveal-tutto [data-reveal]{ opacity:1; }
.js [data-reveal].is-in{ animation:reveal .55s var(--ease) both; }
.js [data-reveal][data-delay="1"].is-in{ animation-delay:.06s; }
.js [data-reveal][data-delay="2"].is-in{ animation-delay:.12s; }
.js [data-reveal][data-delay="3"].is-in{ animation-delay:.18s; }
@keyframes reveal{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js [data-reveal]{ opacity:1; animation:none !important; }
}
@media print{
  .site-header, .float-cta, .menu-backdrop{ display:none !important; }
  .js [data-reveal]{ opacity:1 !important; animation:none !important; }
}