:root{--brand:#3D6B5C;--brand-2:#4F8272;--brand-3:#8FBBA8;--bg:#FBFCFB;--bg-2:#EEF3F2;--tint:#D6E3E4;--tint-2:#EDF2F2;--paper:#FFFFFF;--ink:#1E2827;--ink-2:#455351;--muted:#535E5C;--line:#E0E6E4;--accent:#A24634;--accent-2:#87382A;--accent-soft:#FAE6E0;--gilt:#A24634;--sky:#E9E5DC;--sky-2:#F5F2EB;--ok:#2F6B57;--warn:#7C551A;--stop:#A6423D;--r:14px;--r-s:9px;--shadow:0 1px 2px rgba(20,35,50,.05), 0 8px 28px rgba(20,35,50,.07);--shadow-lg:0 2px 6px rgba(20,35,50,.07), 0 20px 50px rgba(20,35,50,.12);--wrap:1180px}
/* AlpenSitter - foglio di stile unico */

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

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display{font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);color:var(--brand)}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);margin-top:0;color:var(--ink)}
h3{font-size:1.24rem;color:var(--ink)}
p{margin:0 0 1.05em}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.sec{padding:clamp(48px,7vw,86px) 0}
.sec-tight{padding:clamp(32px,4.5vw,54px) 0}
.bg-paper{background:var(--paper)}
.bg-pine{background:var(--brand);color:rgba(255,255,255,.85)}
.bg-pine h1,.bg-pine h2,.bg-pine h3{color:#fff}
.cta-band h1,.cta-band h2{color:#fff}
.bg-cream2{background:var(--bg-2)}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.xs{font-size:.79rem}
.lead{font-size:1.14rem;color:var(--ink-2)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:var(--bg);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;padding:11px 0}
.logo{display:flex;align-items:center;gap:9px;font-family:"Fraunces",Georgia,serif;
  font-weight:600;font-size:1.19rem;color:var(--brand);letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo svg{flex:none}
.nav-links{display:flex;gap:20px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--ink-2);font-size:.92rem;font-weight:500}
.lang{display:flex;gap:5px;align-items:center;border-left:1px solid var(--line);padding-left:15px}
.lang a{font-size:.76rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  padding:3px 6px;border-radius:5px}
.lang a.on{background:var(--brand);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-size:1rem;cursor:pointer;color:var(--brand)}
@media(max-width:900px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 22px 16px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 0;width:100%;border-bottom:1px solid var(--bg-2)}
  .lang{border-left:0;padding-left:0;padding-top:10px}
  .burger{display:block}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:#fff;padding:13px 24px;border-radius:999px;
  font-weight:600;font-size:.96rem;border:1px solid var(--brand);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:hover{background:var(--brand-2);text-decoration:none;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.16)}
.btn-amber{background:var(--accent);border-color:var(--accent)}
.btn-amber:hover{background:var(--accent-2)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper);color:var(--brand)}
.btn-light{background:#fff;color:var(--brand);border-color:#fff}
.btn-light:hover{background:var(--bg-2);color:var(--brand)}
.btn-sm{padding:9px 17px;font-size:.87rem}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(760px 520px at 88% 8%, var(--tint-2) 0%, transparent 66%),
   radial-gradient(900px 620px at 6% -14%, var(--tint) 0%, transparent 72%),
   linear-gradient(168deg,var(--tint) 0%,var(--bg) 58%,var(--bg-2) 100%)}
.hero-in{padding:clamp(46px,6.5vw,88px) 0 clamp(64px,8vw,104px);position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);
  color:var(--accent-2);font-size:.775rem;font-weight:700;letter-spacing:.075em;
  text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:20px}
.hero h1{margin-bottom:.42em}
.hero .lead{font-size:1.2rem;max-width:610px}
.ridge{position:absolute;bottom:-1px;left:0;width:100%;height:auto;z-index:1;display:block}
.trustline{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:.885rem;color:var(--ink-2)}
.trustline span{display:flex;align-items:center;gap:7px}
.tick{color:var(--brand-3);font-weight:700}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card-link{transition:transform .14s ease,box-shadow .14s ease}
.card-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.num{font-family:"Fraunces",Georgia,serif;font-size:2rem;color:var(--accent);line-height:1;
  display:block;margin-bottom:.28em}

/* ---------- sitter profile cards ---------- */
.sitters{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);padding-top:12px}
@media(max-width:940px){.sitters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.sitters{grid-template-columns:1fr}}
.sitter{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.sitter-top{display:flex;gap:14px;align-items:center;padding:20px 20px 14px}
.avatar{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-family:"Fraunces",Georgia,serif;font-size:1.35rem}
.sitter-body{padding:0 20px 20px;flex:1;display:flex;flex-direction:column}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg-2);
  border:1px solid var(--line);color:var(--ink-2);font-size:.755rem;font-weight:600;
  padding:3px 9px;border-radius:999px}
