/* DoDo Animazione — foglio di stile del sito statico
   Convertito dal progetto Claude Design "DoDo" (.dc.html).
   Palette e misure identiche all'originale; i breakpoint che nel design
   erano calcolati in JS (vw < 900 / 1024 / 640) qui sono media query,
   così il layout è corretto già al primo paint. */

:root {
  --cream: #FFF8F0;
  --ink: #3D3D3D;
  --green: #74BDA3;
  --coral: #EA6748;
  --yellow: #F4B147;
  --sky: #8FD3F4;
  --sand: #F1E7DA;
  --tf: 'Anton', system-ui, sans-serif;   /* titoli */
  --tw: 400;
  --bf: 'Poppins', system-ui, sans-serif; /* testo */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--bf);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--coral); }
::selection { background: var(--yellow); color: var(--ink); }

h1, h2, h3 { margin: 0; }
.tf { font-family: var(--tf); font-weight: var(--tw); }

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- animazioni ---------- */
@keyframes dodoConf   { 0% { transform: translateY(-10%) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(340px) rotate(320deg); opacity: 0; } }
@keyframes dodoPulse  { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes dodoTrail  { 0% { transform: translate(0,0) scale(1); opacity: .9; } 100% { transform: translate(var(--dx,0), var(--dy,26px)) scale(.3); opacity: 0; } }
@keyframes dodoRise   { 0% { transform: translate(-50%,0) scale(.5) rotate(-6deg); opacity: 0; } 14% { opacity: 1; } 100% { transform: translate(-50%,-260px) scale(1) rotate(6deg); opacity: 0; } }
@keyframes dodoWaRing { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(1.85); opacity: 0; } }
@keyframes dodoWaWiggle { 0%,86%,100% { transform: rotate(0deg); } 89% { transform: rotate(-14deg); } 92% { transform: rotate(14deg); } 95% { transform: rotate(-9deg); } 98% { transform: rotate(5deg); } }
@keyframes dodoWaBob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- impalcatura ---------- */
.layout { display: flex; min-width: 0; min-height: 100vh; background: var(--cream); }
.main { flex: 1; min-width: 0; }

.scroll-x::-webkit-scrollbar { height: 8px; }
.scroll-x::-webkit-scrollbar-thumb { background: rgba(61,61,61,.18); border-radius: 999px; }

/* ---------- sidebar (desktop) ---------- */
.sidebar {
  display: flex; flex-direction: column; gap: 14px;
  width: 264px; flex: 0 0 264px;
  position: sticky; top: 0; height: 100vh;
  padding: 26px 20px;
  border-right: 1px solid rgba(61,61,61,.08);
  background: var(--cream); overflow-y: auto;
}
.sidebar__logo { width: 100%; height: auto; margin-bottom: 6px; }

