/* =============================================================================
   Metabolic Lab — /metabolic-lab  (apps/rigo)
   =============================================================================

   Trasportato dall'anteprima approvata il 24/08/2026
   (`tests/rigo/metabolic-lab-preview/index.html`, blocco <style> righe 10-474).

   ⚠️ AUTOCONSISTENTE, e deve restare tale: questo file NON va usato insieme a
   `tokens.css` / `main.css`. Ridichiara i propri token con gli stessi nomi ma altri
   valori — qui `--maxw` è 68rem, in `tokens.css` è 40rem — quindi mescolarli
   romperebbe sia questa pagina che /quiz. Non "armonizzare".

   Tre sole aggiunte rispetto all'anteprima, tutte in fondo al file:
     · `.zona-rosa`   — la sfumatura dietro al team (chiesta il 24/08). Nell'anteprima
                        il contenitore c'era nel markup ma senza nessuna regola.
     · banner cookie  — le regole vivevano in `main.css`, che questa pagina non carica:
                        senza copiarle qui il banner comparirebbe scomposto il giorno
                        in cui si accende un tracciamento.
     · pulsante fisso — sparisce quando la barra dei cookie è aperta: due elementi
                        fissi in fondo non si accavallano (memoria no-overlapping-elements).
     · form vero      — avviso d'errore, campo-trappola e riquadro Turnstile: tre cose
                        che nell'anteprima non c'erano perché il form non inviava nulla.
   ============================================================================= */

/* ============ FONT (self-hosted, come apps/rigo) ============ */
@font-face { font-family: 'Anton'; src: url('/fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Red Hat Display'; src: url('/fonts/red-hat-display-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Red Hat Display'; src: url('/fonts/red-hat-display-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Red Hat Display'; src: url('/fonts/red-hat-display-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ============ TOKEN RIGO (da apps/rigo/public/css/tokens.css) ============ */
:root {
  --teal: #3A5D60;
  --teal-dark: #2f4d50;
  --teal-deep: #24393b;
  --sage: #9AB89A;
  /* Stessa salvia, quattro gradini più scura: serve SOLO quando il salvia fa da
     testo su fondo chiaro. Il salvia originale su bianco dà 2,17:1 dove ne
     servono 4,5 (audit 28/08), cioè si legge male su schermo chiaro o al sole;
     questo dà 5,09:1 su bianco e 4,74:1 sul beige delle sezioni. Per bordi,
     sfondi e decori resta `--sage`, dove il contrasto non conta. */
  --sage-testo: #54774F;
  --blush: #E8AEAF;
  --greige: #E4E2DD;
  --offwhite: #FFF1F0;
  --fg: #20302f;
  --muted: #4d5a5c;
  --soft: #5f636b;
  --kicker: #9E5256;
  --card: #ffffff;
  --ring: rgba(58,93,96,.18);
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 68rem;
  /* scala tipografica: 4 gradini per tutta la pagina (prima erano 12 misure diverse) */
  --fs-lead: 1.15rem;   /* frasi guida: intro, lead di sezione, i 3 pilastri */
  --fs-body: 1rem;      /* corpo: liste, punti, FAQ, passi, prezzi */
  --fs-meta: .95rem;    /* contorno: ruoli, note, risparmio, chip */
  --fs-micro: .8125rem; /* etichette maiuscole: kicker, tag, label */
  /* sfondi di sezione (deciso il 24/08): due zone verdi, una rosa, tre gradazioni calde */
  --rose: #F8DEDD;       /* zona numeri + team */
  --step-1: #FBF6F3;     /* come iscriversi */
  --step-2: #F4E9E3;     /* supporto medico */
  --step-3: #EBDCD4;     /* alimentazione low carb (la piu scura, resta chiara) */
  --verde-sez: linear-gradient(170deg, #33565a 0%, var(--teal-deep) 100%);
  --font-title: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Red Hat Display', 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--offwhite);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* Titolo che esiste per i lettori dello schermo e non occupa spazio a video:
   serve dove una fascia non ha un titolo visibile e senza il quale i livelli
   dei titoli salterebbero (fascia NUMERI). NON usare `display:none`, che lo
   toglierebbe anche a loro. */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
a { color: var(--teal); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 4.5rem 0; }
@media (max-width: 640px) { .section { padding: 3rem 0; } }

/* kicker: l'UNICO accento tipografico della pagina */
.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kicker);
  display: block;
  margin-bottom: .75rem;
}
.on-dark .kicker { color: var(--blush); }

h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: 1.08; letter-spacing: .01em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); color: var(--teal-dark); text-transform: uppercase; margin-bottom: 1.1rem; }
.section-head { max-width: 44rem; }
p.lead { font-size: var(--fs-lead); color: var(--muted); }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--kicker); color: #fff; box-shadow: 0 10px 24px -10px rgba(158,82,86,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(158,82,86,.6); }
.btn-ghost { background: transparent; color: var(--offwhite); border-color: rgba(255,241,240,.4); }
/* variante in filo: rimanda a un'altra sezione, non alla richiesta */
.btn-outline { background: transparent; color: var(--kicker); border-color: var(--kicker); }
.btn-outline:hover { background: rgba(158,82,86,.08); transform: translateY(-2px); }
.btn-ghost:hover { border-color: var(--offwhite); }
.section-cta { margin-top: 1.75rem; }

/* motion sobrio: solo un ingresso del hero al caricamento, il resto è sempre visibile
   (niente reveal-on-scroll: nasconde i contenuti a JS spento e negli screenshot) */
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-grid > * { animation: hero-in .7s ease both; }
@media (prefers-reduced-motion: reduce) { .hero-grid > * { animation: none; } }

/* ============ HERO ============ */
.hero {
  /* gradiente leggero, verde su verde: due aloni tenui + schiarita centrale */
  background:
    radial-gradient(52rem 26rem at 50% -12%, rgba(154,184,154,.20), transparent 62%),
    radial-gradient(42rem 24rem at 88% 112%, rgba(232,174,175,.10), transparent 58%),
    linear-gradient(168deg, #35585b 0%, var(--teal-deep) 100%);
  color: var(--offwhite);
  overflow: hidden;
}
/* hero a una colonna, centrato anche da desktop (feedback 24/08: niente ritratto) */
.hero-grid {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  padding-top: 6.75rem;
}
.hero h1 {
  font-size: clamp(2.45rem, 9.2vw, 7.4rem);
  text-transform: uppercase;
  color: var(--offwhite);
  white-space: nowrap;
}
/* effetto scelto il 24/08: "respiro luminoso" sul LAB (nessun movimento, solo luce) */
.hero h1 .thin { color: var(--blush); animation: lab-breathe 3.6s ease-in-out infinite; }
@keyframes lab-breathe {
  0%, 100% { text-shadow: 0 0 12px rgba(232,174,175,.30), 0 0 40px rgba(232,174,175,.10); }
  50%      { text-shadow: 0 0 22px rgba(232,174,175,.65), 0 0 70px rgba(232,174,175,.28); }
}
@media (prefers-reduced-motion: reduce) { .hero h1 .thin { animation: none; } }
/* stessa misura e stesso peso dei titoli delle card numeri ("3 o 6 mesi di percorso"),
   e attaccata al titolo: sono una cosa sola */
.hero .sub {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: .4rem 0 1.6rem;
  color: rgba(255,241,240,.95);
}
/* i 3 pilastri: sono il contenuto del hero, quindi grandi e leggibili */
.pillars { list-style: none; display: grid; gap: 1.1rem; margin: 0 auto 2.25rem; max-width: 40rem; }
.pillars li {
  display: flex; gap: 1rem; align-items: flex-start;
  text-align: left;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(255,241,240,.94);
}
.pillars .dot {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; margin-top: .1rem;
  border-radius: 50%;
  background: rgba(232,174,175,.18);
  border: 1.5px solid var(--blush);
  display: grid; place-items: center;
  font-family: var(--font-title); font-size: 1.05rem; color: var(--blush); font-weight: 400;
}
.hero .hero-grid { padding-bottom: 2.5rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: center; }
/* La riga dei posti liberi sotto il bottone: Manuela l'ha voluta piu' grossa
   (richiesta del 01/09/2026). Cresce col viewport ma resta leggibile a 375px. */
.hero-note {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
  font-weight: 600;
  color: rgba(255,241,240,.92);
  margin-top: 1.1rem;
}
.hero .sub, .hero .intro { margin-left: auto; margin-right: auto; }
.hero .intro { max-width: 54rem; font-size: var(--fs-lead); }
@media (max-width: 760px) {
  .hero .hero-grid { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .hero-cta { flex-direction: column; gap: .6rem; }
  .hero-cta .btn { width: 100%; text-align: center; }
}

/* ============ FASCIA DEI QUATTRO FATTI (ponte hero -> team) ============ */
/* banda verde piena da bordo a bordo: separa il hero dal team senza titolo,
   sono le card stesse a parlare. Contenuto un filo piu largo delle altre sezioni. */
.numbers { background: var(--teal-deep); color: var(--offwhite); padding: 3.25rem 0; }
/* la fascia usa quasi tutta la riga: card piu larghe, quindi meno alte (max 4 righe di testo) */
.wrap-larga { max-width: 92rem; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 640px) { .wrap-larga { padding: 0 1.25rem; } }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
/* stesse card a ogni misura (scelta 24/08): filo sottile, angoli tondi, un velo di
   chiaro sul verde. Niente filetti di separazione. */
.num-card {
  padding: 1.5rem 1.35rem;
  border: 1px solid rgba(255,241,240,.26);
  border-radius: var(--radius);
  background: rgba(255,241,240,.05);
}
.num-card p { margin: 0; font-size: var(--fs-body); color: rgba(255,241,240,.85); line-height: 1.55; }
/* i 4 riquadri hanno un TITOLO, non un numerone: stesso font e stesso stile per tutti,
   cosi "3 o 6" si legge come una frase e non come un simbolo */
.num-card h3.num-title {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  line-height: 1.2; letter-spacing: -.015em;
  color: var(--offwhite); text-transform: none;
  margin: 0 0 .55rem;
}
/* da telefono i filetti non tengono: quattro card 2x2 col filo sottile e angoli tondi */
@media (max-width: 900px) {
  .numbers { padding: 2.5rem 0; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .num-card { padding: 1.1rem 1rem; }
  .num-card h3.num-title { font-size: 1.15rem; }
  .num-card p { font-size: var(--fs-meta); }
}
@media (max-width: 420px) { .numbers-grid { gap: .75rem; } .num-card { padding: .95rem .85rem; } }

/* ============ SEZIONI VERDI (percorso, per chi e pensato) ============ */
.section.verde { background: var(--verde-sez); color: var(--offwhite); }
.section.verde h2 { color: var(--offwhite); }
.section.verde .kicker { color: var(--blush); }
.section.verde p.lead { color: rgba(255,241,240,.88); }
.section.verde .qualify-list li { background: rgba(255,241,240,.08); border-color: rgba(255,241,240,.18); }
.section.verde .qualify-list .check { color: var(--blush); }
.section.verde .kg-chip { background: rgba(255,241,240,.12); color: var(--offwhite); border: 1px solid rgba(255,241,240,.22); }
.section.verde .tracks-common { background: rgba(255,241,240,.09); border-left-color: var(--blush); color: rgba(255,241,240,.9); }
.section.verde .tracks-common strong { color: var(--offwhite); }
.section.verde .btn-outline { color: var(--blush); border-color: rgba(232,174,175,.7); }
.section.verde .btn-outline:hover { background: rgba(232,174,175,.12); }

/* ============ SEZIONE ROSA (per chi e pensato) ============ */
/* stesso rosa della zona numeri + team, stesso gradiente delicato, testi scuri */
.section.rosa {
  background:
    radial-gradient(48rem 24rem at 50% -10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(44rem 24rem at 90% 108%, rgba(232,174,175,.34), transparent 62%),
    linear-gradient(168deg, #FDF1F0 0%, var(--rose) 52%, #F2CFCE 100%);
  color: var(--fg);
}

/* ============ PERCORSO ============ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
/* testo + illustrazione affiancati (feedback 21/08: sezioni pilastro troppo nude) */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.split .illu img { border-radius: var(--radius); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 1.75rem; } .split .illu img { max-width: min(26rem, 100%); margin: 0 auto; } }
.panel {
  background: var(--card); border: 1px solid var(--ring);
  border-radius: var(--radius); padding: 1.75rem;
}
.panel h3 { font-size: 1.35rem; color: var(--teal-dark); text-transform: uppercase; margin-bottom: .6rem; }

/* le due entrate affiancate: si guardano e si confrontano a colpo d'occhio */
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; max-width: 52rem; }
@media (max-width: 700px) { .tracks { grid-template-columns: 1fr; } }
.track {
  background: var(--card); border: 1px solid var(--ring);
  border-radius: var(--radius); padding: 1.75rem;
}
.track-tag { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-micro); color: var(--kicker); }
.track-dur { display: block; font-family: var(--font-title); font-size: 2.2rem; color: var(--teal-dark); line-height: 1.1; margin: .35rem 0 .5rem; }
.track-for { font-size: var(--fs-body); color: var(--muted); padding-bottom: 1.1rem; border-bottom: 1px solid var(--ring); }
.track-for strong { color: var(--teal-dark); }
.track-list { list-style: none; display: grid; gap: .65rem; margin-top: 1.1rem; font-size: var(--fs-body); color: var(--muted); }
.track-list li { display: flex; gap: .7rem; align-items: baseline; }
.track-list .tn {
  flex: 0 0 auto; min-width: 1.8rem; text-align: center;
  font-family: var(--font-title); font-size: 1.15rem; color: var(--sage-testo);
}
.track-list li:last-child { margin-top: .35rem; padding-top: .7rem; border-top: 1px dashed var(--ring); color: var(--teal-dark); font-weight: 500; }
.tracks-common {
  margin-top: 1.5rem; max-width: 52rem;
  background: rgba(154,184,154,.14); border-left: 4px solid var(--sage);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.1rem 1.35rem; font-size: var(--fs-body); color: var(--fg);
}
.tracks-common strong { color: var(--teal-dark); }

/* ============ PILASTRI (medico / nutrizione / mindfulness) ============ */
.pillar-section { border-top: 1px solid var(--ring); }
.pillar-section.bg-warm  { background: var(--step-2); }  /* supporto medico: 2a gradazione */
.pillar-section.bg-plain { background: var(--step-3); }  /* low carb: 3a, la piu scura */
.pillar-section.bg-white { background: #ffffff; }        /* mindfulness */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.point { background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); padding: 1.5rem; }
.point strong { display: block; color: var(--teal-dark); margin-bottom: .4rem; font-size: 1.1rem; }
.point p { font-size: var(--fs-body); color: var(--muted); }
@media (max-width: 760px) { .points { grid-template-columns: 1fr; } }
.mindfulness-callout {
  margin-top: 2rem; padding: 1.75rem;
  background: linear-gradient(140deg, rgba(154,184,154,.16), rgba(232,174,175,.14));
  border-left: 4px solid var(--kicker);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 44rem;
}

/* ============ A CHI È RIVOLTO ============ */
.qualify-list { list-style: none; display: grid; gap: .9rem; margin-top: 1.5rem; max-width: 44rem; }
.qualify-list li {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--ring);
  border-radius: var(--radius-sm); padding: 1rem 1.25rem;
}
.qualify-list .check { flex: 0 0 auto; color: var(--kicker); font-weight: 700; margin-top: .05rem; }
.kg-strip {
  display: inline-flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem;
}
.kg-chip {
  background: var(--teal); color: var(--offwhite);
  border-radius: 999px; padding: .45rem 1.1rem; font-size: var(--fs-meta); font-weight: 500;
}

/* ============ TEAM ============ */
/* il team continua la zona rosa: nessun bordo tra le due, quindi si leggono come una */
.team { background: transparent; color: var(--fg); padding-top: 2.5rem; }
.team h2 { color: var(--teal-dark); }
.team .kicker { color: var(--kicker); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
/* SOLO la fascia delle foto esce dalla larghezza di sezione (kicker, titolo e frase
   restano a 68rem come tutte le altre): cosi i ritratti diventano piu grandi
   senza allungare la pagina. Sotto gli 860px non cambia niente. */
@media (min-width: 861px) {
  .team-grid {
    position: relative; left: 50%; transform: translateX(-50%);
    width: min(96rem, calc(100vw - 4rem));
    gap: 2rem;
  }
}
.member { text-align: center; }
/* bordo leggero verde SOLO attorno alla foto (feedback 24/08) */
.member .ph {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(58,93,96,.35);
  box-shadow: 0 16px 32px -18px rgba(36,57,59,.35);
}
.member img { width: 100%; }
/* il nome tiene sempre due righe: cosi ruolo e descrizione si allineano tra le 4 card */
/* il font si ferma a 700: per ispessire ancora un filo, mezzo pixel di contorno */
.member h3 { font-size: 1.22rem; -webkit-text-stroke: .35px currentColor; margin-top: 1.1rem; color: var(--teal-deep); letter-spacing: -.01em; text-transform: none; font-family: var(--font-body); font-weight: 700; min-height: 3.1rem; display: flex; align-items: center; justify-content: center; }
.member .role { font-size: var(--fs-meta); color: var(--kicker); margin-top: -.1rem; min-height: 2.6rem; }
/* one-liner: serve a dare autorevolezza subito, non e una bio */
.member .bio {
  font-size: var(--fs-meta); line-height: 1.55; margin-top: .9rem;
  color: var(--muted);
}
.team .section-head { max-width: 62rem; }
.team-intro { color: var(--muted); margin-top: .6rem; font-size: var(--fs-lead); }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
/* da telefono le colonne strette rendono la descrizione illeggibile:
   una professionista per riga, foto piccola a lato e testo allineato a sinistra */
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
  /* gap SOLO orizzontale: in verticale distanzierebbe nome, ruolo e descrizione */
  .member { display: grid; grid-template-columns: 128px 1fr; column-gap: 1.1rem; row-gap: 0; align-items: start; align-content: start; text-align: left; }
  .member .ph { grid-column: 1; grid-row: 1 / span 3; box-shadow: 0 10px 20px -12px rgba(0,0,0,.5); }
  /* righe compatte: senza questo la griglia allunga le righe per pareggiare l'altezza
     della foto e i tre testi si allontanano tra loro */
  /* la terza riga si prende lo spazio che avanza (1fr): cosi il vuoto finisce SOTTO la
     descrizione e i tre testi restano attaccati tra loro sotto il nome */
  .member { grid-template-rows: auto auto 1fr; }
  .member h3 { grid-column: 2; grid-row: 1; margin-top: -.2rem; min-height: 0; display: block; line-height: 1.25; align-self: start; }
  .member .role { grid-column: 2; grid-row: 2; min-height: 0; margin-top: .1rem; align-self: start; }
  .member .bio { grid-column: 2; grid-row: 3; margin-top: .4rem; align-self: start; }
}

/* ============ INVESTIMENTO ============ */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; max-width: 52rem; }
@media (max-width: 700px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--card); border: 1px solid var(--ring);
  border-radius: var(--radius); padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
}
.price-card .plan { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-micro); color: var(--kicker); }
.price-row { display: flex; align-items: baseline; gap: .55rem; margin: .5rem 0 .35rem; }
/* Il totale del percorso: si legge subito sotto la cifra mensile, in verde e piccolo.
   Verde da TESTO (`--sage-testo`), non `--sage`, che sul bianco non ha contrasto. */
.price-card .totale { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; font-size: var(--fs-meta); color: var(--sage-testo); }
/* La pill del risparmio sta sulla riga del totale, non in fondo alla card: si legge nel
   momento in cui l'occhio confronta le due cifre, che è l'unico momento in cui serve. */
.price-card .pill-risparmio {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  background: rgba(84,119,79,.12); color: var(--sage-testo);
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.price-card .price { font-family: var(--font-title); font-size: 2.8rem; color: var(--teal-dark); }
.price-card .per { font-size: var(--fs-body); color: var(--soft); }
.price-card .saving { margin-top: auto; padding-top: 1.1rem; font-size: var(--fs-meta); color: var(--teal); }
.price-card ul { list-style: none; display: grid; gap: .55rem; font-size: var(--fs-body); color: var(--muted); }
.price-card ul li::before { content: '·'; color: var(--kicker); font-weight: 700; margin-right: .5rem; }
.price-note {
  margin-top: 1.75rem; max-width: 52rem;
  background: rgba(232,174,175,.16); border: 1px solid rgba(158,82,86,.25);
  border-radius: var(--radius-sm); padding: 1.1rem 1.35rem;
  font-size: var(--fs-body); color: var(--fg);
}

/* ============ STEPS ============ */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 760px) { .steps-grid { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); padding: 1.6rem; }
.step .n { font-family: var(--font-title); font-size: 2rem; color: var(--sage-testo); display: block; margin-bottom: .5rem; }
.step strong { color: var(--teal-dark); display: block; margin-bottom: .3rem; }
.step p { font-size: var(--fs-body); color: var(--muted); }

/* ============ FAQ ============ */
.iscrizione { background: var(--step-1); border-top: 1px solid var(--ring); }
.faq { background: #ffffff; border-top: 1px solid var(--ring); }
/* la domanda del titolo si prende tutta la riga: a 44rem si spezzava in due da desktop */
.faq .section-head { max-width: none; }
.faq-list { max-width: 46rem; margin-top: 1.5rem; }
.faq-list details {
  background: var(--card); border: 1px solid var(--ring);
  border-radius: var(--radius-sm); margin-bottom: .75rem;
  padding: 0 1.25rem;
}
.faq-list summary {
  cursor: pointer; font-weight: 700; color: var(--teal-dark);
  padding: 1.05rem 0; list-style: none; position: relative; padding-right: 2rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-title); font-size: 1.3rem; color: var(--kicker);
}
.faq-list details[open] summary::after { content: '–'; }
.faq-list details p { padding: 0 0 1.1rem; color: var(--muted); font-size: var(--fs-body); }

/* ============ FORM ============ */
.conversion { background: linear-gradient(155deg, var(--teal-dark), var(--teal-deep)); color: var(--offwhite); }
.conversion h2 { color: var(--offwhite); }
.form-card {
  background: var(--card); color: var(--fg);
  border-radius: var(--radius); padding: 2rem;
  max-width: 34rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* mobile: nome e cognome uno sotto l'altro */
.field { display: grid; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-micro); font-weight: 700; color: var(--teal-dark); }
.field input {
  font-family: var(--font-body); font-size: 1rem; color: var(--fg);
  padding: .8rem .95rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--ring); background: #fff; width: 100%;
}
.field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,93,96,.18); }
.consent-row { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-micro); color: var(--soft); margin-top: 1rem; }
.consent-row input { margin-top: .25rem; accent-color: var(--teal); }
.turnstile-slot {
  margin-top: 1rem; border: 1.5px dashed var(--ring); border-radius: var(--radius-sm);
  padding: .8rem; text-align: center; font-size: var(--fs-micro); color: var(--soft); background: #fafafa;
}
.form-card .btn { width: 100%; margin-top: 1.25rem; text-align: center; }
.conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { .conv-grid { grid-template-columns: 1fr; } }
.visit-box {
  margin-top: 2rem; padding: 1.5rem;
  border: 1px solid rgba(255,241,240,.25); border-radius: var(--radius);
  font-size: var(--fs-body); color: rgba(255,241,240,.85);
}
.visit-box strong { color: var(--offwhite); }
.visit-box a.wa { color: var(--blush); font-weight: 700; white-space: nowrap; }

