/* Canile Primavera – stile del sito pubblico. Sfondo bianco, pastelli solari, niente nero (inchiostro marrone caldo), mobile first. */
:root{
  --bg:#FFFFFF;
  --bg-2:#FFF6E3;
  --card:#FFFFFF;
  --ink:#4A3A2A;
  --muted:#86765E;
  --line:#F3E8D2;
  --sun:#F4B23E;
  --sun-ink:#4A3A2A;
  --coral:#E2603F;
  --on-coral:#FFFFFF;
  --lilac:#E3D5F5;
  --pink:#FAD0D5;
  --sky:#CDEBEE;
  --mint:#D6EDCF;
  --peach:#FFE0C2;
  --ok:#3E8E5A;
  --shadow:0 6px 0 rgba(226,96,63,.14);
  --f-display:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:22px;
  --tabbar:0px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;padding-bottom:var(--tabbar)}
@media (max-width:860px){:root{--tabbar:calc(84px + env(safe-area-inset-bottom,0px))}}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.1;margin:0;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.2rem,6.6vw,4rem)}
h2{font-size:clamp(1.6rem,4.4vw,2.5rem)}
h3{font-size:1.22rem}
p{margin:0}
ul,ol{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:10px}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:18px}
.stack{display:grid;gap:14px}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1}
.logo .mark{width:42px;height:42px;border-radius:14px;background:var(--sun);display:grid;place-items:center;box-shadow:var(--shadow);flex:none}
.logo .logo-img{display:block;height:66px;width:auto}
@media (max-width:560px){.logo .logo-img{height:52px}}
.foot-logo{display:block;width:180px;height:auto;margin-bottom:4px}
.logo small{display:block;font-family:var(--f-body);font-weight:700;font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.mainnav{display:flex;gap:2px;list-style:none;padding:0}
.mainnav a{display:block;padding:8px 13px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.96rem}
.mainnav a:hover{background:var(--bg-2)}
.mainnav a[aria-current="page"]{background:var(--sun);color:var(--sun-ink)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:999px;border:0;background:var(--bg-2);cursor:pointer;font-weight:800}
.menu-btn svg{width:22px;height:22px}
@media (max-width:1060px){.mainnav{display:none}}
@media (max-width:860px){.menu-btn .lbl{display:none}.menu-btn{width:46px;padding:0;justify-content:center}}

/* drawer */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(74,58,42,.25)}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(340px,88vw);background:var(--bg);padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px;overflow:auto;border-radius:26px 0 0 26px}
.drawer .panel a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;text-decoration:none;font-weight:800;font-size:1.06rem}
.drawer .panel a:hover,.drawer .panel a[aria-current="page"]{background:var(--sun);color:var(--sun-ink)}
.drawer .panel .grp{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px 2px}
.drawer .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.close{width:44px;height:44px;border-radius:50%;border:0;background:var(--bg-2);cursor:pointer;font-size:1.2rem}

/* bottom tab bar */
.tabbar{display:none}
@media (max-width:860px){
  .tabbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px;justify-content:space-between;box-shadow:0 10px 30px rgba(74,58,42,.16)}
  .tabbar a,.tabbar button{flex:1;display:grid;justify-items:center;gap:1px;padding:7px 2px;border-radius:999px;text-decoration:none;font-size:.7rem;font-weight:800;color:var(--muted);background:none;border:0;cursor:pointer}
  .tabbar svg{width:22px;height:22px}
  .tabbar a[aria-current="page"]{background:var(--sun);color:var(--sun-ink)}
}

/* ---------- buttons, chips ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:800;text-decoration:none;border:0;cursor:pointer;font-size:1rem;line-height:1.1;box-shadow:var(--shadow);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.sun{background:var(--sun);color:var(--sun-ink)}
.btn.coral{background:var(--coral);color:var(--on-coral)}
.btn.soft{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.wide{width:100%}
.btn svg{width:20px;height:20px;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:.82rem;font-weight:800;background:var(--bg-2)}
.chip.lilac{background:var(--lilac)}.chip.pink{background:var(--pink)}.chip.sky{background:var(--sky)}.chip.mint{background:var(--mint)}.chip.sun{background:var(--sun);color:var(--sun-ink)}.chip.peach{background:var(--peach)}
.chip.coral{background:var(--coral);color:var(--on-coral)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.bg-lilac{background:var(--lilac)}.bg-sun{background:var(--sun);color:var(--sun-ink)}.bg-pink{background:var(--pink)}.bg-sky{background:var(--sky)}.bg-mint{background:var(--mint)}.bg-peach{background:var(--peach)}

/* ---------- page system ---------- */
.page{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none}html{scroll-behavior:auto}.btn,.tile,.hnum{transition:none}}
.section{padding-block:52px}
.section.tint{background:var(--bg-2)}
.sec-head{display:grid;gap:10px;margin-bottom:28px;max-width:66ch}
.sec-head p{color:var(--muted);font-size:1.06rem}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:16px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.page-hero{padding-block:36px 26px}
.page-hero .wrap{display:grid;gap:12px}
.page-hero p{font-size:1.12rem;color:var(--muted);max-width:62ch}
.crumbs{font-size:.88rem;font-weight:700;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* ---------- home hero ---------- */
.hero{padding-block:28px 40px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero .wrap>*{min-width:0}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--sun) 62%);padding-inline:4px}
.aiuta-box .btns{margin-top:6px;gap:10px}
#bookForm .btn.wide+.btn.wide{margin-top:-4px}
.done .btns{display:grid;gap:10px}
.hero-num{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;max-width:540px}
.hnum{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:var(--card);border:2px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.hnum:hover{transform:translateY(-2px);border-color:var(--sun)}
.hnum:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.hnum-ic{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:var(--ink)}
.hnum-sun .hnum-ic{background:var(--sun)}
.hnum-mint .hnum-ic{background:var(--mint);color:var(--ok)}
.hnum-t{display:grid;line-height:1.1;min-width:0}
.hnum-t b{font-family:var(--f-display);font-size:1.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.hnum-t span{font-weight:700;font-size:.88rem;color:var(--muted)}
.hnum-go{margin-left:auto;font-weight:800;color:var(--coral)}
@media (max-width:440px){.hero-num{gap:8px}.hnum{padding:10px;gap:8px}.hnum-ic{width:36px;height:36px;border-radius:12px}.hnum-ic svg{width:19px;height:19px}.hnum-t b{font-size:1.55rem}.hnum-go{display:none}}
.hero .lead{font-size:1.18rem;color:var(--muted);margin-block:18px 26px;max-width:46ch}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:24px}.arches{order:-1}}
.arches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:380px;align-items:start}
.arch{border-radius:0 0 999px 999px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:10px;text-decoration:none}
.arch:nth-child(1){background:var(--lilac);height:62%}
.arch:nth-child(2){background:var(--sun);height:96%}
.arch:nth-child(3){background:var(--pink);height:72%}
.arch:nth-child(4){background:var(--sky);height:84%}
.arch .face{width:88%;aspect-ratio:1;border-radius:50%;background:var(--card);border:4px solid var(--card);box-shadow:0 5px 0 rgba(74,58,42,.12);overflow:hidden;display:grid;place-items:center}
.arch .face svg{width:100%;height:100%}
.arch .nm{font-family:var(--f-display);font-weight:700;margin-top:6px;font-size:.95rem}
@media (max-width:860px){.arches{height:280px}}
@media (max-width:420px){.arches{height:230px;gap:7px}}

