/* PICCOLO ZOO LISSONE — progetto di settore (demo 13/11/2026)
   Concept: la vetrina di un negozio di quartiere dove gli animali "fanno capolino".
   Pagina chiave futura: /toelettatura-cani/ + pagine animale (solo sito definitivo).
   Wow: vetrina illustrata, gli animali spuntano dal bordo uno alla volta (solo CSS, gira anche in Risparmio energetico).
   Interazione (1): "Tocca il tuo animale" -> domanda precompilata su WhatsApp.
   Palette provvisoria (insegna da verificare): verde foglia profondo + giallo sole + corallo solo decorativo.
   Font: Bricolage Grotesque (titoli, carattere tondo e simpatico), Figtree (testo).
   Tono: affettuoso, concreto, da negoziante che consiglia. Niente foto: TODO-FOTO, illustrazioni SVG segnaposto. */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{
  --bg:#EEF3EC;--paper:#FBFCF8;--ink:#14321F;--ink-2:#2B4A35;--soft:#4A5E50;
  --sun:#F4B63F;--sun-2:#FBE3A6;--coral:#E2603F;--leaf:#5E8C61;--line:#D3DDD0;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
  --r:22px;--bar:64px
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;accent-color:var(--leaf);caret-color:var(--ink);scrollbar-color:var(--leaf) var(--bg)}
body{font-family:"Figtree",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:var(--bar)}
::selection{background:var(--sun);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--leaf)}
h1,h2,h3{font-family:"Bricolage",system-ui,sans-serif;line-height:1.05;letter-spacing:-.02em;font-weight:700}
h2{font-size:clamp(30px,6.6vw,52px)}
h3{font-size:21px;letter-spacing:-.01em}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
section{padding:72px 0}
.kick{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);margin-bottom:12px}
.lead{font-size:18px;color:var(--soft);max-width:56ch;margin-top:14px}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--ink);transition:transform .18s var(--ease-out),background-color .2s,color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:scale(.97)}
.btn-sun{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-line{background:transparent;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}.btn-line:hover{background:var(--ink);color:var(--paper)}}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(238,243,236,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-family:"Bricolage";font-weight:800;font-size:21px;text-decoration:none;letter-spacing:-.02em}
.logo svg{width:30px;height:30px}
.top nav{display:none;gap:26px;font-weight:600;font-size:15px}
.top nav a{text-decoration:none}
.top .call{display:none}
@media(min-width:900px){.top nav{display:flex}.top .call{display:inline-flex;min-height:42px}}