.chip-ok{background:var(--accent-soft);border-color:var(--line);color:var(--accent-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.rate{font-family:"Fraunces",Georgia,serif;font-size:1.2rem;color:var(--brand)}
.locked{margin-top:auto;background:var(--bg);border-top:1px solid var(--line);
  margin-left:-20px;margin-right:-20px;margin-bottom:-20px;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ---------- badges / verification ladder ---------- */
.vlist{display:grid;gap:12px}
.vrow{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px}
.vrow.top{border-color:var(--accent);background:linear-gradient(180deg,#fff,var(--accent-soft))}
.vmark{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg-2);color:var(--ok);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;margin-top:2px}
.vprice{margin-left:auto;font-weight:700;color:var(--brand);white-space:nowrap;font-size:.94rem}
@media(max-width:620px){.vprice{margin-left:0;width:100%}}

/* ---------- pricing ---------- */
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;text-align:center;box-shadow:var(--shadow);position:relative}
.price-card.hi{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.price-card .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 13px;border-radius:999px;white-space:nowrap}
.price{font-family:"Fraunces",Georgia,serif;font-size:2.5rem;color:var(--brand);line-height:1;
  margin:.25em 0 .1em}
.ul{list-style:none;padding:0;margin:0;text-align:left}
.ul li{padding:8px 0 8px 27px;position:relative;border-bottom:1px solid var(--bg-2);font-size:.94rem}
.ul li:last-child{border-bottom:0}
.ul li:before{content:"✓";position:absolute;left:0;color:var(--brand-3);font-weight:700}
.ul.no li:before{content:"—";color:var(--muted)}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;background:var(--paper);font-size:.94rem;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--bg-2);font-weight:700;font-size:.85rem;letter-spacing:.02em}
tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}
.yes{color:var(--ok);font-weight:700}.no{color:var(--muted)}
.bg-pine table,.bg-pine td,.bg-pine th{color:var(--ink)}
.bg-pine .yes{color:var(--ok)}.bg-pine .no{color:var(--muted)}

/* ---------- structures / semaforo ---------- */
.struct{display:flex;gap:14px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px;flex-wrap:wrap}
.struct .st-status{margin-left:auto;display:flex;align-items:center;font-size:.87rem;font-weight:600}

/* semaforo grafico, cornice cipria, luci LED — stato letto da Supabase (colonna strutture.stato) */
.semaforo-luce{display:block;width:26px;height:26px;border-radius:50%;flex:none;
  background:#00000024;box-shadow:inset 0 2px 4px rgba(0,0,0,.22);opacity:.4;
  transition:opacity .25s ease,box-shadow .25s ease,background .25s ease}
.semaforo-luce.semaforo-verde.on{opacity:1;background:radial-gradient(circle at 34% 30%,#d6ffe0,#17b854 68%);
  box-shadow:0 0 12px 3px rgba(23,184,84,.7),inset 0 -2px 5px rgba(0,0,0,.15)}
.semaforo-luce.semaforo-gialla.on{opacity:1;background:radial-gradient(circle at 34% 30%,#fff2c2,#dba400 68%);
  box-shadow:0 0 12px 3px rgba(219,164,0,.7),inset 0 -2px 5px rgba(0,0,0,.15)}
.semaforo-luce.semaforo-rossa.on{opacity:1;background:radial-gradient(circle at 34% 30%,#ffd0ca,#cf3527 68%);
  box-shadow:0 0 12px 3px rgba(207,53,39,.7),inset 0 -2px 5px rgba(0,0,0,.15)}

.semaforo-cipria{display:inline-flex;flex-direction:column;gap:12px;align-items:center;
  background:#EDC9C8;border-radius:20px;padding:14px 11px;width:56px}

.semaforo-mini{display:inline-flex;gap:5px;align-items:center;background:#EDC9C8;
  border-radius:999px;padding:5px 8px;margin-right:9px;vertical-align:middle;flex:none}
.semaforo-mini .semaforo-luce{width:10px;height:10px}

/* ---------- forms ---------- */
form.as{display:grid;gap:15px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
label{font-weight:600;font-size:.9rem;display:block;margin-bottom:5px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-s);font:inherit;font-size:.96rem;background:var(--bg);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-3);outline-offset:1px;background:#fff}
textarea{min-height:110px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:620px){.f2{grid-template-columns:1fr}}
.checkrow{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5}
.checkrow input{width:auto;margin-top:3px;flex:none}
fieldset{border:1px solid var(--line);border-radius:var(--r-s);padding:18px;margin:0}
legend{font-weight:700;font-size:.9rem;padding:0 8px;color:var(--brand)}

/* ---------- notes ---------- */
.note{border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:15px 18px;border-radius:0 var(--r-s) var(--r-s) 0;font-size:.92rem}
.note-cool{border-left-color:var(--brand-3);background:var(--bg-2)}
.disclaimer{font-size:.82rem;color:var(--muted);background:var(--bg-2);
  border:1px dashed var(--line);border-radius:var(--r-s);padding:13px 16px}

/* ---------- footer ---------- */
footer.site{background:var(--brand);color:rgba(255,255,255,.78);padding:54px 0 30px;margin-top:10px}
footer.site h4{color:#fff;font-family:Inter,sans-serif;font-size:.79rem;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 13px}
footer.site a{color:rgba(255,255,255,.78);font-size:.9rem;display:block;padding:3.5px 0}
footer.site a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fbot{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;
  font-size:.8rem;color:rgba(255,255,255,.6);display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}

/* ---------- misc ---------- */
.breadcrumb{font-size:.82rem;color:var(--muted);padding:15px 0 0}
.breadcrumb a{color:var(--muted)}
.pill-links{display:flex;flex-wrap:wrap;gap:8px}
.pill-links a{background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:.85rem;color:var(--ink-2)}
.pill-links a:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}
.pill-links a.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
.cta-band{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;
  border-radius:var(--r);padding:clamp(30px,5vw,48px);text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);max-width:600px;margin-left:auto;margin-right:auto}
hr.soft{border:0;border-top:1px solid var(--line);margin:34px 0}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  padding:6px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--accent);font-weight:700;margin-right:10px}
.faq[open] summary:before{content:"–"}
.faq p{padding-bottom:8px;margin-bottom:6px;font-size:.95rem;color:var(--ink-2)}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:18px 22px}
.toc ol{margin:0;padding-left:20px;font-size:.92rem}



/* ---------- i disegni centrati nelle pagine ---------- */
.disegno-c{display:flex;justify-content:center;margin:26px 0 4px}
.disegno-c svg,.disegno-c img{width:100%;max-width:430px;height:auto;transform:rotate(-1.2deg);display:block}
.disegno-s svg,.disegno-s img{max-width:250px}
.disegno-m svg,.disegno-m img{max-width:330px}



/* ---------- fascia gratis ---------- */
.gratis{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(180deg,#fff,var(--bg-2));
  border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r);
  padding:18px 22px;margin:20px 0;font-size:.97rem;line-height:1.6}
.gratis:before{content:"✓";color:var(--ok);font-weight:700;font-size:1.3rem;line-height:1.2}
/* ---------- numeri utili ---------- */
.num-list{display:grid;gap:10px}
.num-row{display:flex;gap:16px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--brand-3);border-radius:var(--r-s);padding:15px 18px}
.num-row.urg{border-left-color:var(--stop);background:linear-gradient(90deg,rgba(180,84,76,.05),var(--paper) 22%)}
.num-n{font-family:"Fraunces",Georgia,serif;font-size:1.42rem;color:var(--brand);font-weight:700;
  min-width:82px;line-height:1.15}
.num-row.urg .num-n{color:var(--stop)}
@media(max-width:520px){.num-row{flex-direction:column;gap:4px}.num-n{min-width:0}}
/* ---------- stickers, motivi, separatori ---------- */
.stk{display:inline-block;width:var(--sz,64px);height:var(--sz,64px);vertical-align:middle;
  transform:rotate(var(--rot,-8deg));
  filter:drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff)
         drop-shadow(0 -1.6px 0 #fff) drop-shadow(0 4px 6px rgba(25,40,55,.22))}
.stk svg{width:100%;height:100%;display:block}
.stk-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:2px 0 26px}
.stk-h{--sz:44px;margin-left:10px}
.sep{display:flex;justify-content:center;margin:4px 0 22px}
.sep svg{width:min(420px,70%);height:22px}
.pattern{background-image:url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><g fill="none" stroke="%23A8BCCE" stroke-width="1.6" opacity="0.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 26 L16 12 L24 26Z"/><path d="M46 58 L54 44 L62 58Z"/><circle cx="52" cy="18" r="2.2"/><circle cx="18" cy="52" r="2.2"/><path d="M34 40 l3 -4 l3 4"/></g></svg>");background-repeat:repeat;background-size:72px 72px}
.pattern>.wrap{position:relative;z-index:1}
.disegno-c{position:relative}
.disegno-c::before{content:"";position:absolute;top:12px;left:50%;width:112px;height:26px;
  transform:translateX(-50%) rotate(-3deg);background:rgba(247,214,150,.55);
  border-left:1px dashed rgba(0,0,0,.10);border-right:1px dashed rgba(0,0,0,.10);
  box-shadow:0 1px 3px rgba(0,0,0,.10);z-index:2;pointer-events:none}
@media(max-width:620px){.stk-row .stk{--sz:48px}}
/* ---------- il disegno ---------- */
.hero>.wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(20px,3vw,48px);align-items:center}
.hero-in{max-width:none}
.disegno{position:relative;right:auto;bottom:auto;width:100%;max-width:520px;height:auto;
  justify-self:end;align-self:center;z-index:1;pointer-events:none;transform:rotate(-1.6deg);
  margin-bottom:clamp(40px,6vw,74px)}
@media(max-width:1100px){.disegno{max-width:440px}}
@media(max-width:860px){.hero>.wrap{grid-template-columns:1fr}
  .disegno{justify-self:center;margin:8px auto clamp(56px,9vw,90px);max-width:420px}}
@media(max-width:900px){
  .disegno-vecchio{position:relative;right:auto;bottom:auto;width:104%;max-width:none;margin:26px -2% -18px;
    transform:rotate(-1deg)}
  .hero-in{padding-bottom:6px}}
/* ---------- disegni in cornice ---------- */
.quadretti{position:absolute;right:6%;bottom:15%;width:min(41%,440px);z-index:1;pointer-events:none}
.q{margin:0;background:#fff;padding:9px;border:7px solid #E3D6BE;border-radius:3px;
  box-shadow:0 14px 34px rgba(30,40,55,.16), 0 3px 8px rgba(30,40,55,.10);
  transform:rotate(var(--rot,0deg))}
.q svg{display:block;width:100%;height:auto;border:1px solid rgba(0,0,0,.06)}
.q-a{--rot:-3.2deg;width:78%;position:relative;z-index:2}
.q-b{--rot:5.5deg;width:52%;position:absolute;right:-13%;bottom:-19%;z-index:3;
  border-color:#DCC9AE;padding:7px}
@media(max-width:1100px){.quadretti{width:min(46%,400px);bottom:13%;right:5%}}
@media(max-width:900px){
  .quadretti{position:relative;right:auto;bottom:auto;width:100%;max-width:420px;
    margin:34px 0 8px;display:block}
  .q-a{width:82%}
  .q-b{width:48%;right:0;bottom:-10%}
}
/* ---------- illustrazioni ---------- */
.hero-art{position:absolute;right:0;bottom:-2px;width:min(56%,660px);height:auto;z-index:1;
  pointer-events:none;user-select:none}
@media(max-width:900px){.hero-art{position:relative;width:104%;right:-2%;margin:24px 0 -30px;opacity:.95}
  .hero-in{padding-bottom:10px}}
.ridge{z-index:3}
.hero-in{z-index:2}
.ill{width:100%;max-width:190px;height:auto;display:block;margin:0 0 16px}
.card .ill{margin-bottom:14px}
.ic{width:19px;height:19px;flex:none}
.vmark{background:var(--accent-soft);color:var(--accent-2)}
.ill-band{display:flex;justify-content:center;padding:6px 0 0}
.ill-band svg{max-width:520px;width:100%;height:auto}
.legal h2{margin-top:2em;font-size:1.35rem}
.legal h3{margin-top:1.6em;font-size:1.05rem}
.legal{font-size:.96rem}
.sitter.ev{border-color:var(--accent);box-shadow:0 3px 18px rgba(168,80,104,.14);position:relative;
  overflow:visible}
.chip-ev{position:absolute;top:-13px;left:18px;background:var(--accent);color:#fff;border-color:var(--accent);
  font-weight:700;z-index:3;font-size:.74rem;padding:5px 12px;white-space:nowrap}
.checkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 14px}
.chk{display:flex;gap:9px;align-items:center;font-weight:400;font-size:.9rem;margin:0;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:9px 12px;cursor:pointer}
.chk:hover{border-color:var(--brand-3)}
.chk input{width:auto;margin:0;flex:none}
.paesaggio{position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-lg);line-height:0}
.paesaggio img{width:100%;display:block;height:clamp(190px,26vw,350px);max-height:350px;
  border:none;object-fit:cover;object-position:center 72%}
.paesaggio-cap{position:absolute;bottom:14px;left:18px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(3px);color:var(--ink);font-size:.78rem;font-weight:600;
  padding:6px 13px;border-radius:999px;letter-spacing:.01em}