/* categories (circles) */
.cats{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cat{flex:none;scroll-snap-align:start;display:grid;justify-items:center;gap:6px;text-decoration:none;font-weight:800;font-size:.92rem;width:84px;background:none;border:0;cursor:pointer;padding:0}
.cat .ci{width:72px;height:72px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;transition:transform .15s;box-shadow:0 4px 0 rgba(74,58,42,.08)}
.cat .ci svg{width:84%;height:84%}
.cat:hover .ci{transform:translateY(-3px)}
.cat[aria-pressed="true"] .ci{background:var(--sun);box-shadow:var(--shadow)}
.quick{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:18px 18px 8px;display:grid;gap:12px;box-shadow:var(--shadow)}
.quick h2{font-size:1.3rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{border-radius:var(--r);padding:20px;display:grid;gap:2px}
.stat:nth-child(1){background:var(--lilac)}.stat:nth-child(2){background:var(--sun);color:var(--sun-ink)}.stat:nth-child(3){background:var(--pink)}.stat:nth-child(4){background:var(--sky)}
.stat b{font-family:var(--f-display);font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-weight:700;font-size:.92rem}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- pet cards ---------- */
.pets{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1020px){.pets{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pets{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:360px){.pets{grid-template-columns:1fr}}
.pet{background:var(--card);border-radius:var(--r);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);min-width:0;position:relative}
.pet .pic{position:relative;aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;text-decoration:none}
.pet .pic svg{width:78%;height:78%}
.fav{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:var(--card);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 rgba(74,58,42,.12);color:var(--ink);z-index:2}
.fav svg{width:20px;height:20px}
.fav[aria-pressed="true"] svg path{fill:var(--coral);stroke:var(--coral)}
.ex{position:absolute;top:10px;left:10px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--card);padding:3px 8px;border-radius:999px;color:var(--muted)}
.pet .body{padding:14px 14px 16px;display:grid;gap:8px;flex:1;align-content:start}
.pet .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pet h3{font-size:1.2rem}
.pet .sex{font-weight:800;font-size:1.1rem}
.pet .meta{font-size:.88rem;color:var(--muted);font-weight:700}
.pet .meet{margin-top:auto;justify-content:center;width:100%;padding:11px 14px;font-size:.92rem;box-shadow:none}
@media (max-width:760px){.pet .body{padding:12px}.pet h3{font-size:1.05rem}.pet .chips .chip:nth-child(n+2){display:none}}

/* filters */
.filters{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:20px}
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fgroup > span{font-weight:800;font-size:.88rem;min-width:96px}
.fbtn{border:2px solid var(--line);background:var(--bg);padding:6px 14px;border-radius:999px;font-weight:800;font-size:.88rem;cursor:pointer}
.fbtn[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:var(--sun-ink)}
.search{display:flex;align-items:center;gap:10px;background:var(--bg-2);border-radius:999px;padding:6px 6px 6px 16px}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:6px 0;outline:none}
.more-filters summary{cursor:pointer;font-weight:800;list-style:none;display:inline-flex;gap:8px;align-items:center;color:var(--coral)}
.more-filters summary::-webkit-details-marker{display:none}
.more-filters[open] summary{margin-bottom:12px}
.more-filters .stack{gap:12px}
.count{font-weight:800;color:var(--muted);margin-bottom:12px}
.empty{padding:40px 20px;text-align:center;background:var(--card);border-radius:var(--r);border:2px dashed var(--line)}

/* ---------- single animal page ---------- */
.pet-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.pet-layout>*{min-width:0}
@media (max-width:900px){.pet-layout{grid-template-columns:1fr}}
.gallery{display:grid;gap:10px}
.gallery .main{position:relative;border-radius:28px;aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;overflow:hidden}
.gallery .main svg{width:62%;height:auto;max-height:90%}
.gallery .main .cap{position:absolute;bottom:12px;left:12px;font-size:.75rem;font-weight:800;background:var(--card);padding:4px 10px;border-radius:999px;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.thumbs button{border:3px solid transparent;border-radius:18px;aspect-ratio:1;max-width:100%;display:grid;place-items:center;cursor:pointer;padding:0;overflow:hidden}
.thumbs button svg{width:80%;height:80%}
.thumbs button[aria-pressed="true"]{border-color:var(--coral)}
.pet-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pet-title h1{font-size:clamp(2.2rem,6vw,3.4rem)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{background:var(--bg-2);border-radius:16px;padding:10px 12px;display:grid}
.facts span{font-size:.8rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.facts b{font-family:var(--f-display);font-size:1.05rem;font-weight:600}
.health{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:520px){.health{grid-template-columns:1fr}}
.health li{display:flex;gap:8px;align-items:center;font-weight:700;font-size:.95rem;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.health .y{color:var(--ok)}.health .n{color:var(--coral)}
.book{position:sticky;top:calc(80px + env(safe-area-inset-top,0px))}
@media (max-width:900px){.book{position:static}}
.pet-actions{display:flex;gap:10px;flex-wrap:wrap}

/* forms */
form.f{display:grid;gap:14px}
.f label,.f .lbl{font-weight:800;font-size:.92rem;display:grid;gap:6px}
.f input:not([type=checkbox]):not([type=radio]):not([type=file]),.f select,.f textarea{background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--sun);outline:none}
.f textarea{min-height:100px;resize:vertical}
.f .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f .row2>*{min-width:0}
@media (max-width:420px){.f .row2{grid-template-columns:1fr}}
.f .hint{font-weight:600;font-size:.82rem;color:var(--muted)}
.f .err{color:var(--coral);font-weight:800;font-size:.88rem}
.f .consent{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.consent input{width:20px;height:20px;accent-color:var(--coral);flex:none;margin-top:3px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{border:2px solid var(--line);background:var(--bg);padding:7px 12px;border-radius:12px;font-weight:800;font-size:.88rem;cursor:pointer;font-variant-numeric:tabular-nums}
.slot[aria-pressed="true"]{background:var(--sun);border-color:var(--sun)}
.slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.f .seg label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:2px solid var(--line);border-radius:14px;cursor:pointer;font-weight:800}
.seg input{accent-color:var(--coral);width:18px;height:18px;margin:0}
.seg label:has(input:checked){background:var(--peach);border-color:var(--coral)}
.done{border-radius:var(--r);padding:20px;background:var(--mint);display:grid;gap:12px}
.done pre{white-space:pre-wrap;word-break:break-word;background:var(--card);border-radius:14px;padding:12px;font-family:var(--f-body);font-size:.92rem;margin:0}
.previews{display:flex;gap:8px;flex-wrap:wrap}
.previews img{width:76px;height:76px;object-fit:cover;border-radius:12px}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:34px;border-top:3px dashed var(--coral);opacity:.45}
.steps li{display:grid;justify-items:center;text-align:center;gap:10px;position:relative}
.steps .ico{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:1.6rem;font-weight:700;box-shadow:var(--shadow)}
.steps li:nth-child(1) .ico{background:var(--sun)}
.steps li:nth-child(2) .ico{background:var(--sky)}
.steps li:nth-child(3) .ico{background:var(--pink)}
.steps li:nth-child(4) .ico{background:var(--mint)}
.steps p{color:var(--muted);font-size:.96rem;max-width:30ch}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{left:33px;right:auto;top:20px;bottom:20px;border-top:0;border-left:3px dashed var(--coral)}
  .steps li{grid-template-columns:68px 1fr;justify-items:start;text-align:left;column-gap:16px;padding-bottom:20px}
  .steps .ico{grid-row:span 2}
}

/* ---------- tiles / cards ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:380px){.tiles{grid-template-columns:1fr}}
.tile{display:grid;gap:8px;padding:20px;border-radius:var(--r);text-decoration:none;align-content:start;transition:transform .15s}
a.tile:hover{transform:translateY(-3px)}
.tile .ti{width:46px;height:46px;border-radius:14px;background:var(--card);display:grid;place-items:center;color:var(--ink)}
.tile .ti svg{width:24px;height:24px}
.tile h3{font-size:1.15rem}
.tile p{font-size:.92rem;opacity:.9}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2>*,.grid3>*{min-width:0}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:12px;align-content:start;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card h3{display:flex;align-items:center;gap:10px}
.card ul,.card ol{padding-left:1.2em;display:grid;gap:6px}
.badge-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.badge-ico svg{width:22px;height:22px}
.callout{border-radius:var(--r);padding:16px 20px;background:var(--bg-2);border:2px dashed var(--sun);display:grid;gap:4px}
.callout.warn{border-color:var(--coral);background:#FFF0EB}

/* copy rows */
.copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-2);border-radius:14px}
.copyrow code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.92rem;word-break:break-all;flex:1 1 200px;min-width:0;font-weight:700}
.copy{border:2px solid var(--coral);background:transparent;color:var(--coral);padding:5px 14px;border-radius:999px;font-weight:800;font-size:.82rem;cursor:pointer}

