/* ===========================================================
   CAN CA BAULA — foglio di stile condiviso
   Stile fedele all'originale · Fredoka (titoli) + Lato (testo)
   Palette: crema #FEF6DE + rosso scuro #7A0000
   =========================================================== */

/* Font ospitati in locale (niente CDN Google: più veloce e conforme privacy/GDPR) */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fredoka-400.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fredoka-500.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fredoka-600.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/fredoka-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lato-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/lato-900.woff2') format('woff2')}

:root{
  --bg:#FEF6DE;          /* crema — sfondo caldo come l'originale */
  --bg-warm:#FBE9C0;     /* crema più calda */
  --card:#FFFFFF;
  --ink:#3A2A1E;         /* marrone scuro — come le illustrazioni */
  --ink-soft:#5E5044;    /* marrone tenue — scurito per leggibilità (contrasto AA su crema) */
  --brand:#7A0000;       /* rosso scuro Can Ca Baula — azione/titoli */
  --brand-dark:#5A0000;
  --accent:#6E8B3D;      /* verde — l'erba delle illustrazioni */
  --wa:#1FA855;          /* verde WhatsApp */
  --wa-dark:#178a45;
  --gold:#E6A94E;
  --line:#EAD9B0;        /* bordo crema */
  --shadow:0 14px 34px -18px rgba(70,40,20,.45);
  --shadow-sm:0 6px 18px -12px rgba(70,40,20,.4);
  --radius:20px;
  --radius-sm:13px;
  --maxw:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Lato",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Fredoka","Trebuchet MS",sans-serif;
  font-weight:600;
  line-height:1.12;
  margin:0 0 .4em;
  letter-spacing:0;
}
h1{color:var(--brand)}   /* titoli pagina in rosso scuro, come l'originale */
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,5vw,60px)}
.section{padding:72px 0}
.section.tight{padding:48px 0}
.center{text-align:center}
.muted{color:var(--ink-soft)}
.lead{font-size:1.22rem;color:var(--ink-soft);max-width:46ch}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.8em 1.5em;border-radius:999px;font-weight:800;
  font-size:1rem;cursor:pointer;border:2px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.btn .wa-chip{width:1.5em;height:1.5em;border-radius:50%;background:#fff;flex:none;padding:1px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-wa{background:var(--wa);color:#fff;box-shadow:var(--shadow-sm)}
.btn-wa:hover{background:var(--wa-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn-sm{padding:.6em 1.1em;font-size:.92rem;min-height:44px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,244,234,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.38rem;color:var(--brand)}
.brand:hover{text-decoration:none}
.brand img{height:56px;width:auto;display:block}
.brand .brand-mark{height:50px;width:auto}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.08);transition:transform .2s ease}
.brand-foot img{height:64px}
/* badge cooperativa (logo a colori su chip bianco, leggibile sul footer scuro) */
.foot-coop{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}
.coop-badge{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:6px 11px;margin-left:4px;vertical-align:middle}
.coop-badge:hover{text-decoration:none}
.coop-badge img{height:30px;width:auto;display:block}
.brand .paw{width:34px;height:34px;flex:none}
/* skip-link: invisibile finché non riceve il focus da tastiera (accessibilità) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;
  font-weight:800;padding:10px 18px;border-radius:0 0 14px 0;text-decoration:none}
.skip-link:focus{left:0}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{
  color:var(--ink);font-weight:700;font-size:.96rem;
  padding:.5em .7em;border-radius:10px;display:block;
  transition:transform .16s ease, color .16s ease, background .16s ease;
}
.nav-links a:hover{background:var(--bg-warm);color:var(--brand-dark);transform:translateY(-2px) rotate(-1.5deg);text-decoration:none}
.nav-links a.active{color:var(--brand-dark)}
.nav-links a.active::after{content:"";display:block;height:3px;border-radius:3px;background:var(--brand);margin-top:3px}
.has-sub{position:relative}
.submenu{
  position:absolute;top:100%;left:0;min-width:210px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:8px;margin-top:6px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;
  list-style:none;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu,.has-sub.open .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{font-weight:700;font-size:.92rem}
.nav-cta{display:flex;align-items:center;gap:10px}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{display:block;width:26px;height:3px;background:var(--ink);border-radius:3px;margin:5px 0;transition:.2s}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 82% -8%, #F7D9B5 0%, transparent 60%),
    radial-gradient(700px 460px at -8% 110%, #E7EBD7 0%, transparent 55%),
    var(--bg);
}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:86px 0 78px}
.hero h1{font-size:clamp(2.5rem,5.2vw,4rem)}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;color:var(--brand-dark);
  background:#fff;border:1px solid var(--line);padding:.45em 1em;border-radius:999px;margin-bottom:18px;
}
.hero p{font-size:1.18rem;color:var(--ink-soft);max-width:48ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-art{
  aspect-ratio:4/3;border-radius:28px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);border:6px solid #fff;
}
/* Banner-illustrazione (mascotte su sfondo trasparente): nessuna cornice */
.hero-media{display:flex;align-items:center;justify-content:center;position:relative}
.hero-media::before{content:"";position:absolute;width:80%;height:80%;z-index:0;
  background:radial-gradient(circle at 40% 35%, #FBD98C, #F0B85C);opacity:.34;
  border-radius:46% 54% 60% 40% / 50% 42% 58% 50%;animation:blobby 10s ease-in-out infinite}
.hero-illus{
  position:relative;z-index:1;width:100%;height:auto;max-width:560px;
  filter:drop-shadow(0 14px 24px rgba(90,40,0,.16));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* Banner in cima alle pagine interne */
.page-banner{text-align:center;padding:20px 0 0}
.page-banner img{
  width:100%;height:auto;max-width:520px;margin:0 auto;
  filter:drop-shadow(0 12px 22px rgba(90,40,0,.15));
}
/* Hero di pagina integrato: testo + illustrazione su "macchia" di colore */
.phero{--theme:#F2C485;background:radial-gradient(820px 420px at 88% -25%, #FBE9C0 0%, transparent 60%), var(--bg)}
.phero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:34px 0 30px}
.phero-text h1{font-size:clamp(2rem,4.4vw,3rem)}
.phero-text .lead{margin-bottom:0}
.phero--theme .kicker{color:color-mix(in srgb, var(--theme) 62%, #3A2A1E)}
.phero-art{position:relative;display:flex;justify-content:center;align-items:center;
  width:100%;max-width:420px;margin:0 auto}
/* macchia organica irregolare che ondeggia, dietro l'illustrazione (prato rotondo) */
.phero-blob{position:absolute;inset:-5%;background:var(--theme);opacity:.32;z-index:0;
  border-radius:42% 58% 63% 37% / 45% 38% 62% 55%;animation:blobby 9s ease-in-out infinite}
.phero-art img{position:relative;z-index:1;width:100%;max-width:420px;height:auto;
  filter:drop-shadow(0 12px 22px rgba(90,40,0,.14))}
@keyframes blobby{
  0%,100%{border-radius:42% 58% 63% 37% / 45% 38% 62% 55%}
  50%{border-radius:58% 42% 38% 62% / 56% 62% 38% 44%}
}
@media(max-width:860px){
  .phero-inner{grid-template-columns:1fr;padding:22px 0 6px;text-align:center}
  .phero-art{order:-1;max-width:300px}
  .phero-art img{max-width:280px}
  .phero-text .lead{margin-left:auto;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){.phero-blob,.hero-illus,.hero-media::before,.cta-blob,.project-circle{animation:none}}

/* ---------- Photo placeholder (in attesa delle foto reali) ---------- */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#EBD9BE,#D9B98E);
  color:#fff;overflow:hidden;
}
.ph::before{
  content:"";position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(circle at 20% 30%, #fff 2px, transparent 3px),
                   radial-gradient(circle at 70% 60%, #fff 2px, transparent 3px),
                   radial-gradient(circle at 45% 85%, #fff 2px, transparent 3px);
  background-size:120px 120px;
}
.ph .paw-bg{position:absolute;width:60%;opacity:.16;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}
.ph .ph-name{position:relative;font-family:"Fredoka",sans-serif;font-size:1.5rem;font-weight:600;
  text-shadow:0 2px 10px rgba(120,70,30,.4);z-index:1}
.ph .ph-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);color:var(--ink);
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.35em .7em;border-radius:999px;z-index:2}

/* ---------- Sezioni / griglie ---------- */
.kicker{font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;color:var(--brand-dark)}
.section-head{max-width:60ch;margin-bottom:34px}
.section-head.center{margin-left:auto;margin-right:auto}
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Card cane (giocosa, cornice colorata diversa per ognuno) ---------- */
.dog-card{
  display:flex;flex-direction:column;background:#fff;color:inherit;
  border:4px solid var(--cardc,#C0392B);border-radius:30px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .22s ease, box-shadow .25s ease;
}
.dog-card:hover{transform:translateY(-7px) rotate(-1deg);text-decoration:none;
  box-shadow:0 16px 32px -12px color-mix(in srgb, var(--cardc) 70%, transparent)}
.dog-card .dog-card-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-warm)}
.dog-card .dog-card-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .35s ease}
.dog-card:hover .dog-card-media img{transform:scale(1.06)}
.dog-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;opacity:.5}
.dog-tag{position:absolute;top:12px;left:12px;background:var(--cardc);color:#fff;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:.4em .85em;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.18)}
/* fascia colorata sotto la foto: nome grande bianco a sx + tasto a dx */
.dog-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px 14px;background:var(--cardc)}
.dog-card-foot h3{margin:0;font-size:1.6rem;font-weight:700;color:#fff;line-height:1.05;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.14)}
/* badge sesso tondo, discreto, in alto a destra sulla foto (bilancia il tag in alto a sinistra) */
.dog-sex{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  background:#fff;color:var(--cardc);display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;font-weight:800;line-height:1;box-shadow:0 3px 9px rgba(0,0,0,.20)}
.btn-scopri{background:#fff;color:var(--cardc);font-weight:800;font-size:.82rem;display:inline-flex;align-items:center;gap:.3em;
  padding:.5em 1em;border-radius:999px;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.16);transition:transform .18s ease}
.dog-card:hover .btn-scopri{transform:scale(1.08) rotate(-3deg)}
.dog-card.c0{--cardc:#C0392B}
.dog-card.c1{--cardc:#6E8B3D}
.dog-card.c2{--cardc:#3E7CB1}
.dog-card.c3{--cardc:#8A5AA3}
.dog-card.c4{--cardc:#E08A2B}
.dog-card.c5{--cardc:#2BA39A}
.dog-card.c6{--cardc:#D24D78}
.dog-card.c7{--cardc:#4E6FB5}
.dog-card.c8{--cardc:#B5852E}
.dog-card.c9{--cardc:#4FA03A}
/* forme giocose e "insolite": angoli asimmetrici che variano */
.grid-3 .dog-card:nth-child(3n+1){border-radius:40px 24px 40px 24px}
.grid-3 .dog-card:nth-child(3n+2){border-radius:24px 40px 24px 40px}
.grid-3 .dog-card:nth-child(3n+3){border-radius:34px 34px 18px 34px}
/* scheda cane: tema col colore del cane */
.dog-detail-page .kicker{color:var(--cardc)}
.dog-detail-page h1{color:var(--cardc)}
.dog-detail-page .block h2{color:var(--cardc)}
.dog-detail-page .dog-photo-main{border-color:var(--cardc)}
.dog-detail-page .btn-primary{background:var(--cardc)}
.dog-detail-page .btn-primary:hover{background:var(--cardc);filter:brightness(.92)}
/* illustrazione servizio (mostrata intera, non ritagliata) */
.serv-media{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--bg-warm);overflow:hidden}
.serv-media img{width:100%;height:100%;object-fit:contain;padding:12px}
/* card servizio: ogni servizio il suo colore dominante */
.serv-card{display:flex;flex-direction:column;background:#fff;color:inherit;text-decoration:none;
  border:4px solid var(--servc,#C0392B);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .25s ease}
.serv-card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--shadow);text-decoration:none}
.serv-card .serv-media{background:color-mix(in srgb, var(--servc) 14%, #fff)}
.serv-card .serv-media img{transition:transform .3s ease}
.serv-card:hover .serv-media img{transform:scale(1.05) rotate(-1.5deg)}
.serv-card-foot{padding:14px 20px 20px}
.serv-card-foot h3{margin:0 0 .2em;color:var(--servc)}
.serv-card-foot p{margin:0;color:var(--ink-soft)}
.sc-toel{--servc:#3E7CB1}
.sc-pens{--servc:#C0392B}
.sc-asilo{--servc:#6E8B3D}
.sc-cons{--servc:#8A5AA3}

/* ---------- Home: "Scopri" — illustrazioni grandi e pulite (stile originale) ---------- */
.home-discover{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.discover-item{display:block;text-align:center;color:inherit;text-decoration:none;transition:transform .25s ease}
.discover-item:hover{transform:translateY(-5px);text-decoration:none}
/* contenitore che "calza" l'immagine: la macchia è dimensionata sull'illustrazione, non sulla cella */
.discover-media{position:relative;display:block;margin:0 auto}
.discover-media::before{content:"";position:absolute;inset:-2%;z-index:0;opacity:.30;
  border-radius:46% 54% 57% 43%/52% 44% 56% 48%;animation:blobby 10s ease-in-out infinite}
.d-cani .discover-media::before{background:#EE6C4D}   /* Da adottare: corallo (come la pagina) */
.d-serv .discover-media::before{background:#22B2A6}   /* Servizi: verde acqua (come la pagina) */
.discover-item img{position:relative;z-index:1;width:100%;height:auto;display:block;filter:drop-shadow(0 12px 22px rgba(90,40,0,.12));transition:transform .25s ease}
.discover-item:hover img{transform:rotate(-1deg) scale(1.02)}
.scopri-title{font-size:2.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}
.discover-label{display:inline-block;margin-top:16px;font-family:"Fredoka",sans-serif;font-weight:700;
  font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;color:#fff;
  background:var(--brand);padding:.6em 1.6em;border-radius:999px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .25s ease}
.discover-item:hover .discover-label{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow);text-decoration:none}
.discover-item:nth-child(1) .discover-label{background:#C0392B}   /* coral-red leggibile, intonato al corallo */
.discover-item:nth-child(2) .discover-label{background:#15897F}   /* teal leggibile, intonato al verde acqua */
.discover-label{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.discover-media::before{animation:none}}
.btn-strip{background:#fff;color:#4f6a2e;box-shadow:var(--shadow-sm)}
.btn-strip:hover{background:#fff;color:#3e5524;transform:translateY(-2px) scale(1.03)}
@media(max-width:760px){.home-discover{grid-template-columns:1fr;gap:8px}}

/* pillola "vai" riutilizzabile */
.cta-go{display:inline-block;background:var(--brand);color:#fff;font-weight:800;
  padding:.55em 1.2em;border-radius:999px;transition:transform .15s ease}

/* ---------- Eventi: Servizio Civile + cerchi-progetto ---------- */
.event-civile{display:block;max-width:760px;margin:26px auto 0;text-align:center;
  background:linear-gradient(135deg,#EAF2FB,#fff);border:3px solid #3E6FA3;border-radius:24px;
  padding:24px 28px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease}
.event-civile:hover{transform:translateY(-4px);box-shadow:var(--shadow);text-decoration:none}
.event-civile:hover .cta-go{transform:scale(1.05)}
.ec-badge{display:inline-block;background:#3E6FA3;color:#fff;font-weight:800;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.4em .95em;border-radius:999px}
.event-civile h3{color:#3E6FA3;margin:.5em 0 .2em;font-size:1.7rem}
.event-civile p{color:var(--ink-soft);margin:0 auto 14px;max-width:56ch}
.event-civile .cta-go{background:#3E6FA3}
.projects{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:30px}
.project-circle{width:230px;height:230px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:22px;color:#fff;
  box-shadow:var(--shadow-sm);transition:transform .2s ease}
.project-circle:hover{transform:translateY(-5px) rotate(-2deg)}
.project-circle span{font-weight:800;font-size:.95rem;opacity:.95}
.project-circle strong{font-size:1.1rem;margin-top:8px;line-height:1.25}
.pc-pink{background:radial-gradient(circle at 35% 28%, #F3A6C8, #DE5E9B)}
.pc-orange{background:radial-gradient(circle at 35% 28%, #F7C58C, #E78F36)}
@media(max-width:560px){.project-circle{width:200px;height:200px}}

/* ---------- Animazioni di comparsa allo scroll ---------- */
.reveal{opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Scheda cane (dettaglio) ---------- */
.dog-detail{display:grid;grid-template-columns:1fr 1.15fr;gap:42px;align-items:start}
.dog-detail .ph{aspect-ratio:1/1;border-radius:24px;border:6px solid #fff;box-shadow:var(--shadow);position:sticky;top:90px}
.dog-media{position:sticky;top:90px}
/* contenuti sotto l'hero (carattere, ideale, compatibilità, questionario, condividi):
   colonna centrata e leggibile, così la pagina non sembra "spostata a destra" */
.dog-more{max-width:760px;margin:36px auto 0}
/* ---------- Galleria scheda cane: foto + video insieme, frecce + miniature ---------- */
.dog-stage{position:relative;aspect-ratio:1;border-radius:24px;border:6px solid #fff;
  box-shadow:var(--shadow);overflow:hidden;background:#000}
.dog-slide{position:absolute;inset:0;width:100%;height:100%;display:none}
.dog-slide.is-active{display:block}
.dog-slide-img{object-fit:cover;cursor:zoom-in}
.dog-slide-video{object-fit:contain;background:#000}
/* frecce avanti/indietro, nel colore del cane */
.dog-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--cardc,var(--brand));
  font-family:"Fredoka",sans-serif;font-size:1.9rem;line-height:1;padding-bottom:4px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:transform .15s ease, background .15s ease}
.dog-nav:hover{transform:translateY(-50%) scale(1.12);background:#fff}
.dog-prev{left:12px}
.dog-next{right:12px}
/* miniature: foto e video (col badge ▶) */
.dog-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.dog-dot{position:relative;display:block;padding:0;aspect-ratio:1;cursor:pointer;
  border:2px solid #fff;border-radius:10px;overflow:hidden;background:var(--bg-warm);
  box-shadow:var(--shadow-sm);transition:transform .15s ease, border-color .15s ease}
.dog-dot img{width:100%;height:100%;object-fit:cover;display:block}
.dog-dot:hover{transform:translateY(-2px)}
.dog-dot.is-active{border-color:var(--cardc,var(--brand));transform:translateY(-2px)}
.dot-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.5rem;background:rgba(0,0,0,.22);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.dot-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}
.spec .item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.spec .item .k{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.spec .item .v{font-weight:800;font-size:1.02rem}
/* "Info sulla salute" espansa: pillole con ✅/❌ */
.health{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;margin:0 0 22px}
.dog-detail-page .health{border-left:5px solid var(--cardc)}
.health-head{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:9px}
.health-chips{display:flex;flex-wrap:wrap;gap:8px}
.hc{display:inline-flex;align-items:center;gap:.35em;background:var(--bg);border:1.5px solid var(--line);
  border-radius:999px;padding:.38em .9em;font-weight:700;font-size:.92rem}
.hc.no{color:var(--ink-soft)}
.block{margin:26px 0}
.block h2{font-size:1.45rem;display:flex;align-items:center;gap:.4em}
.compat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.compat-grid .c{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 15px;font-weight:800;display:flex;align-items:center;gap:.5em}
.compat-legend{margin:10px 0 0;font-size:.85rem;color:var(--ink-soft)}
.callout{
  background:linear-gradient(135deg,#FFF7EE,#FBEAD9);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-top:30px;
}
.callout h3{margin-top:0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}

/* ---------- FAQ ---------- */
.faq-group{margin-bottom:40px}
.faq-group{--fgc:#C0392B;margin-bottom:40px}
.fg-red{--fgc:#C0392B}
.fg-orange{--fgc:#E08A2B}
.fg-pink{--fgc:#D24D78}
.fg-blue{--fgc:#3E7CB1}
.faq-group > h2{display:flex;align-items:center;gap:.5em;font-size:1.6rem;color:var(--fgc);
  padding-bottom:.3em;border-bottom:3px solid var(--fgc)}
details.faq{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--fgc);
  border-radius:14px;padding:0;margin:12px 0;overflow:hidden;transition:box-shadow .2s ease;
}
details.faq[open]{box-shadow:0 8px 20px -12px var(--fgc)}
details.faq summary{
  cursor:pointer;padding:16px 20px;font-weight:800;font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.5rem;color:var(--fgc);font-weight:700;transition:.2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq summary:hover{color:var(--fgc)}
.faq-body{padding:0 20px 20px;color:var(--ink-soft)}
.faq-body ul{margin:.4em 0;padding-left:1.2em}
.faq-body strong{color:var(--ink)}
/* spaziatura/ritmo interno risposte */
.faq-body > p{margin:.75em 0}
.faq-body > p:first-child{margin-top:.2em}
/* colori categorie aggiuntive */
.fg-green{--fgc:#5E9E3E}
.fg-purple{--fgc:#8A5AA3}
.fg-teal{--fgc:#2BA39A}
.faq-group{scroll-margin-top:90px}
/* indice cliccabile delle categorie FAQ */
.faq-index{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding:0}
.faq-index a{--c:var(--brand);display:inline-flex;align-items:center;
  background:color-mix(in srgb,var(--c) 12%,#fff);
  border:2px solid color-mix(in srgb,var(--c) 32%,transparent);
  border-radius:999px;padding:.6em 1.05em;min-height:44px;font-weight:700;font-size:.95rem;
  color:color-mix(in srgb,var(--c) 78%,var(--ink));
  transition:transform .16s ease,border-color .16s ease,color .16s ease,background .16s ease}
.faq-index a:hover{background:var(--c);border-color:var(--c);color:#fff;
  transform:translateY(-2px) rotate(-1.5deg);text-decoration:none}
/* procedure a passi numerati */
.faq-body ol.faq-steps{list-style:none;counter-reset:step;margin:.7em 0;padding:0;display:grid;gap:10px}
.faq-body ol.faq-steps li{counter-increment:step;position:relative;padding:11px 15px 11px 52px;
  background:var(--bg-warm);border-radius:13px;color:var(--ink)}
.faq-body ol.faq-steps li::before{content:counter(step);position:absolute;left:12px;top:11px;
  width:28px;height:28px;border-radius:50%;background:var(--fgc);color:#fff;
  font-family:"Fredoka",sans-serif;font-weight:600;display:flex;align-items:center;justify-content:center}
/* riquadro di evidenza dentro una risposta */
.faq-note{background:var(--bg-warm);border-left:5px solid var(--gold);border-radius:0 12px 12px 0;
  padding:2px 16px;margin:14px 0}
.faq-note.warn{border-left-color:var(--fgc);background:#fff}
/* lista costi (chiave a sinistra, importo a destra) */
.faq-body ul.cost-list{list-style:none;margin:.7em 0;padding:0;display:grid;gap:8px}
.faq-body ul.cost-list li{display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.faq-body ul.cost-list li::before{display:none}
.faq-body ul.cost-list .c-val{font-weight:800;color:var(--fgc);white-space:nowrap}
/* elenco con emoji come segnaposto (niente orma doppia) */
.faq-body ul.emoji-list{padding-left:0;margin:.6em 0}
.faq-body ul.emoji-list li{padding-left:0;margin:.45em 0}
.faq-body ul.emoji-list li::before{display:none}
/* --- stile cartoon FAQ: intestazioni a sticker, accordion giocosi, social a pillola --- */
.faq-group > h2{
  background:color-mix(in srgb,var(--fgc) 12%,#fff);
  border:2px solid color-mix(in srgb,var(--fgc) 30%,transparent);
  border-left:7px solid var(--fgc);
  border-bottom:2px solid color-mix(in srgb,var(--fgc) 30%,transparent);
  border-radius:14px;padding:.45em .7em}
details.faq{transition:box-shadow .2s ease, transform .2s ease}
details.faq:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
details.faq summary::after{
  content:"+";flex:none;width:1.5em;height:1.5em;border-radius:50%;
  background:color-mix(in srgb,var(--fgc) 14%,#fff);color:var(--fgc);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;
  transition:transform .2s ease,background .2s ease}
details.faq[open] summary::after{background:var(--fgc);color:#fff}
/* social a pillola dentro una risposta (logo + nome) */
.faq-social{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 2px}
.faq-social a{display:inline-flex;align-items:center;gap:.5em;background:var(--card);
  border:2px solid var(--line);border-radius:999px;padding:.55em .9em;min-height:44px;font-weight:700;
  font-size:.95rem;color:var(--ink);transition:transform .16s ease,border-color .16s ease,color .16s ease}
.faq-social a:hover{border-color:var(--brand);color:var(--brand-dark);transform:translateY(-2px) rotate(-1.5deg);text-decoration:none}
.faq-social img{width:22px;height:22px;border-radius:6px;flex:none}

/* ---------- Info box / generic ---------- */
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.box h3{margin-top:0}
.iban{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;background:var(--bg-warm);
  padding:.15em .5em;border-radius:7px;display:inline-block;
  max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.feature-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.feature-list li{display:flex;gap:.6em;align-items:flex-start}

/* ---------- Strip / CTA banner ---------- */
.strip{background:var(--accent);color:#fff}
.strip h2{color:#fff}
.strip a.btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.strip a.btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff}

/* ---------- Footer ---------- */
.site-footer{background:#2B211C;color:#E9DCCB;padding:60px 0 26px;margin-top:40px;position:relative}
/* bordo superiore a onde morbide (effetto "copertina") */
.site-footer::before{content:"";position:absolute;top:-22px;left:0;right:0;height:24px;
  background:radial-gradient(circle at 22px 24px, #2B211C 22px, transparent 23px) repeat-x;
  background-size:44px 24px}
.site-footer a{color:#F0C9A6}
.foot-grid{display:grid;grid-template-columns:1.2fr .85fr 1fr;gap:48px;align-items:start}
.foot-nav a{color:#E9DCCB;display:inline-flex;align-items:center;gap:.4em}
.foot-nav a:hover{color:#F0C9A6}
.site-footer h4{color:#fff;font-size:1.15rem}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
/* social con icona dinamica + nickname */
.foot-social{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
.foot-social a{display:flex;align-items:center;gap:14px;color:#E9DCCB}
.foot-social a:hover{text-decoration:none}
.foot-social img{width:44px;height:44px;display:block;border-radius:13px;transition:transform .2s ease}
.foot-social a:hover img{transform:translateY(-3px) scale(1.1) rotate(-3deg)}
.foot-social .fs-net{display:block;font-size:.82rem;color:#B6A693;line-height:1.2}
.foot-social .fs-name{display:block;font-size:1.02rem;font-weight:800;color:#fff;line-height:1.2}
.foot-social a:hover .fs-name{color:#F0C9A6}
/* riga inferiore con crediti + loghi */
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:40px;padding-top:22px;
  font-size:.9rem;color:#C9BBA9;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px}
.foot-credits{display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.4}
.foot-credits .fc-logo{height:30px;width:auto;display:inline-block;vertical-align:middle}
.foot-credits .fc-chip{background:#fff;border-radius:8px;padding:4px 7px;display:inline-flex;align-items:center}
.foot-credits .fc-chip img{height:22px;width:auto;display:block}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;gap:32px}.foot-bottom{justify-content:flex-start}}

/* ---------- Map ---------- */
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map-wrap iframe{display:block;width:100%;height:clamp(260px,55vw,380px);border:0}
/* facciata "clicca per caricare" (privacy: nessuna chiamata a Google al caricamento) */
.map-load{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:300px;border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#E7EEDC,#F8ECD6);transition:filter .2s ease}
.map-load:hover{filter:brightness(.98)}
.map-load .map-pin{font-size:2.6rem;animation:floatY 4s ease-in-out infinite}
.map-load .map-load-t{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;color:var(--brand)}
.map-load:hover .map-load-t{text-decoration:underline}
.map-load .map-load-s{font-size:.85rem;color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){.map-load .map-pin{animation:none}}

/* ---------- Gallery (adottati) ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery .ph{aspect-ratio:1/1;border-radius:16px}

/* ---------- Galleria adottati (foto cuccia + frase) ---------- */
.adopted-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.adopted{display:flex;flex-direction:column;gap:14px}
.adopted-photos{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:end}
.adopted-photos img{width:100%;height:auto;display:block}
.adopted-quote{font-family:"Fredoka",sans-serif;font-weight:600;text-align:center;
  font-size:1.04rem;line-height:1.45;color:#fff;border-radius:20px;padding:18px 22px;margin:0;
  border:4px solid rgba(255,255,255,.55);box-shadow:var(--shadow-sm)}
.adopted-quote.q0{background:#C75B39}
.adopted-quote.q1{background:#6E8B3D}
.adopted-quote.q2{background:#B0413A}
.adopted-quote.q3{background:#3E6FA3}
.adopted-quote.q4{background:#8A5AA3}
.adopted-quote.q5{background:#CC9A33}
/* cartellini leggermente inclinati a turno, come foto attaccate in bacheca;
   al passaggio del mouse si "raddrizzano" */
.adopted-quote{transition:transform .25s ease}
.adopted:nth-child(2n) .adopted-quote{transform:rotate(1deg)}
.adopted:nth-child(2n+1) .adopted-quote{transform:rotate(-1deg)}
.adopted:hover .adopted-quote{transform:rotate(0)}

/* ---------- Sostenitori / partner ---------- */
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;margin-top:26px}
.partner{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.partner img{max-width:100%;height:88px;width:auto;object-fit:contain}
@media(max-width:700px){.partners{grid-template-columns:repeat(2,1fr)}}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;padding:54px 0}
  .hero-art,.hero-media{order:-1}
  .dog-detail{grid-template-columns:1fr}
  .dog-detail .ph,.dog-media{position:static}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .nav-links{
    position:fixed;inset:72px 0 auto 0;background:var(--bg);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 20px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    max-height:calc(100dvh - 72px);overflow-y:auto;
    display:none;
  }
  .nav-links.open{display:flex}
  /* quando il menu è aperto, blocca lo scroll della pagina dietro */
  body.menu-open{overflow:hidden}
  .nav-links a{padding:.8em .4em;min-height:44px;display:flex;align-items:center;border-radius:8px}
  .nav-links a.active::after{display:none}
  .has-sub .submenu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:3px solid var(--line);border-radius:0;margin:2px 0 6px 10px}
  .hamburger{display:block}
}
@media(max-width:560px){
  body{font-size:16px}
  .brand img{height:46px}
  .section{padding:52px 0}
  .grid-3,.grid-4,.grid-2,.spec,.compat-grid,.adopted-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .nav-cta .label{display:none}
}

/* =========================================================
   KIT CARTOON-CANINO — stile giocoso, caldo, canino
   Intensità "equilibrata": decorazioni piene sulle pagine .fun,
   tono più sobrio sulle pagine .sober (privacy, info, moduli).
   ========================================================= */
:root{
  /* zampetta (4 dita inclinate + cuscinotto): puntini degli elenchi */
  --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%237A0000'%3E%3Cellipse cx='21' cy='48' rx='8' ry='11.5' transform='rotate(-26 21 48)'/%3E%3Cellipse cx='40' cy='32' rx='8.5' ry='12.5' transform='rotate(-9 40 32)'/%3E%3Cellipse cx='60' cy='32' rx='8.5' ry='12.5' transform='rotate(9 60 32)'/%3E%3Cellipse cx='79' cy='48' rx='8' ry='11.5' transform='rotate(26 79 48)'/%3E%3Cpath d='M50 55 C65 55 79 65 79 79 C79 90 67 95 56 90.5 C53 89.2 47 89.2 44 90.5 C33 95 21 90 21 79 C21 65 35 55 50 55 Z'/%3E%3C/g%3E%3C/svg%3E");
  /* doodle zampa e osso (color caldo tenue) per gli angoli degli hero */
  --doodle-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23E0A86B'%3E%3Cellipse cx='21' cy='48' rx='8' ry='11.5' transform='rotate(-26 21 48)'/%3E%3Cellipse cx='40' cy='32' rx='8.5' ry='12.5' transform='rotate(-9 40 32)'/%3E%3Cellipse cx='60' cy='32' rx='8.5' ry='12.5' transform='rotate(9 60 32)'/%3E%3Cellipse cx='79' cy='48' rx='8' ry='11.5' transform='rotate(26 79 48)'/%3E%3Cpath d='M50 55 C65 55 79 65 79 79 C79 90 67 95 56 90.5 C53 89.2 47 89.2 44 90.5 C33 95 21 90 21 79 C21 65 35 55 50 55 Z'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-bone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cg fill='%23E0A86B'%3E%3Ccircle cx='20' cy='22' r='15'/%3E%3Ccircle cx='20' cy='38' r='15'/%3E%3Ccircle cx='80' cy='22' r='15'/%3E%3Ccircle cx='80' cy='38' r='15'/%3E%3Crect x='18' y='20' width='64' height='20' rx='6'/%3E%3C/g%3E%3C/svg%3E");
  /* sottolineatura "disegnata a mano" (oro) */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M3 9 C 33 2 53 12 83 7 S 145 2 197 8' fill='none' stroke='%23E6A94E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- doodle leggeri (zampa/osso) negli angoli degli hero, solo pagine fun --- */
.fun .hero, .fun .phero{position:relative;overflow:hidden}
.fun .hero::after, .fun .phero::after{
  content:""; position:absolute; pointer-events:none; opacity:.16; z-index:0;
  width:74px; height:74px; right:5%; bottom:16%;
  background:var(--doodle-paw) center/contain no-repeat;
  animation:floatY 7s ease-in-out infinite;
}
.fun .hero::before{
  content:""; position:absolute; pointer-events:none; opacity:.14; z-index:0;
  width:96px; height:58px; left:4%; top:14%;
  background:var(--doodle-bone) center/contain no-repeat;
  transform:rotate(-12deg); animation:floatY 8s ease-in-out infinite .6s;
}
.hero-inner,.phero-inner{position:relative;z-index:1}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(6deg)}}
@media(max-width:560px){.fun .hero::after,.fun .hero::before,.fun .phero::after{display:none}}
@media(prefers-reduced-motion:reduce){.fun .hero::after,.fun .hero::before,.fun .phero::after{animation:none}}

/* --- orme al posto dei puntini negli elenchi di testo --- */
.faq-body ul, .dog-detail-page .block ul, .box ul:not(.feature-list){
  list-style:none; padding-left:1.7em; margin:.5em 0;
}
.faq-body ul li, .dog-detail-page .block ul li, .box ul:not(.feature-list) li{
  position:relative; margin:.35em 0;
}
.faq-body ul li::before, .dog-detail-page .block ul li::before,
.box ul:not(.feature-list) li::before{
  content:""; position:absolute; left:-1.65em; top:.34em;
  width:1em; height:1em; background:var(--paw) center/contain no-repeat;
  transform:rotate(-12deg); opacity:.78;
}

/* --- sottolineatura giocosa sotto i titoli principali (solo fun) --- */
.fun .hero h1::after, .fun .phero-text h1::after, .fun .section-head h1::after{
  content:""; display:block; height:13px; margin-top:.16em; width:min(220px,55%);
  background:var(--squiggle) left center/auto 100% no-repeat;
}
.fun .section-head.center h1::after{margin-left:auto;margin-right:auto}
@media(max-width:860px){.fun .phero-text h1::after{margin-left:auto;margin-right:auto}}

/* --- foto "adesivo/polaroid" per gli adottati --- */
.adopted-photos{align-items:center}
.adopted-photos img{
  border:5px solid #fff; border-radius:14px; transition:transform .25s ease;
  box-shadow:0 8px 18px -9px rgba(70,40,20,.5);
}
.adopted-photos img:first-child{transform:rotate(-2deg)}
.adopted-photos img:last-child{transform:rotate(2deg)}
.adopted:hover .adopted-photos img:first-child{transform:rotate(-1deg) scale(1.03)}
.adopted:hover .adopted-photos img:last-child{transform:rotate(1deg) scale(1.03)}

/* --- scheda cane: chip "etichetta" col colore del cane --- */
.dog-detail-page .spec .item{border-left:5px solid var(--cardc)}
.dog-detail-page .compat-grid .c{border-left:5px solid var(--cardc)}

/* --- callout a fumetto (il cane che "parla") --- */
.callout.bubble{position:relative}
.callout.bubble::after{
  content:""; position:absolute; left:46px; bottom:-15px; width:0; height:0;
  border:11px solid transparent; border-top:17px solid #FBEAD9; border-bottom:0;
}

/* --- "Come aiutarci": riquadri adesivo colorati --- */
.sticker-grid .box{border-top:6px solid var(--brand);transition:transform .2s ease, box-shadow .25s ease}
.sticker-grid .box:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--shadow)}
.sticker-grid .box:nth-child(6n+1){border-top-color:#C0392B}
.sticker-grid .box:nth-child(6n+2){border-top-color:#6E8B3D}
.sticker-grid .box:nth-child(6n+3){border-top-color:#3E7CB1}
.sticker-grid .box:nth-child(6n+4){border-top-color:#E08A2B}
.sticker-grid .box:nth-child(6n+5){border-top-color:#8A5AA3}
.sticker-grid .box:nth-child(6n+6){border-top-color:#2BA39A}

/* --- bottoni più "elastici" (rimbalzo + scodinzolìo) --- */
.btn:active{transform:translateY(1px) scale(.96)}
.btn-primary:hover, .btn-wa:hover{animation:wag .5s ease}
@keyframes wag{0%,100%{rotate:0deg}25%{rotate:-2.5deg}75%{rotate:2.5deg}}
@media(prefers-reduced-motion:reduce){
  .btn-primary:hover,.btn-wa:hover{animation:none}
  .adopted-photos img,.adopted-photos img:first-child,.adopted-photos img:last-child{transform:none}
}

/* --- sfondi a tema nelle pagine dei servizi (decorativi, dietro al testo) --- */
.svc-section{position:relative;overflow:hidden}
.svc-section > .container{position:relative;z-index:1}
.svc-doodles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.svc-doodles span{
  position:absolute; opacity:.16; line-height:1; user-select:none;
  animation:bob 9s ease-in-out infinite;
}
.svc-doodles span:nth-child(2n){animation-duration:11s;animation-delay:-2.5s}
.svc-doodles span:nth-child(3n){animation-duration:13s;animation-delay:-5s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media(prefers-reduced-motion:reduce){.svc-doodles span{animation:none}}

/* --- mascotte abbinata al box, A SINISTRA del testo corrispondente, con animazione
   COERENTE con ciò che rappresenta: il telefono "squilla", l'orologio "dondola". --- */
/* mascotte accanto al TITOLO del box (in alto), contenuto a tutta larghezza sotto.
   Stessa animazione per entrambe (dondolano in sincrono). */
.box-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.box-head h3{margin:0}
.box-mascotte{flex:none;width:66px;height:auto;transform-origin:50% 90%;
  filter:drop-shadow(0 6px 12px rgba(90,40,0,.18));animation:masc-sway 3.6s ease-in-out infinite}
@keyframes masc-sway{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@media(max-width:560px){.box-mascotte{width:56px}}
@media(prefers-reduced-motion:reduce){.box-mascotte{animation:none}}

/* note discrete dentro i box: consiglio (oro) / avviso (rosso) */
.box .note{font-size:.95rem;color:var(--ink-soft);background:var(--bg);
  border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:10px 14px;margin:14px 0}
.box .note-warn{border-left-color:#C0392B}
.box .note strong{color:var(--ink)}
.contact-lines{line-height:1.9}

/* orari: giorno a sinistra, orario a destra (ben distribuiti) */
.hours-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.hours-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.hours-list .hl-day{font-weight:800;white-space:nowrap}
/* telefoni stretti: giorno e orario su due righe, niente schiacciamenti */
@media(max-width:400px){.hours-list li{flex-direction:column;align-items:flex-start;gap:2px}}
.hours-list .hl-time{font-weight:800;color:var(--brand-dark);font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
@media(max-width:560px){.hours-list li{padding:9px 12px}
  .hours-list .hl-day,.hours-list .hl-time{font-size:.95rem}}

/* --- box Contatti "a tema": ognuno il suo colore (stile cartoon coerente col sito) --- */
.contact-box{border-top:6px solid var(--c,#C0392B);position:relative;
  transition:transform .2s ease, box-shadow .25s ease}
.contact-box:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.contact-box .box-head h3{color:var(--c,#C0392B)}
/* dischetto colorato morbido dietro la mascotte (come se ci fosse seduta sopra) */
.contact-box .box-mascotte{border-radius:50%;
  background:radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--c) 22%, transparent), transparent 68%)}
.contact-box .hours-list .hl-time{color:var(--c)}
.contact-box .note{border-left-color:var(--c)}
.contact-box .note-warn{border-left-color:#C0392B}
/* colori ufficiali delle reti sulle schede social (uguali su TUTTO il sito):
   bordo + nickname colorati, e al passaggio del mouse la scheda si "accende". */
.social-card.s-ig{--net:#DD2A7B}   /* Instagram */
.social-card.s-fb{--net:#1877F2}   /* Facebook */
.social-card.s-tt{--net:#111}      /* TikTok */
.social-card{border-left:4px solid var(--net,#999)}
.social-card .sc-name{color:var(--net,inherit)}
.social-card:hover{border-color:transparent;color:#fff;background:var(--net,#333)}
.social-card.s-ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.social-card:hover .sc-net{color:rgba(255,255,255,.85)}
.social-card:hover .sc-name{color:#fff}
/* bottoni social (per i CTA singoli "Seguici su…"), stessi colori delle schede */
.btn-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);color:#fff;box-shadow:var(--shadow-sm)}
.btn-ig:hover{filter:brightness(1.06);color:#fff}
.btn-fb{background:#1877F2;color:#fff;box-shadow:var(--shadow-sm)}
.btn-fb:hover{background:#0f63d6;color:#fff}

/* --- Social "ricchi" (logo animato + nome social + nickname), anche su Contatti --- */
.social-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.social-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .2s ease}
.social-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.social-card img{width:46px;height:46px;border-radius:13px;flex:none;transition:transform .2s ease}
.social-card:hover img{transform:translateY(-2px) scale(1.1) rotate(-4deg)}
.social-card .sc-net{display:block;font-size:.8rem;color:var(--ink-soft);font-weight:700;line-height:1.2}
.social-card .sc-name{display:block;font-size:1rem;font-weight:800;color:var(--brand-dark);line-height:1.25}
@media(max-width:760px){.social-list{grid-template-columns:1fr}}

/* --- lightbox foto cani: clic sulla foto principale → ingrandimento a tutto schermo --- */
.dog-photo-main{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(43,33,28,.92);
  display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:95vw;max-height:92vh;width:auto;height:auto;
  border-radius:18px;border:5px solid #fff;box-shadow:var(--shadow)}
.lightbox .lb-close{position:fixed;top:18px;right:22px;font-size:2.2rem;line-height:1;
  color:#fff;font-family:"Fredoka",sans-serif;background:none;border:0;cursor:pointer}
body.lb-open{overflow:hidden}

/* ---------- "Conosci anche…" : carosello di TUTTI gli altri cani che scorre da solo ---------- */
.related-dogs{padding-bottom:56px}
.related-title{font-size:1.8rem;color:var(--brand);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
/* carosello scorrevole: scorre da solo (JS) ed è anche trascinabile/swipe + frecce */
.related-wrap{position:relative}
.related-scroller{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.related-scroller::-webkit-scrollbar{display:none}
.related-track{display:flex;gap:18px;width:max-content;padding:14px 16px}
.related-arrow{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--brand);
  font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .15s ease, background .2s ease, color .2s ease}
.related-arrow:hover{background:var(--brand);color:#fff;transform:translateY(-50%) scale(1.08)}
.rel-prev{left:4px}.rel-next{right:4px}
/* su telefono le frecce restano (più piccole): fanno capire che si può scorrere */
@media(max-width:560px){.related-arrow{width:34px;height:34px;font-size:1.2rem}.rel-prev{left:2px}.rel-next{right:2px}}
/* mini-card coerente con le card grandi: foto quadrata + fascia colorata col nome bianco */
.mini-dog{flex:0 0 auto;width:182px;text-decoration:none;color:inherit;background:#fff;
  border:3px solid var(--cardc,#C0392B);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .18s ease}
.mini-dog:hover{transform:translateY(-5px) rotate(-1.5deg);text-decoration:none}
.mini-dog-photo{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--bg-warm)}
.mini-dog-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .3s ease}
.mini-dog:hover .mini-dog-photo img{transform:scale(1.07)}
.mini-dog-photo .dog-sex{top:8px;right:8px;width:26px;height:26px;font-size:.9rem}
.mini-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.4rem;opacity:.5}
.mini-dog-name{display:block;text-align:center;font-family:"Fredoka",sans-serif;font-weight:700;
  font-size:1.2rem;color:#fff;background:var(--cardc,#C0392B);padding:9px 8px 11px}

/* ---------- Pulsante "torna su" (tondo, cartoon, compare con lo scroll) ---------- */
.to-top{position:fixed;left:20px;bottom:20px;z-index:60;width:52px;height:52px;border-radius:50%;
  border:0;cursor:pointer;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.22s ease}
.to-top svg{width:24px;height:24px}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand-dark);transform:translateY(-3px) scale(1.08)}

/* ===== Assistente "Baula" (chatbot statico, beta) ===== */
.ccb-launcher{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:60;width:64px;height:64px;border-radius:50%;
  border:3px solid var(--brand);background:var(--card);box-shadow:var(--shadow);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.ccb-launcher img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.ccb-launcher:hover{transform:translateY(-3px) scale(1.06) rotate(-4deg)}
.ccb-launcher .ccb-tag{position:absolute;right:-3px;bottom:-3px;width:25px;height:25px;border-radius:50%;
  background:var(--gold);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1}
.ccb-launcher .ccb-beta{position:absolute;top:-9px;left:-9px;background:var(--brand);color:#fff;
  font-family:"Fredoka",sans-serif;font-weight:600;font-size:.6rem;padding:1px 6px;border-radius:999px;letter-spacing:.05em;text-transform:uppercase}
.ccb-launcher.is-open{display:none}
@keyframes ccbPulse{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--brand) 16%,transparent)}}
.ccb-launcher{animation:ccbPulse 2.6s ease-in-out 2}

.ccb-panel{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:61;width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 40px));background:var(--bg);border:2px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;animation:ccbIn .22s ease}
.ccb-panel[hidden]{display:none}
@keyframes ccbIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.ccb-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--brand);color:#fff}
.ccb-head .ccb-ava{width:38px;height:38px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:#fff}
.ccb-id{display:flex;flex-direction:column;line-height:1.1;flex:1}
.ccb-id strong{font-family:"Fredoka",sans-serif;font-size:1.12rem}
.ccb-beta-inline{font-size:.72rem;opacity:.85}
.ccb-close{background:rgba(255,255,255,.18);border:0;color:#fff;width:30px;height:30px;border-radius:50%;font-size:1.35rem;line-height:1;cursor:pointer}
.ccb-close:hover{background:rgba(255,255,255,.32)}
.ccb-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ccb-msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:.95rem;line-height:1.5}
.ccb-msg.bot{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;color:var(--ink)}
.ccb-msg.me{background:var(--brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.ccb-msg a{color:var(--brand-dark);font-weight:700}
.ccb-msg.me a{color:#fff}
.ccb-msg .ccb-mini{opacity:.6}
.ccb-act{display:inline-flex;align-items:center;gap:.4em;margin:7px 6px 0 0;padding:.4em .8em;border-radius:999px;
  background:var(--bg-warm);border:1px solid var(--line);font-weight:700;font-size:.85rem;color:var(--ink)}
.ccb-act:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none}
.ccb-act.wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.ccb-act.wa:hover{background:var(--wa-dark);color:#fff}
.ccb-msg .ccb-q{font-weight:800;color:var(--brand);margin-bottom:6px;line-height:1.3}
.ccb-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ccb-actions .ccb-act{margin:0}
.ccb-chips{display:flex;gap:8px;overflow-x:auto;padding:0 12px 8px}
.ccb-chips button{flex:none;background:var(--card);border:2px solid var(--line);border-radius:999px;
  padding:.4em .8em;font-weight:700;font-size:.82rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.ccb-chips button:hover{border-color:var(--brand);color:var(--brand-dark)}
.ccb-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
.ccb-input{flex:1;border:2px solid var(--line);border-radius:999px;padding:.6em 1em;font:inherit;font-size:.95rem;min-width:0}
.ccb-input:focus{outline:none;border-color:var(--brand)}
.ccb-send{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:1.05rem;cursor:pointer}
.ccb-send:hover{background:var(--brand-dark)}
@media(max-width:560px){.ccb-panel{right:8px;bottom:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:18px}}
@media(prefers-reduced-motion:reduce){.ccb-launcher{animation:none}.ccb-panel{animation:none}.ccb-launcher:hover{transform:none}}

/* ---------- Card evento (Home) ---------- */
.event-card{max-width:640px;margin:6px auto 0;text-align:center;background:#fff;
  border:3px solid var(--gold);border-radius:24px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.event-card h3{color:var(--brand);font-size:1.6rem;margin:.2em 0 .1em}
.event-locandina{width:100%;max-width:520px;height:auto;border-radius:16px;margin:0 auto 14px;
  border:4px solid #fff;box-shadow:var(--shadow-sm)}

/* ---------- Condivisione scheda cane (passaparola adozioni) ---------- */
.share-box{margin-top:22px;background:linear-gradient(135deg,#FFF7EE,#FBEAD9);
  border:1px solid var(--line);border-radius:18px;padding:16px 20px}
.share-label{display:block;font-weight:800;color:var(--ink);margin-bottom:10px}
.share-btns{display:flex;flex-wrap:wrap;gap:10px}
.share-btn{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:999px;
  font-weight:800;font-size:.95rem;cursor:pointer;border:0;color:#fff;text-decoration:none;
  transition:transform .15s ease, filter .2s ease}
.share-btn:hover{transform:translateY(-2px) scale(1.03);text-decoration:none;color:#fff}
.share-btn img{width:1.3em;height:1.3em;border-radius:5px;background:#fff;padding:1px}
.sh-wa{background:var(--wa)} .sh-wa:hover{background:var(--wa-dark)}
.sh-fb{background:#1877F2} .sh-fb:hover{filter:brightness(.93)}
.sh-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} .sh-ig:hover{filter:brightness(1.05)}
.share-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);z-index:120;
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.95rem;
  box-shadow:var(--shadow);opacity:0;transition:.3s ease;max-width:90vw;text-align:center}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Accessibilità: focus VISIBILE per chi naviga da tastiera ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .dog-card:focus-visible, .serv-card:focus-visible,
.mini-dog:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:8px;
}

/* ---------- Come aiutarci: IBAN con tasto copia ---------- */
.iban-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0}
.copy-btn{display:inline-flex;align-items:center;gap:.4em;cursor:pointer;
  border:2px solid var(--brand);background:#fff;color:var(--brand-dark);
  font-weight:800;font-size:.9rem;padding:.45em 1em;border-radius:999px;
  transition:transform .15s ease, background .2s ease}
.copy-btn:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}

/* ---------- Come aiutarci: box "Dona materiali" ---------- */
.materiali-box .need-now{background:#FFF3E0;border:2px dashed var(--gold);
  border-radius:14px;padding:12px 16px;margin:10px 0 4px;color:var(--ink)}
.materiali-box h4{color:var(--brand-dark);margin-top:0}
@media(max-width:560px){.materiali-box .grid-2{grid-template-columns:1fr}}

/* ---------- Come aiutarci: sostenitori — CARD colorata col logo scontornato su macchia animata ---------- */
.partners-3{grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.partner-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  background:#fff;border:3px solid var(--pc,#C0392B);border-radius:34px 18px 34px 18px;
  box-shadow:var(--shadow-sm);padding:22px 22px 26px;
  transition:transform .2s ease, box-shadow .25s ease}
.partner-card:nth-child(2){border-radius:18px 34px 18px 34px}
.partner-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow)}
.partner-logo{position:relative;width:172px;height:172px;max-width:62vw;
  display:flex;align-items:center;justify-content:center}
.partner-logo::before{content:"";position:absolute;inset:4%;z-index:0;background:var(--pc,#C0392B);opacity:.24;
  border-radius:42% 58% 63% 37% / 45% 38% 62% 55%;animation:blobby 9s ease-in-out infinite}
.partner-logo img{position:relative;z-index:1;max-width:80%;max-height:80%;width:auto;height:auto;
  transition:transform .25s ease;filter:drop-shadow(0 8px 16px rgba(90,40,0,.18))}
.partner-card:hover .partner-logo img{transform:scale(1.05) rotate(-1.5deg)}
.pc-wolf{--pc:#2BA39A}
.pc-lav{--pc:#E08A2B}
.pc-leo{--pc:#3E7CB1}
.pc-lav .partner-logo::before{animation-delay:-3s}
.pc-leo .partner-logo::before{animation-delay:-6s}
.partner-desc{margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
@media(max-width:760px){.partners-3{grid-template-columns:1fr;gap:24px}}
@media(prefers-reduced-motion:reduce){.partner-logo::before{animation:none}}

/* titoli dei box "Come aiutarci" colorati come il loro bordo superiore */
.sticker-grid .box:nth-child(6n+1) h3{color:#C0392B}
.sticker-grid .box:nth-child(6n+2) h3{color:#6E8B3D}
.sticker-grid .box:nth-child(6n+3) h3{color:#3E7CB1}
.sticker-grid .box:nth-child(6n+4) h3{color:#E08A2B}
.sticker-grid .box:nth-child(6n+5) h3{color:#8A5AA3}
.sticker-grid .box:nth-child(6n+6) h3{color:#2BA39A}

/* "Dona materiali": stesso look colorato dei box (verde-acqua, tema "fresco/piscina") */
.materiali-box{border-top:6px solid #2BA39A}
.materiali-box > h3{color:#2BA39A}

/* mascotte che "indica" il pulsante nel callout "Vuoi dare una mano?" */
.help-callout{position:relative;overflow:hidden}
.help-callout > *:not(.callout-mascotte){position:relative;z-index:2}
.callout-mascotte{position:absolute;right:26px;bottom:-8px;width:120px;height:auto;z-index:1;
  transform-origin:50% 90%;animation:masc-sway 3.6s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(90,40,0,.16));pointer-events:none}
@media(max-width:820px){.callout-mascotte{display:none}}
/* mascotte nel riquadro questionario della scheda cane: in basso a destra, punta verso il pulsante.
   Spazio riservato a destra così non si accavalla al testo. */
.quest-callout{padding-right:128px}
.quest-callout .callout-mascotte{width:108px;right:12px;bottom:12px;top:auto}
@media(max-width:820px){.quest-callout{padding-right:28px}}
@media(prefers-reduced-motion:reduce){.callout-mascotte{animation:none}}

/* angoli giocosi asimmetrici sui box "Come aiutarci" (coerenti con le card dei cani) */
.sticker-grid .box:nth-child(2n+1){border-radius:28px 16px 26px 16px}
.sticker-grid .box:nth-child(2n){border-radius:16px 28px 16px 26px}
.materiali-box{border-radius:26px 18px 26px 18px}

/* box "Servizio Civile" cliccabile: pulsante "Scopri" in fondo */
.sticker-grid .box.card-link{display:flex;flex-direction:column}
.card-link .cta-go{align-self:flex-start;margin-top:14px}
.card-link:hover .cta-go{background:var(--brand-dark)}

/* ---------- Pagina Servizio Civile: tema blu istituzionale, coerente e giocoso ---------- */
.sc-page h2{color:#3E6FA3}
.sc-page .spec .item{border-left:5px solid #3E6FA3}
.sc-page .spec .item .v{color:#3E6FA3}

/* ---------- Accessibilità: riduci movimento (globale) ----------
   Per chi ha attivato "riduci movimento" sul dispositivo: ferma TUTTE le
   animazioni e transizioni (anche i piccoli spostamenti su hover).
   Per tutti gli altri il sito resta giocoso e animato come sempre. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Pagine servizi: il COLORE del servizio in evidenza ----------
   Ogni servizio ha il suo colore (toelettatura azzurro, pensione rosso,
   asilo verde, consulenze viola): qui colora titoli, box, bottoni e callout
   della sua pagina — giocoso e coerente con le card colorate dei cani. */
.svc-page .box{border-top:6px solid var(--svc);transition:transform .2s ease, box-shadow .25s ease}
.svc-page .grid .box:nth-child(2n+1){border-radius:22px 8px 22px 8px}
.svc-page .grid .box:nth-child(2n){border-radius:8px 22px 8px 22px}
.svc-page .box:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--shadow)}
.svc-page .box h3{color:var(--svc)}
.svc-page .btn-primary{background:var(--svc)}
.svc-page .btn-primary:hover{background:color-mix(in srgb, var(--svc) 80%, #1C0D00)}
.svc-page .callout{border:3px solid color-mix(in srgb, var(--svc) 35%, #fff);border-top:6px solid var(--svc)}
.svc-page .callout h3{color:var(--svc)}

/* hub Servizi: freccia colorata sulle card, "scodinzola" al passaggio */
.serv-card .serv-go{display:inline-block;margin-top:10px;font-weight:800;color:var(--servc);
  transition:transform .18s ease}
.serv-card:hover .serv-go{transform:translateX(6px) rotate(-2deg)}