@media(max-width:620px){.paesaggio-cap{font-size:.7rem;left:10px;bottom:10px}}
.mappa-box{position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:0;overflow:hidden}
#mappa-leaflet{width:100%;height:560px;background:var(--bg-2)}
@media(max-width:620px){#mappa-leaflet{height:420px}}

/* segnavia personalizzati sopra le tile OpenStreetMap */
.mp-pin{position:relative;background:var(--pin-color,var(--brand));
  border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:var(--shadow)}
.mp-pin:after{content:"";position:absolute;top:22%;left:22%;width:56%;height:56%;
  background:#fff;border-radius:50%}
.mp-poi{width:26px;height:26px;border-radius:50%;background:var(--poi-color,var(--accent-2));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  border:2px solid #fff;box-shadow:var(--shadow)}

.mp-legenda{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:16px;
  font-size:.85rem;color:var(--muted)}
.mp-legenda span{display:inline-flex;align-items:center;gap:8px}
.mp-dot{width:13px;height:13px;border-radius:50%;display:inline-block}
.mp-it{background:var(--brand)}.mp-ch{background:var(--accent)}
.mp-ring{background:transparent;box-shadow:inset 0 0 0 2px var(--brand)}
.mp-poidot{background:var(--accent-2)}
.mp-kidsdot{background:var(--warn)}
.mp-petsdot{background:var(--ink-2)}

/* popup Leaflet in stile sito */
.leaflet-popup-content-wrapper{border-radius:var(--r-s);box-shadow:var(--shadow-lg)}
.leaflet-popup-content{font-family:Inter,sans-serif;font-size:.9rem;margin:10px 14px}
.leaflet-popup-content a{color:var(--brand-2);font-weight:600}
.mp-dash{width:26px;height:0;border-top:3px dashed var(--brand-3);display:inline-block}
.dona-band{display:flex;gap:18px;align-items:center;background:linear-gradient(180deg,#fff,var(--bg-2));
  border:1px dashed var(--line);border-radius:var(--r-s);padding:20px 24px}
.dona-band>a{flex:none;margin-left:auto}
.dona-band p{color:var(--ink-2)}
@media(max-width:620px){.dona-band{flex-direction:column;align-items:flex-start}
  .dona-band>a{margin-left:0}}
.btn-off{background:var(--bg-2);border-color:var(--line);color:var(--muted);cursor:default;box-shadow:none}
.btn-off:hover{background:var(--bg-2);color:var(--muted);transform:none}
.num-n{white-space:nowrap;flex:none}
@media(max-width:560px){.num-n{font-size:1.08rem}}
.grid .card{display:flex;flex-direction:column}
.grid .card>.btn{margin-top:auto;align-self:flex-start}
/* ---------- bivio bambini / animali ---------- */
.scelta{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.scelta-c{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:0 0 26px;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.scelta-c:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-3);
  text-decoration:none}
.scelta-c img{display:block;width:100%;max-width:none;height:190px;object-fit:contain;object-position:center bottom;
  background:linear-gradient(180deg,var(--tint-2),var(--paper));padding:16px 16px 0;margin:0}
.scelta-c>div{padding:22px 26px 0}
.scelta-c h3{margin:10px 0 8px;font-size:1.5rem}
.scelta-c p{color:var(--ink-2)}
.scelta-go{display:inline-block;margin-top:12px;font-weight:700;font-size:.92rem;color:var(--accent)}
.scelta-c:hover .scelta-go{text-decoration:underline}
.scelta-sm .scelta-c img{height:130px}
@media(max-width:760px){.scelta{grid-template-columns:1fr}.scelta-c img{height:160px}}
/* ---------- passi numerati ---------- */
.steps{display:grid;gap:2px;counter-reset:none}
.step{display:flex;gap:20px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);padding:22px 24px;margin-bottom:14px;position:relative}
.step-n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.step-b h3{margin:6px 0 8px;font-size:1.14rem}
.step-b p{font-size:.95rem;color:var(--ink-2);margin:0 0 9px}
.step-b p:last-child{margin-bottom:0}
.step:not(:last-child):after{content:"";position:absolute;left:46px;bottom:-14px;width:1px;height:14px;
  background:var(--line)}
@media(max-width:620px){.step{gap:14px;padding:18px 16px}.step-n{width:36px;height:36px;font-size:1.1rem}
  .step:not(:last-child):after{left:34px}}

/* ============================================================
   ALBA, LA MASCOTTE  +  movimento e sfumature
   ============================================================ */

/* --- la marmotta --- */
.mascotte{display:block;width:100%;height:auto;overflow:visible}

/* la marmotta + la nuvoletta che spiega la pagina in una riga */
.guida{display:flex;align-items:center;gap:clamp(10px,1.8vw,22px);margin:0 auto;max-width:820px}
.guida .mascotte{flex:none;width:clamp(96px,13vw,146px)}
.guida-s .mascotte{width:clamp(76px,9vw,104px)}
.fumetto{position:relative;flex:1;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:16px 20px;box-shadow:var(--shadow)}
.fumetto p{margin:0;font-size:1.02rem;color:var(--ink-2);line-height:1.55}
.fumetto p+p{margin-top:8px}
.fumetto .btns{margin-top:12px}
.fumetto:before,.fumetto:after{content:"";position:absolute;top:50%;width:0;height:0;
  border:11px solid transparent}
.guida-dx .fumetto:before{right:-22px;margin-top:-11px;border-left-color:var(--line)}
.guida-dx .fumetto:after{right:-20px;margin-top:-11px;border-left-color:var(--paper)}
.guida-sx .fumetto:before{left:-22px;margin-top:-11px;border-right-color:var(--line)}
.guida-sx .fumetto:after{left:-20px;margin-top:-11px;border-right-color:var(--paper)}
@media(max-width:620px){
  .guida{flex-direction:column;text-align:center}
  .guida .mascotte{width:112px;order:-1}
  .fumetto:before,.fumetto:after{display:none}
}

/* la marmotta grande accanto al titolo, al posto del disegno */
.mascotte-hero{width:100%;max-width:330px;justify-self:end;align-self:end}
@media(max-width:860px){.mascotte-hero{justify-self:center;max-width:250px;margin-top:6px}}

/* piccola, dentro a una scheda o a un titolo di sezione */
.mascotte-mini{width:clamp(62px,8vw,86px);flex:none}
.tit-mascotte{display:flex;align-items:flex-end;gap:16px;justify-content:center;margin-bottom:6px}

/* mascotte-illustrazione ritagliata (sfondo trasparente): niente cornice,
   solo un'ombra morbida da adesivo, stessa idea del filtro già usato per .stk */
.mascotte-frame{filter:drop-shadow(0 10px 16px rgba(20,35,50,.18));object-fit:contain}

/* fumetto "parlato" appoggiato sopra le mascotte hero (che prima non dicevano niente) */
.mascotte-say{position:relative;display:block}
.mascotte-say .mascotte-frame{width:100%;height:auto;display:block}
.mascotte-say .bolla{position:absolute;top:0;left:2%;max-width:64%;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:8px 14px;font-size:.82rem;
  font-weight:600;color:var(--ink-2);box-shadow:var(--shadow);z-index:3;line-height:1.3}
.mascotte-say .bolla:after{content:"";position:absolute;bottom:-7px;left:22px;width:0;height:0;
  border:7px solid transparent;border-top-color:var(--paper)}
@media(max-width:620px){.mascotte-say .bolla{font-size:.76rem;padding:7px 11px}}
.mascotte-box .mascotte-say{width:min(100%,236px)}
.mascotte-box-s .mascotte-say{width:min(100%,168px)}

/* --- movimento: il sito non deve sembrare fermo --- */
@media(prefers-reduced-motion:no-preference){
  .mascotte{animation:respiro 6s ease-in-out infinite;transform-origin:50% 92%}
  .guida-sx .mascotte{animation-delay:-2s}
  .guida-dx .mascotte{animation-delay:-4s}
  .mascotte-hero{animation:respiro 7s ease-in-out infinite}
  .mascotte-box .mascotte-say,.mascotte-box-s .mascotte-say{animation:respiro 6.5s ease-in-out infinite;
    transform-origin:50% 92%}
  @keyframes respiro{0%,100%{transform:translateY(0) scale(1) rotate(0deg)}
                     50%{transform:translateY(-7px) scale(1.012) rotate(-1.4deg)}}
  .mascotte-frame{transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
  .mascotte-say:hover .mascotte-frame,.guida:hover .mascotte{transform:rotate(-6deg) scale(1.05)}
  @keyframes salta{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}
                   50%{transform:translateY(0)}65%{transform:translateY(-5px)}80%{transform:translateY(0)}}
  .scelta-c:hover img{animation:salta .6s ease}
  .js .rvl{opacity:0;transform:translateY(20px);
       transition:opacity .7s ease,transform .7s cubic-bezier(.22,.85,.28,1)}
  .js .rvl.on{opacity:1;transform:none}
  .rvl-1{transition-delay:.07s}.rvl-2{transition-delay:.14s}.rvl-3{transition-delay:.21s}
  .rvl-4{transition-delay:.28s}
}
.card,.sitter,.price-card,.q,.step{transition:transform .22s ease,box-shadow .22s ease,
  border-color .22s ease}
.card:hover,.sitter:hover,.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn{transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* --- sfumature: niente blocchi di colore netti, tutto trascolora --- */
.bg-sfuma{background:linear-gradient(180deg,var(--paper) 0%,var(--tint-2) 42%,var(--sky-2) 100%)}
.bg-cream2{background:
  radial-gradient(720px 420px at 90% 100%, var(--sky) 0%, transparent 66%),
  linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 58%,var(--sky-2) 100%)}
.bg-alba{background:
  radial-gradient(680px 380px at 10% 0%, var(--tint) 0%, transparent 62%),
  radial-gradient(700px 420px at 92% 106%, var(--sky) 0%, transparent 64%),
  linear-gradient(180deg,var(--tint-2) 0%,var(--paper) 62%,var(--sky-2) 100%)}
.bg-cielo{background:
  radial-gradient(760px 420px at 88% 4%, var(--sky) 0%, transparent 66%),
  linear-gradient(180deg,var(--sky-2) 0%,var(--paper) 70%,var(--tint-2) 100%)}
.cta-band{background:
  radial-gradient(620px 420px at 92% 8%, rgba(255,255,255,.14) 0%, transparent 62%),
  linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 58%,var(--accent-2) 138%)}
/* la prima schermata: rosa a sinistra, azzurro a destra, carta in mezzo */
.hero{background:
  radial-gradient(900px 620px at 92% -6%, var(--sky) 0%, transparent 62%),
  radial-gradient(760px 520px at 60% 8%, var(--tint-2) 0%, transparent 60%),
  radial-gradient(900px 660px at 2% -14%, var(--tint) 0%, transparent 68%),
  linear-gradient(166deg,var(--tint) 0%,var(--tint-2) 30%,var(--bg) 62%,var(--sky-2) 100%)}
.eyebrow{background:linear-gradient(120deg,var(--accent-soft),var(--tint-2))}

/* --- didascalie: piu parole in meno spazio, per capire senza leggere tutto --- */
.dida{display:block;font-size:.84rem;color:var(--muted);margin-top:6px;line-height:1.5}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.83rem;
  color:var(--ink-2);font-weight:500}
.pill b{color:var(--brand);font-weight:700}

/* la marmotta al posto del disegno, nella prima schermata */
.disegno.mascotte-hero{max-width:min(300px,86%);transform:none;justify-self:center;
  align-self:end;margin-bottom:clamp(34px,5vw,64px)}
@media(max-width:1100px){.disegno.mascotte-hero{max-width:260px}}
@media(max-width:860px){.disegno.mascotte-hero{max-width:210px;margin:4px auto clamp(50px,8vw,84px)}}

/* la marmotta dentro una colonna, senza cornice ne nastro adesivo */
.mascotte-box{display:flex;justify-content:center;align-items:flex-end}
.mascotte-box img{width:min(100%,236px);height:auto}
.mascotte-box-s img{width:min(100%,168px)}

/* la fascia con la marmotta che spiega la pagina */
.banda-guida{padding:clamp(22px,3vw,34px) 0}

.sep-cielo{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--sky),transparent);
  margin:0}