/* ============ PAGINA DI RINGRAZIAMENTO (schermo pieno) ============
   Il contenuto di /metabolic-lab/grazie è corto: misurato a 1440x900 arrivava a 848px,
   e i 52px avanzati mostravano il rosa del corpo pagina sotto il piede. Qui la pagina
   occupa almeno tutto lo schermo e il piede si appoggia in fondo.
   `dvh` sta dopo `vh` apposta: sul telefono l'altezza cambia quando compaiono le barre
   del browser, e `vh` da solo lascerebbe ricomparire la striscia. Tutto scopato a
   `body.page-grazie`: la landing lunga non è toccata. */
body.page-grazie { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.page-grazie > .hero { flex: 1 0 auto; }
body.page-grazie > .site-footer { margin-top: auto; }

/* ============ FOOTER (eredita il legale di apps/rigo) ============ */
.site-footer { background: #1d2e30; color: rgba(255,241,240,.72); font-size: var(--fs-micro); padding: 2.5rem 0 5.5rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.25rem; }
.site-footer a { color: rgba(255,241,240,.85); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ============ STICKY CTA MOBILE ============ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(255,241,240,.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--ring);
  display: none;
}
.sticky-cta .btn { width: 100%; text-align: center; }
.sticky-cta { transform: translateY(110%); transition: transform .3s ease; }
.sticky-cta.visible { transform: none; }
@media (max-width: 760px) { .sticky-cta { display: block; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ============ ZONA ROSA (avvolge il team) ============ */
/* La sfumatura sta sul CONTENITORE che avvolge, non sulla sezione dentro: un gradiente
   che deve scorrere sotto più blocchi, se lo si ripete su ognuno, si vede la cucitura.
   Stessa ricetta di `.section.rosa` — sono la stessa zona, in due punti della pagina. */
.zona-rosa {
  background:
    radial-gradient(48rem 24rem at 50% -10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(44rem 24rem at 90% 108%, rgba(232,174,175,.34), transparent 62%),
    linear-gradient(168deg, #FDF1F0 0%, var(--rose) 52%, #F2CFCE 100%);
  color: var(--fg);
}

/* ============ BANNER COOKIE ============ */
/* Copiate da public/css/main.css (righe 300-338): il partial `_cookie-banner.ejs` è
   condiviso con le altre pagine pubbliche, ma il suo vestito stava solo là. Oggi la
   barra resta invisibile (non ci sono tracciamenti da consentire), quindi queste regole
   sono la rete per quando GA4 e il pixel verranno accesi. */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));
  background: rgba(255, 241, 240, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 2px solid var(--greige);
  box-shadow: 0 -6px 24px rgba(32, 48, 47, .07);
}
#cookie-banner.is-open { display: flex; }
#cookie-banner p { margin: 0; max-width: 34rem; font-size: .8125rem; line-height: 1.45; color: var(--muted); text-align: left; }
#cookie-banner a { color: var(--teal); text-decoration: underline; }
#cookie-banner .cb-actions { display: flex; gap: .5rem; flex-shrink: 0; }
#cookie-banner button {
  font-family: var(--font-body); font-size: .875rem; font-weight: 700;
  padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; border: 0;
  min-height: 44px;
}
#cookie-banner .cb-accept { background: var(--teal); color: #fff; }
#cookie-banner .cb-accept:hover { background: var(--teal-dark); }
#cookie-banner .cb-decline { background: transparent; color: var(--muted); border: 2px solid var(--greige); }
#cookie-banner .cb-decline:hover { border-color: var(--teal); color: var(--teal); }
#cookie-banner button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.cb-min { display: none; }
body.has-cookie-banner { padding-bottom: 5.5rem; }

/* Barra cookie e pulsante fisso occupano lo stesso posto: il consenso viene prima,
   il richiamo all'azione aspetta il suo turno. Una riga, zero JavaScript. */
body.has-cookie-banner .sticky-cta { display: none; }

@media (max-width: 600px) {
  #cookie-banner { gap: .6rem; flex-wrap: nowrap; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); }
  #cookie-banner p { font-size: .75rem; line-height: 1.35; max-width: none; }
  #cookie-banner .cb-full { display: none; }
  #cookie-banner .cb-min { display: block; }
  #cookie-banner button { padding: .55rem .9rem; font-size: .8125rem; min-height: 40px; }
  body.has-cookie-banner { padding-bottom: 4.5rem; }
}

/* ============ IL FORM VERO ============ */
/* Nell'anteprima il form non inviava niente (un alert), quindi queste tre cose non
   servivano. Ora servono, e sono le uniche differenze visibili rispetto all'anteprima —
   due delle tre si vedono solo quando qualcosa va storto. */

/* Avviso d'errore: compare SOLO se l'invio è stato respinto (email sbagliata, consenso
   mancante...). Torna in cima al form, dove la persona sta guardando. */
.form-error {
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(158,82,86,.10);
  border: 1px solid rgba(158,82,86,.35);
  color: var(--kicker);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.5;
}

/* Campo-trappola per i robot: lo compilano loro, le persone non lo vedono nemmeno.
   Fuori dallo schermo e NON `display:none`: alcuni robot saltano i campi nascosti così,
   e un campo che nessuno compila non intrappola nessuno. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Verifica anti-bot di Cloudflare, misura normale (300x65).
   ⚠️ Quei 300px sono INCOMPRIMIBILI: è un iframe di Cloudflare, non si stringe. Con i
   fianchi da 2rem della scheda servirebbero 364px e a 375px di schermo ce ne sono 335 —
   la pagina intera scorreva di lato. Per questo la scheda stringe i fianchi sotto i
   480px (regola qui sotto). `overflow-x` è l'ultima rete: sotto i ~360px il riquadro
   scorre dentro il suo box invece di trascinare la pagina. */
.cf-turnstile { margin-top: 1rem; max-width: 100%; overflow-x: auto; }
@media (max-width: 480px) {
  /* fianchi stretti SOLO qui, per fare stanza ai 300px del riquadro anti-bot:
     335 - 2*14 = 307 > 300. Sopra i 480px la scheda resta com'è nell'anteprima. */
  .form-card { padding: 1.5rem .875rem; }
}

/* Accesso al backend nel piede, come nel footer condiviso (partials/_footer.ejs). */
.site-footer-admin { margin-top: 1.25rem; opacity: .55; }