/* hero */
.hero{padding:28px 0 56px}
.hero .wrap{display:grid;gap:28px;align-items:center}
.hero-txt{order:1}
.hero h1{font-size:clamp(40px,10.5vw,84px)}
.hero h1 .brand{display:block;font-size:.5em;color:var(--leaf);letter-spacing:-.01em;margin-bottom:10px}
.hero h1 em{font-style:normal;white-space:nowrap;background:linear-gradient(transparent 62%,var(--sun-2) 62%)}
.hero p{font-size:18px;color:var(--soft);margin-top:16px;max-width:40ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.open-now{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:600;color:var(--soft)}
.open-now i{width:9px;height:9px;border-radius:50%;background:#B9C4B8}
.open-now.on i{background:#2E9B57;box-shadow:0 0 0 4px rgba(46,155,87,.18)}
@media(min-width:900px){.hero{padding:56px 0 84px}.hero .wrap{grid-template-columns:1.05fr 1fr;gap:56px}.hero-txt{order:0}}

/* vetrina illustrata */
.vetrina{position:relative;aspect-ratio:1/0.92;border-radius:200px 200px var(--r) var(--r);background:radial-gradient(120% 90% at 50% 0%,#FFF6DD 0,#FBE3A6 45%,#F4B63F 100%);overflow:hidden;border:3px solid var(--ink);order:-1}
@media(min-width:900px){.vetrina{order:0}}
.vetrina .sun{position:absolute;left:50%;top:12%;width:34%;aspect-ratio:1;border-radius:50%;translate:-50% 0;background:#FFF8E6;opacity:.75}
.vetrina .shelf{position:absolute;left:0;right:0;bottom:0;height:23%;background:var(--ink);z-index:3}
.vetrina .shelf:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--leaf)}
.vetrina .sign{position:absolute;z-index:4;left:50%;bottom:6.5%;translate:-50% 0;color:var(--sun-2);font-family:"Bricolage";font-weight:700;font-size:clamp(13px,3.4vw,17px);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pet{position:absolute;bottom:20%;z-index:2;transform:translateY(105%);animation:peek 1s var(--ease-out) forwards;animation-delay:var(--d,0s)}
.pet svg{width:100%;height:auto}
.pet.p1{left:4%;width:27%;--d:.25s}
.pet.p2{left:29%;width:25%;--d:.55s}
.pet.p3{left:52%;width:22%;--d:.85s}
.pet.p4{left:73%;width:23%;--d:1.15s}
.bird{position:absolute;z-index:2;top:20%;right:13%;width:15%;animation:hop 3.2s var(--ease-io) 1.6s infinite}
@keyframes peek{to{transform:translateY(0)}}
@keyframes hop{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-12px) rotate(-6deg)}86%{transform:translateY(0)}}
.ear{transform-box:fill-box;transform-origin:50% 100%;animation:twitch 4.5s ease-in-out 2s infinite}
@keyframes twitch{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-9deg)}96%{transform:rotate(4deg)}}
.blink{transform-box:fill-box;transform-origin:center;animation:blink 5s steps(1) 2.4s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.tail{transform-box:fill-box;transform-origin:0% 100%;animation:wag .5s ease-in-out 2s 6 alternate}
@keyframes wag{to{transform:rotate(18deg)}}

/* striscia fatti */
.facts{background:var(--ink);color:var(--paper);overflow:hidden;position:relative}
.facts .track{display:flex;width:max-content;animation:marq 34s linear infinite}
.facts ul{display:flex;list-style:none}
.facts li{display:flex;align-items:center;gap:22px;padding:18px 22px 18px 0;font-family:"Bricolage";font-weight:600;font-size:clamp(17px,3.6vw,22px);white-space:nowrap}
.facts li:after{content:"";width:18px;height:18px;flex:none;margin-left:0;background:var(--sun);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='15.5' r='5'/%3E%3Ccircle cx='5' cy='9' r='2.4'/%3E%3Ccircle cx='9.5' cy='4.8' r='2.4'/%3E%3Ccircle cx='14.5' cy='4.8' r='2.4'/%3E%3Ccircle cx='19' cy='9' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='15.5' r='5'/%3E%3Ccircle cx='5' cy='9' r='2.4'/%3E%3Ccircle cx='9.5' cy='4.8' r='2.4'/%3E%3Ccircle cx='14.5' cy='4.8' r='2.4'/%3E%3Ccircle cx='19' cy='9' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat}
.facts:before,.facts:after{content:"";position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.facts:before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.facts:after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.facts:hover .track{animation-play-state:paused}}

/* consigli (voce dei clienti) */
.consigli .wrap{display:grid;gap:36px}
.steps{display:grid;gap:14px;list-style:none;counter-reset:s}
.steps li{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.steps li svg{width:44px;height:44px;flex:none}
.steps b{display:block;font-family:"Bricolage";font-size:20px;letter-spacing:-.01em;margin-bottom:4px}
.steps span{color:var(--soft);font-size:16px}
@media(min-width:900px){.consigli .wrap{grid-template-columns:1fr 1.15fr;align-items:start}}

/* interazione */
.tocca{background:var(--paper);border-block:1px solid var(--line)}
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.picker button{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:96px;padding:12px 6px;border-radius:18px;border:2px solid var(--line);background:var(--bg);font:600 15px "Figtree",sans-serif;color:var(--ink);cursor:pointer;transition:transform .18s var(--ease-out),border-color .2s,background-color .2s}
.picker button svg{width:46px;height:46px}
.picker button:active{transform:scale(.96)}
.picker button[aria-pressed=true]{border-color:var(--ink);background:var(--sun-2)}
.picker button.hint:after{content:"";position:absolute;right:8px;top:8px;width:22px;height:22px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V10l5.2.9a2 2 0 0 1 1.6 2.3l-.9 5A3 3 0 0 1 14.9 21H11a3 3 0 0 1-2.4-1.2L5 15a1.6 1.6 0 0 1 2.5-2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V10l5.2.9a2 2 0 0 1 1.6 2.3l-.9 5A3 3 0 0 1 14.9 21H11a3 3 0 0 1-2.4-1.2L5 15a1.6 1.6 0 0 1 2.5-2z'/%3E%3C/svg%3E") center/contain no-repeat;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.18)}}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.topics button{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:var(--paper);font:600 15px "Figtree",sans-serif;color:var(--ink);cursor:pointer}
.topics button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bubble{margin-top:20px;background:#DCF3D9;border-radius:18px 18px 18px 4px;padding:16px 18px;font-size:16px;max-width:520px;border:1px solid #BFE3BA;min-height:76px}
.bubble small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf);margin-bottom:4px}
.tocca .btn{margin-top:16px}
@media(min-width:700px){.picker{grid-template-columns:repeat(6,1fr)}}
.tocca .grid{display:grid;gap:10px}
@media(min-width:900px){.tocca .grid{grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}.tocca .side{position:sticky;top:90px}}

/* toelettatura */
.toel .card{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:34px 24px;display:grid;gap:24px;position:relative;overflow:hidden}
.toel .card h2{color:var(--paper)}
.toel .card .kick{color:var(--sun)}
.toel ul{list-style:none;display:grid;gap:12px;font-size:17px}
.toel li{display:flex;gap:12px;align-items:center}
.toel li svg{width:22px;height:22px;flex:none;color:var(--sun)}
.toel p{color:#C9D6CC}
.toel .bubbles{position:absolute;right:-30px;top:-30px;width:180px;opacity:.16}
@media(min-width:900px){.toel .card{grid-template-columns:1.2fr 1fr;padding:56px;align-items:center}}

/* recensioni */
.rev{display:grid;gap:14px;margin-top:28px}
.rev figure{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rev blockquote{font-size:16.5px}
.rev figcaption{margin-top:12px;font-size:13px;font-weight:700;color:var(--leaf);display:flex;align-items:center;gap:8px}
.stars{display:flex;gap:2px}
.stars svg{width:15px;height:15px;color:var(--sun)}
@media(min-width:900px){.rev{grid-template-columns:repeat(3,1fr)}}
.rev-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* dove */
.dove .wrap{display:grid;gap:28px}
.hours{list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px 20px}
.hours li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.hours li:last-child{border:0}
.hours li.today{font-weight:700}
.hours li.today span:first-child:after{content:" · oggi";color:var(--leaf)}
.hours .cl{color:var(--soft)}
address{font-style:normal;font-size:19px;margin:14px 0 20px}
.minimap{margin-top:20px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
@media(min-width:900px){.dove .wrap{grid-template-columns:1fr 1fr;gap:56px}}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-family:"Bricolage";font-weight:600;font-size:20px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:26px;line-height:1;color:var(--leaf);transition:transform .25s var(--ease-out)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--soft);max-width:65ch}
.faq .wrap{max-width:820px}

/* footer */
footer{background:var(--ink);color:#C9D6CC;padding:48px 0 28px;font-size:15px}
footer .wrap{display:grid;gap:26px}
footer .logo{color:var(--paper)}
footer a{color:var(--paper)}
footer .legal{border-top:1px solid #2E4C38;padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:13px}
.madeby{display:flex;align-items:center;gap:8px;text-decoration:none}
.madeby svg{background:#fff;border-radius:6px;padding:3px 6px;height:26px;width:auto}
@media(min-width:900px){footer .wrap{grid-template-columns:1.2fr 1fr 1fr}footer .legal{grid-column:1/-1}}

/* barra mobile */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);height:var(--bar);background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:13px;font-weight:700;text-decoration:none}
.mbar a svg{width:22px;height:22px}
.mbar a.wa{background:var(--sun)}
@media(min-width:768px){.mbar{display:none}body{padding-bottom:0}}

/* reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.demo-tag{position:fixed;left:12px;top:70px;z-index:40;background:var(--coral);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .pet,.bird,.ear,.blink,.tail{animation:none!important;transform:none!important}
  .facts .track{animation:none;width:auto}
  .facts{overflow-x:auto;scrollbar-width:none}
  .facts ul[aria-hidden]{display:none}
  .picker button.hint:after{animation:none}
  .js .reveal{transform:none;transition:opacity .5s}
  html{scroll-behavior:auto}
}