/* LifeRe — font serviti dal nostro dominio: nessuna chiamata a fonts.gstatic.com,
   quindi nessun trasferimento dell'IP dei visitatori verso terzi. */

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ce093b341d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/e310b55a7f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ce093b341d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/e310b55a7f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ce093b341d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/e310b55a7f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ce093b341d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/e310b55a7f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ce093b341d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/e310b55a7f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ce093b341d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/e310b55a7f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/054c266fbb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/a0d054c4af.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/054c266fbb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/a0d054c4af.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/054c266fbb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/a0d054c4af.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/054c266fbb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/a0d054c4af.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================= design system ================= */
/* LifeRE Ricerca — design system (stessa falsariga di LifeRE.Store) */
:root{
  --ink:#0a2540; --ink-2:#2c3e52; --ink-soft:#5a6b7c;
  --paper:#ffffff; --paper-2:#f7f8fa; --paper-3:#eef1f5;
  --line:#e4e8ee; --line-2:#d6dbe3;
  --gold:#c4972f; --gold-2:#e3bd6a; --gold-3:#f2dca3; --gold-deep:#9a6f1f;
  --d1:#183459; --d2:#921635; --d3:#9a6f1f; --d4:#1f5f7a; --d5:#185e3a; --d6:#5c3267; --d7:#4d5b0f; --d8:#2c3e52;
  --shadow-sm:0 2px 8px rgba(10,37,64,.06);
  --shadow:0 14px 40px -18px rgba(10,37,64,.22);
  --shadow-lg:0 30px 80px -28px rgba(10,37,64,.32);
  --r-sm:8px; --r:16px; --r-lg:26px;
  --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.has-modal{overflow:hidden}
body{margin:0;font-family:'Manrope',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.display{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0}
a{color:var(--gold-deep);text-decoration:none}
a:hover{color:var(--gold)}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:26px;height:1.5px;background:linear-gradient(90deg,var(--gold),transparent)}
.lead{font-size:clamp(18px,2vw,21px);color:var(--ink-2);line-height:1.65}
.tm{font-size:.62em;vertical-align:super;letter-spacing:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:100px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#3a2a05;box-shadow:0 10px 26px -10px rgba(196,151,47,.7)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(196,151,47,.8);color:#3a2a05}
.btn-ghost{border:1.5px solid var(--line-2);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px);color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:#fff}
.btn-light{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.28);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-light:hover{background:rgba(255,255,255,.18);transform:translateY(-3px);color:#fff}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:74px;display:flex;align-items:center;transition:background .4s,box-shadow .4s,height .35s}
.nav.scrolled{background:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);box-shadow:0 1px 0 var(--line),0 8px 30px -22px rgba(10,37,64,.4);height:64px}
.nav .wrap{display:flex;align-items:center;gap:24px;width:100%}
.nav-brand{display:flex;align-items:center;gap:12px;flex:none;color:var(--ink)}
.nav-brand:hover{color:var(--ink)}
.nav-logo{height:26px;width:auto}
.nav-brand span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-left:12px;border-left:1px solid var(--line-2)}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:14px}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink-2);position:relative;padding:6px 0;white-space:nowrap;transition:color .2s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:10px 20px;font-size:14px}
.link-back{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink-2);white-space:nowrap}
.link-back:hover{color:var(--gold-deep)}
.nav-burger{display:none;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line-2);margin-left:auto;align-items:center;justify-content:center}
.nav-burger span{width:18px;height:2px;background:var(--ink);position:relative;display:block}
.nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}
.mobile-menu{position:fixed;inset:0;z-index:55;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:40px;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .4s}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:600;padding:8px 0;color:var(--ink)}
.mobile-menu .mm-actions{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.mobile-menu .btn{justify-content:center}
.mm-close{position:absolute;top:22px;right:24px;font-size:30px;color:var(--ink);width:44px;height:44px}

/* hero */
.hero{position:relative;padding:140px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 78% 40%,rgba(196,151,47,.11),transparent 70%),radial-gradient(50% 60% at 10% 6%,rgba(24,52,89,.06),transparent 70%)}
.hero-grid-lines{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 75%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy{max-width:620px}
.hero h1{font-size:clamp(33px,4.7vw,57px);margin:22px 0 22px;letter-spacing:-.03em}
.hero h1 .accent{display:inline-block;font-size:1.45em;line-height:1.05;letter-spacing:-.035em;background:linear-gradient(120deg,var(--gold-deep),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(16px,1.6vw,18.5px);color:var(--ink-2);max-width:560px}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-meta{display:flex;gap:30px;margin-top:42px;flex-wrap:wrap}
.hero-meta .m{display:flex;flex-direction:column;gap:2px}
.hero-meta .m b{font-family:'Space Grotesk',sans-serif;font-size:26px;color:var(--ink)}
.hero-meta .m span{font-size:13px;color:var(--ink-soft)}

/* toroide hero */
.toroid-stage{position:relative;width:100%;aspect-ratio:1/1;max-width:540px;margin-left:auto}
.toroid-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.toroid-ring{position:absolute;inset:2%;border-radius:50%;border:1px dashed rgba(196,151,47,.4);animation:spin 70s linear infinite}
.toroid-ring.r2{inset:-6%;border-style:solid;border-color:rgba(196,151,47,.13);animation-duration:110s;animation-direction:reverse}
.toroid-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22%;aspect-ratio:1/1;border-radius:50%;z-index:1;background-size:cover;background-position:center;box-shadow:0 0 55px 8px rgba(196,151,47,.34),inset 0 0 26px rgba(0,0,0,.45);animation:breathe 6s ease-in-out infinite}
.toroid-axis{position:absolute;left:50%;top:4%;bottom:4%;width:1.5px;transform:translateX(-50%);z-index:1;background:linear-gradient(180deg,transparent,rgba(196,151,47,.55),rgba(196,151,47,.15));}
.axis-cap{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:3;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);background:rgba(255,255,255,.86);padding:4px 10px;border-radius:100px;border:1px solid rgba(196,151,47,.3);white-space:nowrap}
.axis-cap.top{top:1%}.axis-cap.bot{top:99%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}

/* sections */
.section{position:relative;padding:104px 0;scroll-margin-top:74px}
.section.alt{background:var(--paper-2)}
.section.dark{background:var(--ink);color:#fff}
.section-head{max-width:780px;margin-bottom:52px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(28px,3.6vw,44px);margin:16px 0 18px}
.section-head p{font-size:clamp(16px,1.6vw,18px);color:var(--ink-2)}
.section.dark .section-head p{color:rgba(255,255,255,.72)}
.section.dark .eyebrow{color:var(--gold-2)}

/* manifesto */
.manifesto{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.manifesto .big{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(21px,2.5vw,29px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.manifesto .big em{font-style:normal;color:var(--gold-deep)}
.manifesto .note{margin-top:26px;color:var(--ink-soft);font-size:15px}
.pillars{display:flex;flex-direction:column;gap:14px}
.pillar{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.pillar:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:transparent}
.pillar .pn{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--gold);font-size:15px;flex:none;width:34px}
.pillar h4{font-size:17px;margin-bottom:4px}
.pillar p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* stati del toroide */
.states{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:12px}
.state{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px 30px;background:var(--paper);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.state:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.state .st-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 13px;border-radius:100px;color:#fff}
.state.entro .st-tag{background:var(--d2)}
.state.sintro .st-tag{background:var(--d5)}
.state h3{font-size:clamp(22px,2.6vw,28px);margin:18px 0 12px}
.state p{margin:0;color:var(--ink-2);font-size:15.5px}
.state .st-viz{margin:26px 0 6px;height:170px;display:flex;align-items:center;justify-content:center}
.state .st-viz svg{width:100%;height:100%;overflow:visible}
.flow-entro path{animation:dashmove 2.2s linear infinite}
.flow-sintro path{animation:dashmove 5s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-100}}

/* attrattore */
.attractor{display:grid;grid-template-columns:1fr .82fr;gap:52px;align-items:center}
.attr-viz{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:26px 22px 18px;box-shadow:var(--shadow-sm)}
.attr-viz svg{width:100%;height:auto;display:block;overflow:visible}
.attr-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.attr-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.attr-copy p{color:var(--ink-2)}
.attr-copy p+p{margin-top:16px}
.mini-defs{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.mini-def{border-left:2px solid var(--gold);padding-left:18px}
.mini-def h4{font-size:17px;margin-bottom:6px}
.mini-def p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.exit-chip{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:9px 18px;border-radius:100px;background:rgba(196,151,47,.1);border:1px solid rgba(196,151,47,.3);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--gold-deep)}

/* ruota 8 dinamiche */
.wheel-layout{display:grid;grid-template-columns:1fr;gap:26px;justify-items:center}
.wheel-stage{position:relative;width:min(620px,92vw);aspect-ratio:1/1;margin:0 auto}
.wheel-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.wheel-center-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1/1;border-radius:50%;background-size:cover;background-position:center;z-index:5;box-shadow:0 0 50px 6px rgba(196,151,47,.4),inset 0 0 26px rgba(0,0,0,.45)}
.wheel-focus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;min-height:74px;padding:14px 26px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);max-width:min(560px,92vw)}
.wheel-focus b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(17px,2.2vw,21px);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;line-height:1.2}
.wheel-focus span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.wedge{cursor:pointer}
.wedge .seg{transition:filter .35s,transform .4s var(--ease);transform-box:fill-box;transform-origin:center}
.wedge:hover .seg{filter:brightness(1.12)}
.wedge .wnum{font-family:'Space Grotesk',sans-serif;font-weight:700;fill:#fff;opacity:.62}
.wedge .wlab{font-family:'Space Grotesk',sans-serif;font-weight:600;fill:#fff;letter-spacing:.02em}
.wheel-hint{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.wheel-hint .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:breathe 2.4s ease-in-out infinite}

/* dinamiche dettaglio */
.dyn{position:relative;padding:88px 0;scroll-margin-top:74px;border-top:1px solid var(--line)}
.dyn.alt{background:var(--paper-2)}
.dyn-head{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.dyn-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.dyn-kicker{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:12.5px}
.dyn h3{font-size:clamp(26px,3.4vw,40px);margin:8px 0 18px}
.dyn .accent-bar{width:64px;height:4px;border-radius:4px;margin-bottom:24px}
.dyn-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.dyn-copy p{color:var(--ink-2)}
.dyn-copy p+p{margin-top:16px}
.dyn-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.dyn-list li{padding-left:20px;position:relative;font-size:15.5px;color:var(--ink-2)}
.dyn-list li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.dyn-list b{color:var(--ink)}
.dyn-aside{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:30px 30px;box-shadow:var(--shadow-sm)}
.dyn-aside h5{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;font-weight:600}
.dyn-aside p{margin:0;font-size:15px;color:var(--ink-2)}
.dyn-aside p+p{margin-top:12px}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.tag{font-size:13px;font-weight:600;padding:7px 14px;border-radius:100px;border:1px solid var(--line-2);color:var(--ink-2)}
.nota{display:flex;gap:14px;align-items:flex-start;margin-top:30px;padding:18px 22px;border-radius:var(--r);background:rgba(196,151,47,.07);border:1px solid rgba(196,151,47,.25)}
.nota .nota-ic{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#3a2a05;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px}
.nota p{margin:0;font-size:14.5px;color:var(--ink-2)}
.nota b{color:var(--gold-deep)}

/* flusso operativo */
.flow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.fstep{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;transition:transform .35s var(--ease),box-shadow .35s}
.fstep:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fstep .fs-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--gold-deep)}
.fstep h4{font-size:18px}
.fstep p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* dispositivi duo + sinergia */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.dev{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.dev:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.dev .dv-viz{height:220px;display:flex;align-items:center;justify-content:center;background:var(--paper-2);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.dev .dv-viz svg{width:150px;height:150px;overflow:visible}
.dev .dv-body{padding:26px 28px 30px}
.dev .dv-role{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:12px;color:#fff}
.dev h4{font-size:23px;margin-bottom:10px}
.dev p{margin:0;font-size:15px;color:var(--ink-2)}
.dev ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dev ul li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}
.dev ul li::before{content:'';flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:currentColor;opacity:.6}
.synergy{margin-top:30px;border-radius:var(--r-lg);border:1px solid rgba(196,151,47,.3);background:linear-gradient(120deg,rgba(196,151,47,.09),rgba(196,151,47,.03));padding:42px 44px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.syn-eq{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,5vw,58px);letter-spacing:-.03em;background:linear-gradient(150deg,var(--gold-deep),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.synergy h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:10px}
.synergy p{margin:0;color:var(--ink-2);font-size:15.5px}

/* mappa cosmica */
.cosmo{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.chain{display:flex;flex-direction:column;gap:0}
.node{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:rgba(255,255,255,.04);padding:16px 20px;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.node:hover{background:rgba(255,255,255,.09);border-color:rgba(196,151,47,.45);transform:translateX(5px)}
.node b{display:block;font-family:'Space Grotesk',sans-serif;font-size:15.5px;letter-spacing:.01em;color:#fff}
.node span{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:3px}
.node.hi{border-color:rgba(196,151,47,.5);background:rgba(196,151,47,.1)}
.node.earth b{color:var(--gold-2)}
.link-v{width:1.5px;height:20px;margin-left:26px;background:linear-gradient(180deg,rgba(196,151,47,.6),rgba(196,151,47,.2))}
.forces{display:flex;flex-direction:column;gap:18px}
.force{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:26px 28px;background:rgba(255,255,255,.03)}
.force .f-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.force h4{font-size:19px;color:#fff}
.force .f-val{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--gold-2);white-space:nowrap}
.force p{margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.68)}
.drift{margin-top:8px;border-radius:var(--r-lg);border:1px solid rgba(196,151,47,.35);background:rgba(196,151,47,.09);padding:24px 28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.drift .dv{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,4vw,42px);color:var(--gold-2);line-height:1}
.drift p{margin:0;font-size:14.5px;color:rgba(255,255,255,.75);max-width:420px}
.entrain{margin-top:34px;color:rgba(255,255,255,.75);font-size:15.5px;max-width:820px}
.entrain b{color:var(--gold-2)}

/* operatore livelli */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.level{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;background:var(--paper);transition:transform .4s var(--ease),box-shadow .4s}
.level:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.level .lv-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--d6);width:42px;height:42px;border-radius:50%;border:2px solid var(--d6);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.level h4{font-size:19px;margin-bottom:10px}
.level p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* timeline sperimentazione */
.timeline{position:relative;margin-top:48px}
.timeline::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--line))}
.timeline-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tl-item{position:relative}
.tl-dot{width:18px;height:18px;border-radius:50%;background:var(--gold);border:4px solid var(--paper);box-shadow:0 0 0 2px var(--gold);position:relative;z-index:2;margin-bottom:26px}
.tl-item.future .tl-dot{background:var(--paper);box-shadow:0 0 0 2px var(--line-2)}
.tl-phase{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.tl-item.future .tl-phase{color:var(--ink-soft)}
.tl-item h4{font-size:18px;margin:8px 0 10px}
.tl-item p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.section.alt .tl-dot{border-color:var(--paper-2)}
.section.alt .tl-item.future .tl-dot{background:var(--paper-2)}

/* premessa / trasparenza */
.premise{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.pcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:32px 32px}
.pcard h4{font-size:20px;margin-bottom:12px}
.pcard p{margin:0;color:var(--ink-2);font-size:15.5px}
.pcard p+p{margin-top:12px}
.pcard.warn{border-color:rgba(146,22,53,.25);background:rgba(146,22,53,.04)}
.pcard.warn h4{color:var(--d2)}

/* form candidatura */
.apply{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.apply-copy p{color:rgba(255,255,255,.72)}
.apply-copy p+p{margin-top:16px}
.apply-copy ul{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.apply-copy ul li{display:flex;gap:11px;font-size:15px;color:rgba(255,255,255,.8)}
.apply-copy ul li::before{content:'';flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--gold-2)}
.form-card{background:var(--paper);border-radius:var(--r-lg);padding:38px 38px 34px;box-shadow:var(--shadow-lg);color:var(--ink)}
.form-card h3{font-size:24px;margin-bottom:8px}
.form-card .fsub{color:var(--ink-soft);font-size:15px;margin:0 0 26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:12px;font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:98px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,151,47,.16)}
.chipset{display:flex;flex-wrap:wrap;gap:9px}
.chipset label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);border:1.5px solid var(--line-2);border-radius:100px;padding:8px 14px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;margin:0}
.chipset input{position:absolute;opacity:0;width:0;height:0}
.chipset label:has(input:checked){border-color:var(--gold);background:rgba(196,151,47,.1);color:var(--gold-deep)}
.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 4px;font-size:13px;color:var(--ink-soft)}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--gold);flex:none}
.form-card .btn{width:100%;justify-content:center;margin-top:12px}
.form-ok{display:none;text-align:center;padding:18px 6px}
.form-ok .ok-ic{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#3a2a05;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-ok .ok-ic svg{width:26px;height:26px}
/* A invio riuscito il modulo sparisce e resta il riquadro di conferma. La
   classe la mette il server (c'è un flash di successo), non uno script: prima
   era JavaScript a fingerlo, e il modulo non spediva niente. */
.form-card.inviata form{display:none}
.form-card.inviata .form-ok{display:block}
.form-card .nascosto{display:none}

/* footer */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:70px 0 36px;border-top:1px solid rgba(255,255,255,.08)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo{height:24px;margin-bottom:18px}
.footer-brand p{font-size:14.5px;max-width:360px;margin:0}
.footer-col h5{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:600}
.footer-col a{display:block;font-size:14.5px;padding:7px 0;color:rgba(255,255,255,.7);transition:color .2s,padding-left .2s}
.footer-col a:hover{color:#fff;padding-left:5px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px;flex-wrap:wrap}
.footer-bottom .legal{display:flex;gap:24px;flex-wrap:wrap}
.footer-bottom a{font-size:13px;color:rgba(255,255,255,.6)}
.footer-bottom a:hover{color:#fff}
.footer-bottom .copy{font-size:13px;color:rgba(255,255,255,.45)}
.disclaimer{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.42);max-width:900px;line-height:1.6}

/* ===== landing commerciale ===== */
.lp-hero h1{font-size:clamp(36px,5.4vw,66px)}
.lp-trust{display:flex;align-items:center;gap:10px;margin-top:34px;font-size:13.5px;color:var(--ink-soft)}
.lp-trust .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;animation:breathe 2.4s ease-in-out infinite}
.lp-band{background:var(--ink);color:#fff;padding:52px 0}
.lp-band-row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.lp-stat b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.03em;background:linear-gradient(150deg,var(--gold-3),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-stat>span{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.68);max-width:200px}
.lp-stat b span{display:inline;font:inherit;color:inherit;margin:0;max-width:none;background:inherit;-webkit-background-clip:text;background-clip:text}
.lp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.lp-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:30px 28px 32px;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.lp-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent}
.lp-ic{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#3a2a05;background:linear-gradient(135deg,var(--gold-2),var(--gold));margin-bottom:20px}
.lp-card h3{font-size:20px;margin-bottom:10px}
.lp-card p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lp-step{position:relative;padding:24px 22px 26px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.lp-step .ls-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.lp-step h4{font-size:18px;margin:10px 0 8px}
.lp-step p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.lp-years{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.lp-year{border-radius:var(--r-lg);padding:30px 30px 32px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold)}
.lp-year b{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;color:var(--gold-deep);line-height:1}
.lp-year h4{font-size:19px;margin:14px 0 8px}
.lp-year p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.lp-more{margin-top:34px;border-radius:var(--r-lg);border:1px solid rgba(196,151,47,.3);background:linear-gradient(120deg,rgba(196,151,47,.1),rgba(196,151,47,.03));padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.lp-more h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:8px}
.lp-more p{margin:0;color:var(--ink-2);font-size:15px;max-width:620px}
@media (max-width:1060px){.lp-band-row,.lp-cards,.lp-steps{grid-template-columns:1fr 1fr}.lp-years{grid-template-columns:1fr}}
@media (max-width:620px){.lp-band-row,.lp-cards,.lp-steps{grid-template-columns:1fr}.lp-more{padding:28px 24px}}

/* reveal */

/* --- layout alleggerito --- */
.footer-top{grid-template-columns:1fr}
.footer-brand p{max-width:620px}
.login-card{max-width:460px;margin:0 auto}
.login-card .btn{width:100%;justify-content:center;margin-top:8px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* --- login --- */
.login-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.login-card{max-width:none;margin:0}
.login-card .btn{width:100%;justify-content:center;margin-top:8px}
.forgot{display:block;margin-top:16px;text-align:center;font-size:13.5px;color:var(--ink-soft);transition:color .3s}
.forgot:hover{color:var(--gold-deep)}
.login-copy h2{margin-top:16px}
.login-copy>p{color:var(--ink-2);margin-top:18px;max-width:560px}
.login-reqs{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;max-width:560px}
.login-reqs li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-2)}
.login-reqs li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:linear-gradient(120deg,var(--gold-deep),var(--gold))}
.login-note{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft)}
.login-note a{color:var(--gold-deep);font-weight:600;border-bottom:1px solid rgba(196,151,47,.45);transition:border-color .3s}
.login-note a:hover{border-bottom-color:var(--gold-deep)}
@media (max-width:960px){.login-grid{grid-template-columns:1fr;gap:40px}}