.fumetto{background:linear-gradient(160deg,var(--paper) 62%,var(--sky-2) 100%)}
.card{background:linear-gradient(168deg,var(--paper) 74%,var(--sky-2) 100%)}
.price-card{background:linear-gradient(168deg,var(--paper) 70%,var(--sky-2) 100%)}

/* --- Scrivici: assistenza asincrona, fluttuante su tutte le pagine (mobile-first) --- */
.scrivici-fab{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;
  background:var(--brand);color:#fff;border:none;border-radius:999px;padding:13px 16px;
  font:600 .9rem/1 Inter,sans-serif;box-shadow:0 8px 24px rgba(20,30,29,.28);cursor:pointer}
.scrivici-fab:hover{background:var(--brand-2)}
.scrivici-fab span{display:none}
@media(min-width:560px){.scrivici-fab{padding:13px 18px}.scrivici-fab span{display:inline}}

.scrivici-modal{position:fixed;inset:0;z-index:70;background:rgba(15,20,20,.45);
  display:flex;align-items:flex-end;justify-content:center}
.scrivici-modal[hidden]{display:none}
.scrivici-card{background:#fff;width:100%;max-height:88vh;overflow:auto;
  border-radius:20px 20px 0 0;padding:22px 20px 26px;position:relative}
.scrivici-close{position:absolute;top:14px;right:14px;background:none;border:none;
  font-size:1.15rem;line-height:1;cursor:pointer;color:#3c4a49;padding:4px}
.scrivici-form div{margin-top:12px}
.scrivici-form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
.scrivici-form input,.scrivici-form select,.scrivici-form textarea{width:100%;padding:10px 12px;
  border:1px solid #d8ddda;border-radius:10px;font:inherit;background:#fff}
.scrivici-form textarea{min-height:90px;resize:vertical}
.scrivici-form button.btn{margin-top:16px;width:100%}
.scrivici-esito{margin-top:10px;font-size:.85rem;min-height:1.2em}
.scrivici-esito.ok{color:#1c6b3f}
.scrivici-esito.err{color:#a24634}
@media(min-width:640px){
  .scrivici-modal{align-items:center}
  .scrivici-card{width:420px;border-radius:18px}
}

/* --- Scrivici: onboarding guidato con marmotta (menu -> sotto-percorso -> form -> successo) --- */
.scrivici-mascotte{display:flex;gap:12px;align-items:flex-start;margin:6px 0 16px}
.scrivici-mascotte[hidden]{display:none}
.scrivici-mascotte img{width:56px;height:auto;flex-shrink:0;transform-origin:70% 85%;
  filter:drop-shadow(0 6px 10px rgba(20,35,50,.15));
  animation:scrivici-float 3.2s ease-in-out infinite}
.scrivici-mascotte img.wave{animation:scrivici-wave 1.6s ease-in-out infinite}
@keyframes scrivici-wave{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(5deg)}
  75%{transform:rotate(-5deg)}
}
.scrivici-fumetto{border:none;box-shadow:none;padding:12px 16px;flex:1}
.scrivici-fumetto p{font-family:"Fraunces",Georgia,serif;font-size:.96rem;
  font-weight:600;color:var(--brand);margin:0}

.scrivici-menu,.scrivici-submenu{display:flex;flex-direction:column;gap:8px}
.scrivici-menu[hidden],.scrivici-submenu[hidden]{display:none}
.scrivici-menu .btn,.scrivici-submenu .btn{width:100%}
.scrivici-cat-altro{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.scrivici-indietro{align-self:flex-start;background:none;border:none;color:var(--muted);
  font-size:.82rem;padding:4px 2px;cursor:pointer;margin-top:2px}
.scrivici-indietro:hover{color:var(--ink-2)}
.scrivici-form .scrivici-indietro{margin-top:10px}

.scrivici-successo{display:flex;gap:12px;align-items:flex-start}
.scrivici-successo[hidden]{display:none}
.scrivici-successo img{width:60px;height:auto;flex-shrink:0}
.scrivici-successo .scrivici-fumetto{background:var(--accent-soft)}

/* fade-in/out fluido tra le fasi, senza bordi ne cornici che scattano */
#scrivici-mascotte,#scrivici-menu,#scrivici-sitter,#scrivici-famiglia,#scrivici-struttura,
#scrivici-form,#scrivici-successo{
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
#scrivici-mascotte.show,#scrivici-menu.show,#scrivici-sitter.show,#scrivici-famiglia.show,
#scrivici-struttura.show,#scrivici-form.show,#scrivici-successo.show{
  opacity:1;transform:translateY(0)}

/* galleggiamento continuo della mascotte + piccolo balzo quando cambia posa/testo */
@keyframes scrivici-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
#scrivici-mascotte.pop{animation:scrivici-pop .45s ease}
@keyframes scrivici-pop{
  0%{transform:scale(1)}
  35%{transform:scale(1.06)}
  60%{transform:scale(.98)}
  100%{transform:scale(1)}
}

@media(prefers-reduced-motion:reduce){
  #scrivici-mascotte,#scrivici-menu,#scrivici-sitter,#scrivici-famiglia,#scrivici-struttura,
  #scrivici-form,#scrivici-successo{transition:none;transform:none}
  .scrivici-mascotte img,.scrivici-mascotte img.wave{animation:none}
  #scrivici-mascotte.pop{animation:none}
}

/* --- Portate dal ramo cipria per account/messaggi/schede/gestisci-struttura --- */
.tag-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;
  font-size:.87rem;font-weight:400!important;user-select:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.tag-pill input{position:absolute;opacity:0;width:0;height:0}
.tag-pill:has(input:checked){background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-2);font-weight:600!important}

.mascotte-loader{position:fixed;inset:0;background:rgba(251,252,251,.94);
  backdrop-filter:blur(2px);z-index:9999;display:flex;align-items:center;pointer-events:none}
.mascotte-loader[hidden]{display:none}
.mascotte-loader-pista{position:relative;width:100%;height:150px;overflow:hidden}
.mascotte-loader-terra{position:absolute;left:0;right:0;bottom:26px;height:2px;background:var(--line)}
.mascotte-loader-orma{position:absolute;bottom:26px;width:16px;height:16px;color:var(--brand-3);opacity:0}
.mascotte-loader-orma svg{width:100%;height:100%;fill:currentColor}
.mascotte-loader-img{position:absolute;bottom:20px;left:-110px;width:96px;height:auto;
  transform:scaleX(-1)}
@keyframes mascotte-cammina{
  0%{left:-110px} 100%{left:calc(100% + 20px)}
}
@keyframes mascotte-passo{
  0%,100%{transform:scaleX(-1) translateY(0) rotate(calc(var(--rotazione,3deg) * -1))}
  50%{transform:scaleX(-1) translateY(calc(var(--balzo,10px) * -1)) rotate(var(--rotazione,3deg))}
}
@keyframes mascotte-ondeggio{
  0%,100%{margin-left:0}
  50%{margin-left:var(--sway,0px)}
}
@keyframes mascotte-orma-comparsa{0%{opacity:0}10%{opacity:.6}85%{opacity:.6}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .mascotte-loader-img{animation:none!important;left:calc(50% - 48px)}
  .mascotte-loader-orma{display:none}
}

/* ---------- recensioni ---------- */
.stelle-input{display:flex;gap:4px}
.stella-btn{background:none;border:none;font-size:1.7rem;line-height:1;color:var(--line);cursor:pointer;padding:2px}
.stella-btn:hover,.stella-btn:focus-visible{color:var(--accent)}
.stella-btn.piena{color:var(--accent)}
.stelle-testo{color:var(--accent);letter-spacing:1px;margin-bottom:4px}
.recensione-card{border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;margin-bottom:10px;background:var(--paper)}
.badge-attesa{display:inline-block;background:var(--bg-2);color:var(--muted);font-size:.76rem;
  font-weight:600;border-radius:999px;padding:3px 10px;margin-top:8px}