/* checklist */
.check{list-style:none;padding:0;display:grid;gap:8px}
.check label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px;cursor:pointer;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--coral);flex:none;margin-top:2px}
.check input:checked + span{text-decoration:line-through;color:var(--muted)}
.progress{height:12px;background:var(--card);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress i{display:block;height:100%;width:0;background:var(--sun);border-radius:999px;transition:width .3s}

/* faq */
.faq{display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:4px 18px}
.faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);font-size:1.4rem;line-height:1;color:var(--coral)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px;color:var(--muted)}

/* tables */
.tbl-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:var(--card);font-variant-numeric:tabular-nums;min-width:460px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
th{background:var(--bg-2);font-weight:800}
tr:last-child td{border-bottom:0}

/* timeline */
.timeline{list-style:none;padding:0;border-left:3px dashed var(--line);margin-left:10px;display:grid}
.timeline li{position:relative;padding:0 0 26px 28px;display:grid;gap:4px}
.timeline li::before{content:"";position:absolute;left:-12px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--sun);border:3px solid var(--bg)}
.timeline li.now::before{background:var(--coral)}
.timeline time{font-weight:800;font-size:.85rem;color:var(--coral)}

/* stories */
.story{border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.story .band{height:110px;display:flex;align-items:end;justify-content:space-between;padding:0 18px}
.story .band svg{width:96px;height:96px;margin-bottom:-14px}
.story .txt{padding:22px 18px 18px;display:grid;gap:8px}
.story time{font-size:.82rem;font-weight:800;color:var(--muted)}

/* events */
.events{display:grid;gap:14px}
.event{display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.event>*{min-width:0}
.event .date{border-radius:18px;display:grid;justify-items:center;padding:10px 6px;line-height:1.05}
.event .date b{font-family:var(--f-display);font-size:2.1rem}
.event .date span{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.event .date small{font-weight:700;font-size:.74rem;opacity:.8}
.event .where{font-size:.9rem;font-weight:700;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px}
.event .acts{display:grid;gap:8px}
.event .acts .btn{padding:10px 16px;font-size:.88rem;box-shadow:none}
@media (max-width:760px){.event{grid-template-columns:76px 1fr}.event .acts{grid-column:1/-1;grid-template-columns:1fr 1fr}.event .date b{font-size:1.7rem}}
.past{display:grid;gap:8px;padding:0}
.past li{list-style:none;display:flex;gap:12px;align-items:baseline;padding:10px 14px;border-radius:14px;background:var(--bg-2)}
.past time{font-weight:800;font-size:.85rem;color:var(--coral);white-space:nowrap}

/* reports board */
.board{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:760px){.board{grid-template-columns:1fr}}
.rep{display:grid;grid-template-columns:88px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;align-items:start}
.rep>*{min-width:0}
.rep .rpic{border-radius:16px;aspect-ratio:1;display:grid;place-items:center;max-width:100%}
.rep .rpic svg{width:86%;height:86%}
.rep .rt{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rep p{font-size:.92rem;color:var(--muted)}

/* contact */
.contact-list{display:grid;gap:12px}
.cl{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.cl .badge-ico{width:46px;height:46px;border-radius:14px}
.cl .t{display:grid;min-width:0}
.cl .t span{font-size:.85rem;color:var(--muted);font-weight:700}
.cl .t b{font-size:1.05rem;word-break:break-word}

/* map card */
.mapcard{border-radius:var(--r);background:var(--mint);padding:22px;display:grid;gap:14px}
.mapcard svg.route{width:100%;height:auto;max-width:100%}

/* social */
.socials{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.socials{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.socials{grid-template-columns:1fr}}
.soc{display:grid;gap:6px;padding:18px;border-radius:var(--r);text-decoration:none;align-content:start}
.soc .k{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.soc b{font-family:var(--f-display);font-size:1.15rem;word-break:break-word}

/* cta band */
.band-cta{background:var(--sun);color:var(--sun-ink);border-radius:32px;padding:34px 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:center}
.band-cta .btns{justify-content:flex-end}
@media (max-width:760px){.band-cta{grid-template-columns:1fr}.band-cta .btns{justify-content:flex-start}}

/* footer */
footer{background:var(--bg-2);padding-block:40px 30px;margin-top:50px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
footer .cols>*{min-width:0}
footer h4{font-size:1.05rem;margin-bottom:10px}
footer ul{list-style:none;padding:0;display:grid;gap:6px}
footer a{text-decoration:none;font-weight:700;color:var(--muted)}
footer a:hover{color:var(--ink)}
footer .legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.stripes{height:8px;background:repeating-linear-gradient(90deg,var(--sun) 0 24px,var(--coral) 24px 48px);border-radius:999px;margin-bottom:24px;max-width:180px}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:460px){footer .cols{grid-template-columns:1fr}}

.toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + 20px);transform:translateX(-50%);background:var(--ink);color:#FFFFFF;padding:10px 18px;border-radius:999px;font-weight:800;z-index:90;font-size:.92rem;max-width:calc(100% - 32px);text-align:center}

/* ===================== Aggiunte per la versione PHP ===================== */
/* accessibilità: salta al contenuto */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
/* campo trappola antispam: invisibile alle persone, presente per i bot */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
/* errori sotto i campi */
.field-err{color:var(--coral);font-weight:800;font-size:.85rem}
.f fieldset{border:0;margin:0;padding:0;min-width:0}
.f legend{padding:0;font-weight:800;font-size:.92rem}
/* orari come radio (funzionano anche senza JavaScript) */
label.slot{display:inline-flex;align-items:center;gap:0;position:relative}
label.slot input{position:absolute;opacity:0;width:1px;height:1px}
label.slot:has(input:checked){background:var(--sun);border-color:var(--sun)}
label.slot:has(input:focus-visible){outline:3px solid var(--coral);outline-offset:2px}
label.slot:has(input:disabled){opacity:.35;cursor:not-allowed;text-decoration:line-through}
/* foto vere al posto delle illustrazioni */
.pet .pic.has-photo{overflow:hidden}
.pet .pic.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pet .pic .ex{z-index:1}
.ex.res{top:auto;bottom:10px;background:var(--coral);color:var(--on-coral)}
.arch .face img{width:100%;height:100%;object-fit:cover}
.gallery .main .slide{position:absolute;inset:0;margin:0;display:grid;place-items:center}
.gallery .main .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery .main .slide svg{width:62%;height:auto;max-height:90%}
.gallery .main .cap{z-index:1}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.story .band.photo{height:180px;padding:0;display:block}
.story .band.photo img{width:100%;height:100%;object-fit:cover;display:block}
.rep .rpic.has-photo{overflow:hidden}
.rep .rpic img{width:100%;height:100%;object-fit:cover;border-radius:16px}
a.fbtn{text-decoration:none;display:inline-block}
a.cl{text-decoration:none;color:inherit}
a.cl:hover{border-color:var(--sun)}
.cl .t b a{color:inherit}
.prose{gap:14px}
.prose h2{font-size:1.35rem;margin-top:6px}
.prose ul{padding-left:1.2em;display:grid;gap:8px}
.callout.small{padding:10px 14px}
/* <picture> (AVIF + WebP) non deve cambiare l'impaginazione: l'immagine si comporta come figlia diretta */
picture{display:contents}
/* foto facoltative caricate dall'area riservata (Pagine) */
.mapcard .mapfoto{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
.foto-sezione{width:100%;height:auto;border-radius:var(--r);object-fit:cover;max-height:360px}
/* condivisione della scheda */
.share{display:grid;gap:8px;padding:14px 16px;background:var(--bg-2);border-radius:18px}
.share .btns{gap:8px}
.share .btn{padding:9px 16px;font-size:.9rem;box-shadow:none}
.share-wa{border-color:#BFE3C8!important}
/* storie a lieto fine (pagina /adottati) */
.lieti{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.lieti{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lieti{grid-template-columns:1fr}}
.lieto{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.lieto-pic{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.lieto-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lieto-pic svg{width:60%;height:auto}
.lieto-badge{position:absolute;top:12px;left:12px;background:var(--ok);color:#fff;font-weight:800;font-size:.78rem;padding:4px 10px;border-radius:999px}
.lieto-txt{padding:16px 18px 18px;display:grid;gap:6px}
.lieto blockquote{margin:6px 0 0;padding-left:12px;border-left:3px solid var(--sun);font-style:italic}
.book .lieto{margin-top:14px;box-shadow:none}
/* adozione a distanza e donazioni */
.dist-card{display:grid;gap:8px;align-content:start}
.dist-card .btn{box-shadow:none;padding:11px 14px;font-size:.92rem}
.dist-n{text-align:center}
.dist-quote{list-style:none;padding:0;margin:4px 0;display:grid;gap:2px}
.dist-box{gap:6px}
.dona-link{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.dona{display:grid;gap:4px;padding:18px;border-radius:var(--r);background:var(--card);border:2px solid var(--line);text-decoration:none;align-content:start}
.dona:hover{border-color:var(--coral)}
.dona b{font-family:var(--f-display);font-size:1.2rem;font-weight:600}
.dona-dist{background:var(--sun);border-color:var(--sun)}

/* riquadro "puoi aiutare" (home e adotta) */
.puoi{background:var(--bg-2);border-radius:32px;padding:30px;display:grid;grid-template-columns:.85fr 1.6fr;gap:26px;align-items:center}
.puoi-head h2{margin-block:6px 10px}
.puoi-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.puoi-card{display:grid;gap:8px;align-content:start;padding:22px;border-radius:24px;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow);transition:transform .15s}
.puoi-card:hover{transform:translateY(-3px)}
.puoi-card:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.puoi-card h3{font-size:1.3rem;margin:4px 0 0}
.puoi-card p{margin:0;color:var(--muted)}
.puoi-card .btn{justify-self:start;margin-top:6px;pointer-events:none}
.puoi-ic{width:54px;height:54px;border-radius:18px;display:grid;place-items:center}
.pc-pink .puoi-ic{background:var(--pink);color:var(--coral)}
.pc-sky .puoi-ic{background:var(--sky);color:#2F7C86}
.puoi-n{font-weight:800;color:var(--coral)}
@media (max-width:900px){.puoi{grid-template-columns:1fr;padding:22px}}
@media (max-width:560px){.puoi-cards{grid-template-columns:1fr}}

/* footer: pulsanti donazioni */
.foot-btns{margin-top:12px;gap:8px}

/* chi ci aiuta: striscia di loghi che scorre + schede */
.ticker{overflow:hidden;padding-block:6px 4px;margin-bottom:26px}
.ticker.gira{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;width:max-content}
.ticker:not(.gira) .ticker-track{width:auto;justify-content:center;flex-wrap:wrap;padding-inline:18px}
.ticker.gira .ticker-track{animation:tk-scorri var(--durata,40s) linear infinite}
.ticker.gira:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;gap:14px;padding-right:14px}
.ticker:not(.gira) .ticker-group{flex-wrap:wrap;justify-content:center}
@keyframes tk-scorri{to{transform:translateX(-50%)}}
.tk{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:var(--card);border:2px solid var(--line);white-space:nowrap;font-weight:800;font-size:.95rem}
.tk img{height:38px;width:auto;max-width:130px;object-fit:contain}
.tk-ini{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:.95rem;color:var(--ink)}
.tk-ini.c0{background:var(--sun)}.tk-ini.c1{background:var(--pink)}.tk-ini.c2{background:var(--sky)}.tk-ini.c3{background:var(--mint)}.tk-ini.c4{background:var(--lilac)}
.sost-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sost-card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;align-content:start}
.sost-card p{margin:0}
.sost-top{display:flex;align-items:center;gap:12px}
.sost-top h3{font-size:1.08rem;margin:0 0 4px;line-height:1.2}
.sost-logo{flex:none;width:64px;height:64px;border-radius:18px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.sost-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.sost-logo .tk-ini{width:64px;height:64px;border-radius:18px;font-size:1.25rem}
.sost-link{font-weight:800;color:var(--coral)}
.sost-invito{margin-top:20px;background:var(--bg-2);border:2px dashed var(--sun);border-radius:18px;padding:14px 18px}
@media (prefers-reduced-motion:reduce){.ticker.gira .ticker-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.ticker-group[aria-hidden]{display:none}.ticker.gira{-webkit-mask-image:none;mask-image:none}.ticker-group{flex-wrap:wrap;justify-content:center}.puoi-card{transition:none}}

/* su di noi: veterinari, mappa e comuni convenzionati */
.vet-box{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:var(--mint);border-radius:28px;padding:26px 28px}
.vet-box h2{margin:0 0 6px}
.vet-ic{width:72px;height:72px;border-radius:22px;background:var(--card);display:grid;place-items:center;color:var(--ok)}
.comuni-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start}
.mappa-box{display:grid;gap:8px}
.mappa-comuni{width:100%;height:auto;display:block;border-radius:24px}
.mc-pt{fill:var(--coral);stroke:#fff;stroke-width:2.5;cursor:pointer;transition:r .15s}
.mc-pt:hover,.mc-pt.on{fill:var(--sun);stroke:var(--ink)}
.mc-nome{font:800 11px var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--bg-2);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.mc-nome.on{font-size:14px}
.mc-rif{font:700 11px var(--f-body);fill:var(--muted);font-style:italic}
.mc-mare{font:700 13px var(--f-body);fill:#5E9EA6;font-style:italic;letter-spacing:.06em}
.mc-canile circle{fill:var(--ink);stroke:var(--sun);stroke-width:3}
.mc-canile path{fill:var(--sun)}
.mc-canile text{font:700 13px var(--f-display);fill:var(--ink);paint-order:stroke;stroke:var(--bg-2);stroke-width:3px}
.comuni-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.comuni-lista li{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px;display:grid;gap:2px}
.comuni-lista li>a:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.comuni-lista li>a:first-child:hover b{color:var(--coral)}
.comune-sito{color:var(--muted);font-weight:700}
.comuni-chips{flex-wrap:wrap;gap:8px;margin-top:8px}
.comuni-chips .chip{text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--line)}
.comuni-chips .chip:hover{border-color:var(--sun)}
.conv-box{border-color:var(--mint)}
.conv-sopra{margin-bottom:24px}
.conv-sotto{display:none}
@media (max-width:760px){.conv-sopra{display:none}.conv-sotto{display:grid}}
.comune-passi{margin:6px 0 14px;padding-left:22px;display:grid;gap:6px}
@media (max-width:900px){.comuni-layout{grid-template-columns:1fr}}
@media (max-width:520px){.comuni-lista{grid-template-columns:1fr}.vet-box{grid-template-columns:1fr;padding:22px}}

/* Team e volontari (Su di noi #team e fascia in home) */
.team-foto{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--bg-2);font-family:var(--f-display);font-weight:700;color:var(--ink)}
.team-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
#team{scroll-margin-top:90px}
.team-foto.c0{background:var(--sun)}.team-foto.c1{background:var(--pink)}.team-foto.c2{background:var(--sky)}.team-foto.c3{background:var(--mint)}.team-foto.c4{background:var(--lilac)}
/* Su di noi: la nostra storia (foto e frase a sinistra, racconto a destra) */
.storia{display:grid;grid-template-columns:minmax(0,380px) minmax(0,62ch);grid-template-areas:"lato testa" "lato corpo";grid-template-rows:auto 1fr;column-gap:clamp(28px,5vw,64px);align-items:start}
.storia-lato{grid-area:lato;position:sticky;top:110px;display:grid;gap:18px}
.storia-foto{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.storia-frase{margin:0;padding:24px 26px;background:var(--sun);border-radius:28px;font-family:var(--f-display);font-weight:600;font-size:1.35rem;line-height:1.3;color:var(--sun-ink)}
.storia-frase::before{content:"“";display:block;font-size:3rem;line-height:.6;margin-bottom:6px;opacity:.5}
.storia-testa{grid-area:testa}
.storia-testa h2{margin:6px 0 18px}
.storia-corpo{grid-area:corpo}
.storia-corpo p{margin:0 0 14px;font-size:1.08rem;line-height:1.65}
.storia-corpo p:last-child{margin:26px 0 0;font-family:var(--f-display);font-weight:700;font-size:1.5rem;line-height:1.25;color:var(--coral)}
#storia{scroll-margin-top:90px}
@media (max-width:900px){.storia{grid-template-columns:minmax(0,1fr);grid-template-areas:"testa" "lato" "corpo";grid-template-rows:auto}.storia-lato{position:static;margin-bottom:24px}.storia-foto{aspect-ratio:4/3;max-height:420px}}
.team-gruppo{font-size:1.25rem;margin:8px 0 14px}
.team-grid+.team-gruppo{margin-top:36px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.team-card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;align-content:start}
.team-card .team-foto{aspect-ratio:1;font-size:2.6rem}
.team-txt{padding:14px 16px 16px;display:grid;gap:4px}
.team-txt h4{font-family:var(--f-display);font-size:1.12rem;margin:0;line-height:1.2}
.team-txt p{margin:4px 0 0}
.team-ruolo{font-weight:800;font-size:.88rem;color:var(--coral)}
.team-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 12px}
.team-mini a{display:grid;justify-items:center;text-align:center;gap:2px;text-decoration:none;color:inherit}
.team-mini .team-foto{width:88px;height:88px;border-radius:50%;border:4px solid var(--card);box-shadow:0 5px 0 rgba(74,58,42,.12);font-size:1.5rem;margin-bottom:6px;transition:transform .2s}
.team-mini a:hover .team-foto,.team-mini a:focus-visible .team-foto{transform:translateY(-3px)}
.team-mini-nome{font-family:var(--f-display);font-weight:700;line-height:1.2}
.team-mini-ruolo{font-size:.82rem;color:var(--muted);line-height:1.3}
@media (max-width:560px){.team-grid{grid-template-columns:1fr 1fr;gap:12px}.team-txt{padding:10px 12px 12px}.team-txt h4{font-size:1rem}
  .team-mini{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;margin-inline:-18px;padding-inline:18px}
  .team-mini li{flex:0 0 104px;scroll-snap-align:start}}
@media (prefers-reduced-motion:reduce){.team-mini .team-foto{transition:none}}