/* --- riga introduttiva hero --- */
.hero-lead{grid-column:1/-1;text-align:center;padding-bottom:18px;margin-bottom:0;border-bottom:1px solid var(--line)}
.hero-lead .eyebrow{letter-spacing:.12em;line-height:1.7;font-size:15px;gap:14px}
.hero-lead .eyebrow::after{content:'';width:26px;height:1.5px;flex:none;background:linear-gradient(270deg,var(--gold),transparent)}
.hero-lead .eyebrow::before{flex:none}
.hero-copy>h1:first-child{margin-top:10px}
.hero-actions .btn-gold{width:min(100%,440px);justify-content:center;padding:21px 30px;font-size:20px;letter-spacing:-.01em;color:#fff;background:linear-gradient(135deg,#b0842a,#8a6118);box-shadow:0 12px 30px -12px rgba(138,97,24,.75)}
.hero-actions .btn-gold:hover{background:linear-gradient(135deg,#bd8f2e,#7d5614)}
@media (max-width:520px){.hero-actions .btn-gold{width:100%;padding:16px 24px}}
@media (max-width:900px){.hero-lead{padding-bottom:16px}.hero-copy>h1:first-child{margin-top:16px}}

/* --- sperimentazione --- */
#sperimentazione .section-head .lead{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(19px,2.2vw,24px);line-height:1.3;letter-spacing:-.02em;color:var(--gold-deep);margin-top:18px}
.sper-intro{max-width:760px;margin-top:-18px}
.sper-intro p{color:var(--ink-2);margin:0 0 16px}
.sper-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sper-stats .s b{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:-.03em;background:linear-gradient(120deg,var(--gold-deep),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.sper-stats .s span{display:block;margin-top:10px;font-size:14px;color:var(--ink-soft);max-width:260px}
.sper-block{margin-top:64px}
.sper-block>h3{max-width:860px;font-size:clamp(24px,3vw,34px);line-height:1.15;margin:0 0 20px}
.sper-p{color:var(--ink-2);max-width:760px;margin:0}
.sper-claim{margin:32px 0 0;padding-left:22px;border-left:3px solid var(--gold);font-size:clamp(17px,1.9vw,19.5px);line-height:1.6;color:var(--ink);max-width:820px}
.pcard .pc-num{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--gold-deep);margin-bottom:10px}
.phases{margin-top:34px}
.phase{display:grid;grid-template-columns:200px 1fr;gap:44px;padding:36px 0;border-top:1px solid var(--line)}
.phase:last-child{border-bottom:1px solid var(--line)}
.ph-side{display:flex;flex-direction:column;gap:8px}
.ph-num{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:700;line-height:1;letter-spacing:-.03em;background:linear-gradient(120deg,var(--gold-deep),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-when{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.ph-body{max-width:760px}
.ph-body h4{font-size:clamp(19px,2.1vw,23px);margin:0 0 14px}
.ph-body p{color:var(--ink-2);margin:0 0 14px;font-size:16px}
.ph-list{list-style:none;margin:4px 0 18px;padding:0;display:grid;gap:9px}
.ph-list li{position:relative;padding-left:22px;color:var(--ink-2);font-size:15.5px}
.ph-list li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:linear-gradient(120deg,var(--gold-deep),var(--gold))}
.ph-note{color:var(--ink)!important;font-weight:600;margin-bottom:0!important}
@media (max-width:900px){.sper-stats{grid-template-columns:1fr;gap:22px}.phase{grid-template-columns:1fr;gap:14px;padding:30px 0}.ph-side{flex-direction:row;align-items:baseline;gap:14px}.sper-block{margin-top:48px}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.reveal-x{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-x.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none !important}.reveal,.reveal-x{opacity:1 !important;transform:none !important}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:1060px){
  .nav-links{display:none}.nav-burger{display:flex}.nav-cta{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .toroid-stage{order:-1;max-width:390px;margin:0 auto}
  .manifesto,.attractor,.cosmo,.apply{grid-template-columns:1fr;gap:34px}
  .states,.duo,.premise{grid-template-columns:1fr}
  .dyn-grid{grid-template-columns:1fr;gap:30px}
  .flow-steps,.levels{grid-template-columns:1fr 1fr}
  .synergy{grid-template-columns:1fr;gap:20px;padding:32px 28px}
  .timeline::before{display:none}
  .timeline-row{grid-template-columns:1fr 1fr;gap:34px 26px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .section,.dyn{padding:70px 0}
  .hero{padding:118px 0 60px}
  .flow-steps,.levels,.timeline-row,.footer-top{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .form-card{padding:28px 24px 26px}
  .dyn-num{width:44px;height:44px;font-size:16px}
  .hero-meta{gap:20px}
}

/* ==========================================================================
   Piattaforma — messaggi, accesso, verifica in due passaggi, console.
   Usa gli stessi token del sito pubblico: la parte riservata deve sembrare
   lo stesso prodotto, non un backoffice preso altrove.
   ========================================================================== */

.notice{padding:13px 18px;border-radius:var(--r-sm);font-size:15px;margin:0 0 16px;border:1px solid transparent;line-height:1.5}
.notice-ok{background:#eef7f1;border-color:#c6e3d2;color:#185e3a}
.notice-err{background:#fdeef1;border-color:#f2ccd6;color:#921635}
.notice-warn{background:#fdf6e8;border-color:#f0dfb6;color:#7a5510}
.notice-info{background:#eef3f9;border-color:#cfdcec;color:#183459}

.field-err{display:block;margin-top:6px;font-size:13.5px;color:#921635}

/* ---------- schermate di autenticazione ---------- */
.auth-body{min-height:100vh;background:linear-gradient(170deg,var(--paper-2),var(--paper-3));display:flex;align-items:center;justify-content:center;padding:32px 20px}
.auth-shell{width:100%;max-width:452px}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 38px 34px;box-shadow:var(--shadow)}
.auth-brand{display:block;margin-bottom:28px}
.auth-brand img{height:34px;width:auto}
.auth-title{font-size:27px;margin-bottom:8px}
.auth-sub{color:var(--ink-soft);font-size:15px;line-height:1.6;margin-bottom:26px}
.auth-form .field{margin-bottom:18px}
.auth-form label{display:block;font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.auth-form input{width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);transition:border-color .2s}
.auth-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,151,47,.14)}
.auth-submit{width:100%;justify-content:center;margin-top:6px}
.auth-alt{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.auth-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:13.5px;color:var(--ink-soft)}
.auth-foot a{color:var(--ink-soft)}
.auth-foot a:hover{color:var(--gold-deep)}

.code-input{letter-spacing:.42em;font-family:'Space Grotesk',monospace;font-size:22px !important;text-align:center}

.setup-steps{margin:0 0 22px;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.75}
.setup-steps li{margin-bottom:10px}
.secret{display:block;margin-top:8px;padding:12px 14px;background:var(--paper-3);border-radius:var(--r-sm);font-family:ui-monospace,monospace;font-size:16px;letter-spacing:.12em;color:var(--ink);word-break:break-all}
.setup-uri{margin-bottom:24px;font-size:14px;color:var(--ink-soft)}
.setup-uri summary{cursor:pointer;color:var(--gold-deep);font-weight:600}
.uri-link{display:block;word-break:break-all;font-family:ui-monospace,monospace;font-size:12px;margin-top:8px}

.recovery-codes{list-style:none;padding:20px;margin:0 0 24px;background:var(--paper-3);border-radius:var(--r);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.recovery-codes li{font-family:ui-monospace,monospace;font-size:15px;letter-spacing:.06em;color:var(--ink)}

/* ---------- console amministrativa ---------- */
.admin-body{background:var(--paper-2);min-height:100vh}
.admin-bar{background:var(--ink);position:sticky;top:0;z-index:50}
.admin-bar-in{max-width:1240px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:28px}
.admin-brand{display:flex;align-items:center;gap:11px;color:#fff}
.admin-brand img{height:26px;width:auto;filter:brightness(0) invert(1)}
.admin-brand span{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.admin-nav{display:flex;gap:22px;flex:1}
.admin-nav a{color:rgba(255,255,255,.72);font-size:14.5px;font-weight:500}
.admin-nav a:hover{color:#fff}
.admin-user{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.78);font-size:14px}
.btn-sm{padding:7px 15px;font-size:13.5px}
.admin-user .btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.admin-user .btn-ghost:hover{border-color:#fff;color:#fff}

.admin-main{max-width:1240px;margin:0 auto;padding:34px 28px 70px}
.admin-h1{font-size:29px;margin-bottom:24px}
.admin-alerts{margin-bottom:26px}

.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px;margin-bottom:30px}
.metric{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.metric-n{display:block;font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:600;color:var(--ink);line-height:1.1}
.metric-l{display:block;margin-top:7px;font-size:13.5px;color:var(--ink-soft)}

.admin-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;margin-bottom:22px}
.admin-panel h2{font-size:18px;margin-bottom:10px}
.admin-note{color:var(--ink-soft);font-size:14.5px;line-height:1.65;margin-bottom:16px}
.admin-table{width:100%;border-collapse:collapse;font-size:14.5px}
.admin-table th{text-align:left;font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:0 0 10px;border-bottom:1px solid var(--line)}
.admin-table td{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.admin-table tr:last-child td{border-bottom:none}

.footer-linkbtn{color:rgba(255,255,255,.62);font-size:inherit;font-family:inherit;padding:0;text-align:left}
.footer-linkbtn:hover{color:var(--gold-2)}

.cms-content{font-size:17px;line-height:1.75;color:var(--ink-2)}
.cms-content h2{font-size:24px;margin:32px 0 14px}
.cms-content h3{font-size:19px;margin:26px 0 10px}
.cms-content p{margin-bottom:16px}
.cms-content ul,.cms-content ol{margin:0 0 18px 22px}
.cms-content li{margin-bottom:8px}

@media (max-width:640px){
  .auth-card{padding:32px 24px 28px}
  .recovery-codes{grid-template-columns:1fr}
  .admin-nav{display:none}
}

/* pagina di installazione */
.install-state{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:14.5px}
.install-state td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.install-state td:first-child{color:var(--ink-soft);width:52%}
.install-state tr:last-child td{border-bottom:none}
.install-detail{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--ink-soft);word-break:break-word;background:var(--paper-3);padding:12px;border-radius:var(--r-sm)}
.field-hint{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.notice code{font-family:ui-monospace,monospace;font-size:.92em;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px}
.nav-logout{display:inline}
.notice-list{margin:8px 0 0 18px;padding:0}
.notice-list li{margin-bottom:4px;line-height:1.5}

/* ==========================================================================
   Area del professionista.
   Deliberatamente diversa dalla console amministrativa: stessi colori e
   stessi caratteri del sito pubblico, perché il terapeuta è la persona che
   il sito racconta, non un operatore di backoffice.
   ========================================================================== */

.pro-body{background:var(--paper-2);min-height:100vh;display:flex;flex-direction:column}

.pro-bar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.pro-bar-in{max-width:1180px;margin:0 auto;padding:0 28px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.pro-brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
.pro-brand:hover{color:var(--ink)}
.pro-brand img{height:26px;width:auto}
.pro-brand span{font-family:'Space Grotesk',sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);border-left:1px solid var(--line-2);padding-left:13px}
.pro-user{display:flex;align-items:center;gap:14px}
.pro-nome{font-size:14.5px;color:var(--ink-2);font-weight:500}
.pro-stato{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;padding:5px 12px;border-radius:100px;white-space:nowrap}
.pro-stato-ok{background:#eef7f1;color:#185e3a}
.pro-stato-attesa{background:#fdf6e8;color:#7a5510}
.pro-stato-no{background:#fdeef1;color:#921635}

.pro-nav{border-top:1px solid var(--line);background:var(--paper)}
.pro-nav-in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pro-nav-in::-webkit-scrollbar{display:none}
.pro-nav a{padding:14px 16px;font-size:14.5px;color:var(--ink-soft);white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.pro-nav a:hover{color:var(--ink)}
.pro-nav a.attiva{color:var(--gold-deep);border-bottom-color:var(--gold);font-weight:600}

.pro-main{max-width:1180px;width:100%;margin:0 auto;padding:34px 28px 60px;flex:1}
/* La testata di ogni pagina dell'area: a sinistra occhiello + titolo, a destra
   l'azione della pagina, alla stessa altezza del titolo.

   Il `display:flex` mancava, e senza di lui i bottoni cadevano sotto al titolo
   attaccati al bordo. Si vede che c'era: `.sch-testa` più in basso imposta
   `align-items:flex-start`, che su un blocco non significa niente — una regola
   rimasta orfana della sua compagna.

   `flex-end` allinea il bottone al fondo del blocco del titolo, cioè alla riga
   dell'h1. Su schermo stretto il blocco va a capo e il `gap` gli lascia aria,
   invece di incollarlo al titolo. */
.pro-head{
  /* Di quanto il titolo scende sotto il bordo della testata: l'occhiello
     (una riga) più il margine sopra l'h1. L'azione a destra scende dello
     stesso tanto, così resta sulla riga del titolo ANCHE quando sotto c'è un
     sottotitolo — allineandola al fondo del blocco, in quelle pagine
     scivolava trentaquattro pixel più giù. Se cambia il corpo dell'occhiello
     o il margine di .pro-h1 va cambiato anche questo: c'è una prova che
     confronta le due altezze su ogni pagina dell'area. */
  --salto-testata:39px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px 24px;flex-wrap:wrap;margin-bottom:26px
}
.pro-head>*{min-width:0}
/* L'azione non si restringe e non si allarga: la sua misura è il suo testo. */
.pro-head>:not(:first-child){flex:none;margin-top:var(--salto-testata)}
/* Su schermo stretto non c'è spazio per due colonne: il bottone finirebbe
   accanto all'occhiello, che è la riga sbagliata. Si mette in colonna, sotto
   tutto il blocco del titolo, e l'aria gliela dà il gap. */
@media (max-width:700px){
  .pro-head{--salto-testata:0px;flex-direction:column;align-items:stretch}
  .pro-head>:not(:first-child){align-self:flex-start}
}
.pro-h1{font-size:clamp(26px,3.2vw,34px);margin:10px 0 0}
.pro-lead{margin-top:12px;max-width:680px;font-size:16.5px}

.metric-link{display:block;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.metric-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line-2);color:inherit}

.pro-colonne{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}

.pro-wallet{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pro-wallet-n{display:block;font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:600;color:var(--ink);line-height:1.15}
.pro-wallet-attesa{color:var(--ink-soft)}

.pro-scorciatoie{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.pro-scorciatoie a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);transition:border-color .2s,transform .25s var(--ease)}
.pro-scorciatoie a:hover{border-color:var(--gold-2);transform:translateY(-2px)}
.pro-scorciatoie strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink);margin-bottom:3px}
.pro-scorciatoie span{font-size:13.5px;color:var(--ink-soft);line-height:1.5}

.pro-costruzione{position:relative}
.pro-badge{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);background:#fdf6e8;padding:5px 12px;border-radius:100px;margin-bottom:14px}
.pro-elenco{margin:0 0 4px;padding-left:20px;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.pro-elenco li{margin-bottom:9px}
.pro-nota{margin:18px 0 0;padding:14px 18px;background:var(--paper-3);border-left:3px solid var(--gold-2);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.pro-torna{margin-top:8px;font-size:14.5px}

.pro-foot{border-top:1px solid var(--line);background:var(--paper)}
.pro-foot-in{max-width:1180px;margin:0 auto;padding:20px 28px;display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ink-soft)}
.pro-foot a{color:var(--ink-soft)}
.pro-foot a:hover{color:var(--gold-deep)}

.notice a{font-weight:600;white-space:nowrap}

@media (max-width:860px){
  .pro-colonne{grid-template-columns:1fr}
  .pro-bar-in{height:auto;padding:14px 20px;flex-wrap:wrap}
  .pro-main{padding:24px 20px 48px}
  .pro-nome{display:none}
}

/* Registro dell'aggiornamento: testo monospaziato, scorrevole, mai a capo
   forzato in mezzo a un percorso. */
.deploy-log{margin:0 0 18px;padding:14px 16px;background:#f7f5f1;border:1px solid #e6e0d6;border-radius:10px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#4a4237;max-height:340px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}


/* ===========================================================================
   Area professionista · il menu

   Le sezioni sono otto. Su uno schermo da 390px una barra orizzontale ne mostra
   quattro: le altre quattro, per chi guarda, non esistono. Da tablet in giù il
   menu diventa quindi un pannello che si apre, dove ci stanno tutte insieme.

   La barra orizzontale resta da 861px in su, dove le voci ci stanno davvero.
   =========================================================================== */

/* Il bottone appare solo se lo script che apre il pannello è vivo: senza,
   sarebbe un bottone che non fa niente. La classe la mette lo script. */
.pro-menu-btn{display:none}

.pro-nav{position:relative}

/* Sfumature ai bordi della barra: dicono che oltre c'è dell'altro, e si
   accendono solo quando dell'altro c'è. Le classi le mette lo script. */
.pro-nav::before,
.pro-nav::after{
  content:'';position:absolute;top:0;bottom:1px;width:42px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .18s ease-out
}
.pro-nav::before{left:0;background:linear-gradient(90deg,#fff 15%,rgba(255,255,255,0))}
.pro-nav::after{right:0;background:linear-gradient(270deg,#fff 15%,rgba(255,255,255,0))}
.pro-nav.altro-sx::before,
.pro-nav.altro-dx::after{opacity:1}

/* --- il pannello ---------------------------------------------------------
   Sempre nel DOM, anche chiuso: così può scorrere via invece di sparire. Sopra
   860px è tolto del tutto, perché lì il menu è la barra. */

.pro-velo{
  position:fixed;inset:0;z-index:90;background:rgba(10,37,64,.42);
  opacity:0;transition:opacity .26s var(--ease);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)
}
.pro-velo.aperto{opacity:1}

.pro-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:91;
  width:min(330px,86vw);
  background:var(--paper);border-left:1px solid var(--line);
  box-shadow:-18px 0 44px rgba(10,37,64,.14);
  display:flex;flex-direction:column;
  transform:translateX(101%);
  transition:transform .26s var(--ease);
  /* Su iPhone la barra di sistema in basso coprirebbe l'ultima voce. */
  padding-bottom:env(safe-area-inset-bottom)
}
.pro-menu.aperto{transform:none}

.pro-menu-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 20px 18px;border-bottom:1px solid var(--line)
}
.pro-menu-top strong{
  display:block;font-family:'Space Grotesk',sans-serif;font-size:16px;
  color:var(--ink);margin-bottom:8px
}
.pro-menu-chiudi{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;background:var(--paper);
  color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent
}
.pro-menu-chiudi svg{width:18px;height:18px}
.pro-menu-chiudi:hover{border-color:var(--gold-2);color:var(--gold-deep)}

.pro-menu-voci{
  flex:1;overflow-y:auto;padding:10px 12px;
  display:flex;flex-direction:column;gap:2px
}
.pro-menu-voci a{
  display:flex;align-items:center;min-height:50px;padding:0 14px;
  border-radius:var(--r-sm);font-size:16px;color:var(--ink-2);
  -webkit-tap-highlight-color:transparent
}
.pro-menu-voci a:hover{background:var(--paper-2);color:var(--ink)}
.pro-menu-voci a.attiva{
  background:#fdf6e8;color:var(--gold-deep);font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold)
}

.pro-menu-fondo{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-top:1px solid var(--line);font-size:14.5px
}
.pro-menu-fondo a{color:var(--ink-soft)}
.pro-menu-fondo a:hover{color:var(--gold-deep)}

/* Con il pannello aperto la pagina sotto non deve scorrere. */
body.pro-bloccato{overflow:hidden}

@media (min-width:861px){
  /* Da qui in su il menu è la barra: pannello e velo non servono. */
  .pro-velo,.pro-menu{display:none !important}
}

@media (max-width:860px){
  /* La barra orizzontale sparisce solo se il pannello esiste davvero: la
     classe su <html> la mette lo script. Se lo script non gira — errore,
     rete, browser antico — resta la barra scorrevole, che è peggio ma
     funziona. Senza questa condizione un guasto allo script lascerebbe il
     telefono senza alcun modo di cambiare sezione. */
  html.pro-menu-attivo .pro-nav{display:none}
  html.pro-menu-attivo .pro-esci-barra{display:none}   /* Esci sta nel pannello */

  .pro-main{padding:24px 18px 48px}
  .pro-nav-in{padding:0 16px}
  .pro-nav a{padding:15px 13px;font-size:14px;min-height:46px;
             display:flex;align-items:center}

  html.pro-menu-attivo .pro-menu-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 14px 9px 12px;min-height:42px;
    border:1.5px solid var(--line-2);border-radius:100px;
    background:var(--paper);color:var(--ink);cursor:pointer;
    font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;
    -webkit-tap-highlight-color:transparent
  }
  .pro-menu-btn svg{width:19px;height:19px}
  .pro-menu-btn[aria-expanded="true"]{border-color:var(--gold-2);color:var(--gold-deep)}
}

@media (max-width:560px){
  /* "Area professionista" accanto al logo è una didascalia: costa una riga
     intera e non dice niente che il pannello non dica meglio. */
  .pro-brand span{display:none}
  .pro-bar-in{padding:12px 16px;gap:10px;flex-wrap:nowrap}
  .pro-brand img{height:22px}
  .pro-user{gap:9px;flex:0 0 auto}
  .pro-stato{font-size:10.5px;padding:5px 10px;letter-spacing:.04em}
  .pro-foot-in{padding:16px;gap:12px}
}

@media (max-width:430px){
  /* Sotto questa soglia lo stato per esteso, il logo e il bottone non ci
     stanno insieme. Lo stato non sparisce: si sposta in cima al pannello,
     dove c'è spazio per scriverlo per intero. */
  .pro-bar-in .pro-stato{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pro-menu,.pro-velo{transition:none}
}

/* --- Console · pagina di prova dell'invio email -------------------------- */

.prova-griglia{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.prova-griglia form{border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 22px;background:var(--paper-2)}
.prova-t{font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink);margin:0 0 8px}
.prova-griglia .field{margin:14px 0 16px}
.prova-griglia .admin-note{margin-bottom:16px}
.prova-griglia button[disabled]{opacity:.45;cursor:not-allowed}

.esito h2{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.esito-ms{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.esito-titolo{font-size:16.5px;color:var(--ink);margin:0 0 8px;font-weight:600}
.esito-ok{border-left:3px solid var(--d5)}
.esito-no{border-left:3px solid var(--d2)}
.esito-no .esito-titolo{color:var(--d2)}
/* Qui la trascrizione è il contenuto, non un dettaglio: ci sta tutta. */
.esito .deploy-log{max-height:560px}
.esito-ok .esito-titolo{color:var(--d5)}

/* I sintomi in grassetto e la causa sotto: si scorre cercando il proprio
   sintomo, non si legge dall'inizio. */
.diagnosi{margin:0}
.diagnosi dt{font-weight:600;color:var(--ink);font-size:15px;margin-top:16px}
.diagnosi dt:first-child{margin-top:0}
.diagnosi dd{margin:5px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.65}

@media (max-width:760px){
  .prova-griglia{grid-template-columns:1fr;gap:18px}
  .esito h2{flex-direction:column;gap:2px}
}

/* ===========================================================================
   Area professionista · compilazione del profilo

   Cinque riquadri che si salvano uno per uno. La forma segue quella scelta:
   ogni blocco è visibilmente separato e ha il suo bottone, così si capisce
   che salvarne uno non tocca gli altri.
   =========================================================================== */

/* I cinque riquadri sono richiudibili: chiusi fanno da indice della pagina,
   e ognuno dice a che punto è e cosa contiene senza doverlo aprire. */
.prof-blocco{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:14px
}
.prof-blocco[open]{margin-bottom:20px}
.prof-corpo{padding:0 26px 28px}
.prof-blocco h2{font-size:19px;margin:0}
.prof-sub{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 20px;max-width:64ch}

/* --- l'intestazione di un riquadro --------------------------------------- */
.prof-testa{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 26px;cursor:pointer;list-style:none;border-radius:var(--r)
}
.prof-testa::-webkit-details-marker{display:none}
.prof-testa:hover{background:var(--paper-2)}
.prof-blocco[open] .prof-testa{border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.prof-testa-testo{display:flex;flex-direction:column;gap:4px;min-width:0}
.prof-riassunto{
  font-size:14px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* La freccia che dice «si apre». Ruota, così è chiaro anche da fermi. */
.prof-testa::after{
  content:'';flex:none;width:9px;height:9px;margin-left:-4px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .2s var(--ease)
}
.prof-blocco[open] .prof-testa::after{transform:rotate(225deg)}

.prof-pillola{
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;padding:5px 12px;border-radius:100px;white-space:nowrap;
  margin-left:auto
}
.prof-pillola-ok{background:#eef7f1;color:#185e3a}
.prof-pillola-attesa{background:#fdf6e8;color:#7a5510}
/* Vuoto ma facoltativo: grigio, non giallo. Un riquadro che nessuno pretende
   non deve avere lo stesso colore di uno che blocca la verifica. */
.prof-pillola-neutro{background:var(--paper-3);color:var(--ink-soft)}
/* Manca qualcosa di NECESSARIO: rosso, non giallo. Il giallo diceva «in
   attesa» — che è il contrario di «tocca a te». */
.prof-pillola-manca{background:#fdeef1;color:var(--d2)}
.prof-blocco-manca > .prof-testa h2{color:var(--d2)}
.prof-blocco-manca > .prof-testa::after{border-color:var(--d2)}

/* Il campo che manca alla verifica, dentro il riquadro aperto.
   Il rosso sul titolo dice dove andare; qui dice che cosa scrivere. Etichetta,
   bordo e nota insieme: il solo bordo rosso, su un campo vuoto, si confonde
   con un errore di validazione appena preso. */
.field-serve > label{color:var(--d2)}
.field-serve input,.field-serve select,.field-serve textarea{
  border-color:rgba(146,22,53,.45);background:#fffbfc
}
.field-serve input:focus,.field-serve select:focus,.field-serve textarea:focus{
  border-color:var(--d2);box-shadow:0 0 0 3px rgba(146,22,53,.14)
}
.campo-serve{
  display:block;margin-top:6px;font-size:13px;line-height:1.5;
  color:var(--d2);font-weight:600
}
/* Il campo che ha superato il controllo. Il verde arriva insieme al
   messaggio: un bordo rosso sotto la frase «torna» si contraddirebbe. */
.field-ok input,.field-ok select,.field-ok textarea{
  border-color:rgba(24,94,58,.45);background:#fbfefc
}
.field-ok input:focus{border-color:#185e3a;box-shadow:0 0 0 3px rgba(24,94,58,.14)}
.field-ok > label{color:var(--ink-2)}
.campo-ok{
  display:block;margin-top:6px;font-size:13px;line-height:1.5;
  color:#185e3a;font-weight:600
}

.prof-extra{
  font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;
  padding:10px 14px;background:var(--paper-2);border-radius:var(--r-sm)
}

.prof-riga{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prof-riga-3{grid-template-columns:1fr 1fr 1fr}

/* --- il punto, in cima ---------------------------------------------------
   Sta sopra tutto e non è un riquadro come gli altri: è la risposta alla
   domanda con cui il terapeuta apre questa pagina — a che punto sono. */
.prof-punto{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:22px 24px;margin-bottom:22px
}
.prof-punto-testa p{margin:10px 0 0;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:66ch}

/* La barra conta solo i requisiti della verifica: arriva in fondo davvero. */
.prof-avanzamento{margin-top:18px}
.prof-barra{height:7px;border-radius:100px;background:var(--paper-3);overflow:hidden}
.prof-barra span{
  display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transition:width .4s var(--ease)
}
.prof-conto{margin:9px 0 0;font-size:14.5px;color:var(--ink-soft)}
.prof-conto strong{color:var(--ink)}

.prof-requisiti{
  list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 24px
}
.prof-requisiti li{display:flex;align-items:center;gap:9px;font-size:14.5px;line-height:1.45}
.prof-requisiti svg{flex:none}
.prof-req-ok{color:var(--ink-soft)}
.prof-req-ok svg{color:#2e7d4f}
.prof-req-no{color:var(--ink)}
.prof-req-no svg{color:var(--gold)}
.prof-req-no a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-2);text-underline-offset:3px}
.prof-req-no a:hover{color:var(--gold-deep)}
.prof-motivo{
  padding:12px 14px;background:#fdeef1;border-radius:var(--r-sm);
  color:var(--d2);font-size:14.5px
}

.prof-manca{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.prof-manca-t{margin:0 0 8px;font-weight:600;color:var(--ink)}
.prof-manca ul{margin:0;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.8}
.prof-manca a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}

.prof-pronto{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.prof-pronto p{margin:0 0 14px;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:66ch}

/* --- gli elenchi già dichiarati ------------------------------------------ */
.prof-vuoto{color:var(--ink-soft);font-size:14.5px;font-style:italic;margin:0 0 18px}

.prof-tabella{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:18px}
.prof-tabella th{
  text-align:left;font-family:'Space Grotesk',sans-serif;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  padding:0 12px 9px 0;border-bottom:1px solid var(--line);font-weight:600
}
.prof-tabella td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.prof-tabella tr:last-child td{border-bottom:none}
.prof-tabella strong{color:var(--ink);display:block}
.prof-tipo{
  display:inline-block;margin-top:3px;font-size:12px;color:var(--ink-soft);
  background:var(--paper-2);padding:2px 8px;border-radius:100px
}
.prof-azioni{text-align:right;width:1%;white-space:nowrap}
.prof-elimina{
  background:none;border:none;padding:4px 2px;cursor:pointer;
  color:var(--ink-soft);font-size:13.5px;text-decoration:underline;text-underline-offset:2px
}
.prof-elimina:hover{color:var(--d2)}

/* --- il modulo di aggiunta, chiuso finché non serve -----------------------
   Un modulo sempre aperto sotto un elenco fa sembrare la pagina infinita.
   Chiuso, l'elenco si legge; aperto, si compila. */
.prof-aggiungi{border-top:1px solid var(--line);padding-top:16px}
.prof-aggiungi summary{
  cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:14.5px;
  font-weight:600;color:var(--gold-deep);list-style:none;
  display:inline-flex;align-items:center;gap:8px;padding:6px 0
}
.prof-aggiungi summary::-webkit-details-marker{display:none}
.prof-aggiungi summary::before{content:'+';font-size:17px;line-height:1}
.prof-aggiungi[open] summary::before{content:'−'}
.prof-aggiungi summary:hover{color:var(--gold)}
.prof-aggiungi form{margin-top:16px}
.prof-altro{
  padding:14px 16px;background:var(--paper-3);border-radius:var(--r-sm);
  border-left:3px solid var(--gold-2)
}

/* --- la scelta della tipologia professionale -----------------------------
   Due opzioni con la loro spiegazione accanto: è la scelta da cui dipende
   il regime dei dati, e non può essere una tendina con due sigle. */
.prof-scelte{display:grid;gap:12px;margin-bottom:20px}
.prof-scelta{
  display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  background:var(--paper-2);transition:border-color .2s,background .2s
}
.prof-scelta:hover{border-color:var(--gold-2)}
.prof-scelta input{margin-top:3px;flex:0 0 auto;accent-color:var(--gold)}
.prof-scelta input:checked ~ span strong{color:var(--gold-deep)}
.prof-scelta:has(input:checked){border-color:var(--gold-2);background:#fdf8ef}
.prof-scelta span{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.prof-scelta strong{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px}

.prof-caselle{display:grid;gap:10px;margin:20px 0 22px}
.prof-caselle .consent{font-size:14.5px}

@media (max-width:720px){
  .prof-riga,.prof-riga-3{grid-template-columns:1fr;gap:0}
  .prof-blocco{padding:20px 18px 22px}
  .prof-stato{padding:18px}

  /* Su telefono una tabella a cinque colonne non si legge: ogni riga
     diventa un blocco con le sue etichette. */
  .prof-tabella,.prof-tabella tbody,.prof-tabella tr,.prof-tabella td{display:block;width:100%}
  .prof-tabella thead{display:none}
  .prof-tabella tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .prof-tabella td{border:none;padding:2px 0}
  .prof-tabella td:empty{display:none}
  .prof-azioni{text-align:left;padding-top:8px !important}
}

/* ===========================================================================
   Console · professionisti
   =========================================================================== */

.ter-barra{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:20px
}
.ter-filtri{display:flex;gap:4px;flex-wrap:wrap}
.ter-filtri a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;
  font-size:14px;color:var(--ink-2);background:var(--paper);border:1px solid var(--line)
}
.ter-filtri a:hover{border-color:var(--gold-2);color:var(--ink)}
.ter-filtri a.attivo{background:var(--ink);border-color:var(--ink);color:#fff}
.ter-filtri a span{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  background:var(--paper-3);color:var(--ink-2);padding:1px 7px;border-radius:100px
}
.ter-filtri a.attivo span{background:rgba(255,255,255,.18);color:#fff}

.ter-cerca{display:flex;gap:8px}
.ter-cerca input{
  padding:9px 14px;border:1px solid var(--line-2);border-radius:100px;
  font-size:14px;min-width:240px;font-family:inherit;color:var(--ink)
}
.ter-cerca input:focus{outline:none;border-color:var(--gold-2)}

.ter-nome{display:block;color:var(--ink);font-weight:600;font-size:15px}
.ter-nome:hover{color:var(--gold-deep)}
.ter-email{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}
.ter-numeri{font-size:13.5px;color:var(--ink-soft)}

/* Le celle di questa tabella non hanno margini laterali — si tengono
   distanziate dalla larghezza del testo — quindi una colonna stretta di numeri
   finirebbe incollata alla successiva: lo spazio glielo si dà a mano.
   Cifre allineate: con quelle proporzionali 111 sembra più corto di 999. */
.admin-table th.ter-col-num,
.admin-table td.ter-col-num{white-space:nowrap;padding-right:30px}
.ter-pazienti{
  font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums;display:block
}
.ter-pazienti-zero{color:var(--line-2);font-weight:400}
.ter-pazienti-nota{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
a.ter-pazienti{text-decoration:none}
a.ter-pazienti:hover{color:var(--gold-deep)}

/* --- le schede paziente in amministrazione, senza nomi -------------------- */
/* L'avviso non è decorativo: dice in cosa si sta guardando prima di guardarci.
   Bordo dorato come le altre cose che chiedono attenzione, non rosso: non è un
   allarme, è una condizione d'uso. */
.paz-avviso{border-left:3px solid var(--gold)}

.paz-codice,
.paz-codice-grande{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em
}
.paz-codice{font-weight:600}
.paz-codice-grande{font-size:26px}

/* --- l'apparecchio che il professionista consegna al paziente ------------- */
/* La conferma è l'unica cosa in panoramica che aspetta un gesto: si distingue.
   Il gesto è RICOPIARE il codice dall'etichetta, non premere un bottone, quindi
   qui il codice non c'è: c'è la foto del prodotto — così sa cosa cercare — e il
   campo in cui scriverlo.

   Nota per chi cerca `.paz-codice-grande`: qui c'era una seconda definizione di
   quella classe, che la trasformava in un riquadro tratteggiato centrato. Ma
   quella classe la usa anche il titolo dello pseudonimo nelle schede paziente
   in amministrazione, e se la prendeva pure lui. Adesso è sparita, e quel
   titolo è tornato a essere un titolo. */
.paz-conferma{border-left:3px solid var(--gold)}
.paz-conferma-in{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.paz-conferma-foto{
  width:132px;height:132px;object-fit:cover;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--line-2);flex:none
}
/* `min-width:0` o il blocco di testo non si stringe mai sotto la larghezza
   del suo contenuto più lungo, e su telefono la pagina scorre in orizzontale. */
.paz-conferma-testo{flex:1 1 280px;min-width:0}

.paz-codice-campo{
  display:block;font-size:14px;color:var(--ink-2);font-weight:600;margin:0 0 16px
}
/* Monospaziato e spaziato: si scrive guardando l'etichetta e alzando gli occhi
   ogni due caratteri, e in quel viavai un carattere stretto si perde. */
.paz-codice-campo input{
  display:block;width:100%;max-width:440px;margin-top:8px;padding:13px 15px;
  border:1.5px solid var(--line-2);border-radius:10px;background:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(17px,2.4vw,20px);letter-spacing:.12em;
  color:var(--ink);font-weight:400;text-transform:uppercase
}
.paz-codice-campo input::placeholder{
  letter-spacing:.06em;text-transform:none;color:var(--ink-soft);opacity:.7
}
.paz-codice-campo input:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,151,47,.14)
}

.paz-dispositivo-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.paz-dispositivo-foto{
  width:86px;height:86px;object-fit:cover;border-radius:12px;
  background:var(--paper-2);flex:none
}
.paz-dispositivo-in h2{margin:0 0 4px}
.paz-dispositivo-codice{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;
  letter-spacing:.07em;color:var(--ink);margin:0 0 6px
}

/* Il codice nella tabella della scheda paziente, lato professionista. */
.sch-codice{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}

/* --- il grafico delle registrazioni, in console --------------------------- */
/* Scritto a mano in SVG, senza librerie. Le regole che contano stanno nella
   vista, accanto alla geometria; qui c'è solo come si veste. */
.graf-testa{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:6px
}
.graf-testa h2{margin:0 0 4px}

.graf-periodi{display:flex;gap:2px;background:var(--paper-3);border-radius:100px;padding:3px}
.graf-periodo{
  display:inline-block;padding:7px 16px;border-radius:100px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
  transition:background .2s,color .2s
}
.graf-periodo:hover{color:var(--ink)}
.graf-attivo,.graf-attivo:hover{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(10,37,64,.12)}

/* L'SVG si adatta alla larghezza e l'altezza va dietro in proporzione: così
   non si deforma niente, testo compreso. Il tetto serve perché su uno schermo
   molto largo il grafico non diventi un poster. */
.graf-tela{margin:20px 0 0}
.graf-svg{display:block;width:100%;height:auto;max-height:290px}
/* Il testo non porta mai il colore del dato: i valori e le etichette stanno in
   inchiostro, il colore ce l'ha la colonna che gli sta sotto. */
.graf-valore{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;fill:var(--ink)
}
.graf-etichetta{font-family:'Manrope',sans-serif;font-size:11px;fill:var(--ink-soft)}

.graf-tabella{margin-top:18px}
.graf-tabella>summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  list-style:none;padding:6px 0
}
.graf-tabella>summary::-webkit-details-marker{display:none}
.graf-tabella>summary::before{content:'▸ ';color:var(--gold-deep)}
.graf-tabella[open]>summary::before{content:'▾ '}
.graf-tabella>summary:hover{color:var(--ink)}

/* --- la panoramica del professionista: cosa ti aspetta, e oggi ------------ */
/* Al posto dei sei numeroni. Un numero racconta com'è messo lo studio; questo
   elenco dice cosa fare adesso, ed è quello per cui si apre la pagina. */
.dash-avvisi h2{display:flex;align-items:center;gap:10px}
.dash-conta{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 8px;border-radius:100px;
  background:var(--gold);color:#fff;font-size:13px;font-weight:700;
  font-family:'Space Grotesk',sans-serif
}

.dash-elenco{list-style:none;margin:0;padding:0}
.dash-riga{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line)
}
.dash-riga:first-child{border-top:0;padding-top:4px}

/* Quello che aspetta l'altra persona si vede che è un'altra cosa: un elenco in
   cui le due categorie hanno lo stesso peso si legge come un elenco di compiti
   e insegna a ignorarlo, perché metà non si possono fare. */
.dash-in-attesa{opacity:.72}
.dash-tipo{flex:none;min-width:104px;text-align:center}
.dash-testo{flex:1 1 260px;min-width:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.dash-testo strong{color:var(--ink)}
.dash-quando{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.dash-vai{flex:none}

.dash-giornate{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.dash-giorno{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)
}
.dash-ore{list-style:none;margin:0;padding:0}
.dash-ora{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line)
}
.dash-ora:last-child{border-bottom:0}
/* L'ora è la cosa che si cerca: monospaziata e larga fissa, così le righe si
   incolonnano e si legge la giornata senza leggere i nomi. */
.dash-orario{
  flex:none;width:46px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15.5px;font-weight:600;color:var(--ink)
}
.dash-chi{flex:1 1 140px;min-width:0;font-size:14.5px;color:var(--ink)}
.dash-dove{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.dash-agenda{margin:22px 0 0}

/* --- la panoramica di chi aspetta la verifica -----------------------------
   Einstein a sinistra e il discorso a destra. Sul telefono va sopra: una
   faccia da 132px accanto al testo lascia al testo una colonna di dodici
   caratteri, e un ritratto che rende illeggibile la frase che accompagna è
   un ritratto che lavora contro sé stesso. */
.att-riquadro{display:flex;gap:26px;align-items:flex-start}
.att-attesa{border-left:4px solid var(--gold-2)}
.att-no{border-left:4px solid #e2a6b6}
.att-faccia{
  flex:none;width:132px;height:132px;border-radius:100px;
  background:var(--paper-3);box-shadow:var(--shadow-sm)
}
.att-discorso{flex:1 1 auto;min-width:0}
.att-discorso h2{font-size:21px;line-height:1.25;margin:0 0 10px}
.att-testo{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.7;max-width:66ch}
.att-nota{margin:14px 0 0}
.att-requisiti{margin-top:14px}
.att-azione{margin:20px 0 0}

.att-premessa{max-width:72ch}
.att-cosa{list-style:none;margin:0;padding:0}
.att-cosa li{
  display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line)
}
.att-cosa li:first-child{border-top:0;padding-top:0}
.att-cosa strong{
  flex:none;min-width:158px;
  font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink)
}
.att-cosa span{flex:1 1 280px;min-width:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6}

@media (max-width:640px){
  .att-riquadro{flex-direction:column;gap:18px}
  .att-faccia{width:96px;height:96px}
  .att-discorso h2{font-size:19px}
  .att-cosa strong{min-width:0}
}

/* Le patologie stanno in fondo e si vedono che sono un'altra cosa. */
.paz-cliniche{border-left:3px solid var(--line-2)}
.paz-patologia{padding:16px 0;border-bottom:1px solid var(--line)}
.paz-patologia:last-child{border-bottom:none;padding-bottom:0}
.paz-patologia-testa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.paz-patologia-testa h3{margin:0;font-size:17px}
.paz-patologia-testo{
  margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:70ch
}
.paz-patologia-testo p{margin:0 0 10px}
.paz-patologia-testo :last-child{margin-bottom:0}
.ter-vai{text-align:right;width:1%;white-space:nowrap}

.ter-tag{
  display:inline-block;font-size:11.5px;color:var(--ink-soft);background:var(--paper-2);
  padding:2px 8px;border-radius:100px;margin-left:6px;white-space:nowrap
}
.ter-tag-attesa{background:#fdf6e8;color:#7a5510}

.ter-pagine{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:14px;color:var(--ink-soft);padding:4px 2px
}
.ter-pagine a{color:var(--gold-deep);font-weight:600}

/* --- la scheda ----------------------------------------------------------- */
.ter-torna{margin:0 0 14px;font-size:14px}
.ter-torna a{color:var(--ink-soft)}
.ter-torna a:hover{color:var(--gold-deep)}

.ter-testa{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px
}
.ter-sotto{margin:0;color:var(--ink-soft);font-size:15px}
.ter-pillole{display:flex;gap:8px;flex-wrap:wrap}

.ter-conta{
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--ink-soft);background:var(--paper-2);padding:2px 9px;
  border-radius:100px;margin-left:8px;vertical-align:middle
}

/* La decisione da prendere si distingue da tutto il resto: è l'unica cosa
   che chiede un'azione, e chi apre la scheda deve vederla per prima. */
.ter-decisione{border-left:3px solid var(--gold)}

/* --- l'adesione aperta dall'amministrazione ------------------------------- */
.ter-adesione{border-left:3px solid var(--gold-2)}
.ter-dati{margin:0 0 16px}
.ter-dati>div{
  display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;flex-wrap:wrap
}
.ter-dati>div:last-child{border-bottom:none}
.ter-dati dt{color:var(--ink-soft);min-width:180px;flex:none}
.ter-dati dd{margin:0;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ter-dati code,.ter-link code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:var(--paper-2);padding:2px 8px;border-radius:6px
}
/* Il link si vede una volta sola: dev'essere selezionabile tutto insieme, e
   non deve andare a capo in un punto che rende ambiguo dove finisce. */
.ter-link{margin:0 0 18px}
.ter-link code{
  display:block;padding:12px 14px;word-break:break-all;line-height:1.6;
  border:1px dashed var(--line-2);user-select:all
}
.ter-azioni-invito{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

/* Un elenco numerato dentro un pannello: le note della pagina di inserimento. */
.admin-elenco{
  margin:0 0 16px;padding-left:22px;color:var(--ink-2);font-size:14.5px;line-height:1.75
}

/* --- i dati in sola lettura nella pagina di adesione ---------------------- */
.ade-dati{
  background:var(--paper-2);border-radius:var(--r);padding:20px 22px;margin-bottom:26px
}
.ade-dati dl{margin:0 0 12px}
.ade-dati dl>div{display:flex;gap:14px;padding:7px 0;font-size:15px;flex-wrap:wrap}
.ade-dati dt{color:var(--ink-soft);min-width:120px;flex:none}
.ade-dati dd{margin:0;color:var(--ink);font-weight:600}
.ade-nota{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.65;max-width:66ch}
.ade-passo-nota{margin:0 0 16px;font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:68ch}
.ter-due{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:18px}
.ter-due h3{font-family:'Space Grotesk',sans-serif;font-size:15.5px;margin:0 0 8px;color:var(--ink)}
.ter-due form{
  border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 20px;background:var(--paper-2)
}
.ter-due .field{margin:12px 0 14px}
.ter-due textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:inherit;font-size:14.5px;color:var(--ink);resize:vertical
}
.ter-due textarea:focus{outline:none;border-color:var(--gold-2)}
.ter-approva{border-color:rgba(24,94,58,.25) !important}
.ter-respingi,.ter-sospeso{border-color:rgba(146,22,53,.2) !important}

.ter-motivo{
  padding:13px 15px;background:#fdeef1;border-radius:var(--r-sm);
  color:var(--d2);font-size:14.5px;line-height:1.6;margin:0 0 16px
}
.ter-sospeso{border-left:3px solid var(--d2)}
.ter-controlla{display:block;font-size:12.5px;color:var(--gold-deep);margin-top:4px}

.ter-storico{list-style:none;margin:0;padding:0}
.ter-storico li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ter-storico li:last-child{border-bottom:none}
.ter-quando{display:inline-block;min-width:130px;color:var(--ink-soft);font-size:13px}
.ter-transizione{color:var(--ink-soft);font-size:13px;margin-left:8px}
.ter-attore{color:var(--ink-soft);font-size:13px;margin-left:8px}
.ter-nota{margin:6px 0 0 130px;color:var(--ink-2);font-size:14px;line-height:1.6}

/* Le azioni pesanti in fondo, staccate, e con il rosso solo su quella che
   chiude davvero la porta. */
.ter-pericolo{border-top:3px solid var(--line-2)}
.ter-rosso{border-color:rgba(146,22,53,.4);color:var(--d2)}
.ter-rosso:hover{background:#fdeef1;border-color:var(--d2)}

@media (max-width:820px){
  .ter-due{grid-template-columns:1fr}
  .ter-barra{flex-direction:column;align-items:stretch}
  .ter-cerca input{min-width:0;flex:1}
  .ter-nota{margin-left:0}
  .ter-tabella thead{display:none}
  .ter-tabella,.ter-tabella tbody,.ter-tabella tr,.ter-tabella td{display:block;width:100%}
  .ter-tabella tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .ter-tabella td{border:none;padding:3px 0}
  .ter-vai{text-align:left;padding-top:10px !important}
}

@media (max-width:820px){
  /* Le tabelle di dati della console scorrono dentro il loro riquadro invece
     di allargare la pagina. Impilarle come si fa con gli elenchi qui non
     funziona: sono tabelle a colonne strette dove la larghezza è il contenuto
     (numeri di iscrizione, date, stati), e spezzarle le rende illeggibili.
     L'elenco dei professionisti resta impilato: lì ogni riga è una persona. */
  .admin-panel .admin-table:not(.ter-tabella){
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap
  }
  .admin-panel .admin-table:not(.ter-tabella) td,
  .admin-panel .admin-table:not(.ter-tabella) th{padding-right:18px}
  .admin-panel .admin-table:not(.ter-tabella) td:first-child{white-space:normal;min-width:150px}
}

/* ===========================================================================
   Console · prodotti e codici
   =========================================================================== */

.admin-h2{
  font-family:'Space Grotesk',sans-serif;font-size:17px;margin:0 0 14px;color:var(--ink)
}

.prod-form{display:block}
.prod-griglia{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px 20px;margin-bottom:16px
}
.prod-form label{display:block;font-size:14px;color:var(--ink-2);font-weight:600}
/* Le caselle di spunta sono <input> figli di <label> come tutti gli altri, ma
   non sono campi da riempire: senza :not() prenderebbero larghezza piena e
   andrebbero a capo, che è esattamente come si erano viste alla prima prova. */
.prod-form label>input:not([type=checkbox]):not([type=radio]),
.prod-form label>select,
.prod-form label>textarea{
  display:block;width:100%;margin-top:6px;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:10px;background:#fff;
  font-family:inherit;font-size:14.5px;color:var(--ink);font-weight:400
}
.prod-form label>textarea{resize:vertical;line-height:1.6}
.prod-form label>input:not([type=checkbox]):focus,
.prod-form label>select:focus,
.prod-form label>textarea:focus{outline:none;border-color:var(--gold-2)}
.prod-form label small{
  display:block;margin-top:6px;font-weight:400;font-size:12.5px;
  color:var(--ink-soft);line-height:1.55
}
.prod-form label small code,
.admin-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--paper-2);padding:1px 5px;border-radius:4px;letter-spacing:.02em
}
.prod-largo{margin-bottom:16px}
.prod-medio{max-width:420px;margin-top:14px}

.prod-scelte{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:18px}
/* Va qualificata con .prod-form, altrimenti "\.prod-form label" (più
   specifica) rimette display:block e la riga perde allineamento e spaziatura. */
.prod-spunta,
.prod-form label.prod-spunta{
  display:flex;align-items:center;gap:9px;font-size:14.5px;
  color:var(--ink-2);font-weight:400;cursor:pointer
}
.prod-form .prod-spunta>input,
.prod-spunta input{width:17px;height:17px;accent-color:var(--gold-deep);margin:0;flex:none}

.campo-err{display:block;margin-top:6px;font-size:13px;color:var(--d2);font-weight:400}
.prod-barrato{
  margin-left:8px;color:var(--ink-soft);text-decoration:line-through;font-size:13.5px
}
.prod-aggiungi{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.prod-aggiungi summary{
  cursor:pointer;font-weight:600;font-size:14.5px;color:var(--gold-deep);
  list-style:none;padding:4px 0
}
.prod-aggiungi summary::-webkit-details-marker{display:none}
.prod-aggiungi summary::before{content:'+ ';font-weight:700}
.prod-aggiungi[open] summary::before{content:'– '}
.prod-aggiungi>form{margin-top:16px}

/* --- codici --------------------------------------------------------------- */
.cod-esito{margin-top:16px;padding:14px 16px;border-radius:var(--r);font-size:14.5px;line-height:1.65}
.cod-esito p{margin:0 0 6px}
.cod-esito p:last-child{margin-bottom:0}
.cod-esito-ok{background:var(--paper-2);border-left:3px solid var(--gold)}
.cod-esito-no{background:#fdeef1;border-left:3px solid var(--d2)}

.cod-scaglioni{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.cod-seriale{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  letter-spacing:.04em;color:var(--ink)
}
/* Trenta righe con trenta caselle di testo sono trenta rettangoli che
   gridano. Il campo del motivo resta discreto finché non lo si tocca: una
   riga sotto, niente cornice, e il bordo compare solo quando serve davvero. */
.cod-annulla{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.cod-annulla input{
  width:140px;padding:5px 2px;border:none;border-bottom:1px dashed var(--line-2);
  border-radius:0;background:transparent;font-family:inherit;font-size:13px;
  color:var(--ink-2);transition:border-color .15s
}
.cod-annulla input::placeholder{color:var(--ink-soft);opacity:.7}
.cod-annulla input:hover{border-bottom-color:var(--gold-2)}
.cod-annulla input:focus{
  outline:none;border-bottom-color:var(--gold-deep);border-bottom-style:solid
}

@media (max-width:820px){
  .prod-griglia{grid-template-columns:1fr}
  .cod-annulla{justify-content:flex-start;flex-wrap:wrap}
  .cod-annulla input{width:100%}
  .cod-scaglioni .btn{flex:1 1 auto;text-align:center}
}

/* ===========================================================================
   Console · galleria e documenti di prodotto
   =========================================================================== */

.media-griglia{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;margin-bottom:18px
}
.media-cella{
  margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);display:flex;flex-direction:column
}
/* La copertina si riconosce dal bordo, non da un'etichetta soltanto: in una
   griglia di dodici miniature l'occhio cerca una differenza, non una parola. */
.media-copertina{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

.media-cella img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:contain;
  background:#fff;border-bottom:1px solid var(--line)
}
.media-cella figcaption{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px 0
}
.media-etichetta{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:#7a5510;
  background:#fdf6e8;padding:2px 8px;border-radius:100px
}
.media-info{font-size:12px;color:var(--ink-soft)}

.media-azioni{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px}
.media-azioni .btn-sm{padding:5px 10px;font-size:12.5px}

.media-alt{display:flex;gap:6px;padding:0 10px 10px}
.media-alt input{
  flex:1;min-width:0;padding:5px 2px;border:none;border-bottom:1px dashed var(--line-2);
  background:transparent;font-family:inherit;font-size:12.5px;color:var(--ink-2)
}
.media-alt input:focus{outline:none;border-bottom-color:var(--gold-deep);border-bottom-style:solid}

.media-riga{display:flex;gap:6px;align-items:center}
.media-riga select{
  padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;
  font-family:inherit;font-size:13px;background:#fff;color:var(--ink)
}
.media-riga select:focus{outline:none;border-color:var(--gold-2)}

/* Il campo file predefinito è brutto ovunque e diverso in ogni browser, ma
   sostituirlo vuol dire riscriverlo in JavaScript: qui si limita a stare
   dentro la griglia senza sfondarla. */
.prod-form label>input[type=file]{
  display:block;width:100%;margin-top:6px;padding:9px 10px;
  border:1px dashed var(--line-2);border-radius:10px;background:#fff;
  font-family:inherit;font-size:13.5px;color:var(--ink-2);font-weight:400
}

@media (max-width:820px){
  .media-griglia{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .media-riga{flex-wrap:wrap}
  .media-riga select{flex:1;min-width:0}
}

/* ===========================================================================
   Console · buoni sconto
   =========================================================================== */

.buono-codice{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em
}

/* Il numero che conta davvero è quanti ne restano, non quanti ne sono stati
   usati: chi apre questa pagina sta decidendo se può prometterne un altro. */
.buono-grande{
  font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:600;
  color:var(--ink);margin:0 0 10px;line-height:1
}
.buono-grande span{font-size:20px;font-weight:400;color:var(--ink-soft)}

.buono-barra{
  height:7px;border-radius:100px;background:var(--paper-3);overflow:hidden;
  max-width:420px;margin-bottom:14px
}
.buono-barra span{
  display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold))
}

.buono-tetto{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.buono-tetto label{font-size:14px;color:var(--ink-2);font-weight:600}
.buono-tetto input{
  display:block;margin-top:6px;width:110px;padding:9px 12px;
  border:1px solid var(--line-2);border-radius:10px;font-family:inherit;font-size:14.5px
}
.buono-tetto input:focus{outline:none;border-color:var(--gold-2)}

.buono-azioni{display:flex;gap:10px;flex-wrap:wrap}

.buono-prodotti{border:none;padding:0;margin:0 0 18px}
.buono-prodotti legend{
  font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink);
  padding:0;margin-bottom:6px
}

@media (max-width:820px){
  .buono-grande{font-size:30px}
  .buono-azioni .btn{flex:1 1 auto;justify-content:center}
}

/* ===========================================================================
   Area professionista · acquisto e apparecchio
   =========================================================================== */

/* La colonna dell'apparecchio. Su telefono va PRIMA di tutto il resto: è la
   cosa che la panoramica deve mostrare sempre, e in fondo a una schermata
   lunga non la vedrebbe nessuno. */
.pro-conlato{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.pro-principale{min-width:0;order:1}
.app-lato{order:2;position:sticky;top:96px}

.app-scheda{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px;text-align:center
}
.app-scheda-attivo{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.app-scheda .eyebrow{display:block;margin-bottom:12px}
.app-scheda h3{
  font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px;color:var(--ink)
}
.app-scheda .pro-stato{display:inline-block;margin-bottom:12px}
.app-scheda-foto{
  display:block;width:100%;max-width:150px;margin:0 auto 14px;
  aspect-ratio:1;object-fit:contain
}
.app-scheda-codice{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  letter-spacing:.04em;color:var(--ink);background:var(--paper-2);
  padding:8px 10px;border-radius:8px;margin:0 0 10px;word-break:break-all
}
.app-scheda-nota{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 14px}
.app-scheda .btn{width:100%;justify-content:center}
.app-scheda-ordine{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-soft)
}

/* --- negozio -------------------------------------------------------------- */
.neg-prodotto{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:30px;align-items:start}
.neg-galleria{min-width:0}
.neg-grande{
  display:block;width:100%;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;aspect-ratio:4/3;object-fit:contain
}
.neg-vuota{
  display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  border:1px dashed var(--line-2);border-radius:var(--r);color:var(--ink-soft);font-size:14px
}
.neg-strisce{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.neg-strisce img{
  width:64px;height:64px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:8px
}
.neg-testo{min-width:0}
.neg-testo h2{margin-top:0}
.neg-occhiello{font-size:16.5px;color:var(--ink-2);line-height:1.6}
.neg-descrizione{color:var(--ink-2);line-height:1.75;margin-bottom:18px}
.neg-documenti{list-style:none;padding:0;margin:0 0 20px;border-top:1px solid var(--line)}
.neg-documenti li{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line)
}
.neg-documenti a{font-weight:600;color:var(--gold-deep)}
.neg-documenti span{font-size:12.5px;color:var(--ink-soft)}
.neg-acquisto{border-top:1px solid var(--line);padding-top:18px}
.neg-prezzo{
  font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;
  color:var(--ink);margin:0 0 14px
}
.neg-prezzo span{
  font-size:18px;font-weight:400;color:var(--ink-soft);
  text-decoration:line-through;margin-left:10px
}

/* --- carrello ------------------------------------------------------------- */
.car-colonne{grid-template-columns:1fr 320px}
.car-righe td{vertical-align:middle}
.car-foto{width:74px}
.car-foto img{
  width:64px;height:64px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:8px;display:block
}
.car-quantita form{display:flex;gap:6px;align-items:center}
.car-quantita input{
  width:64px;padding:7px 9px;border:1px solid var(--line-2);border-radius:8px;
  font-family:inherit;font-size:14px
}
.car-quantita input:focus{outline:none;border-color:var(--gold-2)}

.car-buono{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.car-buono h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:0 0 10px}
.car-buono-form{display:flex;gap:8px;flex-wrap:wrap}
.car-buono-form input{
  flex:1;min-width:180px;padding:10px 14px;border:1px solid var(--line-2);
  border-radius:100px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;letter-spacing:.04em
}
.car-buono-form input:focus{outline:none;border-color:var(--gold-2)}
.car-buono-ok{
  background:#eef7f0;border-left:3px solid #2e7d4f;padding:12px 14px;
  border-radius:8px;font-size:14.5px;margin:0 0 12px
}
.car-buono-no{
  background:#fdeef1;border-left:3px solid var(--d2);padding:12px 14px;
  border-radius:8px;font-size:14.5px;margin:0 0 12px
}

.car-totali dl{margin:0 0 16px}
.car-totali dl>div{
  display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:15px
}
.car-totali dt{color:var(--ink-2)}
.car-totali dd{margin:0;font-weight:600;color:var(--ink)}
.car-sconto dd{color:#2e7d4f}
.car-finale{border-bottom:none !important;padding-top:14px !important}
.car-finale dt{font-weight:600;color:var(--ink)}
.car-finale dd{font-family:'Space Grotesk',sans-serif;font-size:24px}

/* --- apparecchio ---------------------------------------------------------- */
.app-scelte{display:flex;gap:12px;flex-wrap:wrap}
.app-indirizzo{
  font-size:15.5px;line-height:1.75;color:var(--ink);background:var(--paper-2);
  padding:14px 16px;border-radius:var(--r);margin:0 0 16px
}
.app-noti{display:grid;gap:8px;margin-bottom:20px}
.app-noto{
  display:flex;align-items:flex-start;gap:11px;padding:13px 15px;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;background:#fff
}
.app-noto:hover{border-color:var(--gold-2)}
.app-noto input{margin:3px 0 0;accent-color:var(--gold-deep);flex:none}
.app-noto strong{display:block;font-size:14.5px;color:var(--ink)}
.app-noto em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-soft);margin-top:2px}

.app-codice{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.app-codice input{
  flex:1;min-width:220px;padding:14px 18px;border:1px solid var(--line-2);
  border-radius:100px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-align:center
}
.app-codice input:focus{outline:none;border-color:var(--gold-2)}

.app-attivo{border-left:3px solid var(--gold)}
.app-seriale{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;
  letter-spacing:.08em;color:var(--ink);margin:0 0 10px
}

/* --- i dispositivi -------------------------------------------------------- */
/* La carta è foto a sinistra e fatti a destra. La foto ha una larghezza fissa
   e un rapporto dichiarato: le foto di prodotto arrivano di formati diversi e
   senza aspect-ratio la fila si scompone appena ne cambia una. */
.dis-elenco{display:grid;gap:16px;margin-bottom:24px}
.dis-carta{
  display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px
}
.dis-carta-spento{opacity:.72}

.dis-foto{
  aspect-ratio:1/1;border-radius:12px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.dis-foto img{width:100%;height:100%;object-fit:cover;display:block}
.dis-nofoto{color:var(--line-2);display:flex}

.dis-testa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dis-testa h2{margin:0;font-size:21px}

.dis-codice{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;
  letter-spacing:.08em;color:var(--ink);margin:0 0 6px
}
.dis-quando{font-size:14px;color:var(--ink-soft);margin:0 0 12px}
.dis-descrizione{font-size:15px;color:var(--ink-2);margin:0 0 14px;max-width:60ch}

.dis-doc-titolo{
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 8px
}
.dis-doc{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dis-doc a{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border:1px solid var(--line);border-radius:10px;text-decoration:none;
  color:var(--ink);background:var(--paper-2);transition:border-color .15s,background .15s
}
.dis-doc a:hover{border-color:var(--gold-2);background:#fff}
.dis-doc-icona{flex:none;color:var(--gold-deep)}
.dis-doc-nome{font-size:15px;font-weight:600;flex:1;min-width:0}
.dis-doc-peso{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;flex:none}

.dis-vuoto{font-size:14px;color:var(--ink-soft);margin:0 0 6px}
.dis-vuoto a{color:var(--gold-deep)}

.dis-aggiungi summary{
  cursor:pointer;font-weight:600;font-size:15.5px;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:8px
}
.dis-aggiungi summary::-webkit-details-marker{display:none}
.dis-aggiungi summary::before{content:'+';color:var(--gold-deep);font-size:19px;line-height:1}
.dis-aggiungi details[open] summary::before{content:'–'}

@media (max-width:700px){
  .dis-carta{grid-template-columns:1fr;gap:16px}
  .dis-foto{max-width:220px}
  .dis-doc-peso{display:none}
}

@media (max-width:980px){
  .pro-conlato{grid-template-columns:1fr}
  .app-lato{order:0;position:static}
  .app-scheda{text-align:left}
  .app-scheda-foto{margin-left:0}
  .app-scheda .btn{width:auto}
  .car-colonne{grid-template-columns:1fr}
  .neg-prodotto{grid-template-columns:1fr}
}

@media (max-width:600px){
  .car-righe,.car-righe tbody,.car-righe tr,.car-righe td{display:block;width:100%}
  .car-righe tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .car-righe td{border:none;padding:4px 0}
  .car-foto{width:auto}
  .app-scelte .btn{flex:1 1 auto;justify-content:center}
  .app-codice input{min-width:0;width:100%}
}

/* Il riquadro che dice perché un prodotto non è in vetrina. I filtri sono
   quattro e stanno in quattro punti diversi della scheda: senza questo,
   il negozio risulta vuoto e non c'è niente che indichi dove guardare. */
.vetrina{border-left:3px solid var(--line-2)}
.vetrina-ok{border-left-color:#2e7d4f}
.vetrina-no{border-left-color:var(--gold)}
.vetrina-mancanze{list-style:none;padding:0;margin:0}
.vetrina-mancanze li{
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6
}
.vetrina-mancanze li:last-child{border-bottom:none;padding-bottom:0}
.vetrina-mancanze strong{display:block;color:var(--ink)}
.vetrina-mancanze span{color:var(--ink-2)}

/* ===========================================================================
   Iscrizione dei pazienti, consensi e informative
   =========================================================================== */

/* --- i tre passi ---------------------------------------------------------- */
.isc-passi{
  display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 24px;counter-reset:p
}
.isc-passi li{
  display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:100px;
  background:var(--paper-2);color:var(--ink-soft);font-size:14px
}
.isc-passi li span{
  display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--line-2);color:#fff;font-size:12px;font-weight:700;flex:none
}
.isc-passi li.ora{background:var(--ink);color:#fff}
.isc-passi li.ora span{background:var(--gold)}
.isc-passi li.fatto{color:var(--ink-2)}
.isc-passi li.fatto span{background:#2e7d4f}
.isc-riassunto{font-size:15px;color:var(--ink-2);margin:0 0 10px}

.isc-codice{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.isc-codice input{
  width:200px;padding:14px 18px;border:1px solid var(--line-2);border-radius:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:28px;
  letter-spacing:10px;text-align:center
}
.isc-codice input:focus{outline:none;border-color:var(--gold-2)}
.isc-rimanda{margin:0}

/* --- i consensi ----------------------------------------------------------- */
.cons-elenco{display:grid;gap:12px;margin-bottom:22px}
.cons-voce{
  display:flex;align-items:flex-start;gap:13px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer
}
.cons-voce:hover{border-color:var(--gold-2)}
.cons-obbligatoria{border-left:3px solid var(--gold)}
.cons-voce>input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--gold-deep);flex:none}
.cons-voce strong{display:block;font-size:15px;color:var(--ink);font-weight:600}
.cons-tag{
  display:inline-block;font-style:normal;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:100px;
  background:#fdf6e8;color:#7a5510;margin-left:8px;vertical-align:middle
}
.cons-tag-facoltativo{background:var(--paper-2);color:var(--ink-soft)}
.cons-nota{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:6px}
.cons-leggi{display:inline-block;margin-top:8px;font-size:13.5px;color:var(--gold-deep);font-weight:600}

/* --- pagina pubblica dell'invito ------------------------------------------ */
.inv-pagina{padding:70px 24px 90px;background:var(--paper)}
.inv-in{max-width:820px;margin:0 auto}
.inv-stretta{max-width:640px}
.inv-h1{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4vw,42px);
  letter-spacing:-.02em;margin:8px 0 14px;color:var(--ink)
}
.inv-h2{
  font-family:'Space Grotesk',sans-serif;font-size:19px;margin:32px 0 14px;color:var(--ink);
  padding-top:22px;border-top:1px solid var(--line)
}
.inv-occhiello{font-size:17px;line-height:1.7;color:var(--ink-2);margin-bottom:28px}
.inv-meta{font-size:14px;color:var(--ink-soft);margin-bottom:26px;line-height:1.7}
.inv-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.inv-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.inv-email{
  background:var(--paper-2);border-radius:var(--r);padding:16px 18px;margin-bottom:6px
}
.inv-email span{display:block;font-size:13px;color:var(--ink-soft)}
.inv-email strong{display:block;font-size:17px;color:var(--ink);margin:2px 0 8px}
.inv-email small{display:block;font-size:13px;color:var(--ink-2);line-height:1.6}
.inv-testo{color:var(--ink-2);line-height:1.8;font-size:16px}
.inv-testo h2,.inv-testo h3{font-family:'Space Grotesk',sans-serif;color:var(--ink);margin:28px 0 10px}
.inv-testo p{margin:0 0 14px}
.inv-testo ul,.inv-testo ol{margin:0 0 16px;padding-left:22px}
.inv-testo li{margin-bottom:6px}

/* --- informative in console ----------------------------------------------- */
.pol-art9{border-left:3px solid var(--d2)}
.pol-impronta{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.pol-testo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7}
.pol-pubblica{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.pol-pubblica label{font-size:14px;color:var(--ink-2);font-weight:600}
.pol-pubblica input{
  display:block;margin-top:6px;width:190px;padding:10px 14px;
  border:1px solid var(--line-2);border-radius:10px;font-family:inherit;font-size:14.5px
}
.pol-pubblica input:focus{outline:none;border-color:var(--gold-2)}

@media (max-width:600px){
  .isc-codice input{width:100%;letter-spacing:8px;font-size:24px}
  .isc-passi li{flex:1 1 auto;font-size:13px;padding:8px 12px}
  .inv-form{padding:20px 16px}
  .pol-pubblica input{width:100%}
}

/* ==========================================================================
   Scheda del paziente
   ==========================================================================
   Tre pagine — patologie, patologia, messaggi — che devono sembrare la stessa
   stanza. Le classi .sch- valgono su tutte e tre; le .chat- solo dove ci sono
   i messaggi, e le riusa anche l'area del paziente, perché una conversazione
   dev'essere la stessa cosa vista dai due lati.
   -------------------------------------------------------------------------- */

.sch-testa{align-items:flex-start}
.sch-indietro{font-weight:600;letter-spacing:normal;text-transform:none;font-size:13px}
.sch-contatti{margin:8px 0 0;font-size:14.5px;color:var(--ink-soft)}
.sch-contatti a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line-2)}
.sch-contatti a:hover{color:var(--gold-deep)}

/* le due schede: scheda / messaggi */
.sch-schede{display:flex;gap:4px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.sch-schede a{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;
  color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px
}
.sch-schede a:hover{color:var(--ink)}
.sch-schede a.attiva{color:var(--ink);border-bottom-color:var(--gold)}

.sch-pallino{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:100px;background:var(--d2);color:#fff;
  font-size:12px;font-weight:700;line-height:1
}

.sch-titolo-riga{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.sch-facolt{font-weight:400;color:var(--ink-soft);font-size:13px}
.sch-estratto{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:3px}
.sch-quando{display:block;font-size:13px;color:var(--ink-soft)}
.sch-tabella a{color:var(--ink)}
.sch-tabella a:hover{color:var(--gold-deep)}

/* Il testo che esce dall'editor. Non eredita gli stili del sito: quello che
   c'è dentro è HTML scritto da una persona, e va reso leggibile senza che
   un <h3> di una nota diventi un titolo di sezione. */
.sch-testo{color:var(--ink-2);line-height:1.75;font-size:15.5px;overflow-wrap:anywhere}
.sch-testo p{margin:0 0 10px}
.sch-testo p:last-child{margin-bottom:0}
.sch-testo h3,.sch-testo h4{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--ink);margin:16px 0 6px}
.sch-testo ul,.sch-testo ol{margin:0 0 10px;padding-left:20px}
.sch-testo li{margin-bottom:4px}
.sch-testo blockquote{margin:0 0 10px;padding-left:14px;border-left:3px solid var(--line-2);color:var(--ink-soft)}
.sch-testo a{text-decoration:underline}

/* etichetta della visibilità: la prima cosa che si deve poter leggere */
.sch-vis{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap
}
.sch-vis-privata{background:var(--paper-3);color:var(--ink-2)}
.sch-vis-condivisa{background:#e6f3ec;color:var(--d5)}
.sch-vis-paziente{background:#e9f0f6;color:var(--d4)}

/* note */
.sch-note{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.sch-nota{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.sch-nota-testa{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:10px}
.sch-nota-testa strong{display:block;font-size:15.5px;color:var(--ink)}
.sch-nota-azioni{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sch-inline-form{margin:0}
.sch-inline{flex:0 0 auto}
.sch-inline>summary{
  cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
  color:var(--ink-soft);padding:6px 0
}
.sch-inline>summary:hover{color:var(--ink)}
.sch-inline[open]{flex:1 1 100%}

/* allegati */
.sch-allegati{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sch-allegato{
  display:flex;gap:14px;align-items:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px
}
.sch-anteprima{
  flex:0 0 auto;width:62px;height:62px;border-radius:10px;overflow:hidden;
  background:var(--paper-3);display:flex;align-items:center;justify-content:center
}
.sch-anteprima img{width:100%;height:100%;object-fit:cover}
.sch-icona{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
.sch-allegato-dati{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.sch-allegato-dati a{color:var(--ink);overflow-wrap:anywhere}
.sch-allegato-dati a:hover{color:var(--gold-deep)}
.sch-allegato-azioni{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap}

/* --- messaggi ------------------------------------------------------------- */
.chat{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.chat-giorno{display:flex;justify-content:center;margin:10px 0 2px}
.chat-giorno span{
  font-size:12px;font-weight:600;color:var(--ink-soft);
  background:var(--paper-3);border-radius:100px;padding:4px 14px
}
.chat-riga{display:flex}
.chat-mio{justify-content:flex-end}
.chat-suo{justify-content:flex-start}
.chat-bolla{
  max-width:min(560px,82%);border-radius:var(--r);padding:12px 16px 8px;
  border:1px solid var(--line);background:var(--paper-2);position:relative
}
.chat-mio .chat-bolla{background:linear-gradient(135deg,#fdf6e6,#f8eed6);border-color:var(--gold-3)}
.chat-ora{display:block;text-align:right;font-size:11.5px;color:var(--ink-soft);margin-top:6px}
.chat-foto{display:block;margin-top:8px;border-radius:10px;overflow:hidden;max-width:320px}
.chat-foto img{width:100%;height:auto}
.chat-file{
  display:inline-block;margin-top:8px;padding:8px 14px;border-radius:100px;
  background:var(--paper);border:1px solid var(--line-2);font-size:14px;color:var(--ink)
}
.chat-file:hover{border-color:var(--gold-2)}
.chat-invio{margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}

/* --- area del paziente ---------------------------------------------------- */
.paz-main{max-width:860px}
.paz-elenco{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.paz-riga{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px
}
.paz-riga:hover{border-color:var(--gold-2)}
.paz-nome{flex:1 1 auto;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.paz-nome em{display:block;font-style:normal;font-weight:400;font-size:13.5px;color:var(--ink-soft)}
.paz-quando{font-size:13px;color:var(--ink-soft)}

/* --- editor --------------------------------------------------------------- */
/* Le classi le decide site.js: se non gira, resta il textarea e va bene. */
.ed-guscio{display:block;margin-top:6px}
.ed-nascosto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.ed-barra{
  display:flex;gap:4px;flex-wrap:wrap;padding:6px;
  border:1px solid var(--line-2);border-bottom:none;border-radius:10px 10px 0 0;background:var(--paper-2)
}
.ed-bottone{
  min-width:32px;height:30px;padding:0 9px;border-radius:7px;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--ink-2);
  border:1px solid transparent
}
.ed-bottone:hover{background:var(--paper);border-color:var(--line-2)}
.ed-g{font-weight:800}
.ed-c{font-style:italic}
.ed-s{text-decoration:underline}
.ed-campo{
  min-height:130px;max-height:420px;overflow-y:auto;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:0 0 10px 10px;background:var(--paper);
  font-size:15.5px;line-height:1.7;color:var(--ink-2);
  /* Il campo sta dentro una <label>, che è in grassetto. Senza questo azzeramento
     il testo eredita font-weight:600 — e allora il browser considera la selezione
     GIÀ in grassetto, e il bottone G la s-grassetta invece di grassettarla. */
  font-weight:400;font-style:normal;text-align:left
}
.ed-campo:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(227,189,106,.25)}
.ed-campo p{margin:0 0 10px}
.ed-campo ul,.ed-campo ol{margin:0 0 10px;padding-left:20px}
.ed-campo h3,.ed-campo h4{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--ink);margin:14px 0 6px}
.ed-campo blockquote{margin:0 0 10px;padding-left:14px;border-left:3px solid var(--line-2)}
.ed-vuoto::before{content:attr(data-vuoto);color:var(--ink-soft);pointer-events:none;display:block}

@media (max-width:600px){
  .sch-allegato{flex-wrap:wrap}
  .sch-allegato-azioni{width:100%}
  .chat-bolla{max-width:92%}
  .sch-schede{overflow-x:auto;scrollbar-width:none}
  .sch-schede::-webkit-scrollbar{display:none}
}
.chat-chi{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:4px}

/* ==========================================================================
   Le mie sedi
   ==========================================================================
   La settimana si legge come una settimana: sette colonne affiancate, i giorni
   chiusi visibilmente spenti. Un elenco cronologico di ventotto fasce dice le
   stesse cose e non se ne capisce nessuna.
   -------------------------------------------------------------------------- */

.sed-spenta{opacity:.55}
.sed-spenta a{color:var(--ink-soft)}
.sed-tabella a{color:var(--ink)}
.sed-tabella a:hover{color:var(--gold-deep)}
.sed-provincia{text-transform:uppercase;letter-spacing:.08em}
.sed-griglia-tre{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sed-griglia-quattro{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.sed-spunta{align-self:end;padding-bottom:12px}

.sed-avviso{
  background:#fdf6e6;border:1px solid var(--gold-3);border-radius:var(--r);
  padding:14px 16px;margin:0 0 18px;color:var(--ink-2)
}

/* --- la settimana -------------------------------------------------------- */
.sed-settimana{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:18px 0 22px
}
.sed-giorno{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 10px;min-width:0
}
.sed-giorno h3{
  font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;text-align:center
}
.sed-giorno-vuoto{background:transparent;border-style:dashed}
.sed-chiuso{margin:0;text-align:center;font-size:13px;color:var(--ink-soft)}

.sed-fascia{
  background:var(--paper);border:1px solid var(--line-2);border-radius:10px;
  padding:10px;margin-bottom:8px
}
.sed-fascia:last-child{margin-bottom:0}
.sed-fascia-testa{display:flex;flex-direction:column;gap:5px}
.sed-fascia-testa strong{font-size:14.5px;color:var(--ink);white-space:nowrap}
.sed-dettaglio{margin:8px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.sed-nessuno{color:var(--d2);font-weight:600}
.sed-fascia-azioni{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin-top:10px;padding-top:8px;border-top:1px solid var(--line)
}
.sed-fascia-azioni .btn{padding:6px 12px;font-size:13px}
.sed-fascia-azioni .sch-inline[open]{flex:1 1 100%}

.sed-modo{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:100px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  align-self:flex-start;white-space:nowrap
}
.sed-modo-in_person{background:#e6f3ec;color:var(--d5)}
.sed-modo-online{background:#e9f0f6;color:var(--d4)}
.sed-modo-both{background:var(--gold-3);color:var(--gold-deep)}

/* --- il modulo di una fascia --------------------------------------------- */
.sed-giorni{border:none;padding:0;margin:0 0 16px}
.sed-giorni legend{
  font-size:14px;font-weight:600;color:var(--ink-2);padding:0;margin-bottom:8px
}
.sed-giorni small{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
.sed-giorno-scelta{display:inline-block;margin:0 6px 6px 0}
.sed-giorno-scelta input{position:absolute;opacity:0;width:0;height:0}
.sed-giorno-scelta span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;padding:8px 12px;border-radius:100px;
  border:1px solid var(--line-2);background:var(--paper);
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s
}
.sed-giorno-scelta span:hover{border-color:var(--gold-2)}
.sed-giorno-scelta input:checked + span{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:var(--gold);color:#3a2a05
}
.sed-giorno-scelta input:focus-visible + span{outline:2px solid var(--gold-deep);outline-offset:2px}

.sed-form small{
  display:block;margin-top:6px;font-size:12.5px;font-weight:400;
  color:var(--ink-soft);line-height:1.55
}

@media (max-width:1100px){
  .sed-settimana{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:700px){
  .sed-settimana{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .sed-settimana{grid-template-columns:1fr}
  .sed-giorno-vuoto{display:none}
}

/* ==========================================================================
   Profilo pubblico
   ==========================================================================
   Le classi .sp- vestono la scheda e valgono in due posti: la pagina pubblica
   e l'anteprima nell'area riservata. Sono lo stesso markup, quindi devono
   essere lo stesso foglio di stile — altrimenti l'anteprima torna a mentire
   per un'altra strada.
   -------------------------------------------------------------------------- */

.pp-stato{margin-bottom:22px}
.pp-colonne{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:24px;align-items:start}
.pp-modifica{min-width:0}
.pp-salva{margin-bottom:26px}
.pp-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.pp-modifica small{display:block;margin-top:6px;font-size:12.5px;font-weight:400;color:var(--ink-soft);line-height:1.55}
.pp-modifica small code{font-size:12px;background:var(--paper-3);padding:1px 5px;border-radius:5px}

.pp-foto-riga{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.pp-foto{
  flex:0 0 auto;width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line-2);background:var(--paper-3)
}
.pp-iniziali{
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:600;
  background:hsl(var(--tinta) 42% 92%);color:hsl(var(--tinta) 55% 28%);border-color:hsl(var(--tinta) 40% 82%)
}
.pp-foto-azioni{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}

.pp-anteprima-colonna{position:sticky;top:96px}
.pp-anteprima-testa{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.pp-anteprima-testa h2{font-size:19px}
.pp-nota-anteprima{margin:0 0 12px}

/* --- la scheda ----------------------------------------------------------- */
.sp-pagina{padding:56px 0 80px;background:var(--paper-2);min-height:60vh}
.sp-wrap{max-width:820px}
.sp-briciole{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.sp-briciole a{color:var(--ink-soft)}
.sp-briciole a:hover{color:var(--gold-deep)}
.sp-piede{margin:26px 0 0;font-size:14.5px}

.sp-scheda{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 34px 30px;box-shadow:var(--shadow-sm)
}
.sp-anteprima{
  padding:22px 20px 18px;border-radius:var(--r);box-shadow:none;
  font-size:15px
}

.sp-testa{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.sp-foto{
  flex:0 0 auto;width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:3px solid var(--paper);box-shadow:0 6px 22px -8px rgba(10,37,64,.35);background:var(--paper-3)
}
.sp-anteprima .sp-foto{width:84px;height:84px}
.sp-iniziali{
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:600;
  background:hsl(var(--tinta) 42% 92%);color:hsl(var(--tinta) 55% 28%)
}
.sp-anteprima .sp-iniziali{font-size:30px}
.sp-identita{flex:1 1 240px;min-width:0}
.sp-nome{font-size:clamp(24px,3vw,32px);color:var(--ink);margin:0}
.sp-anteprima .sp-nome{font-size:22px}
.sp-titolo{margin:8px 0 0;font-size:16.5px;color:var(--gold-deep);font-weight:600}
.sp-anteprima .sp-titolo{font-size:14.5px}
.sp-lingue{margin:8px 0 0;font-size:14px;color:var(--ink-soft)}

.sp-blocco{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
.sp-blocco h2{
  font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px
}
.sp-blocco h2 ~ h2{margin-top:20px}

.sp-pastiglie{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sp-pastiglie li{
  padding:6px 14px;border-radius:100px;font-size:14px;
  background:var(--gold-3);color:var(--gold-deep);font-weight:600
}
.sp-pastiglie-chiare li{background:var(--paper-3);color:var(--ink-2);font-weight:500}

.sp-sede{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:12px
}
.sp-sede:last-child{margin-bottom:0}
.sp-sede h3{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--ink);margin:0}
.sp-presso{margin:4px 0 0;font-size:14px;color:var(--ink-soft)}
.sp-dove{margin:10px 0 0;font-size:15px;color:var(--ink-2);line-height:1.6}
.sp-note{margin:8px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.sp-mappa{font-size:14px;font-weight:600;text-decoration:underline}

.sp-orari{width:100%;margin-top:14px;border-collapse:collapse;font-size:14px}
.sp-orari th{
  text-align:left;font-weight:600;color:var(--ink-soft);padding:5px 14px 5px 0;
  white-space:nowrap;vertical-align:top;width:1%
}
.sp-orari td{padding:5px 0;color:var(--ink-2)}
.sp-modo{font-size:12px;color:var(--d4);font-weight:600}

.sp-contatti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.sp-contatti a{text-decoration:underline;text-decoration-color:var(--line-2)}

@media (max-width:980px){
  .pp-colonne{grid-template-columns:1fr}
  .pp-anteprima-colonna{position:static}
}
@media (max-width:600px){
  .sp-scheda{padding:24px 20px 22px}
  .sp-testa{gap:16px}
  .sp-foto{width:88px;height:88px}
  .sp-iniziali{font-size:32px}
}

/* ==========================================================================
   Agenda
   ========================================================================== */

.ag-richieste{border-left:3px solid var(--gold)}
.ag-elenco-richieste{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ag-elenco-richieste li{
  display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px
}
.ag-richiesta-testo{flex:1 1 260px;min-width:0}
.ag-richiesta-testo strong{display:block;font-size:15.5px;color:var(--ink)}
.ag-richiesta-azioni{display:flex;gap:8px;flex-wrap:wrap}
.ag-nota-paziente{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-2);font-style:italic}

.ag-navigazione{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.ag-navigazione h2{margin:0;font-size:19px;text-align:center;flex:1 1 auto}

.ag-settimana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:18px}
.ag-giorno{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 8px;min-width:0;min-height:120px
}
.ag-giorno h3{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
  font-family:'Space Grotesk',sans-serif;margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--line)
}
.ag-nome-giorno{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.ag-numero{font-size:17px;color:var(--ink)}
.ag-vuoto{background:transparent;border-style:dashed}
.ag-oggi{border-color:var(--gold-2);background:#fdfaf2}
.ag-oggi .ag-numero{color:var(--gold-deep)}

.ag-voce{
  background:var(--paper);border:1px solid var(--line-2);border-radius:9px;
  padding:8px 9px;margin-bottom:7px;font-size:13px
}
.ag-voce:last-child{margin-bottom:0}
.ag-voce>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:3px}
.ag-voce>summary::-webkit-details-marker{display:none}
.ag-voce strong{font-size:13.5px;color:var(--ink);white-space:nowrap}
.ag-titolo{display:block;color:var(--ink-2);overflow-wrap:anywhere;line-height:1.35}
.ag-voce .pro-stato{font-size:10.5px;padding:2px 7px;align-self:flex-start}

.ag-impegno{background:var(--paper-3);border-style:dashed;position:relative}
.ag-impegno .ag-titolo{color:var(--ink-soft)}
.ag-mini{position:absolute;top:4px;right:4px;margin:0}
.ag-x{
  width:20px;height:20px;border-radius:50%;line-height:1;font-size:15px;
  color:var(--ink-soft);background:transparent
}
.ag-x:hover{background:var(--paper);color:var(--d2)}

.ag-stato-cancelled{opacity:.5}
.ag-stato-cancelled strong,.ag-stato-cancelled .ag-titolo{text-decoration:line-through}
.ag-stato-completed{border-left:3px solid var(--d5)}
.ag-stato-no_show{border-left:3px solid var(--d2)}
.ag-stato-requested{border-left:3px solid var(--gold)}

.ag-dettaglio{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.ag-riga-dettaglio{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.ag-azioni{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.ag-azioni .btn{padding:5px 11px;font-size:12.5px}
.ag-azioni form{margin:0}

.ag-url input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.ag-istruzioni h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:20px 0 10px}
.ag-istruzioni ul{margin:0 0 14px;padding-left:20px;color:var(--ink-2);line-height:1.7;font-size:15px}
.ag-istruzioni li{margin-bottom:8px}
.ag-istruzioni .admin-note{margin-bottom:12px}

@media (max-width:1100px){ .ag-settimana{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:700px){  .ag-settimana{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){  .ag-settimana{grid-template-columns:1fr} .ag-vuoto{display:none} }

/* ==========================================================================
   Area del paziente
   ==========================================================================
   Più larga e più ariosa di quella del professionista: chi apre questa non
   lavora qui dentro tutto il giorno, ci passa due minuti. Meno densità, testo
   più grande, meno cose per schermata.
   -------------------------------------------------------------------------- */

.paz-main{max-width:920px}

.paz-dafare{border-left:3px solid var(--gold)}
.paz-elenco-dafare{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.paz-elenco-dafare li{
  display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;
  font-size:15px;color:var(--ink-2)
}

.paz-appuntamento{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:12px
}
.paz-primo{background:linear-gradient(135deg,#fdf9f0,#fdf6e6);border-color:var(--gold-3)}
.paz-quando{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.paz-quando strong{font-family:'Space Grotesk',sans-serif;font-size:19px;color:var(--ink)}
.paz-con{margin:8px 0 0;font-size:15.5px;color:var(--ink-2)}
.paz-dove{margin:10px 0 0;font-size:15px;color:var(--ink-2);line-height:1.65}
.paz-note{margin:8px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.6}

.paz-lista-appuntamenti{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.paz-lista-appuntamenti li{
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px
}
.paz-app-testo{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:4px}
.paz-app-testo strong{font-size:16px;color:var(--ink)}
.paz-app-azioni{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.paz-app-azioni .sch-inline[open]{align-self:stretch;width:100%}

.paz-messaggi{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.paz-messaggi a{
  display:flex;flex-direction:column;gap:3px;padding:13px 15px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2)
}
.paz-messaggi a:hover{border-color:var(--gold-2)}
.paz-chi{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink)}
.paz-anteprima{font-size:15px;line-height:1.5;overflow-wrap:anywhere}

.paz-professionisti{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.paz-professionisti li{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px
}
.paz-faccia{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid var(--paper);box-shadow:var(--shadow-sm);background:var(--paper-3);font-size:20px
}
.paz-prof-dati{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px}
.paz-prof-dati strong{font-family:'Space Grotesk',sans-serif;font-size:16.5px;color:var(--ink)}
.paz-prof-azioni{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap}

/* --- scegliere un'ora ---------------------------------------------------- */
.paz-avviso-prenota{
  background:#fdf6e6;border:1px solid var(--gold-3);border-radius:var(--r);
  padding:14px 16px;margin-bottom:20px;color:var(--ink-2)
}
.paz-giorno-slot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.paz-giorno-slot:first-of-type{border-top:none;padding-top:0}
.paz-giorno-slot h3{
  font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink-soft);
  letter-spacing:.03em;margin:0 0 10px
}
.paz-slot{display:flex;flex-wrap:wrap;gap:8px}
.paz-slot-form{margin:0}
.paz-ora{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  min-width:74px;padding:11px 14px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--paper);
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--ink);
  transition:background .2s,border-color .2s,transform .2s
}
.paz-ora:hover{
  border-color:var(--gold);background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#3a2a05;transform:translateY(-1px)
}
.paz-online{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--d4)}
.paz-ora:hover .paz-online{color:#3a2a05}

/* --- consensi ------------------------------------------------------------ */
.paz-consenso-salute{border-left:3px solid var(--d2)}
.paz-storia{
  list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px
}
.paz-storia li::before{content:'· ';color:var(--gold)}
.paz-testo-informativa{margin-top:14px}
.paz-testo-informativa .sch-testo{
  max-height:340px;overflow-y:auto;padding:14px 16px;margin-top:10px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r)
}
.paz-revoca{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

@media (max-width:600px){
  .paz-app-azioni{align-items:flex-start;width:100%}
  .paz-ora{min-width:66px;padding:10px 12px}
}
.sch-sospeso{margin-bottom:20px}


/* =========================================================================
   Dispositivi e acquisti — la pagina in quattro sezioni.
   ========================================================================= */

.sez{margin-bottom:22px}
.sez-titolo{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.sez-conta{
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
  min-width:24px;height:24px;padding:0 8px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper-3);color:var(--ink-2)
}
.sez-intro{margin:0 0 18px;max-width:70ch}

/* La sezione professionale è quella per cui questa persona è qui: un filo
   viola sul bordo la fa trovare senza doverla leggere. */
.sez-pro{border-left:4px solid #7b4bb7}

.cat-badge{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;white-space:nowrap;
  background:var(--paper-3);color:var(--ink-soft)
}
.cat-badge-pro{background:#f1e9fb;color:#5c3267}

/* --- la carta di un prodotto -------------------------------------------- */
.cat-elenco{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.cat-carta{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:16px
}
.cat-carta-pro{border-color:#e0d2f2}
.cat-foto{
  flex:none;width:92px;height:92px;border-radius:12px;overflow:hidden;
  background:var(--paper-3);display:flex;align-items:center;justify-content:center
}
.cat-foto img{width:100%;height:100%;object-fit:cover}
.cat-nofoto{color:var(--line-2)}
.cat-corpo{min-width:0;flex:1 1 auto}
.cat-testa{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.cat-testa h3{font-size:17px;margin:0}
.cat-occhiello{margin:0 0 10px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.cat-posseduto{
  margin:0 0 10px;font-size:13.5px;color:#185e3a;font-weight:600
}
.cat-documenti{list-style:none;margin:0 0 12px;padding:0;font-size:13.5px}
.cat-documenti li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-bottom:3px}
.cat-documenti span{color:var(--ink-soft);font-size:12.5px}
.cat-acquisto{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.cat-prezzo{
  margin:0;font-family:'Space Grotesk',sans-serif;font-size:19px;
  font-weight:600;color:var(--ink)
}
.cat-prezzo span{
  font-size:14px;font-weight:400;color:var(--ink-soft);
  text-decoration:line-through;margin-left:7px
}

/* --- i passi dell'attivazione, dentro la sezione 1 ---------------------- */
.dis-passo{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.dis-passo h3{font-size:17px;margin:0 0 8px}
.dis-passo .admin-note{margin-bottom:14px;max-width:70ch}
.dis-aggiungi{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.dis-aggiungi summary{cursor:pointer;font-weight:600;font-size:15px}

/* --- il carrello: riepilogo in fondo, barra incollata in basso ---------- */
.car-riepilogo{border-left:4px solid var(--gold-2)}
.car-righe{list-style:none;margin:0 0 12px;padding:0}
.car-righe li{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 0;border-top:1px solid var(--line);font-size:14.5px
}
.car-righe li:first-child{border-top:0}
.car-nome{flex:1 1 auto;min-width:0;color:var(--ink)}
.car-quanti{flex:none;color:var(--ink-soft);font-size:13.5px}
.car-cifra{flex:none;font-family:'Space Grotesk',sans-serif;font-weight:600}
.car-sconto{margin:0 0 6px;font-size:14px;color:#185e3a;font-weight:600}
.car-totale{margin:0;font-size:15px;color:var(--ink-2)}
.car-totale strong{font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--ink);margin-left:6px}
.car-vai{margin:16px 0 0}

/* Incollata in basso. Il posto sotto lo occupa davvero (padding sul main),
   o l'ultima riga della pagina resta nascosta sotto la barra. */
.car-barra{
  position:sticky;bottom:0;z-index:30;margin:22px -28px 0;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-2);box-shadow:0 -10px 30px -20px rgba(10,37,64,.35)
}
.car-barra-in{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:12px 28px
}
.car-barra-testo{font-size:14.5px;color:var(--ink-2)}
.car-barra-testo strong{color:var(--ink)}
/* Il posto sotto la barra va occupato davvero, o mentre è incollata copre
   quello che sta sotto. `:has()` perché la barra c'è solo col carrello
   pieno: un margine sempre presente sarebbe spazio morto per tutti gli altri. */
body:has(.car-barra) .pro-main{padding-bottom:78px}

/* --- sezione 0 · il tutorial ------------------------------------------- */
.tut{border-left:4px solid var(--d4)}
.tut-testa{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.tut-titolo{font-size:19px;margin:0;color:var(--gold-deep)}

/* Il conteggio dei passi è una pastiglia, non una scritta smorta in un
   angolo: dice quanto manca, ed è la sola cosa in quel riquadro che risponde
   a «quanto ci metto». Il tono è quello dell'attesa, già usato altrove per
   «sta succedendo qualcosa». */
.tut-conta{
  flex:none;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.04em;padding:5px 12px;border-radius:100px;white-space:nowrap;
  background:#fdf6e8;color:#7a5510
}

/* «Non mostrare mai più» prende il blu della barra qui a sinistra: è la scelta
   definitiva del riquadro, e deve leggersi diversa da «Chiudi», che invece è
   un rinvio a domani. Stessa forma, peso opposto. */
.tut-mai{background:var(--d4);border:1.5px solid var(--d4);color:#fff}
.tut-mai:hover{background:#17495e;border-color:#17495e;color:#fff}
.tut-passo{font-size:15px;color:var(--ink-2);line-height:1.7;max-width:72ch}
.tut-passo p{margin:0 0 12px}
.tut-passo p:last-child{margin-bottom:0}
.tut-passo img,.tut-passo video{
  display:block;max-width:100%;border-radius:12px;margin:14px 0;border:1px solid var(--line)
}
.tut-piede{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)
}
.tut-avanti{display:flex;gap:10px;margin-left:auto}

@media (max-width:640px){
  .cat-elenco{grid-template-columns:1fr}
  .cat-carta{gap:12px;padding:14px}
  .cat-foto{width:72px;height:72px}
  .car-barra{margin-left:-18px;margin-right:-18px}
  .car-barra-in{padding:10px 18px}
  .tut-piede{flex-direction:column;align-items:stretch}
  .tut-avanti{margin-left:0}
  .tut-avanti .btn{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   Rete e abbonamenti (17 settembre 2026)
   ========================================================================== */
.rete-livelli{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 18px}
.rete-livelli>div{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.rete-livelli strong{font-size:1.6rem;line-height:1.1;color:var(--ink)}
.rete-livelli span{font-size:.85rem;color:var(--ink-soft)}
.rete-si{color:#1d7a4c;font-weight:600}
.rete-no{color:var(--ink-soft)}
.rete-invito{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.rete-invito-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.rete-invito-testa h2{margin:0}
.rete-invito-testa .ter-email{display:block}
.rete-scade{margin:0;font-size:.92rem;color:var(--ink-2)}
.rete-link{display:flex;gap:8px;align-items:center;max-width:100%}
.rete-link input{flex:1;min-width:0;font:inherit;font-size:.85rem;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink-2)}
.rete-qr-box summary{cursor:pointer;font-size:.9rem;color:var(--gold-deep)}
.rete-qr{display:block;width:200px;max-width:100%;height:auto;margin:10px 0}
.rete-ritira{margin:0}
.rete-storico summary{cursor:pointer;margin-top:10px;color:var(--ink-soft)}
.admin-panel .chipset{border:0;padding:0;margin:0 0 12px}
.admin-panel .chipset legend{font-size:.85rem;font-weight:600;margin-bottom:6px;padding:0}

.abb-scheda h2{margin:0}
.abb-anno{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.abb-anno h3{margin:0 0 8px;font-size:1.05rem}
.abb-anno h3 small{font-weight:400;color:var(--ink-soft);font-size:.85rem;margin-left:6px}
.abb-futuro{opacity:.78}
.abb-riga{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:8px 0}
.abb-riga>span{min-width:130px;color:var(--ink-soft)}
.abb-riga em{font-style:normal;font-size:.85rem;color:var(--ink-soft);flex-basis:100%}
.abb-caselle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.abb-casella{display:flex;flex-direction:column;gap:4px}
.abb-barra{display:flex;height:12px;border-radius:6px;background:var(--paper-3);overflow:hidden;border:1px solid var(--line)}
.abb-buoni{background:var(--gold)}
.abb-cash{background:var(--ink-2)}
.abb-cifre{font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tab-scorre{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:620px){
  .rete-livelli{grid-template-columns:1fr;gap:8px}
  .rete-livelli>div{flex-direction:row;align-items:baseline;gap:8px;padding:10px 12px}
  .rete-livelli strong{font-size:1.25rem}
  .abb-caselle{grid-template-columns:1fr}
  .abb-riga>span{min-width:0;flex-basis:100%}
}
.admin-h3{font-size:1rem;margin:18px 0 8px;color:var(--ink)}
.abb-registra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 12px}
.abb-registra select,.abb-registra input{font:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm)}
.rete-catena{margin:0 0 10px;padding-left:0;list-style:none}
.rete-catena li{padding:4px 0}
/* Con Abbonamenti e Rete le voci della console sono nove: più strette, e il
   marchio non si attacca più alla prima. */
@media (min-width:719px){
  .admin-nav{gap:16px;margin-left:10px}
  .admin-nav a{font-size:14px;white-space:nowrap}
  .admin-user span{white-space:nowrap}
}
/* Carta di un prodotto in abbonamento (17 settembre 2026) */
.cat-abb{flex:1 1 100%;background:var(--paper-3);border-radius:12px;padding:10px 12px;font-size:14px}
.cat-abb-titolo{margin:0 0 6px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#5c3267}
.cat-abb dl{margin:0}
.cat-abb dl>div{padding:5px 0}
.cat-abb dt{color:var(--ink-soft);font-size:12.5px}
.cat-abb dd{margin:1px 0 0}
.cat-abb small{color:var(--ink-soft)}
.cat-abb-oggi{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:3px 0}
.cat-abb-oggi strong{font-family:'Space Grotesk',sans-serif;font-size:17px;white-space:nowrap}
.cat-abb-nota{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.car-abb{display:block;font-size:12.5px;color:#5c3267;margin-top:2px}
.car-prova{margin:0 0 12px;font-size:13.5px}

/* --- abbonamento del dispositivo: condizioni, scadenza, due anni (17/09/2026) --- */
.dis-abbonamento{grid-column:1/-1;min-width:0;border-top:1px solid var(--line);padding-top:18px}
.dis-carta-attesa{grid-template-columns:1fr;border-style:dashed}
.abx{--abx-ok:#185e3a;--abx-ok-bg:#eaf6ef;--abx-ok-bd:#b9dcc6;--abx-oro:#8a6212;--abx-oro-bg:#fbf1da;--abx-oro-bd:#e8cf92}
.abx-testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.abx-titolo{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5c3267}
.abx-motivo{margin:0 0 12px;font-size:14px;color:#921635;font-weight:600}
.abx-condizioni{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 8px}
.abx-condizioni>div{background:var(--paper-2);border:1px solid transparent;border-radius:10px;padding:9px 12px}
.abx-condizioni dt{font-size:12px;color:var(--ink-soft);margin:0 0 2px}
.abx-condizioni dd{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.abx-spiega{margin:0 0 16px;font-size:13px;color:var(--ink-soft)}
.abx-anno{margin:14px 0 0}
.abx-anno-nome{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 7px;font-size:14px}
.abx-anno-nome strong{font-family:'Space Grotesk',sans-serif;color:var(--ink)}
.abx-anno-nome span{color:var(--ink-soft);font-size:13px}
.abx-anno-nome em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--abx-ok);background:var(--abx-ok-bg);padding:2px 8px;border-radius:100px}
.abx-riga{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:8px;align-items:stretch}
.abx-blocchi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.abx-tappa,.abx-blocco{border:1px solid var(--line-2);border-radius:10px;padding:8px 11px;min-height:58px;display:flex;flex-direction:column;justify-content:center;background:#fff;min-width:0}
.abx-tappa-nome{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.abx-tappa strong,.abx-blocco strong{font-family:'Space Grotesk',sans-serif;font-size:14px;line-height:1.3}
.abx-tappa small{font-size:11.5px;color:var(--ink-soft);line-height:1.3}
.abx-fatto{border-color:var(--abx-ok-bd)!important;background:var(--abx-ok-bg)!important}
.abx-fatto strong,.abx-fatto dd{color:var(--abx-ok)!important}
.abx-dafare{border-color:var(--abx-oro-bd)!important;background:var(--abx-oro-bg)!important}
.abx-dafare strong,.abx-dafare dd{color:var(--abx-oro)!important}
.abx-futuro .abx-anno-nome strong{color:var(--ink-2)}
.abx-dettagli{margin:10px 0 0;font-size:12.5px;text-align:right}

/* compatto: la colonna della panoramica (300px) */
.abx-compatto{text-align:left;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.abx-scadenza-breve{margin:0 0 6px;font-size:13px;color:var(--ink-2)}
.abx-scadenza-breve strong{color:var(--abx-oro)}
.abx-compatto .abx-anno{margin-top:10px}
.abx-compatto .abx-anno-nome{font-size:12.5px;margin-bottom:5px}
.abx-compatto .abx-anno-nome span{font-size:11.5px}
.abx-compatto .abx-riga{grid-template-columns:1fr;gap:5px}
.abx-compatto .abx-blocchi{gap:5px}
.abx-compatto .abx-tappa{min-height:0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 9px}
.abx-compatto .abx-tappa strong{font-size:13px}
.abx-compatto .abx-blocco{min-height:28px;align-items:center;padding:3px}
.abx-compatto .abx-blocco .abx-tappa-nome{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:0}
.abx-compatto .abx-fatto .abx-tappa-nome{color:var(--abx-ok)}
.abx-compatto .abx-dafare .abx-tappa-nome{color:var(--abx-oro)}

@media (max-width:900px){
  .abx-condizioni{grid-template-columns:repeat(2,minmax(0,1fr))}
  .abx-riga{grid-template-columns:1fr}
  .abx-tappa{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
}
@media (max-width:520px){
  .abx-condizioni dd{font-size:14px;white-space:nowrap}
  .abx-blocchi{grid-template-columns:1fr}
  .abx-blocco{min-height:0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px}
}
.abb-prodotto{margin:0 0 10px}

/* --- wallet: lo stato di un buono riduzione (18/09/2026) ---
   Un buono che non basta a coprire una casella intera non si spende a metà:
   resta fermo, in attesa che ne arrivi un altro. Va scritto in rosso perché
   quel credito c'è ma è già promesso: verde sarebbe una bugia, grigio lo
   farebbe sembrare perso. */
.buono-attesa{color:#921635;font-weight:600}
.buono-fatto{color:#185e3a}