/* ==========================================================================
   Dott.ssa Stefania Broussard — biologa nutrizionista a Siracusa
   Design v3 (30/09/2026): mockup di Domenico in Riferimenti/design-v3-30-09/.
   La parte alta della home è il mockup a 1536 px; il resto segue lo stesso linguaggio.
   Colori della cliente: crema, verde, marrone [call 48:36-48:42]. Niente rosa nell'interfaccia.
   Movimento minimo: «non mi piace il movimento, mi dà l'idea di fretta» [call 47:17-47:20].
   La versione precedente (v12) è in _Archivio/v12-design-kit-2026-09-30/.
   ========================================================================== */

/* ---------- Font (serviti dal sito, licenza OFL) ---------- */
@font-face{font-family:"Newsreader";font-weight:400 500;font-style:normal;font-display:swap;src:url(../fonts/newsreader-display.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400 500;font-style:italic;font-display:swap;src:url(../fonts/newsreader-display-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader Testo";font-weight:400 600;font-style:normal;font-display:swap;src:url(../fonts/newsreader-testo.woff2) format("woff2")}
@font-face{font-family:"Newsreader Testo";font-weight:400 600;font-style:italic;font-display:swap;src:url(../fonts/newsreader-testo-italic.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:300 650;font-style:normal;font-display:swap;src:url(../fonts/figtree.woff2) format("woff2")}
@font-face{font-family:"Nothing You Could Do";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/nothing-you-could-do.woff2) format("woff2")}

/* ---------- Token ---------- */
:root{
  /* unità del mockup: 1px a 1536 px di larghezza, fra 0,74 e 1,12 */
  --u:clamp(.74px,calc(100vw / 1536),1.12px);

  /* crema */
  --crema:#FAF5F2;          /* fondo pagina (emanuelacaorsi.com) */
  --crema-2:#F3E7DC;        /* pesca, sezioni alterne (emanuelacaorsi.com) */
  --crema-3:#F3E7DC;        /* pesca */
  --carta:#FFFFFF;          /* card e moduli */
  --fascia:#ECEAD9;         /* beige (emanuelacaorsi.com) */
  /* verde */
  --verde:#8A5A46;          /* ORA TERRACOTTA SPENTO: pulsanti, corsivi dei titoli (famiglia del #A6725D dell'apertura; bianco 5,8:1) */
  --verde-scuro:#734A39;
  --verde-occhiello:#61654B;   /* oliva del riferimento */
  --verde-tenue:#ECEAD9;
  --verde-velo:#F3E7DC;
  /* marrone */
  --inchiostro:#282828;     /* titoli (emanuelacaorsi.com) */
  --testo:#282828;          /* testo corrente */
  --testo-tenue:#6E655E;
  --marrone:#855643;        /* «Scopri di più», dettagli */
  --terra:#F3E7DC;          /* footer pesca, come emanuelacaorsi.com */
  --crema-su-terra:#282828;  /* testo del footer (ora scuro su pesca) */
  /* linee */
  --bordo:#E8DAD0;
  --bordo-forte:#D8C4B6;
  --linea:rgba(60,48,38,.16);

  --ombra:0 2px 14px rgba(78,58,40,.07),0 1px 3px rgba(78,58,40,.05);
  --ombra-su:0 10px 30px rgba(78,58,40,.12),0 2px 6px rgba(78,58,40,.06);
  --raggio:5px;
  --raggio-card:12px;

  --titoli:"Newsreader",Georgia,"Times New Roman",serif;
  --titoli-testo:"Newsreader Testo","Newsreader",Georgia,serif;
  --testi:"Figtree",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mano:"Nothing You Could Do","Segoe Script","Bradley Hand",cursive;

  --lato:calc(76 * var(--u));   /* margine laterale del mockup */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--testo);font-family:var(--testi);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titoli);font-weight:420;color:var(--inchiostro);margin:0;line-height:1.08;letter-spacing:-.012em}
h3,h4{font-family:var(--titoli-testo);font-weight:480;letter-spacing:-.005em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--verde);font-weight:420}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:3px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--verde);color:#fff;padding:10px 16px;border-radius:var(--raggio);text-decoration:none;font-weight:600}
.salta:focus{top:12px}
.icona{width:1.25em;height:1.25em;flex:none}

/* occhiello: maiuscoletto verde spaziato */
.occhiello{display:block;font-family:var(--testi);font-weight:500;font-size:max(12px,calc(12.5 * var(--u)));letter-spacing:.24em;text-transform:uppercase;color:var(--verde-occhiello);line-height:1.4}

/* scritte a mano (decorative: ripetono parole della cliente) */
.mano{font-family:var(--mano);font-weight:400;color:#3E342D;line-height:1.28;pointer-events:none;white-space:nowrap}

/* titoli di sezione */
.titolo-sezione{font-size:max(34px,calc(46 * var(--u)));line-height:1.06}
.titolo-sezione em{display:inline}
.sezione-testa{display:grid;gap:calc(14 * var(--u))}
.sezione-testa--centro{text-align:center;justify-items:center}
.sezione-testa__nota{font-size:max(15.5px,calc(17 * var(--u)));color:var(--testo-tenue);max-width:60ch}

/* ---------- Pulsanti ---------- */
.pulsante{display:inline-flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));min-height:max(48px,calc(53 * var(--u)));padding:0 calc(26 * var(--u));border-radius:var(--raggio);
  font-family:var(--testi);font-weight:500;font-size:max(16px,calc(17 * var(--u)));line-height:1.2;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.pulsante .icona{width:max(20px,calc(24 * var(--u)));height:max(20px,calc(24 * var(--u)))}
.pulsante--pieno{background:var(--verde);color:#FFFBF3;border-color:var(--verde);box-shadow:0 1px 2px rgba(35,27,22,.12)}
.pulsante--pieno:hover{background:var(--verde-scuro);border-color:var(--verde-scuro);box-shadow:0 6px 16px rgba(115,74,57,.22)}
.pulsante--bordo{background:rgba(255,252,247,.55);color:var(--inchiostro);border-color:rgba(35,27,22,.55)}
.pulsante--bordo:hover{background:#fff;border-color:var(--verde)}
.pulsante--bordo .icona{color:var(--verde)}
.pulsante--piccolo{min-height:max(42px,calc(41 * var(--u)));padding:0 calc(22 * var(--u));font-size:max(15px,calc(15.5 * var(--u)))}
.freccia-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--titoli-testo);font-style:italic;font-size:max(15px,calc(15 * var(--u)));color:var(--marrone);text-decoration:none}
.freccia-link .icona{width:1.05em;height:1.05em;transition:transform .25s ease}
.freccia-link:hover{text-decoration:underline;text-underline-offset:4px}
.freccia-link:hover .icona{transform:translateX(3px)}

/* ---------- Testata ---------- */
.testata{position:relative;z-index:20;background:var(--crema);min-height:calc(100 * var(--u));display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(12 * var(--u)) calc(72 * var(--u));border-bottom:1px solid rgba(60,48,38,.06)}
/* logo come nel mockup: simbolo a sinistra, nome su due righe accanto, ruolo sotto */
.marchio{display:flex;align-items:center;gap:calc(15 * var(--u));text-decoration:none;color:var(--inchiostro)}
.marchio__logo{display:block;width:auto;height:max(46px,calc(76 * var(--u)))}
.marchio__testo{display:grid;gap:calc(2 * var(--u))}
.marchio__nome{font-family:var(--titoli-testo);font-weight:450;font-size:max(18px,calc(24.5 * var(--u)));line-height:.98;color:var(--inchiostro);letter-spacing:-.01em}
.marchio__nome small{display:block;font-size:.84em}
.marchio__ruolo{margin-top:calc(6 * var(--u));font-family:var(--testi);font-weight:500;font-size:max(9.5px,calc(11 * var(--u)));letter-spacing:.24em;text-transform:uppercase;color:var(--verde-occhiello);line-height:1.2}
.menu{display:flex;align-items:center;gap:0}
.menu__voci{display:flex;align-items:center;gap:calc(31 * var(--u));margin-right:calc(210 * var(--u))}
.menu__voci a{position:relative;display:block;padding:12px 0;white-space:nowrap;text-decoration:none;font-size:max(15px,calc(15.5 * var(--u)));font-weight:400;color:#362F2D;transition:color .2s ease}
.menu__voci a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.menu__voci a:hover{color:var(--verde)}
.menu__voci a:hover::after,.menu__voci a[aria-current="page"]::after{transform:scaleX(1)}
.menu__voci a[aria-current="page"]{color:var(--verde)}
.menu__prenota{min-height:max(44px,calc(46 * var(--u)));min-width:calc(212 * var(--u));font-size:max(15px,calc(15.5 * var(--u)))}
.menu__prenota .icona{width:max(20px,calc(22 * var(--u)));height:max(20px,calc(22 * var(--u)))}
.menu__apri{display:none}
.menu__scritta{display:inline}

/* ---------- Apertura (home) — il mockup a 1536×448 ---------- */
.apertura{position:relative;overflow:hidden;min-height:calc(448 * var(--u));background:
  radial-gradient(calc(420 * var(--u)) calc(380 * var(--u)) at 52% 38%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),
  linear-gradient(90deg,var(--crema) 0,#FAF1E3 38%,#F6ECDD 60%,#F9F0E3 100%)}
.apertura__scena{position:absolute;inset:0;z-index:0}
/* margine sinistro: ritaglio della tua illustrazione (microrganismi), sfumato verso il testo */
.apertura__margine{position:absolute;left:0;top:0;bottom:0;width:calc(190 * var(--u));pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 20%,transparent 92%);mask-image:linear-gradient(90deg,#000 0,#000 20%,transparent 92%)}
.apertura__margine img{width:100%;height:100%;object-fit:cover;object-position:0 50%}
/* luce di una finestra dietro al ritratto (al posto della stanza sfocata del mockup) */
.apertura__luce{position:absolute;top:0;bottom:0;left:calc(640 * var(--u));width:calc(360 * var(--u));pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 18%,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 44%,rgba(255,255,255,.4) 62%,rgba(255,255,255,0) 80%);filter:blur(10px);opacity:.8}
.apertura__illustrazione{position:absolute;top:0;bottom:0;right:0;width:calc(700 * var(--u));pointer-events:none;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%)}
.apertura__illustrazione img{width:100%;height:100%;object-fit:cover;object-position:70% 42%}
/* la sua foto in una capsula (richiesta della cliente, riferimento emanuelacaorsi.com) */
/* capsula piena terracotta, il colore del riferimento mandato dalla cliente (Domenico, 30/09: «lo sfondo deve essere di terracotta») */
.apertura__cornice{position:absolute;z-index:1;left:calc(632 * var(--u));top:calc(22 * var(--u));width:calc(318 * var(--u));height:calc(404 * var(--u));border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,#BA7555 0%,#AC6A4C 100%);
  box-shadow:0 18px 50px rgba(120,60,35,.22),0 2px 6px rgba(78,58,40,.08)}
.apertura__cornice img{position:absolute;left:50%;top:9%;width:94%;height:auto;max-width:none;margin-left:-47%}
.apertura__testo{position:relative;z-index:3;padding:calc(58 * var(--u)) 0 calc(38 * var(--u)) calc(77 * var(--u));width:calc(620 * var(--u))}
.apertura h1{display:grid;gap:calc(20 * var(--u))}
.apertura__grande{display:block;font-family:var(--titoli);font-weight:420;font-size:calc(68 * var(--u));line-height:.94;letter-spacing:-.02em;color:#1C1512;padding-left:calc(10 * var(--u))}
.apertura__grande em{font-style:italic;color:var(--verde);letter-spacing:-.015em}
.apertura__sotto{margin-top:calc(30 * var(--u));max-width:calc(470 * var(--u));padding-left:calc(10 * var(--u));font-size:calc(19 * var(--u));line-height:1.34;color:#2F2824;font-weight:400}
.apertura__azioni{display:flex;flex-wrap:wrap;gap:calc(16 * var(--u));margin-top:calc(22 * var(--u));padding-left:calc(10 * var(--u))}
.apertura__azioni .pulsante--pieno{min-width:calc(253 * var(--u))}
.apertura__azioni .pulsante--bordo{min-width:calc(226 * var(--u))}
.apertura__nota{margin-top:calc(20 * var(--u));padding-left:calc(10 * var(--u));font-size:calc(16 * var(--u));color:#2F2824}
.apertura__mano{position:absolute;z-index:3;left:calc(530 * var(--u));top:calc(96 * var(--u));font-size:calc(19.5 * var(--u));transform:rotate(-13deg);transform-origin:left top}
.apertura__mano .cuore{display:block;margin:calc(4 * var(--u)) 0 0 calc(56 * var(--u));width:calc(18 * var(--u));height:calc(16 * var(--u))}

/* ---------- Fascia dei temi ---------- */
.temi{position:relative;background:var(--fascia);overflow:hidden}
.temi__elenco{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;min-height:calc(104 * var(--u));padding:0 calc(58 * var(--u)) 0 calc(96 * var(--u))}
.tema{position:relative;display:flex;align-items:center;gap:calc(22 * var(--u));padding:calc(14 * var(--u)) calc(24 * var(--u));text-decoration:none;color:#2F2824}
.tema:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;height:calc(58 * var(--u));margin-top:calc(-29 * var(--u));width:1px;background:var(--linea)}
.tema:first-child{padding-left:0}
.tema .icona{width:calc(50 * var(--u));height:calc(50 * var(--u));color:var(--verde);transition:transform .35s ease}
.tema span{font-family:var(--titoli-testo);font-weight:430;font-size:max(14.5px,calc(15.5 * var(--u)));line-height:1.3}
.tema:hover .icona{transform:translateY(-2px)}
.tema:hover span{text-decoration:underline;text-decoration-color:rgba(138,90,70,.4);text-underline-offset:4px}

/* ---------- Come lavora (mockup: «Il mio approccio») ---------- */
.approccio{position:relative;background:var(--crema-2);overflow:hidden}
.approccio__immagine{position:absolute;left:0;top:0;bottom:0;width:calc(640 * var(--u))}
.approccio__immagine img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.approccio__ovale{position:absolute;left:calc(328 * var(--u));top:calc(46 * var(--u));width:calc(196 * var(--u));height:calc(252 * var(--u));border-radius:50%;
  background:rgba(251,245,236,.62);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:grid;place-items:center;transform:rotate(-8deg);box-shadow:0 8px 30px rgba(90,70,50,.08)}
.approccio__ovale .mano{display:grid;justify-items:start;gap:calc(2 * var(--u));font-size:calc(22 * var(--u));line-height:1.18;transform:rotate(-14deg);color:#3A302A}
.approccio__ovale .icona{width:calc(24 * var(--u));height:calc(24 * var(--u));color:#5A4E45;margin:0 0 calc(4 * var(--u)) calc(34 * var(--u))}
.approccio__pannello{position:relative;margin-left:calc(556 * var(--u));background:var(--crema-2);
  border-radius:calc(300 * var(--u)) 0 0 calc(300 * var(--u)) / 50% 0 0 50%;
  display:grid;grid-template-columns:calc(390 * var(--u)) 1fr;gap:calc(26 * var(--u));padding:calc(26 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u)) calc(50 * var(--u))}
.approccio__testo{padding-top:calc(18 * var(--u))}
.approccio__testo .titolo-sezione{margin-top:calc(22 * var(--u));font-size:calc(44 * var(--u));line-height:1.04}
.approccio__testo .titolo-sezione em{display:block}
.approccio__testo p{margin-top:calc(26 * var(--u));font-size:calc(16.5 * var(--u));line-height:1.38;color:#2F2824;max-width:calc(360 * var(--u))}
.approccio__testo .pulsante{margin-top:calc(26 * var(--u))}
.approccio__card{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(10 * var(--u));align-items:stretch}

/* card con immagine (home e pagine interne) */
.card{position:relative;display:flex;flex-direction:column;background:var(--carta);border-radius:var(--raggio-card);overflow:hidden;box-shadow:var(--ombra);text-decoration:none;color:inherit;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.card__img{aspect-ratio:168/136;overflow:hidden;background:var(--crema-3)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card__corpo{display:flex;flex-direction:column;flex:1;padding:calc(14 * var(--u)) calc(15 * var(--u)) calc(16 * var(--u))}
.card h3{font-size:max(17px,calc(18.5 * var(--u)));line-height:1.12}
.card p{margin-top:calc(9 * var(--u));font-size:max(13px,calc(12.5 * var(--u)));line-height:1.48;color:#4A3F37}
.card .freccia-link{margin-top:auto;padding-top:calc(14 * var(--u));font-size:max(14px,calc(14 * var(--u)))}
.card:hover{transform:translateY(-3px);box-shadow:var(--ombra-su)}
.card:hover .card__img img{transform:scale(1.04)}

/* ---------- Sezioni generiche ---------- */
.sezione{position:relative;padding:calc(96 * var(--u)) var(--lato)}
.sezione--crema-2{background:var(--crema-2)}
.sezione--crema-3{background:var(--crema-3)}
.sezione--fascia{background:var(--fascia)}
.contenitore{max-width:calc(1384 * var(--u));margin:0 auto}

/* ---------- Da dove parti? ---------- */
.scelta__pannello{position:relative;display:grid;grid-template-columns:calc(330 * var(--u)) 1fr;gap:calc(26 * var(--u)) calc(50 * var(--u));background:var(--carta);border-radius:calc(22 * var(--u));
  padding:calc(46 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u));box-shadow:var(--ombra)}
.scelta__intro .titolo-sezione{margin-top:calc(14 * var(--u))}
.scelta__intro p{margin-top:calc(16 * var(--u));font-size:max(16px,calc(17 * var(--u)));color:var(--testo-tenue)}
.scelte{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(12 * var(--u))}
.opzione{display:flex;align-items:center;gap:calc(16 * var(--u));min-height:calc(72 * var(--u));padding:calc(12 * var(--u)) calc(20 * var(--u));text-align:left;background:var(--crema);border:1px solid var(--bordo);border-radius:calc(12 * var(--u));
  cursor:pointer;font-size:max(15px,calc(15.5 * var(--u)));line-height:1.35;color:var(--testo);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.opzione:hover{border-color:#D9BFAE;background:#FDF9F1}
.opzione__cerchio{position:relative;flex:none;width:calc(24 * var(--u));height:calc(24 * var(--u));min-width:20px;min-height:20px;border-radius:50%;border:1.5px solid #B5A894;background:#fff;transition:border-color .3s ease}
.opzione__cerchio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--verde);transform:scale(0);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.opzione[aria-checked="true"]{background:var(--verde-velo);border-color:var(--verde);box-shadow:0 0 0 1px var(--verde) inset}
.opzione[aria-checked="true"] .opzione__cerchio{border-color:var(--verde)}
.opzione[aria-checked="true"] .opzione__cerchio::after{transform:scale(1)}
.scelta__risposta{grid-column:1/-1;display:flex;align-items:center;gap:calc(24 * var(--u));margin-top:calc(8 * var(--u));padding-top:calc(26 * var(--u));border-top:1px solid var(--bordo)}
.scelta__testo{flex:1;font-family:var(--titoli-testo);font-weight:430;font-size:max(19px,calc(22 * var(--u)));line-height:1.3;color:var(--inchiostro);transition:opacity .25s ease,transform .25s ease}
.scelta__testo.cambia{opacity:0;transform:translateY(4px)}
.etichetta{flex:none;display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:var(--verde-tenue);color:var(--verde-scuro);font-size:max(13.5px,calc(14 * var(--u)));font-weight:500;text-decoration:none}
.etichetta:hover{background:#ECEAD9}

/* ---------- Tre aree ---------- */
.aree__griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(22 * var(--u));margin-top:calc(44 * var(--u))}
.area{position:relative;display:flex;flex-direction:column;gap:calc(14 * var(--u));padding:calc(32 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u));background:var(--carta);border-radius:var(--raggio-card);box-shadow:var(--ombra);text-decoration:none;color:inherit;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.area:hover{transform:translateY(-3px);box-shadow:var(--ombra-su)}
.medaglione{display:grid;place-items:center;width:calc(76 * var(--u));height:calc(76 * var(--u));min-width:60px;min-height:60px;border-radius:50%;background:var(--verde-velo);color:var(--verde)}
.medaglione .icona{width:56%;height:56%}
.area h3{font-size:max(22px,calc(26 * var(--u)))}
.area p{font-size:max(15.5px,calc(16 * var(--u)));line-height:1.55;color:var(--testo)}
.area .freccia-link{margin-top:auto;padding-top:calc(6 * var(--u))}
.aree__nota{margin-top:calc(22 * var(--u));font-size:max(14.5px,calc(15 * var(--u)));color:var(--testo-tenue);text-align:center}

/* ---------- Microbiota: fascia verde ---------- */
.microbiota{position:relative;overflow:hidden;background:var(--crema);padding:calc(96 * var(--u)) var(--lato)}
/* home: fascia marrone, chiesta da Domenico il 30/09 */
.pagina-home .microbiota{background:#D9BFAE;color:#282828}
.pagina-home .microbiota .occhiello{color:#45482F}  /* oliva più scuro: si legge sulla sabbia (01/10) */
.pagina-home .microbiota h2{color:#282828}
.pagina-home .microbiota h2 em{color:#6E4636}
.pagina-home .microbiota__testo p{color:#282828}
.pagina-home .microbiota__mano{color:#3A2A22}
.pagina-home .lente{box-shadow:0 0 0 calc(7 * var(--u)) #FAF5F2,0 24px 60px rgba(90,50,25,.25)}
.microbiota__griglia{position:relative;display:grid;grid-template-columns:1fr calc(470 * var(--u));gap:calc(80 * var(--u));align-items:center;max-width:calc(1300 * var(--u));margin:0 auto}
.microbiota h2{margin-top:calc(14 * var(--u))}
.microbiota__testo p{margin-top:calc(20 * var(--u));font-size:max(16.5px,calc(18 * var(--u)));line-height:1.6;color:var(--testo);max-width:58ch}
.microbiota__testo p:first-of-type{margin-top:calc(28 * var(--u))}
.lente{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 calc(7 * var(--u)) #fff,0 20px 50px rgba(78,58,40,.18)}
.lente img{width:100%;height:100%;object-fit:cover}
.microbiota__mano{position:absolute;right:calc(-44 * var(--u));bottom:calc(-58 * var(--u));font-size:max(18px,calc(22 * var(--u)));transform:rotate(-8deg)}

/* ---------- Chi è ---------- */
.chi{display:grid;grid-template-columns:calc(460 * var(--u)) 1fr;gap:calc(80 * var(--u));align-items:center;max-width:calc(1240 * var(--u));margin:0 auto}
/* 01/10: la foto seduta con la pianta in un OVALE come emanuelacaorsi.com (misurato sul riferimento: 846×1116, lati dritti
   al centro, archi alti il 36%); i microbi disegnati restano, intorno all'ovale e non sotto */
.sezione--chi{overflow:hidden}
.chi__foto{position:relative}
.chi__ovale{position:relative;z-index:1;aspect-ratio:846/1116;border-radius:50% / 36%;overflow:hidden;background:#EDE8E3}
.chi__ovale img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.chi__testo h2{margin-top:calc(14 * var(--u))}
.chi__testo p{margin-top:calc(22 * var(--u));font-size:max(16.5px,calc(18 * var(--u)));line-height:1.65;color:var(--testo);max-width:56ch}
.chi__citazione{margin:calc(30 * var(--u)) 0 0;padding-left:calc(22 * var(--u));border-left:2px solid var(--verde);font-family:var(--titoli);font-style:italic;font-size:max(22px,calc(28 * var(--u)));line-height:1.25;color:var(--verde)}
.chi__citazione p{font:inherit;color:inherit;margin:0}
.chi__citazione cite{display:block;margin-top:10px;font-family:var(--testi);font-style:normal;font-size:max(13px,calc(13.5 * var(--u)));letter-spacing:.06em;color:var(--testo-tenue)}
.chi__testo .freccia-link{margin-top:calc(28 * var(--u))}

/* ---------- Come prenotare ---------- */
.passi__elenco{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(24 * var(--u));margin-top:calc(50 * var(--u));counter-reset:passo}
.passi__elenco::before{content:"";position:absolute;left:12.5%;right:12.5%;top:calc(36 * var(--u));height:1px;background:repeating-linear-gradient(90deg,var(--bordo-forte) 0 6px,transparent 6px 12px)}
.passo{position:relative;text-align:center;display:grid;justify-items:center;gap:calc(18 * var(--u))}
.passo__numero{position:relative;display:grid;place-items:center;width:calc(72 * var(--u));height:calc(72 * var(--u));min-width:58px;min-height:58px;border-radius:50%;background:var(--carta);box-shadow:var(--ombra);
  font-family:var(--titoli);font-style:italic;font-size:max(24px,calc(28 * var(--u)));color:var(--verde)}
.passo p{max-width:24ch;font-size:max(15.5px,calc(16.5 * var(--u)));line-height:1.5;color:var(--testo)}

/* ---------- Prezzi + domande ---------- */
.schede{display:grid;grid-template-columns:calc(470 * var(--u)) 1fr;gap:calc(22 * var(--u));align-items:start}
.scheda{background:var(--carta);border-radius:calc(18 * var(--u));padding:calc(40 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u));box-shadow:var(--ombra)}
.scheda .titolo-sezione{font-size:max(30px,calc(38 * var(--u)))}
.prezzi__elenco{margin-top:calc(22 * var(--u))}
.prezzi__elenco li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:calc(16 * var(--u)) 0;border-bottom:1px solid var(--bordo);font-size:max(16px,calc(17 * var(--u)))}
.prezzi__cifra{font-family:var(--titoli);font-size:max(20px,calc(22 * var(--u)));color:var(--inchiostro)}
.prezzi__nota{margin-top:calc(18 * var(--u));font-size:max(14.5px,calc(15 * var(--u)));color:var(--testo-tenue)}
.domande{display:grid;gap:calc(10 * var(--u));margin-top:calc(22 * var(--u))}
.domanda{border:1px solid var(--bordo);border-radius:calc(10 * var(--u));background:var(--crema);transition:background-color .3s ease,border-color .3s ease}
.domanda[open]{background:var(--verde-velo);border-color:#D9BFAE}
.domanda summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(16 * var(--u)) calc(20 * var(--u));cursor:pointer;list-style:none;font-weight:500;font-size:max(15.5px,calc(16.5 * var(--u)));color:var(--inchiostro)}
.domanda summary::-webkit-details-marker{display:none}
.segno{position:relative;flex:none;width:14px;height:14px}
.segno::before,.segno::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--verde);transition:transform .3s ease}
.segno::after{transform:rotate(90deg)}
.domanda[open] .segno::after{transform:rotate(0)}
.domanda__risposta{padding:0 calc(20 * var(--u)) calc(18 * var(--u));font-size:max(15.5px,calc(16 * var(--u)));line-height:1.6;color:var(--testo)}

/* ---------- Contatto (home) e chiusure ---------- */
.contatto{position:relative;overflow:hidden;background:var(--crema-3);padding:calc(96 * var(--u)) var(--lato)}
.contatto__griglia{position:relative;display:grid;grid-template-columns:1fr calc(520 * var(--u));gap:calc(80 * var(--u));align-items:center;max-width:calc(1240 * var(--u));margin:0 auto}
.contatto__sx h2{margin-top:calc(14 * var(--u))}
.contatto__sx p{margin-top:calc(22 * var(--u));font-size:max(16.5px,calc(18 * var(--u)));line-height:1.6;max-width:44ch}
.contatto__azioni{display:flex;flex-wrap:wrap;gap:calc(14 * var(--u));margin-top:calc(30 * var(--u))}
.contatto__mano{margin-top:calc(34 * var(--u));font-size:max(19px,calc(23 * var(--u)));transform:rotate(-5deg);transform-origin:left;color:#4A3E35}

/* modulo */
.modulo{position:relative;display:grid;gap:calc(12 * var(--u));background:var(--carta);border-radius:calc(18 * var(--u));padding:calc(34 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u));box-shadow:var(--ombra-su)}
.campo input,.campo textarea,.campo select{width:100%;min-height:50px;padding:12px 16px;background:#fff;border:1px solid var(--bordo-forte);border-radius:8px;font-size:16px;line-height:1.4;color:var(--inchiostro);transition:border-color .2s ease,box-shadow .2s ease}
.campo textarea{min-height:120px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#6E655E}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(138,90,70,.14)}
.campo--errore input,.campo--errore textarea{border-color:#A2472F}
.errore{margin-top:6px;font-size:14px;color:#8C3322}
.errore:empty{display:none}
.consenso{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--testo-tenue);cursor:pointer}
.consenso input{flex:none;width:19px;height:19px;min-height:0;margin-top:2px;accent-color:var(--verde)}
.consenso a{color:var(--verde-scuro)}
.modulo .pulsante{width:100%;margin-top:4px}
.modulo .aiuto{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--testo-tenue)}
.prezzi__visita{margin-top:calc(22 * var(--u))}
.modulo__esito{font-size:15px;line-height:1.5}
.modulo__esito:empty{display:none}
.modulo__esito--ok{color:var(--verde-scuro)}
.modulo__esito--no{color:#8C3322}

/* ---------- Footer ---------- */
.piede{border-top:1px solid rgba(40,40,40,.08);background:var(--terra);color:var(--crema-su-terra);padding:calc(64 * var(--u)) var(--lato) calc(90 * var(--u))}
.piede__griglia{display:grid;grid-template-columns:1.1fr 1.2fr 1.1fr 1fr;align-items:stretch;max-width:calc(1384 * var(--u));margin:0 auto}
.piede__col{padding:6px 0 10px calc(34 * var(--u));border-left:1px solid rgba(40,40,40,.14)}
.piede__col:first-child{padding-left:0;border-left:0}
.piede__marchio{display:flex;align-items:center;gap:14px}
.piede__marchio img{height:46px;width:auto;background:#FFFFFF;border-radius:50%;padding:7px}
.piede .piede__nome{font-family:var(--titoli-testo);font-size:21px;line-height:1.2;color:#282828;margin:0}
.piede p{font-size:16px;line-height:1.7}
.piede a{text-decoration:none}
.piede a:hover{text-decoration:underline;text-underline-offset:3px}
.piede__grande{font-family:var(--titoli-testo);font-size:21px!important}
.piede__piccolo{font-size:14.5px!important;opacity:.9}
.piede__legale{font-size:14.5px!important;opacity:.9}
.piede__legale a+a::before,.piede__elenco a+a::before{content:"·";display:inline-block;margin:0 8px;text-decoration:none}
.piede__elenco{font-size:15px!important;line-height:1.9!important}
.piede__col p+p{margin-top:6px}
.piede__marchio{margin-bottom:10px}
.firma{margin-top:10px;font-size:14px!important;opacity:.88}

/* ---------- WhatsApp fisso ---------- */
.wa-fisso{position:fixed;right:22px;bottom:22px;z-index:40;width:62px;height:62px;border-radius:50%;background:var(--verde);color:#FFFBF3;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(35,27,22,.22);transition:transform .25s ease,background-color .25s ease}
.wa-fisso:hover{background:var(--verde-scuro);transform:translateY(-2px)}
.wa-fisso .icona{width:31px;height:31px}

/* ---------- Avviso cookie (una riga) ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 100px 9px 18px;background:rgba(250,245,242,.97);border-top:1px solid var(--bordo);font-size:13.5px;line-height:1.35;color:var(--testo)}
.cookie a{text-decoration:underline;text-underline-offset:2px}
.cookie button{flex:none;background:var(--verde);border:0;border-radius:999px;font-size:13px;font-weight:600;line-height:1;cursor:pointer;color:#FFFBF3;padding:8px 14px}
.cookie button:hover{background:var(--verde-scuro)}
.cookie[hidden]{display:none}

/* ==========================================================================
   Pagine interne — stesso linguaggio della home
   ========================================================================== */
.pagina-testata{position:relative;overflow:hidden;background:
  radial-gradient(calc(520 * var(--u)) calc(360 * var(--u)) at 70% 40%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),var(--crema);
  padding:calc(78 * var(--u)) var(--lato) calc(70 * var(--u))}
.pagina-testata__testo{position:relative;z-index:2;max-width:calc(760 * var(--u))}
.pagina-testata h1{margin-top:calc(16 * var(--u));font-size:max(38px,calc(58 * var(--u)));line-height:1.02}
.pagina-testata__sotto{margin-top:calc(24 * var(--u));font-size:max(17px,calc(19 * var(--u)));line-height:1.5;color:#2F2824;max-width:52ch}
.pagina-testata .apertura__azioni{padding-left:0;margin-top:calc(28 * var(--u))}
.pagina-testata__figura{position:absolute;z-index:1;right:0;top:0;bottom:0;width:calc(560 * var(--u));pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.pagina-testata__figura img{width:100%;height:100%;object-fit:cover}
.pagina-testata .mano{position:absolute;z-index:3;right:calc(60 * var(--u));bottom:calc(34 * var(--u));font-size:max(17px,calc(20 * var(--u)));transform:rotate(-10deg);transform-origin:right bottom}
/* testata con ritratto (Chi sono) */
.pagina-testata--ritratto{display:grid;grid-template-columns:1fr calc(420 * var(--u));gap:calc(60 * var(--u));align-items:end;padding-bottom:0}
.pagina-testata--ritratto .pagina-testata__testo{padding-bottom:calc(70 * var(--u))}
.ritratto-piccolo{position:relative;z-index:2;height:calc(470 * var(--u));min-height:340px}
.ritratto-piccolo img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 6px 20px rgba(60,40,25,.12))}

.sezione__corpo{max-width:780px}
.sezione__corpo--largo{max-width:calc(1180 * var(--u))}
.sezione h2{font-size:max(32px,calc(42 * var(--u)));line-height:1.06}
.sezione h2+*{margin-top:calc(22 * var(--u))}
.sezione .occhiello+h2{margin-top:calc(14 * var(--u))}
.sezione p{font-size:max(16.5px,calc(17.5 * var(--u)));line-height:1.68;color:var(--testo)}
.sezione p+p{margin-top:16px}
.sezione h3{font-size:max(21px,calc(25 * var(--u)));margin-bottom:10px}
/* la vecchia fascia verde diventa la fascia chiara del mockup */
.sezione--verde{background:var(--fascia);overflow:hidden}
.due-colonne{display:grid;grid-template-columns:1fr 1fr;gap:calc(64 * var(--u));align-items:start}

/* elenco con microrganismo */
.elenco{display:grid;gap:12px}
.elenco li{position:relative;padding-left:28px;font-size:max(16.5px,calc(17.5 * var(--u)));line-height:1.6;color:var(--testo)}
.elenco li::before{content:"";position:absolute;left:3px;top:.62em;width:12px;height:7px;border-radius:5px;background:linear-gradient(#D9BFAE,#A6725D);transform:rotate(-25deg)}  /* foglia terracotta (01/10: era ancora verde) */
.elenco--card{grid-template-columns:repeat(2,1fr);gap:14px}
.elenco--card li{padding:18px 20px 18px 48px;background:var(--carta);border-radius:10px;box-shadow:var(--ombra)}
.elenco--card li::before{left:22px;top:1.55em}
.elenco strong{color:var(--inchiostro);font-weight:600}

/* tempi della visita */
.tempi{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(20 * var(--u))}
.tempo{padding:calc(28 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u));background:var(--carta);border-radius:var(--raggio-card);box-shadow:var(--ombra)}
.tempo .passo__numero{margin:0 0 18px}
.tempo h3{font-size:max(20px,calc(22 * var(--u)));margin-bottom:8px}
.tempo p{font-size:max(15px,calc(15.5 * var(--u)))!important;line-height:1.6!important}

.da-confermare{display:inline-block;padding:1px 8px;border-radius:4px;background:var(--verde-tenue);font-size:.86em;color:var(--testo-tenue);font-style:normal}

/* glossario */
.glossario{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.voce{padding:22px 24px;background:var(--carta);border-radius:10px;box-shadow:var(--ombra)}
.voce dt{font-family:var(--titoli-testo);font-size:21px;color:var(--inchiostro);margin-bottom:6px}
.voce dd{margin:0;font-size:15.5px;line-height:1.62;color:var(--testo)}

/* chiusura delle pagine interne */
.chiusura{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px;justify-content:space-between;background:var(--crema-3);padding:calc(64 * var(--u)) var(--lato)}
.chiusura>*{position:relative}
.chiusura h2{font-size:max(30px,calc(40 * var(--u)))}
.chiusura p{margin-top:10px;font-size:max(16.5px,calc(18 * var(--u)));color:var(--testo)}
.chiusura .contatto__azioni{margin-top:0}

/* Contatti: modulo completo */
.modulo--pieno{max-width:660px;padding:34px 32px}
.modulo--pieno .campo label{display:block;margin-bottom:6px;font-size:14.5px;font-weight:600;color:var(--inchiostro)}
.modulo--pieno .aiuto{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--testo-tenue)}
.scelte-visita{border:0;margin:6px 0 4px;padding:0}
.scelte-visita legend{font-size:14.5px;font-weight:600;color:var(--inchiostro);margin-bottom:8px;padding:0}
.scelte-visita label{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:8px;background:#fff;border:1px solid var(--bordo-forte);border-radius:8px;font-size:15.5px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.scelte-visita label:has(input:checked){border-color:var(--verde);background:var(--verde-velo)}
.scelte-visita input{width:18px;height:18px;min-height:0;accent-color:var(--verde)}
.dati{display:grid;gap:14px}
.dati li{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.6}
.dati .icona{width:26px;height:26px;margin-top:2px;color:var(--verde)}
.dati a{text-decoration:none;border-bottom:1px solid var(--bordo-forte)}

/* testi legali */
.legale{max-width:820px}
.legale h2{font-size:30px;margin:44px 0 14px}
.legale h3{font-size:22px;margin:26px 0 8px}
.legale p,.legale li{font-size:16.5px;line-height:1.75;color:var(--testo)}
.legale ul{list-style:disc;padding-left:22px;margin:10px 0}
.legale li+li{margin-top:6px}
.legale table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.legale th,.legale td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bordo);vertical-align:top}
.avviso-bozza{padding:14px 18px;border-radius:10px;background:var(--verde-velo);border:1px solid #D9BFAE;font-size:15px;color:var(--testo)}

/* ==========================================================================
   Movimento (poco, lento, una volta sola: la cliente non ama il movimento)
   ========================================================================== */
.js .rivela{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rivela.visibile{opacity:1;transform:none}
.js .rivela[data-ritardo="1"]{transition-delay:.12s}
.js .rivela[data-ritardo="2"]{transition-delay:.24s}
.js .rivela[data-ritardo="3"]{transition-delay:.36s}
/* l'illustrazione dell'apertura si «posa» una volta, al caricamento */
.js .apertura__illustrazione img{animation:posa 1.8s cubic-bezier(.2,.7,.2,1) both}
.js .apertura__cornice{animation:entra 1.2s .1s cubic-bezier(.2,.7,.2,1) both}
@keyframes posa{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* transizione fra le pagine: solo una dissolvenza */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

/* ==========================================================================
   Adattamenti
   ========================================================================== */
@media (max-width:1280px){
  .menu__voci{margin-right:calc(90 * var(--u))}
}
@media (max-width:1100px){
  .a-capo{display:none}
  :root{--u:.9px;--lato:36px}
  .menu__voci{gap:18px;margin-right:20px}
  .menu__voci a{font-size:14.5px}
  .menu__prenota{min-width:0;padding:0 16px}
  .marchio__nome{font-size:18px}
  /* apertura: testo sopra, poi ritratto e illustrazione */
  .apertura{min-height:0;display:flex;flex-direction:column;background:var(--crema)}
  .apertura__scena{order:-1}
  .apertura__testo{width:auto;max-width:640px;padding:48px var(--lato) 36px}
  .apertura__grande{font-size:58px}
  .apertura__sotto{font-size:18px;max-width:520px}
  .apertura__nota{font-size:16px}
  .apertura__mano{display:none}
  .apertura__scena{position:relative;inset:auto;height:440px;overflow:hidden}
  /* tablet e telefono: l'illustrazione intera e piena dietro la capsula (Domenico: «da mobile questi microbioti non si vedono») */
  .apertura__margine{display:none}
  .apertura__illustrazione{left:0;width:100%;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
  .apertura__illustrazione img{object-position:50% 45%}
  .apertura__cornice{left:calc(50% - 160px);top:26px;width:320px;height:410px}
  .apertura__luce{display:none}
  .temi__elenco{grid-template-columns:repeat(5,1fr);align-items:start;padding:18px var(--lato)}
  .tema{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 10px}
  .tema:first-child{padding-left:10px}
  .tema:not(:first-child)::before{top:14px;bottom:14px;height:auto;margin-top:0}
  .tema .icona{width:40px;height:40px}
  .tema span{font-size:14.5px}
  .tema span br{display:none}
  .approccio__immagine{position:relative;width:auto;height:380px}
  .approccio__ovale{left:auto;right:10%;top:60px;width:170px;height:220px}
  .approccio__ovale .mano{font-size:20px}
  .approccio__ovale .icona{width:22px;height:22px}
  .approccio__pannello{margin:-60px 0 0;border-radius:40px 40px 0 0;grid-template-columns:1fr;padding:40px var(--lato) 50px}
  .approccio__testo .titolo-sezione{font-size:42px}
  .approccio__testo p{font-size:17px;max-width:560px}
  .approccio__card{grid-template-columns:repeat(3,minmax(220px,1fr))}
  .scelta__pannello{grid-template-columns:1fr}
  .aree__griglia{grid-template-columns:1fr 1fr}
  .aree__griglia .area:last-child{grid-column:1/-1}
  .microbiota__griglia{grid-template-columns:1fr 340px;gap:40px}
  .microbiota__mano{position:static;margin:18px 8px 0 0;text-align:right;font-size:19px;transform:rotate(-5deg)}
  .chi{grid-template-columns:320px 1fr;gap:40px}
  .passi__elenco{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .passi__elenco::before{display:none}
  .schede{grid-template-columns:1fr}
  .contatto__griglia{grid-template-columns:1fr;gap:40px}
  .modulo{max-width:620px}
  .piede__griglia{grid-template-columns:1fr 1fr;row-gap:30px}
  .piede__col:nth-child(3){padding-left:0;border-left:0}
  .pagina-testata--ritratto{grid-template-columns:1fr 320px}
  .pagina-testata__figura{width:46%;opacity:.55}
  .tempi{grid-template-columns:repeat(2,1fr)}
  .due-colonne{grid-template-columns:1fr;gap:36px}
}
@media (max-width:900px){
  .testata{min-height:0;padding:12px 20px}
  .marchio__logo{height:46px}
  .marchio__nome{font-size:17px}
  .marchio__ruolo{font-size:9px;margin-top:3px}
  .menu__apri{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:48px;padding:0 12px;border:1px solid var(--bordo-forte);border-radius:8px;background:transparent;cursor:pointer;color:var(--inchiostro);font-size:15px;font-weight:500}
  .menu__apri .icona{width:26px;height:26px}
  .menu__prenota{order:-1;margin-right:8px;min-height:46px;min-width:0;padding:0 14px;font-size:14.5px}
  .menu__prenota .icona{display:none}
  .menu__prenota-resto{display:none}
  .menu__voci{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 20px 20px;background:var(--crema);border-bottom:1px solid var(--bordo);box-shadow:0 14px 26px rgba(58,40,25,.10)}
  .menu__voci.aperto{display:flex}
  .menu__voci a{padding:14px 2px;font-size:17px;border-bottom:1px solid var(--bordo)}
  .menu__voci a::after{display:none}
  .menu__voci li:last-child a{border-bottom:0}
  .menu__voci .menu__prenota-mobile{display:flex;margin-top:14px}
  .menu__voci .menu__prenota-mobile .pulsante{width:100%;display:flex;justify-content:center;padding:0 20px;border-bottom:0;color:#FFFFFF}
  .menu__voci .menu__prenota-mobile .pulsante:hover{color:#FFFFFF}
  .menu__voci .menu__prenota-mobile .pulsante::after{display:none}
}
@media (min-width:901px){.menu__prenota-mobile{display:none!important}}
@media (max-width:420px){
  .menu__scritta{display:none}
  .menu__apri{padding:0}
  .testata{padding:10px 16px;gap:8px}
  .marchio{gap:8px}
  .marchio__logo{height:40px}
  .marchio__nome{font-size:15.5px;white-space:nowrap}
  .marchio__nome small{font-size:.8em}
  .marchio__ruolo{display:none}
  .menu__prenota{padding:0 12px;min-height:44px;font-size:14px;margin-right:6px}
  .menu__apri{width:44px;min-width:44px;height:44px}
}
@media (max-width:370px){.marchio__logo{height:34px}.marchio__nome{font-size:14.5px}}
@media (max-width:760px){
  body{font-size:16px}
  :root{--lato:20px}
  .apertura__testo{padding:34px 20px 30px}
  .apertura h1{gap:14px}
  .apertura__grande{font-size:44px;line-height:.98;padding-left:0}
  .apertura__sotto,.apertura__azioni,.apertura__nota{padding-left:0}
  .apertura__sotto{font-size:17.5px;margin-top:20px}
  .apertura__azioni{flex-direction:column;gap:12px;margin-top:24px}
  .apertura__azioni .pulsante{width:100%;min-width:0!important}
  .apertura__nota{font-size:15.5px;margin-top:16px}
  .apertura__scena{height:400px}
  .apertura__cornice{left:calc(50% - 140px);top:22px;width:280px;height:356px}
  .apertura__illustrazione img{object-position:58% 45%}
  .temi__elenco{grid-template-columns:repeat(6,1fr);row-gap:14px;padding:20px 12px}
  .tema{grid-column:span 2;padding:6px 6px}
  .tema:nth-child(4){grid-column:2/4}
  .tema:nth-child(5){grid-column:4/6}
  .tema:not(:first-child)::before{display:none}
  .tema .icona{width:36px;height:36px}
  .tema span{font-size:13.5px;line-height:1.3}
  .approccio__immagine{height:300px}
  .approccio__ovale{right:6%;top:40px;width:150px;height:196px}
  .approccio__ovale .mano{font-size:18px}
  .approccio__pannello{margin-top:-40px;border-radius:28px 28px 0 0;padding:34px 20px 40px}
  .approccio__testo{padding-top:0}
  .approccio__testo .titolo-sezione{font-size:36px}
  .approccio__testo p{font-size:16.5px}
  .approccio__card{grid-template-columns:1fr;gap:12px}
  .approccio__card .card{flex-direction:row;align-items:stretch}
  .approccio__card .card__img{flex:none;width:118px;aspect-ratio:auto}
  .approccio__card .card__corpo{padding:14px 16px}
  .card h3{font-size:19px}
  .card p{font-size:14.5px;margin-top:6px}
  .card .freccia-link{padding-top:8px}
  .sezione,.microbiota,.contatto{padding:56px 20px}
  .titolo-sezione,.sezione h2{font-size:34px}
  .scelta__pannello{padding:28px 18px 26px;border-radius:18px}
  .scelte{grid-template-columns:1fr;gap:10px}
  .opzione{min-height:64px;padding:12px 16px;font-size:15.5px}
  .scelta__risposta{flex-direction:column;align-items:stretch;gap:16px;padding-top:22px}
  .scelta__testo{font-size:19px}
  .etichetta{align-self:flex-start}
  .scelta__risposta .pulsante{width:100%}
  .aree__griglia{grid-template-columns:1fr}
  .area{padding:24px 22px}
  .microbiota__griglia{grid-template-columns:1fr;gap:36px}
  .lente{max-width:300px;margin:0 auto}
  .microbiota__mano{position:static;margin:18px 8px 0 0;text-align:right;font-size:18px;transform:rotate(-5deg)}
  .chi{grid-template-columns:1fr;gap:30px}
  .chi__foto{max-width:340px;margin:0 auto;width:100%}
  .chi__citazione{font-size:22px}
  .passi__elenco{grid-template-columns:1fr 1fr;gap:26px 14px}
  .passo__numero{width:58px;height:58px;font-size:24px}
  .passo p{font-size:15px}
  .scheda{padding:28px 20px 24px;border-radius:16px}
  .scheda .titolo-sezione{font-size:30px}
  .domanda summary{font-size:16px;padding:14px 16px}
  .domanda__risposta{padding:0 16px 16px}
  .contatto__azioni{flex-direction:column;gap:12px}
  .contatto__azioni .pulsante{width:100%}
  .contatto__mano{font-size:20px}
  .modulo{padding:24px 18px}
  .piede{padding:48px 20px 110px}
  .piede__griglia{grid-template-columns:1fr;row-gap:22px}
  .piede__col{padding:0 0 18px;border-left:0;border-bottom:1px solid rgba(40,40,40,.12)}
  .piede__col:last-child{border-bottom:0}
  .wa-fisso{width:56px;height:56px;right:16px;bottom:16px}
  .wa-fisso .icona{width:28px;height:28px}
  .cookie{justify-content:flex-start;padding:8px 84px 8px 14px;font-size:12.5px}
  .pagina-testata{padding:40px 20px 44px}
  .pagina-testata h1{font-size:38px}
  .pagina-testata__sotto{font-size:17px}
  .pagina-testata__figura{display:none}
  .pagina-testata .mano{display:none}
  .pagina-testata--ritratto{grid-template-columns:1fr;gap:0;padding-bottom:0}
  .pagina-testata--ritratto .pagina-testata__testo{padding-bottom:24px}
  .ritratto-piccolo{height:360px}
  .elenco--card,.glossario,.tempi{grid-template-columns:1fr}
  .chiusura{padding:48px 20px}
  .chiusura h2{font-size:30px}
  .legale h2{font-size:25px}
}

@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 .rivela{opacity:1;transform:none}
  @view-transition{navigation:none}
}

/* ==========================================================================
   Tornata di modifiche del 30/09/2026 (chat WhatsApp dalle 17:54)
   ========================================================================== */

/* Microbi disegnati al posto delle immagini del microbiota («i simboli dei microbiota che si muovono ma a disegno»):
   il tratto della prima versione, ognuno galleggia piano (solo transform). Con «riduci movimento» stanno fermi. */
.microbi{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--microbi,#C3A08F)}
.microbo{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);overflow:visible;
  transform:rotate(var(--r));animation:microbo-galleggia var(--d) ease-in-out var(--t) infinite alternate}
@keyframes microbo-galleggia{from{transform:translate(0,0) rotate(var(--r))}to{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r) + var(--dr)))}}
@media (max-width:760px){.microbo--pc{display:none}}
@media (prefers-reduced-motion:reduce){.microbo{animation:none}}

/* Fascia verde sotto l'apertura: motto in maiuscolo, frase in minuscolo, pulsanti */
.motto{position:relative;overflow:hidden;background:#61654B;color:#FAF5F2;padding:calc(84 * var(--u)) var(--lato) calc(80 * var(--u));text-align:center;
  --microbi:rgba(251,241,228,.26)}
.motto__testo{position:relative;z-index:1;display:grid;justify-items:center;gap:calc(20 * var(--u));max-width:calc(940 * var(--u));margin:0 auto}
.motto__titolo{font-family:var(--titoli);font-weight:430;text-transform:uppercase;letter-spacing:.07em;font-size:max(21px,calc(33 * var(--u)));line-height:1.22;color:#FFF8EE}
.motto__frase{max-width:34em;font-size:max(17px,calc(20.5 * var(--u)));line-height:1.45;color:#F3EADB}
.motto__azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(14 * var(--u));margin-top:calc(10 * var(--u))}
.motto .pulsante--pieno{background:#FAF5F2;color:#282828;border-color:#FAF5F2}
.motto .pulsante--pieno:hover{background:#FFFFFF;border-color:#FFFFFF}
.motto .pulsante--bordo{background:transparent;color:#FBF1E4;border-color:rgba(251,241,228,.72)}
.motto .pulsante--bordo .icona{color:#FBF1E4}
.motto .pulsante--bordo:hover{background:rgba(251,241,228,.12);border-color:#FBF1E4}
.motto__nota{font-size:max(15px,calc(15.5 * var(--u)));color:#E8DFCF}
.motto :focus-visible{outline-color:#FBF1E4}
@media (max-width:760px){
  .motto{padding:54px 20px 52px}
  .motto__titolo{font-size:20px;letter-spacing:.05em}
  .motto__azioni{flex-direction:column;align-items:stretch;width:100%}
  .motto__azioni .pulsante{width:100%}
}

/* Le quattro aree: solo icona e nome (chat 18:01, «eliminare le scritte») */
.aree__griglia--quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
.area--solo-nome{align-items:center;justify-content:center;text-align:center;gap:calc(18 * var(--u));padding:calc(36 * var(--u)) calc(22 * var(--u)) calc(34 * var(--u))}
.area--solo-nome h3,.area--solo-nome .area__nome{margin:0;font-size:max(20px,calc(25 * var(--u)))}
.area--solo-nome p{margin:0}
@media (max-width:1100px){
  .aree__griglia--quattro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aree__griglia--quattro .area:last-child,.aree__griglia--quattro li:last-child{grid-column:auto}
}
@media (max-width:760px){
  .aree__griglia--quattro{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .area--solo-nome{padding:22px 12px 20px;gap:12px}
  .area--solo-nome h3,.area--solo-nome .area__nome{font-size:18px;line-height:1.2}
}

/* Lenti e sfondi disegnati */
.lente--disegno{background:radial-gradient(75% 75% at 45% 40%,#FFFFFF,#F3E7DC);--microbi:#A6725D}
.chi__foto .chi__sfondo{position:absolute;inset:-9% -18%;z-index:0;--microbi:#C3A08F}


/* ==========================================================================
   Apertura della home come emanuelacaorsi.com (30/09/2026 notte) — parte DA SOLA (apertura.js), non con lo scorrimento.
   Fondo terracotta, la capsula chiara con la sua foto sale, le parole si aprono, poi la foto si allarga a tutto schermo.
   La foto non si taglia mai: è un'immagine col muro allungato (ai lati da computer, sopra da telefono), resa con cover,
   con la foto vera sempre intera. Senza JavaScript o con «riduci movimento»: subito lo stato finale, fermo. */
/* 01/10 (verifica): l'apertura è alta ESATTAMENTE quanto lo schermo meno la testata (--h-testata, misurata nella pagina),
   così a fine sequenza la foto intera finisce sul bordo basso dello schermo e non sotto; la capsula si accorcia se lo
   schermo è basso, perché capsula + parole ci stiano sempre (--parole = altezza delle due righe + margine sotto) */
.av{--h-av:max(440px,calc(100svh - var(--h-testata,calc(100 * var(--u) + 1px))));--cap-top:calc(70 * var(--u));--parole:calc(255 * var(--u));
  --cap-h:min(64svh,calc(540 * var(--u)),calc((var(--h-av) - var(--cap-top) - var(--parole)) / .86));--cap-w:calc(var(--cap-h) * .76);
  --lato-foto:min(100vw,var(--h-av));  /* lato della foto vera a fine sequenza: larga quanto lo schermo (verticale) o alta quanto l'apertura */
  position:relative;overflow:hidden;height:var(--h-av);background:#A6725D;--microbi:rgba(250,245,242,.26)}
.av__fondo{position:absolute;inset:0;z-index:0;pointer-events:none}
.av__posto{position:absolute;left:50%;top:var(--cap-top);width:var(--cap-w);height:var(--cap-h);transform:translateX(-50%);visibility:hidden;pointer-events:none}
.av__strato{position:absolute;inset:0;z-index:1;background:#E5DED8}  /* = colore del muro della foto (allarga-foto.py) */
/* velo appena scuro in basso, solo a foto aperta: le parole bianche si leggono anche sul camice bianco (verifica 01/10) */
.av__strato::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.8s ease;
  background:linear-gradient(to top,rgba(46,28,20,.36) 0%,rgba(46,28,20,.14) 32%,rgba(46,28,20,0) 58%)}
html:not(.js) .av__strato::after,.av--velo .av__strato::after,.av--finita .av__strato::after{opacity:1}
.av__strato picture{display:block;width:100%;height:100%}
.av__foto{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%}
/* niente will-change sulla foto: su Safari (iPhone) un livello a parte dentro il ritaglio animato non si ridisegna (01/10) */
/* le parole: sulla parte bassa della capsula e, a foto aperta, sotto la mano al mento (il 61% del lato della foto dal fondo) */
.av__testo{position:relative;z-index:3;padding:max(calc(var(--cap-top) + var(--cap-h) * .86),calc(var(--h-av) - .61 * var(--lato-foto) + 12px)) var(--lato) 0;text-align:center;pointer-events:none}
.av__testo a{pointer-events:auto}
.av h1{display:grid;justify-items:center}
/* l'occhiello sta sulla foto chiara (scuro, con un alone chiaro che lo stacca dai capelli); bianco solo sul terracotta */
.av__occhiello{position:absolute;left:0;right:0;top:calc(28 * var(--u));color:#282828;text-shadow:0 0 14px rgba(250,245,242,.95),0 0 4px rgba(250,245,242,.8)}
.av--anim:not(.av--finita) .av__occhiello{color:#FFFFFF;font-weight:600;text-shadow:none}
/* schermi orizzontali: a foto aperta la testa arriva in cima → l'occhiello sta nell'angolo in alto a sinistra, sul muro (01/10) */
@media (min-aspect-ratio: 801/1000){
  html:not(.js) .av__occhiello,.av--finita .av__occhiello{left:var(--lato);right:auto;text-align:left}
}
.av__riga{display:block;padding:0 .04em .07em;font-family:var(--titoli);font-weight:500;font-size:calc(100 * var(--u));line-height:.98;
  letter-spacing:-.014em;text-transform:uppercase;color:#FFFFFF}
.av__riga--1{display:flex;justify-content:center;gap:.26em}
/* ogni parola sale dalla SUA maschera (01/10: da telefono «Unica,» si vedeva nella riga di «terapeutica,» prima di salire);
   la maschera taglia solo sotto, ai lati e sopra lascia spazio (le parole partono già spostate) */
.av__maschera{display:inline-block}
.js .av:not(.av--libero) .av__maschera{-webkit-clip-path:inset(-60% -100vw 0 -100vw);clip-path:inset(-60% -100vw 0 -100vw)}
/* l'ombra delle parole: niente mentre salgono (la maschera la tagliava a riquadri), poi arriva piano */
.av__parola{display:inline-block;text-shadow:0 2px 34px rgba(50,24,10,.42),0 1px 3px rgba(50,24,10,.18);transition:text-shadow 1.2s ease}
.js .av:not(.av--libero) .av__parola{text-shadow:none}
/* prima che parta l'animazione: nascosti solo se c'è JavaScript; se GSAP non arriva, si mostrano da soli dopo 2,5 s */
.js .av:not(.av--pronta) :is(.av__strato,.av__occhiello){opacity:0;animation:av-mostra .01s 2.5s forwards}
.js .av:not(.av--pronta) .av__parola{transform:translateY(110%);animation:av-parola .01s 2.5s forwards}
.js .av:not(.av--pronta) .av__maschera{animation:av-libera .01s 2.5s forwards}
.js .av:not(.av--pronta) .av__strato::after{animation:av-mostra .01s 2.5s forwards}
/* lo script c'è ed è in attesa della foto: il ripiego si ferma, tutto resta nascosto finché non parte l'apertura (01/10) */
.js .av.av--attesa:not(.av--pronta) :is(.av__strato,.av__occhiello,.av__parola,.av__maschera),.js .av.av--attesa:not(.av--pronta) .av__strato::after{animation:none}
@keyframes av-mostra{to{opacity:1;transform:none}}
@keyframes av-parola{to{opacity:1;transform:none;text-shadow:0 2px 34px rgba(50,24,10,.42),0 1px 3px rgba(50,24,10,.18)}}
@keyframes av-libera{to{-webkit-clip-path:none;clip-path:none}}
@media (max-width:1100px){
  .av{--cap-top:64px;--parole:calc(13.2vw + 40px);--cap-h:min(52svh,420px,calc((var(--h-av) - var(--cap-top) - var(--parole)) / .86))}
  .av__riga{font-size:clamp(40px,6.6vw,76px)}
}
@media (max-width:760px){
  .av{--cap-top:52px;--parole:calc(32.3vw + 50px);--cap-h:min(54svh,430px,calc(var(--h-av) - var(--cap-top) - 14px - var(--parole)))}
  /* da telefono le parole stanno subito sotto la capsula; a fine sequenza la foto (intera, larga quanto lo schermo) sta in
     basso e le parole cadono sul busto, sotto la mano al mento (61% del lato della foto dal fondo), mai sul viso */
  .av__testo{padding-top:max(calc(var(--cap-top) + var(--cap-h) + 14px),calc(var(--h-av) - .61 * var(--lato-foto) + 12px))}
  .av__occhiello{top:18px;font-size:11.5px;letter-spacing:.2em}
  .av__riga{font-size:clamp(34px,10.4vw,48px)}
  .av__riga--1{display:block}
  .av__riga--1 .av__maschera{display:block}
}
@media (prefers-reduced-motion:reduce){
  .js .av:not(.av--pronta) :is(.av__strato,.av__occhiello),.js .av:not(.av--pronta) .av__parola{opacity:1;transform:none;animation:none}
  .js .av:not(.av--pronta) .av__maschera{-webkit-clip-path:none;clip-path:none;animation:none}
}


/* ==========================================================================
   Controlli online, sul tablet (01/10/2026) — «voglio che anche al nostro sito ci sia tipo tablet, vedi te».
   Sul riferimento è un video della newsletter; qui è disegnato in HTML (nitido, leggero) e mostra un controllo online
   in videochiamata con la dottoressa. Quando il tablet si vede: «in collegamento…», poi si collega e parte il tempo
   (main.js). Si animano solo opacity e transform. Senza JavaScript o con «riduci movimento»: subito collegato.
   ========================================================================== */
.online__griglia{display:grid;grid-template-columns:minmax(0,1fr) calc(540 * var(--u));gap:calc(80 * var(--u));align-items:center;max-width:calc(1180 * var(--u));margin:0 auto}
.online__testo p{margin-top:calc(22 * var(--u));font-size:max(16.5px,calc(18 * var(--u)));line-height:1.65;color:var(--testo);max-width:50ch}
.online__elenco{list-style:none;margin:calc(26 * var(--u)) 0 calc(34 * var(--u));padding:0;display:grid;gap:12px}
.online__elenco li{display:flex;gap:12px;align-items:flex-start;font-size:max(16px,calc(17.5 * var(--u)));line-height:1.45;color:var(--testo)}
.online__elenco strong{font-weight:600}
.online__elenco .icona{flex:none;width:22px;height:22px;margin-top:1px;color:var(--verde)}
.online__scena{position:relative;display:flex;justify-content:center;padding:calc(20 * var(--u)) 0}
/* 01/10: da telefono i microbi intorno al tablet uscivano di 1–3 px dallo schermo → su iPhone tutta la pagina scivolava di lato */
.online{overflow:hidden}
html{overflow-x:clip}
.online__microbi{position:absolute;inset:-4% -6%;--microbi:#BFA592}

.tablet{--tw:calc(430 * var(--u));position:relative;z-index:1;width:var(--tw);padding:calc(var(--tw) * .042);border-radius:calc(var(--tw) * .085);
  background:#161617;box-shadow:0 0 0 1.5px #45464a,0 0 0 3px #0d0d0e,0 34px 70px rgba(52,38,26,.26),0 8px 18px rgba(52,38,26,.14)}
.tablet::before{content:"";position:absolute;left:50%;top:calc(var(--tw) * .021);width:calc(var(--tw) * .014);height:calc(var(--tw) * .014);
  transform:translate(-50%,-50%);border-radius:50%;background:#26282e;box-shadow:inset 0 0 0 1px #3b404c}
.tablet__schermo{position:relative;aspect-ratio:3/4;border-radius:calc(var(--tw) * .046);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 85% at 68% 16%,#F8F1EA,#E8DBCF 56%,#D5C2B3);font-family:var(--testi);color:#fff;line-height:1.2}

/* il video della dottoressa */
.chiamata__video{position:absolute;inset:0;transition:opacity 1s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.chiamata__video img{position:absolute;left:50%;bottom:0;height:91%;width:auto;max-width:none;transform:translateX(-50%)}

/* in collegamento */
.chiamata__attesa{display:none}
.js .chiamata__attesa{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--tw) * .022);
  text-align:center;background:radial-gradient(90% 60% at 50% 38%,#A6725D,#7C5140);transition:opacity .8s ease,visibility 0s linear .8s}
.chiamata__avatar{position:relative;width:32%;aspect-ratio:1;margin-bottom:calc(var(--tw) * .03)}
.chiamata__avatar img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.chiamata__avatar i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.55);animation:chiamata-onda 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.chiamata__avatar i+i{animation-delay:1.2s}
@keyframes chiamata-onda{from{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}
.chiamata__chi{font-family:var(--titoli);font-size:calc(var(--tw) * .056);font-weight:400}
.chiamata__stato-attesa{font-size:calc(var(--tw) * .031);letter-spacing:.02em;opacity:.8}

/* sopra al video */
.chiamata__alto{position:absolute;left:4.5%;right:4.5%;top:4%;z-index:2;display:flex;justify-content:space-between;align-items:center}
.chiamata__pillola,.chiamata__tempo,.chiamata__nome{display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:99px;
  background:rgba(38,26,19,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:calc(var(--tw) * .03);font-weight:500;letter-spacing:.01em}
.chiamata__tempo{font-variant-numeric:tabular-nums}
.chiamata__punto{width:.6em;height:.6em;border-radius:50%;background:#8FD19A;animation:chiamata-punto 1.6s ease-in-out infinite}
@keyframes chiamata-punto{50%{opacity:.35}}
.chiamata__tu{position:absolute;right:4.5%;top:12.5%;z-index:2;width:20%;aspect-ratio:3/4;border-radius:calc(var(--tw) * .024);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;color:rgba(255,255,255,.92);
  background:linear-gradient(165deg,#C2AE9F,#98806F);box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 8px 18px rgba(40,28,20,.2)}
.chiamata__tu svg{width:46%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.chiamata__tu span{font-size:calc(var(--tw) * .026)}
.chiamata__nome{position:absolute;left:4.5%;bottom:18%;z-index:2;border-radius:calc(var(--tw) * .02)}
.chiamata__voce{display:inline-flex;gap:2px;align-items:center;height:1em}
.chiamata__voce i{width:2px;height:100%;border-radius:2px;background:#fff;transform:scaleY(.35);animation:chiamata-voce 1.1s ease-in-out infinite}
.chiamata__voce i:nth-child(2){animation-delay:-.35s;animation-duration:.9s}
.chiamata__voce i:nth-child(3){animation-delay:-.7s;animation-duration:1.3s}
@keyframes chiamata-voce{0%,100%{transform:scaleY(.35)}45%{transform:scaleY(1)}70%{transform:scaleY(.55)}}
.chiamata__comandi{position:absolute;left:0;right:0;bottom:4.5%;z-index:2;width:max-content;margin:0 auto;display:flex;gap:calc(var(--tw) * .03);
  padding:calc(var(--tw) * .018);border-radius:99px;background:rgba(38,26,19,.36);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chiamata__tasto{width:calc(var(--tw) * .1);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2)}
.chiamata__tasto svg{width:48%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chiamata__tasto--chiudi{background:#D65A4E}
.chiamata__tasto--chiudi svg{fill:#fff;stroke:none}

/* prima del collegamento (solo con JavaScript) */
.chiamata__alto,.chiamata__tu,.chiamata__nome,.chiamata__comandi{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .tablet:not(.tablet--collegata) .chiamata__video{opacity:0;transform:scale(1.07)}
.js .tablet:not(.tablet--collegata) :is(.chiamata__alto,.chiamata__tu,.chiamata__nome,.chiamata__comandi){opacity:0;transform:translateY(10px)}
.tablet--collegata .chiamata__alto{transition-delay:.5s}
.tablet--collegata .chiamata__tu{transition-delay:.7s}
.tablet--collegata .chiamata__nome{transition-delay:.9s}
.tablet--collegata .chiamata__comandi{transition-delay:1.05s}
.js .tablet--collegata .chiamata__attesa{opacity:0;visibility:hidden}
.tablet--collegata .chiamata__avatar i{animation:none}
.tablet:not(.tablet--collegata) .chiamata__voce i,.tablet--ferma .chiamata__voce i,.tablet--ferma .chiamata__punto,.tablet--ferma .chiamata__avatar i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.chiamata__avatar i,.chiamata__voce i,.chiamata__punto{animation:none}}

@media (max-width:1100px){
  .online__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .tablet{--tw:min(360px,40vw)}
}
@media (max-width:760px){
  .online__griglia{grid-template-columns:1fr;gap:34px}
  .online__scena{padding:10px 0 6px}
  .tablet{--tw:min(310px,78vw)}
  .online__testo .pulsante{width:100%;justify-content:center}
}

/* home: fra «Prezzi e domande» e il piede (tutti e due pesca) il contatto torna crema, così i blocchi si staccano (01/10) */
.pagina-home .contatto{background:var(--crema)}


/* ==========================================================================
   Numeri grandi come emanuelacaorsi.com (01/10: «voglio un effetto tipo questo», al posto dei riquadri vuoti coi microbi:
   «così vuoti non ne voglio vedere da nessuna parte»). Misurato sul riferimento: numero enorme di un tono appena più chiaro
   del fondo (--cifra), spostato a destra, e il titolo che si appoggia sulla sua parte bassa. In più (nostro): quando la lista
   entra nello schermo i numeri salgono dalla loro maschera, uno dopo l'altro (solo transform, una volta).
   Usato in: home «Microbiota», Interventi «Analisi del microbiota», La visita «Cosa portare».
   ========================================================================== */
.numeri{--cifra:#FAF5F2;list-style:none;margin:calc(64 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(44 * var(--u)) calc(56 * var(--u))}
.numeri--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(40 * var(--u)) calc(40 * var(--u))}
.numero{position:relative;min-width:0;margin:0}
.numero__maschera{display:block;overflow:hidden;margin-left:calc(92 * var(--u));font-family:var(--titoli);font-weight:400;font-size:calc(220 * var(--u));
  line-height:1;letter-spacing:-.035em;color:var(--cifra);user-select:none;pointer-events:none}
.numeri--4 .numero__maschera{margin-left:calc(64 * var(--u));font-size:calc(180 * var(--u))}
.numero__cifra{display:block;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js .numeri:not(.visibile) .numero__cifra{transform:translateY(110%)}
.numero:nth-child(2) .numero__cifra{transition-delay:.14s}
.numero:nth-child(3) .numero__cifra{transition-delay:.28s}
.numero:nth-child(4) .numero__cifra{transition-delay:.42s}
.numero__titolo{position:relative;margin:calc(-96 * var(--u)) 0 0;font-family:var(--titoli);font-weight:400;font-size:max(24px,calc(31 * var(--u)));
  line-height:1.1;letter-spacing:-.01em;color:var(--inchiostro)}
.numeri--4 .numero__titolo{margin-top:calc(-78 * var(--u));font-size:max(22px,calc(27 * var(--u)))}
.numero p{margin-top:calc(14 * var(--u));font-size:max(16px,calc(17.5 * var(--u)));line-height:1.55;color:var(--testo);max-width:34ch}
@media (prefers-reduced-motion:reduce){.js .numeri:not(.visibile) .numero__cifra{transform:none}.numero__cifra{transition:none}}
@media (max-width:1100px){
  .numeri--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 36px}
}
@media (max-width:760px){
  .numeri,.numeri--4{grid-template-columns:1fr;gap:26px;margin-top:30px}
  .numero__maschera,.numeri--4 .numero__maschera{margin-left:58px;font-size:128px}
  .numero__titolo,.numeri--4 .numero__titolo{margin-top:-56px;font-size:24px}
  .numero p{margin-top:8px;font-size:16px}
}

/* home § 6 · Microbiota: titolo e introduzione in alto, sotto i tre passi (01/10, al posto della lente) */
.microbiota__contenitore{position:relative;max-width:calc(1300 * var(--u));margin:0 auto}
.microbiota__testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(80 * var(--u));align-items:end}
.microbiota__testa h2{margin-top:calc(14 * var(--u))}
.microbiota .microbiota__intro{margin:0;font-size:max(17px,calc(19.5 * var(--u)));line-height:1.6;max-width:44ch}
.pagina-home .microbiota .microbiota__intro,.pagina-home .microbiota .numero p{color:#282828}
.pagina-home .microbiota .numeri{--cifra:#E6D3C6}
.microbiota__link{margin-top:calc(44 * var(--u))}
.pagina-home .microbiota .freccia-link{color:#6E4636}
@media (max-width:760px){
  .microbiota__testa{grid-template-columns:1fr;gap:16px}
  .microbiota__link{margin-top:30px}
}

/* tono dei numeri grandi secondo il fondo della sezione (01/10): sul pesca il crema del riferimento, sul crema un pesca appena più scuro */
.passi .numeri{--cifra:#F0E4DA}
.sezione--crema-2 .numeri,.sezione--crema-3 .numeri{--cifra:#FAF5F2}
.sezione--fascia .numeri{--cifra:#F7F6EE}
.sezione-testa--centro+.numeri{margin-top:calc(56 * var(--u))}

/* 01/10 (telefono) · riserva per i browser che non conoscono svh (iPhone con iOS prima del 15.4): senza, l'altezza dell'apertura e della
   capsula diventavano non valide. Qui gli stessi calcoli con vh; dove svh esiste valgono quelli sopra. */
@supports not (height:100svh){
  .av{--h-av:max(440px,calc(100vh - var(--h-testata,calc(100 * var(--u) + 1px))));
    --cap-h:min(64vh,calc(540 * var(--u)),calc((var(--h-av) - var(--cap-top) - var(--parole)) / .86))}
  @media (max-width:1100px){.av{--cap-h:min(52vh,420px,calc((var(--h-av) - var(--cap-top) - var(--parole)) / .86))}}
  @media (max-width:760px){.av{--cap-h:min(54vh,430px,calc(var(--h-av) - var(--cap-top) - 14px - var(--parole)))}}
}


/* ==========================================================================
   TORNATA 2 (01/10/2026) · parti comuni
   ========================================================================== */
/* «inserire questo riquadro»: il modulo completo di Contatti anche in home, Chi sono e Interventi ({{MODULO:…}} in componi.py) */
/* il modulo completo (stesse regole di contatti.css, senza .pagina-contatti) */
.modulo--pieno{max-width:none;gap:calc(20 * var(--u));padding:calc(40 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u))}
.modulo__coppia{display:grid;grid-template-columns:1fr 1fr;gap:calc(20 * var(--u)) calc(18 * var(--u))}
.modulo--pieno .campo label .facoltativo{font-weight:400;color:var(--testo-tenue)}
.modulo--pieno .campo textarea{height:128px}
.modulo--pieno .aiuto{font-size:14px}

/* «Che visita vuoi fare?»: tre scelte come le frasi di «Da dove parti?» in home */
.modulo--pieno .scelte-visita{margin:0}
.modulo--pieno .scelte-visita legend{margin-bottom:10px}
.scelte-visita__righe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(10 * var(--u))}
.modulo--pieno .campo .scelte-visita label{display:flex;align-items:center;gap:12px;min-height:calc(62 * var(--u));margin:0;padding:10px calc(16 * var(--u));
  background:var(--crema);border:1px solid var(--bordo);border-radius:calc(12 * var(--u));font-size:max(15px,calc(15.5 * var(--u)));font-weight:400;line-height:1.3;color:var(--testo);cursor:pointer;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.modulo--pieno .campo .scelte-visita label:hover{border-color:var(--bordo-forte);background:var(--carta)}
.modulo--pieno .campo .scelte-visita label:has(input:checked){background:var(--verde-velo);border-color:var(--verde);box-shadow:0 0 0 1px var(--verde) inset;color:var(--inchiostro)}
.modulo--pieno .campo .scelte-visita input[type="radio"]{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;
  border:1.5px solid var(--bordo-forte);border-radius:50%;background:#fff;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}
.modulo--pieno .campo .scelte-visita input[type="radio"]:checked{border-color:var(--verde);background:radial-gradient(circle,var(--verde) 0 5px,#fff 5.5px)}
.modulo--pieno .campo--errore .scelte-visita label{border-color:#A2472F}

/* consenso */
.modulo--pieno .campo .consenso{display:flex;align-items:flex-start;gap:12px;margin:0;font-size:14.5px;font-weight:400;line-height:1.5;color:var(--testo-tenue)}
.modulo--pieno .campo .consenso input{flex:none;width:20px;height:20px;min-height:0;margin:1px 0 0;padding:0;border:0;background:none;accent-color:var(--verde)}

.modulo--pieno .pulsante{min-height:max(52px,calc(56 * var(--u)));margin-top:0}
.modulo__senza-js{font-size:15px;line-height:1.55;color:var(--testo)}
.modulo__senza-js a{text-decoration:underline;text-underline-offset:2px}

/* «Manca qualche dato» in cima al modulo (pagine/contatti.js) — stesso rosso degli errori di style.css */
.modulo__avviso{margin:0;padding:10px 14px;border-left:2px solid #A2472F;border-radius:0 8px 8px 0;background:rgba(162,71,47,.06);font-size:15px;line-height:1.5;color:#8C3322}
.modulo__avviso:empty{display:none}
/* «La richiesta non è partita…» sopra il pulsante, con WhatsApp e numero cliccabili (pagine/contatti.js) */
.modulo--pieno .modulo__esito--no{padding:10px 14px;border-left:2px solid #A2472F;border-radius:0 8px 8px 0;background:rgba(162,71,47,.06);color:#8C3322}
.modulo--pieno .modulo__esito--no a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.modulo--pieno .modulo__esito--no a[href^="tel:"]{white-space:nowrap}
.modulo--pieno[id]{scroll-margin-top:24px}
@media (max-width:760px){
  .modulo--pieno{gap:16px;padding:24px 18px 22px}
  .modulo__coppia{grid-template-columns:1fr;gap:16px}
  .scelte-visita__righe{grid-template-columns:1fr;gap:8px}
  .modulo--pieno .campo .scelte-visita label{min-height:54px;padding:10px 14px}
}

/* «La parte sotto, quella con i contatti e partita Iva la farei marrone scuro, lo stesso marrone di quando mi si apre l'immagine»:
   il fondo dell'apertura #A6725D, testi bianchi pieni (niente trasparenze: sul marrone devono leggersi) */
.piede{border-top:0;background:#A6725D;color:#FFFFFF}
.piede .piede__nome{color:#FFFFFF}
.piede__piccolo,.piede__legale,.firma{opacity:1}
.piede__piccolo,.piede__legale{font-size:15px!important}
.piede__col{border-left-color:rgba(255,255,255,.3)}
.piede a:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
@media (max-width:760px){.piede__col{border-bottom-color:rgba(255,255,255,.25)}}
/* il tondo di WhatsApp ha lo stesso marrone del piede: un bordo chiaro lo stacca */
.wa-fisso{box-shadow:0 0 0 2px rgba(255,255,255,.92),0 10px 26px rgba(60,34,22,.28)}