.navcard {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 82px; padding: 14px 16px; border-radius: 18px;
  text-decoration: none; flex: 1;
  transition: transform .18s ease, box-shadow .18s ease;
}
.navcard:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(61,61,61,.12); }
.navcard__top { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; opacity: .9; }
.navcard__label { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.navcard--home { min-height: 88px; }

/* colori voci di menu */
.nav-home     { background: #fff;        color: var(--ink); border: 1px solid rgba(61,61,61,.15); }
.nav-temi     { background: var(--green);  color: #fff; border: none; }
.nav-servizi  { background: var(--yellow); color: #fff; border: none; }
.nav-zone     { background: var(--coral);  color: #fff; border: none; }
.nav-faq      { background: var(--sky);    color: #fff; border: none; }
.nav-contatti { background: var(--ink);    color: #fff; border: none; }
.navcard.is-active { border: 2px solid var(--ink); }
.nav-contatti.is-active { border: 2px solid #fff; }

.btn-wa-side {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: #fff; font-weight: 700;
  padding: 15px; border-radius: 16px; margin-top: 2px;
}
.btn-wa-side:hover { background: var(--green); color: #fff; }

.social-row { display: flex; gap: 10px; margin-top: 2px; }
.social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: #fff; color: var(--ink); border: 1px solid rgba(61,61,61,.1);
}
.social-btn--ig:hover { background: var(--coral); color: #fff; }
.social-btn--fb:hover { background: var(--sky); color: #fff; }

/* ---------- topbar + drawer (mobile) ---------- */
.topbar {
  display: none; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 120; padding: 12px 18px;
  background: rgba(255,248,240,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(61,61,61,.08);
}
.topbar img { height: 44px; width: auto; }
.burger {
  display: flex; flex-direction: column; gap: 5px; padding: 12px;
  border: none; background: var(--ink); border-radius: 12px; cursor: pointer;
}
.burger span { width: 22px; height: 2.5px; background: #fff; border-radius: 2px; }

.drawer { position: fixed; inset: 0; z-index: 300; background: rgba(61,61,61,.45); backdrop-filter: blur(3px); }
.drawer[hidden] { display: none; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 340px);
  background: var(--cream); padding: 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: -20px 0 50px rgba(61,61,61,.2); overflow-y: auto;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.drawer__head img { height: 46px; width: auto; }
.drawer__close {
  border: none; background: #fff; border-radius: 12px;
  width: 40px; height: 40px; font-size: 20px; cursor: pointer; color: var(--ink);
}
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px; border-radius: 16px; font-weight: 700; font-size: 19px;
}
.drawer__link span.num { opacity: .6; font-size: 14px; margin-right: 10px; }

@media (max-width: 899px) {
  .sidebar { display: none; }
  .topbar { display: flex; }
}

/* ---------- pulsante WhatsApp fisso ---------- */
.wa-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 250;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--green); color: #fff; font-weight: 700; font-size: 17px;
  padding: 15px 22px; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(115,189,163,.5);
  transition: transform .18s ease;
}
.wa-fab:hover { transform: translateY(-3px); color: #fff; }
.wa-fab__label { position: relative; }
@media (max-width: 899px) { .wa-fab__label { display: none; } }

.wa-fab--home { bottom: 26px; right: 26px; padding: 19px 28px; box-shadow: 0 18px 44px rgba(115,189,163,.6); animation: dodoWaBob 2.6s ease-in-out infinite; }
.wa-fab--home:hover { transform: translateY(-4px) scale(1.05); }
.wa-fab__ring { position: absolute; inset: 0; border-radius: 999px; background: var(--green); animation: dodoWaRing 2s ease-out infinite; }
.wa-fab__icon { position: relative; animation: dodoWaWiggle 3.2s ease-in-out infinite; transform-origin: center; }

/* ---------- footer ---------- */
.site-footer {
  position: relative; z-index: 2;
  background: var(--coral); color: var(--cream);
  border-radius: clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;
  overflow: hidden; margin-top: clamp(40px,5vw,80px);
}
.site-footer--home { margin-top: clamp(-64px,-4vw,-36px); }
.site-footer__inner { position: relative; padding: clamp(44px,5vw,80px) clamp(20px,4vw,72px) clamp(28px,3vw,44px); }
.site-footer__brand { text-align: center; }
.site-footer__brand img { width: clamp(88px,9vw,132px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.18)); }
.site-footer__brand h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(38px,5vw,72px); line-height: .98; letter-spacing: -.01em; margin: 16px 0 0; }
.site-footer__claim { font-style: italic; font-size: clamp(15px,1.4vw,19px); color: rgba(255,248,240,.82); margin: 8px 0 0; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: clamp(28px,3vw,52px); align-items: start; margin-top: clamp(40px,5vw,72px); }
.site-footer__h { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,248,240,.6); margin: 0 0 12px; }
.site-footer a.f-link { display: block; color: var(--cream); font-weight: 600; font-size: 15px; padding: 6px 0; opacity: .85; text-decoration: none; }
.site-footer a.f-link:hover { opacity: 1; text-decoration: underline; color: var(--cream); }
.site-footer p.f-note { font-size: 14px; color: rgba(255,248,240,.72); line-height: 1.5; margin: 10px 0 14px; max-width: 26ch; }
.f-social { display: flex; gap: 16px; flex-wrap: wrap; }
.f-social a { display: inline-flex; align-items: center; gap: 6px; color: var(--cream); font-weight: 600; font-size: 15px; padding: 6px 0; opacity: .85; }
.f-social a:hover { opacity: 1; color: var(--cream); }
.f-cta-col { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.f-btn-wa { width: 100%; max-width: 280px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--cream); color: var(--coral); font-weight: 700; padding: 16px 24px; border-radius: 999px; font-size: 15px; }
.f-btn-wa:hover { background: var(--yellow); color: #fff; }
.f-btn-ghost { width: 100%; max-width: 280px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: transparent; color: var(--cream); font-weight: 700; padding: 16px 24px; border-radius: 999px; font-size: 15px; border: 1px solid rgba(255,248,240,.5); }
.f-btn-ghost:hover { background: rgba(255,248,240,.14); color: var(--cream); }
.f-explore { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.site-footer__rule { height: 1px; background: rgba(255,248,240,.18); margin: clamp(36px,4vw,60px) 0 22px; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,248,240,.6); }

/* ---------- elementi comuni di sezione ---------- */
.wrap { max-width: 1560px; margin: 0 auto; width: 100%; }
.wrap--narrow { max-width: 1040px; margin: 0 auto; width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; }
.pill { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; }
.sec-h2 { font-family: var(--tf); font-weight: var(--tw); font-size: clamp(30px,4.5vw,56px); line-height: 1.05; letter-spacing: -.025em; margin: 14px 0 10px; max-width: 20ch; text-wrap: balance; }
.sec-p { font-size: clamp(16px,1.5vw,20px); color: rgba(61,61,61,.72); max-width: 60ch; line-height: 1.55; }

/* ---------- HOME: hero ---------- */
.hero { position: relative; height: 170vh; }
.hero__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(80px,8vh,120px) clamp(16px,3vw,40px) clamp(40px,5vh,72px);
}
.hero__inner { max-width: 1640px; margin: 0 auto; width: 100%; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(13px,1.15vw,17px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.hero h1 {
  font-family: var(--tf); font-weight: var(--tw);
  font-size: clamp(62px,13vw,220px); line-height: .88; letter-spacing: -.03em;
  margin: clamp(10px,1.6vh,22px) 0 0; text-wrap: balance; color: var(--green);
}
.hero h1 .accent { color: var(--coral); }
.hero__p { font-size: clamp(18px,1.9vw,28px); line-height: 1.45; color: rgba(61,61,61,.75); max-width: 60ch; margin: clamp(24px,3.4vh,48px) 0 0; text-wrap: pretty; }
/* i tre blocchi di testo sfumano insieme allo scroll */
.hero__fade { transition: opacity .1s linear; }

.hero__video {
  display: inline-flex; vertical-align: middle; position: relative;
  width: clamp(210px,25vw,480px); aspect-ratio: 16/10;
  border-radius: clamp(16px,1.6vw,28px); overflow: hidden;
  margin: 0 clamp(12px,1.2vw,26px); top: -.06em;
  transform: rotate(-4deg);
  box-shadow: 0 20px 50px rgba(61,61,61,.22);
  background: #2f5d51;
}
.hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.hero__video video.is-active { opacity: 1; }
.hero__badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.42); backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 999px;
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: dodoPulse 1.4s ease-in-out infinite; }
.confetti { position: absolute; z-index: 2; top: -14px; }

/* ---------- HOME: griglia temi ---------- */
.temi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px,1.8vw,28px); margin-top: clamp(32px,4vw,56px); }
@media (max-width: 1359px) { .temi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1023px) { .temi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px)  { .temi-grid { grid-template-columns: 1fr; } }

.tema-card {
  background: #fff; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(61,61,61,.06); box-shadow: 0 10px 30px rgba(61,61,61,.06);
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.tema-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 64px rgba(61,61,61,.18); color: var(--ink); }
.tema-card__bar { height: 8px; }
.tema-card__media { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--sand); overflow: hidden; }
.tema-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tema-card__age { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.94); color: var(--ink); font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: 999px; }
.tema-card__foot { padding: 22px 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tema-card__foot h3 { font-size: clamp(21px,1.9vw,29px); font-weight: 700; letter-spacing: -.015em; }
.arrow-circle { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--green); }

/* ---------- HOME: carosello servizi ---------- */
.serv-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; }
.serv-nav button {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(61,61,61,.15); background: #fff;
  cursor: pointer; font-size: 22px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.serv-nav button:first-child:hover { background: var(--yellow); border-color: var(--yellow); }
.serv-nav button:last-child:hover { background: var(--green); border-color: var(--green); color: #fff; }

.serv-track { display: flex; gap: clamp(16px,2vw,28px); overflow-x: auto; padding: clamp(18px,2.4vw,32px) 2px 26px; scroll-snap-type: x mandatory; }
.serv-slide { scroll-snap-align: start; flex: 0 0 min(100%,1040px); width: min(100%,1040px); border-radius: 34px; overflow: hidden; display: flex; flex-wrap: wrap; min-height: min(70vh,620px); color: #fff; }
.serv-slide__text { flex: 1 1 340px; min-width: min(100%,320px); padding: clamp(28px,3.4vw,52px); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.serv-slide__num { font-size: clamp(64px,7vw,120px); font-family: var(--tf); font-weight: var(--tw); line-height: .86; letter-spacing: -.04em; opacity: .32; }
.serv-slide__text h3 { font-size: clamp(30px,3vw,50px); font-family: var(--tf); font-weight: var(--tw); letter-spacing: -.025em; line-height: 1.03; }
.serv-slide__text p { font-size: clamp(17px,1.5vw,22px); line-height: 1.5; opacity: .96; margin: 18px 0 0; max-width: 40ch; text-wrap: pretty; }
.serv-slide__cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 700; padding: 15px 26px; border-radius: 999px; font-size: 15px; white-space: nowrap; align-self: flex-start; }
.serv-slide__cta:hover { background: #fff; color: var(--ink); }
.serv-slide__media { flex: 1 1 320px; min-width: min(100%,280px); position: relative; min-height: 300px; background: rgba(255,255,255,.16); }
.serv-slide__media > img, .serv-slide__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- HOME: zone ---------- */
.zone-sec { padding: clamp(48px,6vw,92px) clamp(16px,3vw,40px) clamp(96px,11vw,160px); scroll-margin-top: 80px; background: #EDF4F0; position: relative; z-index: 1; }
.zone-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(20px,3vw,44px); }
.zone-head h2 { font-size: clamp(32px,5vw,74px); font-family: var(--tf); font-weight: var(--tw); line-height: 1.02; letter-spacing: -.03em; margin: 22px 0 0; max-width: 16ch; text-wrap: balance; }
.glass-card { border-radius: 24px; padding: 24px 28px; display: flex; align-items: flex-start; gap: 14px; box-shadow: 0 12px 34px rgba(61,61,61,.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.glass-card--coral { background: rgba(234,103,72,.14); border: 1px solid rgba(234,103,72,.3); }
.glass-card--white { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.65); }
.glass-card .ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.glass-card .t { font-weight: 700; font-size: 17px; }
.glass-card p { font-size: 14px; color: rgba(61,61,61,.68); line-height: 1.5; margin: 6px 0 10px; }
.zone-tags { position: relative; display: flex; flex-wrap: wrap; gap: clamp(12px,1.4vw,20px); justify-content: center; align-items: center; margin-top: clamp(40px,5vw,68px); }
.zone-tag { font-weight: 700; font-size: clamp(18px,1.7vw,28px); padding: 16px 32px; border-radius: 999px; box-shadow: 0 6px 18px rgba(61,61,61,.06); background: #fff; color: var(--ink); border: 1px solid rgba(61,61,61,.12); transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.zone-tag--hi { background: var(--green); color: #fff; border: none; }
.zone-tag:hover { transform: rotate(0deg) translateY(-4px) scale(1.05) !important; }

/* ---------- pagina TEMI ---------- */
.temi-list { max-width: 1560px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: clamp(20px,2.4vw,36px); }
.temi-row {
  display: grid; grid-template-columns: 1.1fr 1fr; background: #fff;
  border-radius: 30px; overflow: hidden; border: 1px solid rgba(61,61,61,.06);
  box-shadow: 0 14px 40px rgba(61,61,61,.06); text-decoration: none; color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.temi-row:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(61,61,61,.14); color: var(--ink); }
.temi-row--flip { grid-template-columns: 1fr 1.1fr; }
.temi-row--flip .temi-row__media { order: 2; }
.temi-row--flip .temi-row__text { order: 1; }
.temi-row__media { position: relative; min-height: clamp(240px,30vw,400px); background: var(--sand); }
.temi-row__media img { width: 100%; height: 100%; object-fit: cover; }
.temi-row__num { position: absolute; top: 20px; left: 20px; font-family: var(--tf); font-weight: 400; font-size: 26px; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; }
.temi-row__text { padding: clamp(28px,4vw,64px); display: flex; flex-direction: column; justify-content: center; }
.temi-row__age { display: inline-block; align-self: flex-start; background: var(--cream); border: 1px solid rgba(61,61,61,.1); color: var(--ink); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.temi-row__text h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(32px,4vw,58px); letter-spacing: -.01em; line-height: 1.02; }
.temi-row__text p { font-size: clamp(16px,1.5vw,20px); line-height: 1.6; color: rgba(61,61,61,.72); margin: 16px 0 0; max-width: 52ch; text-wrap: pretty; }
.temi-row__more { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; font-weight: 700; font-size: clamp(17px,1.6vw,22px); }
.temi-row__more .circle { width: 60px; height: 60px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 27px; box-shadow: 0 10px 24px rgba(61,61,61,.16); }
@media (max-width: 859px) {
  .temi-row, .temi-row--flip { grid-template-columns: 1fr; }
  .temi-row--flip .temi-row__media { order: 0; }
  .temi-row--flip .temi-row__text { order: 1; }
}

/* ---------- pagina SERVIZI ---------- */
.serv-grid { max-width: 1560px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,1.6vw,24px); }
@media (max-width: 1023px) { .serv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px)  { .serv-grid { grid-template-columns: 1fr; } .serv-grid__cta { grid-column: auto !important; } }
.serv-tile { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4/5; background: var(--sand); box-shadow: 0 12px 34px rgba(61,61,61,.08); transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; }
.serv-tile:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 64px rgba(61,61,61,.2); }
.serv-tile > img, .serv-tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.serv-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(61,61,61,0) 42%, rgba(61,61,61,.78)); pointer-events: none; }
.serv-tile__num { position: absolute; top: 16px; left: 16px; color: #fff; font-family: var(--tf); font-weight: 400; font-size: 22px; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.serv-tile__go { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink); }
.serv-tile__go:hover { background: var(--yellow); color: var(--ink); }
.serv-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; }
.serv-tile__cap h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(24px,2.4vw,34px); letter-spacing: -.01em; line-height: 1.04; }
.serv-tile__cap p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.88); margin: 8px 0 0; text-wrap: pretty; }
.serv-grid__cta { grid-column: 1 / -1; background: var(--green); color: #fff; border-radius: 26px; padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: clamp(220px,26vw,340px); }
.serv-grid__cta h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(28px,3vw,46px); line-height: 1.02; letter-spacing: -.01em; }
.serv-grid__cta p { font-size: clamp(16px,1.5vw,20px); color: rgba(255,255,255,.85); line-height: 1.55; max-width: 44ch; margin: 0; }
.btn-white { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--ink); font-weight: 700; padding: 14px 24px; border-radius: 999px; font-size: 15px; }
.btn-white:hover { background: var(--yellow); color: var(--ink); }
.serv-hero { max-width: 1560px; margin: 0 auto; width: 100%; position: relative; border-radius: 34px; overflow: hidden; background: var(--green); color: #fff; padding: clamp(40px,6vw,88px) clamp(28px,5vw,72px); }
.serv-hero h1 { font-family: var(--tf); font-weight: 400; font-size: clamp(46px,8vw,112px); line-height: .98; letter-spacing: -.01em; margin: 24px 0 0; max-width: 15ch; text-wrap: balance; }
.serv-hero p { font-size: clamp(16px,1.5vw,20px); color: rgba(255,255,255,.85); max-width: 60ch; line-height: 1.55; margin: 22px 0 0; }
.pill--ghost { background: rgba(255,255,255,.2); }

/* ---------- pagina TEMA (dettaglio) ---------- */
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid rgba(61,61,61,.12); padding: 10px 18px; border-radius: 999px; }
.back-link:hover { border-color: var(--green); color: var(--green); }
.tema-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(22px,3vw,44px); align-items: stretch; margin-top: 22px; }
@media (max-width: 899px) { .tema-hero { grid-template-columns: 1fr; } }
.tema-hero__box { border-radius: 30px; padding: clamp(30px,4vw,60px); display: flex; flex-direction: column; justify-content: space-between; gap: 26px; color: #fff; }
.tema-hero__box h1 { font-size: clamp(40px,5.5vw,82px); font-family: var(--tf); font-weight: 400; line-height: .98; letter-spacing: -.03em; margin: 22px 0 0; text-wrap: balance; }
.tema-hero__box p { font-size: clamp(16px,1.5vw,20px); line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
.tema-hero__badge { display: inline-block; background: rgba(255,255,255,.22); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; }
.tema-hero__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: var(--ink); font-weight: 700; padding: 17px 28px; border-radius: 999px; font-size: 16px; align-self: flex-start; }
.tema-hero__cta:hover { background: var(--cream); color: var(--ink); }
.tema-hero__media { position: relative; border-radius: 30px; overflow: hidden; background: var(--sand); min-height: 340px; }
.tema-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.inc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: clamp(16px,1.8vw,26px); }
.inc-card { background: #fff; border-radius: 22px; padding: 26px; border: 1px solid rgba(61,61,61,.06); box-shadow: 0 8px 24px rgba(61,61,61,.05); transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, border-color .26s ease; }
.inc-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 24px 50px rgba(61,61,61,.16); border-color: rgba(61,61,61,.14); }
.inc-card__n { width: 52px; height: 52px; border-radius: 15px; color: #fff; font-family: var(--tf); font-weight: 400; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform .26s cubic-bezier(.2,.7,.3,1); }
.inc-card:hover .inc-card__n { transform: scale(1.12) rotate(6deg); }
.inc-card h3 { font-size: 19px; font-weight: 700; margin: 16px 0 0; line-height: 1.3; text-wrap: pretty; }
.tema-cta { max-width: 1560px; margin: 0 auto; width: 100%; position: relative; overflow: hidden; border-radius: 34px; color: #fff; padding: clamp(40px,6vw,96px) clamp(26px,4vw,80px); }
.tema-cta__glyph { position: absolute; right: clamp(-20px,-1vw,0px); bottom: -24px; font-size: clamp(140px,20vw,340px); line-height: .8; opacity: .14; pointer-events: none; }
.tema-cta h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(34px,5vw,84px); line-height: .98; letter-spacing: -.02em; margin: 20px 0 0; text-wrap: balance; }
.tema-cta p { font-size: clamp(16px,1.5vw,20px); opacity: .92; line-height: 1.55; margin: 18px 0 0; max-width: 46ch; text-wrap: pretty; }
.tema-cta__row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px,3vw,40px); }
.tema-cta__primary { display: inline-flex; align-items: center; gap: 10px; background: var(--cream); color: var(--ink); font-weight: 700; padding: 19px 32px; border-radius: 999px; font-size: clamp(16px,1.4vw,19px); }
.tema-cta__primary:hover { background: var(--yellow); color: #fff; }
.tema-cta__ghost { display: inline-flex; align-items: center; gap: 9px; background: transparent; color: inherit; font-weight: 700; padding: 19px 32px; border-radius: 999px; font-size: clamp(16px,1.4vw,19px); border: 1px solid rgba(255,255,255,.55); }
.tema-cta__ghost:hover { background: rgba(255,255,255,.18); color: inherit; }

/* ---------- pagina ZONE ---------- */
.zone-h1 { font-family: var(--tf); font-weight: 400; font-size: clamp(46px,7.5vw,108px); line-height: .98; letter-spacing: -.01em; margin: 24px 0 0; max-width: 18ch; text-wrap: balance; }
.towns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: clamp(16px,1.8vw,26px); }
.town-card { background: #fff; border-radius: 26px; padding: 32px; border: 1px solid rgba(61,61,61,.06); box-shadow: 0 10px 28px rgba(61,61,61,.05); display: flex; flex-direction: column; gap: 10px; color: var(--ink); transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; }
.town-card:hover { transform: rotate(0deg) translateY(-6px) !important; box-shadow: 0 22px 48px rgba(61,61,61,.12); color: var(--ink); }
.town-card__top { display: flex; align-items: center; justify-content: space-between; }
.town-card__pin { width: 48px; height: 48px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.town-card__go { width: 40px; height: 40px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--green); }
.town-card h3 { font-size: clamp(24px,2vw,30px); font-weight: 700; letter-spacing: -.01em; margin: 8px 0 0; }
.town-card p { font-size: 15px; line-height: 1.5; color: rgba(61,61,61,.66); margin: 0; text-wrap: pretty; }
.zone-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(16px,1.8vw,24px); margin-top: clamp(28px,3vw,44px); }
.zone-photos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(12px,1.4vw,22px); margin-top: clamp(28px,3vw,44px); }
@media (max-width: 679px) { .zone-photos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.zone-photo { aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; background: var(--sand); box-shadow: 0 16px 40px rgba(61,61,61,.12); transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.zone-photo:hover { transform: rotate(0deg) translateY(-8px) !important; }
.zone-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- pagina FAQ ---------- */
.faq-groups { display: flex; flex-direction: column; gap: clamp(32px,3.6vw,56px); margin-top: clamp(34px,4vw,56px); }
.faq-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.faq-group__ico { width: 52px; height: 52px; flex: none; border-radius: 16px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.faq-group__head h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(24px,2.6vw,40px); letter-spacing: -.01em; line-height: 1; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border-radius: 20px; border: 1px solid rgba(61,61,61,.07); overflow: hidden; box-shadow: 0 8px 24px rgba(61,61,61,.04); }
.faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(20px,2.4vw,28px); background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); }
.faq-item__q span.txt { font-size: clamp(17px,1.7vw,22px); font-weight: 700; letter-spacing: -.01em; }
.faq-item__sign { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--cream); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.faq-item.is-open .faq-item__sign { transform: rotate(45deg); background: var(--green); color: #fff; }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.is-open .faq-item__a { max-height: 600px; transition: max-height .3s ease; }
.faq-item__a p { font-size: clamp(16px,1.5vw,20px); line-height: 1.6; color: rgba(61,61,61,.72); margin: 0; padding: 0 clamp(20px,2.4vw,28px) clamp(22px,2.4vw,28px); max-width: 70ch; text-wrap: pretty; }
.faq-h1 { font-size: clamp(38px,6vw,82px); font-family: var(--tf); font-weight: 400; line-height: 1; letter-spacing: -.03em; margin: 22px 0 0; max-width: 16ch; text-wrap: balance; }

/* ---------- pagina CONTATTI ---------- */
.contatti-card { max-width: 1400px; margin: 0 auto; width: 100%; background: #fff; border: 1.5px solid rgba(61,61,61,.12); border-radius: clamp(24px,3vw,40px); box-shadow: 0 30px 80px rgba(61,61,61,.1); padding: clamp(16px,1.6vw,24px); }
.contatti-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(20px,2.4vw,36px); align-items: stretch; }
@media (max-width: 959px) { .contatti-grid { grid-template-columns: 1fr; } }
.contatti-info { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: clamp(20px,2vw,34px); }
.contatti-rows { display: flex; flex-direction: column; gap: clamp(24px,2.6vw,34px); margin-top: clamp(28px,3.4vw,46px); }
.contatti-row { display: flex; align-items: flex-start; gap: 16px; }
.contatti-row__ico { flex: none; width: 48px; height: 48px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.contatti-row__t { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.contatti-row__s { font-size: 15px; color: rgba(61,61,61,.62); line-height: 1.5; margin-top: 2px; }
.contatti-row a { display: inline-block; font-weight: 700; font-size: 16px; margin-top: 8px; }
.contatti-social { display: flex; gap: 12px; }
.contatti-social a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--cream); color: var(--ink); border: 1px solid rgba(61,61,61,.1); }

.form-panel { background: var(--green); border-radius: clamp(20px,2.4vw,32px); padding: clamp(28px,4vw,60px); color: var(--cream); }
.form-panel h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(34px,4.4vw,66px); line-height: .98; letter-spacing: -.01em; color: var(--cream); }
.form-panel > div > p { font-size: clamp(16px,1.5vw,20px); color: rgba(255,248,240,.9); line-height: 1.5; margin: 16px 0 0; max-width: 46ch; }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2vw,28px); margin-top: clamp(28px,3.4vw,44px); }
.form-fields .full { grid-column: 1 / -1; }
@media (max-width: 559px) { .form-fields { grid-template-columns: 1fr; } }
.line-input {
  width: 100%; font-family: var(--bf); font-size: 16px; color: var(--cream);
  background: transparent; border: none; border-bottom: 2px solid rgba(255,248,240,.55);
  padding: 12px 2px; outline: none; transition: border-color .15s ease;
}
.line-input:focus { border-bottom-color: var(--cream); }
.line-input::placeholder { color: rgba(255,248,240,.7); }
textarea.line-input { resize: vertical; min-height: 60px; }
.form-serv-title { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: rgba(255,248,240,.85); margin-bottom: 16px; }
.form-serv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
@media (max-width: 559px) { .form-serv-grid { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 11px; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--cream); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--cream); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 15px; font-weight: 800; }
.check input:checked + .check__box { background: var(--cream); }
.check input:checked + .check__box::after { content: '✓'; }
.check input:focus-visible + .check__box { outline: 2px solid #fff; outline-offset: 2px; }
.form-err { margin-top: 18px; background: rgba(234,103,72,.16); color: #8f3320; font-size: 15px; font-weight: 600; padding: 13px 16px; border-radius: 12px; }
.form-submit {
  width: 100%; margin-top: clamp(26px,3vw,36px);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: #fff; font-family: inherit; font-weight: 700; font-size: 18px;
  padding: 20px; border: none; border-radius: 16px; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.form-submit:hover { background: #2a2a2a; transform: translateY(-2px); }
.form-sent { text-align: center; padding: clamp(20px,4vw,52px) 0; }
.form-sent__tick { width: 80px; height: 80px; border-radius: 50%; background: var(--cream); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto; }
.form-sent h2 { font-family: var(--tf); font-weight: 400; font-size: clamp(32px,4vw,56px); line-height: 1; margin: 22px 0 0; color: var(--cream); }
.form-sent p { font-size: clamp(16px,1.5vw,20px); color: rgba(255,248,240,.9); line-height: 1.55; margin: 14px auto 0; max-width: 38ch; }
.form-sent__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.form-sent__row a { display: inline-flex; align-items: center; gap: 8px; background: var(--cream); color: var(--green); font-weight: 700; padding: 15px 26px; border-radius: 999px; }
.form-sent__row button { border: 1.5px solid rgba(255,248,240,.6); background: transparent; color: var(--cream); font-family: inherit; font-weight: 700; padding: 15px 26px; border-radius: 999px; cursor: pointer; }

/* ---------- 404 ---------- */
.nf { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(60px,10vw,140px) clamp(16px,3vw,40px); }
.nf__code { font-family: var(--tf); font-weight: 400; font-size: clamp(96px,22vw,280px); line-height: .82; letter-spacing: -.04em; color: var(--green); }
.nf h1 { font-family: var(--tf); font-weight: 400; font-size: clamp(30px,4.4vw,64px); line-height: 1.02; letter-spacing: -.02em; margin: 18px 0 0; max-width: 20ch; text-wrap: balance; }
.nf p { font-size: clamp(16px,1.5vw,20px); color: rgba(61,61,61,.72); line-height: 1.55; margin: 16px 0 0; max-width: 52ch; }
.nf__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(26px,3vw,40px); }
.nf__primary { display: inline-flex; align-items: center; gap: 9px; background: var(--green); color: #fff; font-weight: 700; padding: 17px 30px; border-radius: 999px; font-size: 16px; }
.nf__primary:hover { background: var(--coral); color: #fff; }
.nf__ghost { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--ink); font-weight: 700; padding: 17px 30px; border-radius: 999px; font-size: 16px; border: 1px solid rgba(61,61,61,.12); }
.nf__ghost:hover { border-color: var(--green); color: var(--green); }

/* ---------- utility ---------- */
.sec { padding: clamp(48px,6vw,92px) clamp(16px,3vw,40px); scroll-margin-top: 80px; }
.sec--white { background: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }