/* ============================================================
   WF ZOO — PAGINE INTERNE · SISTEMA DI SEZIONI (parità con la HOME)
   ------------------------------------------------------------
   Stesso linguaggio della home: hero dedicato (parallax + Ken Burns),
   fasce alternate, split immersivi, card .fx-int, count-up, accordion,
   CTA band, listini, info-card, IBAN. GPU-only. reduced-motion ok.
   Riusa da wf-home.css: .btn*, .fx-int (@property --fxang/fxspin),
   .reveal*, .acc-item/.acc-head/.acc-body, .num[data-count], kenburns.
   Tutto scoldato sotto .wf-page (il <main> del template page.html).
   ============================================================ */

.wf-page{ background:var(--bianco); color:var(--nero); overflow-x:clip; }
/* wrapping titoli equilibrato (niente parola orfana a capo se c'è spazio) */
.wf-page h1, .wf-page h2, .wf-page h3, .page-hero h1, .wf-page .imgband h2{ text-wrap:balance; }
/* elemento singolo SEMPRE centrato (anti "sezione con un solo elemento a sinistra") */
.wf-page .single{ max-width:680px; margin-inline:auto; }
.wf-page .single.wide{ max-width:920px; }
.wf-page .center-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:22px; }
/* annulla il block-gap di WP fra sezioni full-bleed (le sezioni stanno dentro .entry-content/.post-content) */
.wf-page > *,
.wf-page .wp-block-post-content,
.wf-page .wp-block-post-content > *,
.wf-page .entry-content > *,
.wf-page > .is-layout-flow > *{ margin-block:0 !important; }
.wf-page .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* --- PAGINE NUOVE, CREATE DAL CLIENTE ------------------------------------
   Le pagine che abbiamo costruito noi hanno l'impalcatura
   <section class="pg"><div class="wrap">, che da' margini e respiro. Una
   pagina creata da zero in wp-admin non ce l'ha: i blocchi finiscono nudi
   dentro <main class="wf-page"> e il testo va da bordo a bordo dello schermo.
   Qui i blocchi nudi ricevono lo stesso contenitore e lo stesso passo verticale
   delle altre pagine, cosi' una landing nuova nasce gia' presentabile.
   Verificato: su tutte le 24 pagine esistenti il primo livello e' sempre
   <section>, quindi questa regola non le tocca. */
.wf-page > *:not(section):not(.alignfull){
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  padding-left:28px; padding-right:28px; }
/* padding e non margin: il margine del primo figlio collasserebbe fuori dal
   contenitore e la pagina resterebbe incollata sotto la navbar */
.wf-page > *:not(section):not(.alignfull):first-child{ padding-top:clamp(44px,6vw,84px); }
.wf-page > *:not(section):not(.alignfull):last-child{ padding-bottom:clamp(56px,7vw,96px); }
.wf-page > .alignfull{ margin-left:0; margin-right:0; max-width:none; }

/* ====================== 1. HERO DI PAGINA ====================== */
/* Hero full-bleed: foto + scrim + occhiello + H1 Gagalin + lead (+ CTA). */
.page-hero{ position:relative; overflow:hidden; background:#0a0a08;
  min-height:clamp(360px,52vh,560px); display:flex; align-items:flex-end; }
.page-hero .ph-bg{ position:absolute; inset:-9% 0; z-index:0; will-change:transform; }
.page-hero .ph-img{ position:absolute; inset:0; background-position:center; background-size:cover;
  transform:scale(1.06); }
@media (prefers-reduced-motion: no-preference){ .page-hero .ph-img{ animation:kenburns 26s ease-in-out infinite alternate; } }
.page-hero .ph-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 72%),
             linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)); }
/* Il testo dell'hero sta in basso: una seconda velatura piu' densa sull'ultima
   meta' garantisce il contrasto anche quando la foto e' chiara proprio li
   (era il caso dell'hero di /talk/, dove occhiello e sottotitolo si leggevano male). */
.page-hero .ph-scrim::after{ content:''; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.page-hero .ph-inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 28px clamp(34px,5vw,64px); animation:fadeRise .9s both .1s; }
@media (prefers-reduced-motion: reduce){ .page-hero .ph-inner{ animation:none; } }
.page-hero .ph-eyebrow{ display:inline-block; font-family:var(--font-accent); font-style:italic;
  font-size:clamp(15px,1.5vw,20px); color:var(--giallo);
  background:rgba(0,0,0,.48); padding:4px 14px; border-radius:999px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  margin-bottom:12px; }  /* il giallo nudo sulle foto chiare spariva: targhetta scura dietro */
.page-hero h1{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; color:#fff;
  font-size:clamp(34px,6vw,72px); line-height:.98; letter-spacing:.5px; margin:0 0 16px;
  text-shadow:0 3px 26px rgba(0,0,0,.55); max-width:16ch; }
.page-hero .ph-sub{ color:rgba(255,255,255,.92); font-size:clamp(16px,1.4vw,20px); line-height:1.5;
  max-width:60ch; margin:0 0 22px; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.page-hero .ph-cta{ display:flex; flex-wrap:wrap; gap:14px; }
/* accento diagonale giallo della hero (firma, in alto a destra) */
.page-hero::after{ content:''; position:absolute; top:0; right:0; width:34%; height:100%; z-index:1; pointer-events:none;
  background:linear-gradient(135deg, rgba(252,186,3,.22), rgba(252,186,3,0) 70%);
  clip-path:polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width:640px){ .page-hero h1{ font-size:clamp(30px,9vw,46px); } }

/* ====================== 2. FASCE / SEZIONI ====================== */
.wf-page .pg{ padding:clamp(56px,8vw,104px) 0; }
.wf-page .pg--tight{ padding:clamp(40px,5vw,64px) 0; }
.wf-page .pg--cream{ background:var(--crema); }
.wf-page .pg--dark{ background:#15160d; color:#fff; }
.wf-page .pg--white{ background:var(--bianco); }

/* intestazione di sezione (riusa il tono della home) */
.wf-page .pg-head{ max-width:760px; margin:0 auto clamp(22px,3vw,34px); text-align:center; } /* gap titolo->contenuto ridotto (nota cliente) */
.wf-page .pg-head.left{ margin-left:0; text-align:left; }
.wf-page .pg-kicker{ display:block; color:var(--giallo-scuro); font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; font-size:13px; margin-bottom:14px; }
.wf-page .pg--dark .pg-kicker{ color:var(--giallo); }
.wf-page .pg-head h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4.2vw,46px); line-height:1.02; letter-spacing:.5px; margin:0 0 14px; color:var(--nero); }
.wf-page .pg--dark .pg-head h2{ color:#fff; }
.wf-page .pg-head p{ font-size:clamp(16px,1.4vw,18.5px); color:var(--grigio); line-height:1.6; margin:0; }
.wf-page .pg--dark .pg-head p{ color:rgba(255,255,255,.72); }

/* lead: paragrafo d'apertura grande, in Lora italic (come gli occhielli home) */
.wf-page .pg-lead{ font-family:var(--font-accent); font-style:italic; color:#33332f;
  font-size:clamp(19px,2.1vw,26px); line-height:1.5; max-width:30ch; margin:0 auto clamp(26px,3.5vw,40px); text-align:center; } /* respiro sotto la citazione (nota cliente) */
.wf-page .pg-lead.left{ margin-left:0; text-align:left; max-width:46ch; }

/* INTRO editoriale a due colonne: lead grande con accento giallo a sx + testo a dx (anti "testo buttato lì") */
.wf-page .pg-intro{ padding-block:clamp(44px,6vw,84px); }
.wf-page .pg-intro > .wrap, .wf-page .pg-intro__cols{ display:grid; grid-template-columns:1fr 1.08fr;
  gap:clamp(26px,5vw,72px); align-items:center; }
.wf-page .pg-intro__cols{ margin-top:30px; }
.wf-page .pg-intro .pg-lead{ text-align:left; max-width:24ch; margin:0; position:relative; padding-top:30px;
  font-size:clamp(20px,2.4vw,30px); line-height:1.4; color:#2b2b27; }
.wf-page .pg-intro .pg-lead::before{ content:''; position:absolute; top:0; left:2px; width:58px; height:5px;
  background:var(--giallo); border-radius:3px; transform:skewX(-18deg); }
.wf-page .pg-intro .prose{ margin:0; max-width:58ch; text-align:left; }
.wf-page .pg-intro .prose p{ font-size:1.07rem; }
@media (max-width:820px){
  .wf-page .pg-intro > .wrap, .wf-page .pg-intro__cols{ grid-template-columns:1fr; gap:16px; }
  .wf-page .pg-intro .pg-lead{ max-width:34ch; padding-top:26px; }
}

/* prosa standard dentro una colonna di testo */
.wf-page .prose{ max-width:68ch; }
.wf-page .prose.center{ margin:0 auto; }
.wf-page .prose p{ font-size:1.075rem; line-height:1.75; color:var(--nero); margin:0 0 1.1em; }
.wf-page .pg--dark .prose p{ color:rgba(255,255,255,.82); }
.wf-page .prose p:last-child{ margin-bottom:0; }
.wf-page .prose strong{ font-weight:700; }
.wf-page .prose a{ color:var(--verde); text-decoration:underline; text-decoration-color:var(--giallo);
  text-underline-offset:3px; text-decoration-thickness:2px; font-weight:600; }
.wf-page .pg--dark .prose a{ color:var(--giallo); text-decoration-color:rgba(252,186,3,.5); }

/* ====================== 3. SPLIT IMMERSIVO (foto + testo) ====================== */
.wf-page .split{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  background:#fff; border:1px solid var(--bordo); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 14px 38px rgba(26,26,26,.06); --edge:var(--giallo);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s; }
.wf-page .split:hover{ transform:translateY(-5px); box-shadow:0 28px 58px rgba(26,26,26,.12), 0 0 36px -8px var(--edge); }
.wf-page .split.green{ --edge:var(--verde); }
.wf-page .split__media{ position:relative; overflow:hidden; min-height:340px; }
.wf-page .split__img{ position:absolute; inset:0; background-position:center; background-size:cover; }
@media (prefers-reduced-motion: no-preference){ .wf-page .split__img{ animation:vt-ken 15s ease-in-out infinite alternate; } }
.wf-page .split__body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,4vw,58px); }
.wf-page .split__eyebrow{ font-weight:700; font-size:12px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--giallo-scuro); margin-bottom:12px; }
.wf-page .split.green .split__eyebrow{ color:var(--verde); }
.wf-page .split__body h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,3vw,40px); line-height:1.04; margin:0 0 16px; color:var(--nero); }
.wf-page .split__body p{ color:var(--grigio); font-size:1.03rem; line-height:1.7; margin:0 0 .9em; }
.wf-page .split__body p:last-of-type{ margin-bottom:0; }
.wf-page .split__body .btn{ margin-top:22px; align-self:flex-start; }
.wf-page .split--rev .split__media{ order:2; }
/* Media di uno split in attesa della foto: fondo brand, mai la foto di un'altra specie.
   Serve per i progetti futuri (es. il pinguino africano, che non ospitiamo ancora). */
.wf-page .split__img--attesa{ background:var(--brand-gradient); }
.wf-page .split__img--attesa::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.16), transparent 60%),
             repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px); }
/* card "split" espandibile su mobile: il wrapper .split-text e il bottone .split-more
   sono iniettati da wf-home.js SOLO se il testo è lungo → nessuna modifica al markup
   delle pagine, nessuna parola cambiata. */
.wf-page .split-more{ display:none; align-items:center; gap:7px; background:none; border:0; padding:6px 0; margin-top:14px; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; letter-spacing:.3px; color:var(--verde); }
.wf-page .split.has-clamp .split-more{ display:inline-flex; }
.wf-page .split-more::after{ content:'\25be'; font-size:.85em; transition:transform .3s; }
.wf-page .split.is-open .split-more::after{ transform:rotate(180deg); }
@media (max-width:820px){
  .wf-page .split, .wf-page .split--rev{ grid-template-columns:1fr; }
  .wf-page .split__media, .wf-page .split--rev .split__media{ order:-1; min-height:240px; }
  /* testo più arioso e separato su mobile */
  .wf-page .split__body{ padding:clamp(26px,7vw,40px); }
  .wf-page .split__body p{ margin:0 0 1.3em; line-height:1.72; }
  .wf-page .split.has-clamp .split-text{ position:relative; max-height:calc(1.72em * 6); overflow:hidden; transition:max-height .55s ease; }
  .wf-page .split.has-clamp .split-text::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2.6em; background:linear-gradient(rgba(255,255,255,0), #fff); pointer-events:none; transition:opacity .3s; }
  .wf-page .split.has-clamp.is-open .split-text{ max-height:220em; }
  .wf-page .split.has-clamp.is-open .split-text::after{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .wf-page .split.has-clamp .split-text{ transition:none; } }

/* ====================== 4. GRIGLIA CARD FEATURE (.fx-int) ====================== */
.wf-page .grid{ display:grid; gap:22px; }
/* con un solo elemento la griglia a piu' colonne lasciava due terzi di riga
   vuoti sotto un titolo a tutta larghezza (succedeva sulle schede leone e
   testuggine, che hanno un esemplare solo) */
.wf-page .grid.c1{ grid-template-columns:minmax(0,1fr); max-width:520px; margin-left:auto; margin-right:auto; }
.wf-page .grid.c2{ grid-template-columns:repeat(2,1fr); }
.wf-page .grid.c3{ grid-template-columns:repeat(3,1fr); }
.wf-page .grid.c4{ grid-template-columns:repeat(4,1fr); }
/* Griglie a conteggio variabile (quelle generate dallo shortcode): flex invece di
   grid, cosi l'ultima riga incompleta resta CENTRATA e non lascia celle vuote a
   destra - e' la regola del CONTRATTO-COERENZA sulle card orfane. */
.wf-page .grid--auto{ display:flex; flex-wrap:wrap; justify-content:center; }
.wf-page .grid--auto > *{ flex:1 1 clamp(260px, 30%, 340px); max-width:380px; }

.wf-page .fcard{ position:relative; isolation:isolate; background:#fff; border:1px solid var(--bordo);
  border-radius:18px; padding:30px 28px; box-shadow:var(--shadow); --edge:var(--giallo);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .35s; }
.wf-page .fcard:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(26,26,26,.13), 0 0 34px -8px var(--edge); }
.wf-page .fcard.green{ --edge:var(--verde); border-top:4px solid var(--verde); }
.wf-page .fcard.yellow{ border-top:4px solid var(--giallo); }
.wf-page .pg--dark .fcard{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); box-shadow:none; }
.wf-page .pg--dark .fcard:hover{ background:rgba(255,255,255,.06); }
.wf-page .fcard__ico{ display:grid; place-items:center; width:54px; height:54px; border-radius:15px;
  background:rgba(252,186,3,.18); color:var(--verde-scuro); margin-bottom:18px; }
.wf-page .fcard__ico svg{ width:28px; height:28px; }
.wf-page .pg--dark .fcard__ico{ color:var(--giallo); }      /* verde scuro su card scura non si vedeva */
.wf-page .pg--dark .info-card__ico svg{ stroke:var(--giallo); }
.wf-page .fcard__letter{ font-family:var(--font-heading); font-size:2.6rem; line-height:.8; color:var(--giallo-scuro);
  display:block; margin-bottom:14px; }
.wf-page .fcard h3{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; color:var(--nero);
  font-size:1.22rem; line-height:1.1; margin:0 0 10px; letter-spacing:.3px; }
.wf-page .pg--dark .fcard h3{ color:#fff; }
.wf-page .fcard p{ color:var(--grigio); font-size:.97rem; line-height:1.62; margin:0; }
.wf-page .pg--dark .fcard p{ color:rgba(255,255,255,.72); }
/* il prezzo restava verde scuro (#4b6b26) sul fondo nero della fascia: contrasto
   2.98:1, praticamente illeggibile. Sul fondo scuro va il giallo del brand,
   che e' gia' il colore degli accenti su nero nel resto del sito. */
.wf-page .pg--dark .fcard .price{ color:var(--giallo); }
.wf-page .pg--dark .price-row .pr{ color:var(--giallo); }
.wf-page .fcard .price{ display:inline-block; margin-top:14px; font-family:var(--font-heading); color:var(--verde);
  font-size:1.15rem; }
/* bordo conico luminoso scorrevole (identico alle card della home) */
.wf-page .fcard::before{ content:''; position:absolute; inset:0; z-index:6; border-radius:inherit; padding:3px;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:conic-gradient(from var(--fxang), transparent 0deg, var(--edge) 50deg, #fff 90deg, var(--edge) 130deg, transparent 210deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
.wf-page .fcard:hover::before{ opacity:1; animation:fxspin 2.4s linear infinite; }

/* ALLINEAMENTO card affiancate: titolo (e sottotitolo) riservano altezza costante
   così le righe/prezzi sotto NON si sfalsano quando un titolo va su 2 righe. */
.wf-page .fcard h3, .wf-page .price-card h3{ min-height:2.25em; display:flex; align-items:flex-end; }
.wf-page .price-card .sub{ min-height:1.4rem; }
.wf-page .fcard p{ line-height:1.68; }
/* card a piena larghezza dentro una grid (per i conteggi dispari, niente card "orfana" stretta) */
.wf-page .grid .span-all{ grid-column:1/-1; }
.wf-page .grid .span-all.fcard{ display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; }
.wf-page .grid .span-all.fcard h3{ min-height:0; margin:0; }
.wf-page .grid .span-all.fcard p{ flex:1 1 320px; margin:0; }
@media (max-width:700px){   }

/* ====================== BANDA-IMMAGINE (separatore visivo full-bleed, es. continenti) ====================== */
.wf-page .imgband{ position:relative; overflow:hidden; min-height:clamp(240px,34vh,360px); display:flex; align-items:center; justify-content:center; text-align:center; background:#0a0a08; }
.wf-page .imgband .ib-bg{ position:absolute; inset:-9% 0; z-index:0; will-change:transform; }
/* la foto è ATMOSFERA, non soggetto: scurita e desaturata → il taglio non disturba più */
.wf-page .imgband .ib-img{ position:absolute; inset:0; background-position:center; background-size:cover; transform:scale(1.06); filter:brightness(.58) saturate(.88); }
/* ritocchi mirati per-foto (match sull'url nello style) senza toccare il markup delle pagine:
   alcune immagini sono intrinsecamente chiare/colorate o "documentarie" (ingresso, pappagallo,
   pannello coi bambini, leopardo bianco) → vanno affondate di più per diventare texture come le altre. */
/* img-ingresso.jpg è una foto "documentaria" (bacheca/cartelli/insegna): non diventa
   texture nemmeno scurita → la sostituiamo via CSS (niente re-import) con una foto che
   funziona bene come banda d'atmosfera. Usata in: acquista-i-biglietti, volontariato. */
/* (il wallaby ora sta scritto nel contenuto di volontariato, niente trucchi) */
.wf-page .imgband .ib-img:has(img[src*="an-pappagalli"]){ filter:brightness(.46) saturate(.48); }
.wf-page .imgband .ib-img:has(img[src*="edu-pannello"]){ filter:brightness(.42) saturate(.76); }
.wf-page .imgband .ib-img:has(img[src*="exp-leopardo.jpg"]){ filter:brightness(.42) saturate(.82); }
.wf-page .imgband .ib-img:has(img[src*="exp-leopardo-3"]){ filter:brightness(.5) saturate(.86); }
@media (prefers-reduced-motion: no-preference){ .wf-page .imgband .ib-img{ animation:kenburns 26s ease-in-out infinite alternate; } }
.wf-page .imgband .ib-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,14,8,.56) 0%, rgba(10,14,8,.72) 100%), radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.42) 100%); }
.wf-page .imgband::after{ content:''; position:absolute; top:0; right:0; width:32%; height:100%; z-index:1; pointer-events:none;
  background:linear-gradient(135deg, rgba(252,186,3,.22), rgba(252,186,3,0) 70%); clip-path:polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.wf-page .imgband .ib-inner{ position:relative; z-index:2; padding:0 28px; }
.wf-page .imgband .pg-kicker{ color:var(--giallo); margin-bottom:12px; }
.wf-page .imgband h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase; color:#fff;
  font-size:clamp(30px,4.6vw,52px); line-height:1; letter-spacing:.5px; margin:0; text-shadow:0 3px 22px rgba(0,0,0,.5); }

/* ====================== 5. CARD ANIMALE / ESPERIENZA (con foto) ====================== */
.wf-page .acard{ position:relative; isolation:isolate; border-radius:18px; overflow:hidden; background:#fff;
  border:1px solid var(--bordo); box-shadow:var(--shadow); --edge:var(--giallo);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; display:block; }
.wf-page .acard:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(26,26,26,.14), 0 0 34px -8px var(--edge); }
.wf-page .acard__fig{ position:relative; overflow:hidden; }
.wf-page .acard__photo{ aspect-ratio:4/3; background-position:center; background-size:cover; background-color:var(--crema);
  transition:transform .6s cubic-bezier(.16,1,.3,1); }
.wf-page .acard:hover .acard__photo{ transform:scale(1.06); }
.wf-page .acard__fig::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.16), transparent 44%); pointer-events:none; }
.wf-page .acard__fig::before{ content:''; position:absolute; left:0; bottom:0; width:46px; height:46px; z-index:1;
  background:var(--giallo); clip-path:polygon(0 100%, 0 0, 100% 100%); opacity:.92; }
.wf-page .acard{ display:flex; flex-direction:column; }
.wf-page .acard__body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.wf-page .acard__body h3{ font-family:var(--font-heading); text-transform:uppercase; color:var(--nero);
  font-size:1.25rem; line-height:1.1; margin:0 0 3px; }
.wf-page .acard__sci{ font-family:var(--font-accent); font-style:italic; color:var(--verde); font-size:.95rem;
  margin:0 0 10px; display:block; }
.wf-page .acard__body p{ color:var(--grigio); font-size:.95rem; line-height:1.55; margin:0; }
.wf-page .acard__badge{ position:absolute; top:14px; left:14px; z-index:2; background:var(--giallo); color:var(--nero);
  font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  padding:6px 13px; border-radius:50px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.wf-page .acard__badge.free{ background:var(--verde); color:#fff; }
/* margin-top:auto -> il prezzo si allinea al fondo, uguale per tutte le card della riga */
.wf-page .acard__price{ align-self:flex-start; margin-top:auto; padding-top:12px; font-family:var(--font-heading);
  color:var(--verde); font-size:1.1rem; }
.wf-page .acard__fig.tall .acard__photo{ aspect-ratio:3/4; }
.wf-page .acard::before{ content:''; position:absolute; inset:0; z-index:6; border-radius:inherit; padding:3px;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:conic-gradient(from var(--fxang), transparent 0deg, var(--edge) 50deg, #fff 90deg, var(--edge) 130deg, transparent 210deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
.wf-page .acard:hover::before{ opacity:1; animation:fxspin 2.4s linear infinite; }

/* chip specie senza scheda */
.wf-page .chips{ display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; margin:0; }
.wf-page .chips li{ margin:0; }
/* lo stile sta sulla <li>, non su uno <span> interno: cosi' il cliente puo'
   modificare e cancellare le voci dall'editor senza che il riquadrino sparisca
   (Gutenberg conserva solo i suoi formati e spogliava lo <span class="chip">).
   `.chip` resta valido per compatibilita'. */
.wf-page .chips li, .wf-page .chip{ font-family:var(--font-body); font-size:.95rem; font-weight:600; color:var(--nero);
  background:#fff; border:1px solid var(--bordo); border-radius:50px; padding:9px 16px 9px 14px;
  display:inline-flex; align-items:center; gap:9px; line-height:1; box-shadow:var(--shadow); }
.wf-page .chips li::before, .wf-page .chip::before{ content:''; width:8px; height:8px; background:var(--giallo); border-radius:2px;
  transform:rotate(45deg); flex:none; }

/* ====================== 5-bis. BLOG (articoli e progetti) ==================
   Serviva perche' lo Zoo vuole raccontare i progetti con degli articoli, e
   finora un articolo aperto mostrava solo titolo e due righe di anteprima: non
   c'era il modello della pagina. Riusa le classi delle pagine (.pg, .wrap,
   .pg-head) cosi' il blog e' coerente col resto senza inventare uno stile nuovo. */
.wf-articolo .art-head{ text-align:center; }
.wf-articolo .art-head .wrap{ max-width:820px; }
.wf-articolo .art-head h1{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,52px); line-height:1.05; margin:6px 0 14px; }
.wf-articolo .art-head .art-sub{ font-size:clamp(16px,1.4vw,18.5px); color:var(--grigio); line-height:1.6; margin:0; }
.wf-articolo .art-head .wp-block-post-date{ color:var(--giallo-scuro); font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; font-size:12.5px; }

.wf-articolo .art-corpo .wrap{ max-width:72ch; }
.wf-articolo .art-foto img{ width:100%; height:auto; border-radius:18px; margin-bottom:clamp(22px,3vw,36px); }
.wf-articolo .art-corpo p{ font-size:17px; line-height:1.75; color:var(--nero); margin:0 0 1.1em; }
.wf-articolo .art-corpo h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:clamp(22px,2.6vw,30px); margin:1.6em 0 .5em; }
.wf-articolo .art-corpo h3{ font-weight:700; font-size:19px; margin:1.4em 0 .4em; }
.wf-articolo .art-corpo img{ max-width:100%; height:auto; border-radius:14px; }
.wf-articolo .art-corpo blockquote{ border-left:3px solid var(--giallo); margin:1.6em 0; padding:2px 0 2px 20px;
  font-family:var(--font-accent, inherit); font-style:italic; color:var(--grigio); }

/* elenco degli articoli: card come il resto del sito */
.art-lista .wp-block-post-template{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px); list-style:none; margin:0; padding:0; }
.art-lista .wp-block-post-template > li{ background:#fff; border:1px solid var(--bordo); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.art-lista .wp-block-post-featured-image{ margin:0; }
.art-lista .wp-block-post-featured-image img{ width:100%; height:200px; object-fit:cover; display:block; }
.art-lista .wp-block-post-date{ color:var(--giallo-scuro); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; font-size:11.5px; margin:18px 20px 0; }
.art-lista h2, .art-lista h3{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:20px; line-height:1.15; margin:8px 20px 0; }
.art-lista h2 a, .art-lista h3 a{ color:var(--nero); text-decoration:none; }
.art-lista h2 a:hover, .art-lista h3 a:hover{ color:var(--giallo-scuro); }
.art-lista .wp-block-post-excerpt{ margin:8px 20px 20px; }
.art-lista .wp-block-post-excerpt p{ font-size:15px; line-height:1.55; color:var(--grigio); margin:0; }
.art-lista .art-pagine{ margin-top:clamp(26px,3vw,40px); gap:10px; }
.art-lista .art-pagine a, .art-lista .art-pagine span{ padding:8px 14px; border-radius:50px;
  border:1px solid var(--bordo); background:#fff; font-weight:600; font-size:14px; color:var(--nero); text-decoration:none; }
.art-lista .art-pagine .current{ background:var(--giallo); border-color:var(--giallo); }
@media (max-width:900px){ .art-lista .wp-block-post-template{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .art-lista .wp-block-post-template{ grid-template-columns:minmax(0,1fr); } }

/* ====================== 5-ter. BLOCCHI PRONTI PER LE PAGINE NUOVE =========
   Sono i pattern che lo Zoo inserisce dall'editor (+ > Pattern > wf-zoo) per
   costruire una pagina senza chiamarci. Fatti di blocchi veri di WordPress,
   quindi tutto modificabile; qui solo il minimo perche' si vedano come il
   resto del sito. */
.wf-page .blk-fototesto{ gap:clamp(24px,3.4vw,48px); align-items:center; }
.wf-page .blk-fototesto .wp-block-column{ min-width:0; }
.wf-page .blk-foto img{ width:100%; height:auto; border-radius:18px; display:block; }
.wf-page .blk-fototesto h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3vw,38px); line-height:1.08; margin:6px 0 12px; }
.wf-page .blk-fototesto p{ color:var(--grigio); line-height:1.65; }
.wf-page .blk-fotogrande{ margin:0; }
.wf-page .blk-fotogrande h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4vw,48px); line-height:1.05; }
.wf-page .blk-galleria img{ border-radius:14px; }
/* i riquadri dei pattern usano gli stessi contenitori delle pagine gia' fatte:
   .grid.c3 e .info-card sono definiti piu' su, non si ripetono qui */
.wf-page .info-card > h3{ margin-top:0; }
.wf-page .cta-band .btn-row{ margin-top:18px; }
/* il pulsante "Prenota ora" dentro le card delle esperienze */
.wf-page .acard__prenota{ margin-top:12px; align-self:flex-start; }
.wf-page .acard__nota{ display:block; font-size:12.5px; color:var(--grigio); margin-top:6px; }

/* ====================== 6. STRISCIA NUMERI (count-up) ====================== */
.wf-page .stats{ background:var(--nero); color:#fff; position:relative; overflow:hidden; padding:clamp(6px,1vw,14px) 0; } /* niente doppio padding: la fascia numeri era alta il doppio (nota cliente) */
.wf-page .stats::after{ content:''; position:absolute; top:0; right:0; width:38%; height:100%; pointer-events:none;
  background:linear-gradient(120deg, transparent 42%, rgba(252,186,3,.12)); clip-path:polygon(42% 0,100% 0,100% 100%,0 100%); }
.wf-page .stats .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(var(--n,3),1fr);
  gap:clamp(10px,2vw,28px); padding:clamp(40px,5vw,58px) 28px; text-align:center; }
.wf-page .stat{ position:relative; }
.wf-page .stat .num{ font-family:var(--font-heading); font-size:clamp(40px,5vw,70px); color:var(--giallo); line-height:1; display:inline-block; }
.wf-page .stat .num::after{ content:''; display:block; width:34px; height:4px; background:var(--giallo); border-radius:3px;
  margin:13px auto 0; transform:skewX(-18deg); }
.wf-page .stat .lab{ font-weight:700; font-size:12.5px; color:#dcdcdc; margin-top:13px; letter-spacing:1.5px; text-transform:uppercase; }
.wf-page .stat:not(:last-child)::after{ content:''; position:absolute; right:-10px; top:14%; height:60%; width:2px;
  background:rgba(255,255,255,.10); transform:skewX(-12deg); }

/* ====================== 7. ACCORDION (FAQ / dettagli) ====================== */
.wf-page .acc{ display:flex; flex-direction:column; gap:14px; max-width:880px; margin:0 auto; }
.wf-page .acc.left{ margin-left:0; }
.wf-page .acc .acc-item{ background:#fff; border:1px solid var(--bordo); border-radius:16px; overflow:hidden; --edge:var(--giallo);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.wf-page .acc .acc-item:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(26,26,26,.08), 0 0 30px -10px var(--giallo); }
.wf-page .pg--dark .acc .acc-item{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); }
.wf-page .acc .acc-head{ width:100%; display:flex; align-items:center; gap:16px; padding:18px 22px; background:none;
  border:none; cursor:pointer; text-align:left; font-family:inherit; }
.wf-page .acc .acc-head:focus-visible{ outline:3px solid var(--giallo); outline-offset:-3px; }
.wf-page .acc .acc-title{ flex:1; font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:1.12rem; letter-spacing:.3px; color:var(--nero); }
.wf-page .pg--dark .acc .acc-title{ color:#fff; }
.wf-page .acc .acc-body p{ margin:0; padding:0 22px 20px; color:var(--grigio); font-size:1rem; line-height:1.65; }
.wf-page .pg--dark .acc .acc-body p{ color:rgba(255,255,255,.72); }
.wf-page .acc .acc-body p + p{ padding-top:0; }

/* ====================== 8. INFO-CARD (orari / dove / contatti) ====================== */
.wf-page .info-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.wf-page .info-grid > *{ flex:1 1 clamp(240px, 30%, 320px); max-width:360px; }
.wf-page .info-card{ position:relative; isolation:isolate; background:#fff; border:1px solid var(--bordo); border-radius:18px;
  padding:30px 28px; box-shadow:var(--shadow); --edge:var(--giallo);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; }
.wf-page .info-card:hover{ transform:translateY(-5px); box-shadow:0 24px 52px rgba(26,26,26,.12), 0 0 32px -8px var(--giallo); }
.wf-page .info-card__ico{ flex:none; width:52px; height:52px; border-radius:50%; background:rgba(252,186,3,.18);
  display:grid; place-items:center; margin-bottom:16px; box-shadow:0 0 0 6px rgba(252,186,3,.06); }
.wf-page .info-card__ico svg{ width:24px; height:24px; stroke:var(--verde-scuro); fill:none; }
.wf-page .info-card h3{ font-family:var(--font-heading); text-transform:uppercase; color:var(--nero);
  font-size:1.15rem; margin:0 0 10px; }
.wf-page .info-card p{ color:var(--grigio); font-size:1rem; line-height:1.6; margin:0 0 .5em; }
.wf-page .info-card p:last-child{ margin-bottom:0; }
.wf-page .info-card strong{ color:var(--nero); }
.wf-page .info-card a{ color:var(--verde); font-weight:700; text-decoration:underline; text-decoration-color:var(--giallo);
  text-underline-offset:3px; text-decoration-thickness:2px; }

/* ====================== 9. LISTINO PREZZI ====================== */
.wf-page .price-card{ background:#fff; border:1px solid var(--bordo); border-radius:18px; padding:30px 30px 32px;
  box-shadow:var(--shadow); }
.wf-page .price-card.feat{ border:2px solid var(--giallo); box-shadow:0 18px 44px rgba(252,186,3,.16); }
.wf-page .price-card h3{ font-family:var(--font-heading); text-transform:uppercase; color:var(--nero); font-size:1.4rem;
  margin:0 0 4px; }
.wf-page .price-card .sub{ color:var(--grigio); font-size:.95rem; margin:0 0 18px; }
.wf-page .price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px dashed var(--bordo); }
.wf-page .price-row:last-child{ border-bottom:none; }
.wf-page .price-row .pl{ color:var(--nero); font-size:1rem; }
.wf-page .price-row .pl small{ display:block; color:var(--grigio); font-size:.82rem; }
.wf-page .price-row .pr{ font-family:var(--font-heading); color:var(--verde); font-size:1.15rem; white-space:nowrap; }
.wf-page .price-row .pr.free{ color:var(--giallo-scuro); }

/* ====================== 10. CALLOUT / NOTE / IBAN ====================== */
.wf-page .callout{ background:var(--crema); border-left:4px solid var(--giallo); border-radius:0 14px 14px 0;
  padding:18px 22px; max-width:70ch; }
.wf-page .callout p{ margin:0; font-family:var(--font-accent); font-style:italic; color:var(--nero); font-size:1.05rem; line-height:1.55; }
.wf-page .pg--dark .callout{ background:rgba(255,255,255,.05); }
.wf-page .pg--dark .callout p{ color:#fff; }
.wf-page .notes{ list-style:none; padding:0; margin:0; max-width:70ch; }
.wf-page .notes li{ position:relative; padding-left:1.7rem; margin-bottom:.6rem; color:var(--grigio); line-height:1.6; }
.wf-page .notes li::before{ content:''; position:absolute; left:0; top:.55em; width:9px; height:9px;
  background:var(--giallo); border-radius:2px; transform:rotate(45deg); }
.wf-page .pg--dark .notes li{ color:rgba(255,255,255,.78); }
.wf-page .iban-box{ background:#fff; border:1px solid var(--bordo); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow);
  max-width:520px; }
.wf-page .pg--dark .iban-box{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.wf-page .iban-box .lab{ display:block; font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--giallo-scuro); margin-bottom:8px; }
.wf-page .iban-box .num{ font-family:var(--font-heading); font-size:clamp(0.95rem,4vw,1.3rem);
  color:var(--nero); letter-spacing:.5px; white-space:nowrap; }  /* l'IBAN spezzato e' un IBAN ricopiato male */
.wf-page .pg--dark .iban-box .num{ color:#fff; }
.wf-page .iban-box p{ margin:8px 0 0; color:var(--grigio); font-size:.92rem; }
.wf-page .pg--dark .iban-box p{ color:rgba(255,255,255,.7); }

/* ====================== 11. CTA BAND ====================== */
.wf-page .cta-band{ position:relative; overflow:hidden; }
.wf-page .cta-band.dark{ background:#15160d; color:#fff; }
.wf-page .cta-band.cream{ background:var(--crema); }
.wf-page .cta-band::after{ content:''; position:absolute; top:0; right:0; width:40%; height:100%; pointer-events:none;
  background:linear-gradient(120deg, transparent 44%, rgba(252,186,3,.14)); clip-path:polygon(44% 0,100% 0,100% 100%,0 100%); }
.wf-page .cta-band .wrap{ position:relative; z-index:1; text-align:center; max-width:760px; }
.wf-page .cta-band h2{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,48px); line-height:1.02; margin:0 0 16px; }
.wf-page .cta-band.dark h2{ color:#fff; }
.wf-page .cta-band p{ font-size:clamp(16px,1.4vw,18.5px); line-height:1.6; margin:0 0 28px; }
.wf-page .cta-band.dark p{ color:rgba(255,255,255,.8); }
.wf-page .cta-band.cream p{ color:var(--grigio); }
.wf-page .cta-band .btns{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ====================== 12. CALENDARIO SETTIMANALE (.sked) ======================
   Programma degli Animal Talk / Animal Experience. Sul sito attuale dello zoo il
   calendario è una IMMAGINE (invisibile a Google e agli screen reader): qui è
   markup vero. Struttura: .sked > .sked-day > .sked-row (ora + attività + tag). */
.wf-page .sked{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.wf-page .sked-day{ background:#fff; border:1px solid var(--bordo); border-radius:18px;
  padding:20px 20px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.wf-page .pg--cream .sked-day{ background:#fff; }
.wf-page .pg--dark .sked-day{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); box-shadow:none; }
.wf-page .sked-day > h3{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
  font-size:1.08rem; letter-spacing:.5px; color:var(--nero); margin:0 0 14px;
  padding-bottom:10px; border-bottom:2px solid var(--giallo); }
.wf-page .pg--dark .sked-day > h3{ color:#fff; }
.wf-page .sked-row{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline;
  padding:9px 0; border-top:1px dashed var(--bordo); }
.wf-page .sked-row:first-of-type{ border-top:0; padding-top:0; }
.wf-page .pg--dark .sked-row{ border-top-color:rgba(255,255,255,.12); }
/* ora e attivita' sono <p> e non <span>: cosi' il cliente puo' correggere
   orari e nomi dall'editor. Servono i margini a zero, il resto e' invariato
   perche' le regole vanno per classe, non per tag. */
.wf-page .sked-row > p{ margin:0; }
.wf-page .sked-time{ font-family:var(--font-heading); font-weight:400; color:var(--verde);
  font-size:.98rem; letter-spacing:.3px; white-space:nowrap; }
.wf-page .pg--dark .sked-time{ color:var(--giallo); }
.wf-page .sked-what{ color:var(--nero); font-size:.97rem; line-height:1.4; }
.wf-page .pg--dark .sked-what{ color:rgba(255,255,255,.86); }
.wf-page .sked-tags{ grid-column:2; display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.wf-page .sked-tag{ font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:3px 8px; border-radius:50px; white-space:nowrap; }
.wf-page .sked-tag.talk{ background:rgba(75,107,38,.12); color:var(--verde-scuro); }
.wf-page .sked-tag.exp{ background:rgba(252,186,3,.22); color:#7a5a00; }
.wf-page .pg--dark .sked-tag.talk{ background:rgba(255,255,255,.10); color:#cfe3b4; }
.wf-page .pg--dark .sked-tag.exp{ background:rgba(252,186,3,.20); color:var(--giallo); }
/* Ottava cella: chiude la griglia (7 giorni non riempiono 4 colonne) e porta la CTA */
.wf-page .sked-day.sked-cta{ background:var(--crema); border-color:var(--giallo); justify-content:center; }
.wf-page .sked-day.sked-cta > h3{ border-bottom-color:var(--verde); }
.wf-page .sked-day.sked-cta p{ color:var(--grigio); font-size:.95rem; line-height:1.55; margin:0 0 18px; }
.wf-page .sked-day.sked-cta .btn{ align-self:flex-start; }

/* Legenda sotto il calendario */
/* --- il calendario e' una TABELLA di WordPress ---------------------------
   Serviva che lo Zoo potesse AGGIUNGERE e TOGLIERE una riga da solo, non solo
   correggere il testo: con i <div> l'apertura e la chiusura della riga finivano
   in frammenti diversi e cancellarne una lasciava un </div> orfano. Il blocco
   tabella lo fa in modo nativo, dalla barra degli strumenti.
   La tabella e' rimessa a griglia con i CSS, cosi' il risultato a video resta
   quello di prima: ora a sinistra, attivita' accanto, tipo sotto. */
/* la tabella ha una larghezza minima sua: senza minmax(0,...) sfonda la cella
   della griglia e i sette giorni si sfalsano */
.wf-page .sked{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.wf-page .sked-day{ min-width:0; }
.wf-page .sked-tab{ margin:0; min-width:0; }
.wf-page .sked-tab table{ width:100%; border-collapse:collapse; }
.wf-page .sked-tab tr{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
  align-items:baseline; padding:9px 0; border-top:1px dashed var(--bordo); }
.wf-page .sked-tab tr:first-child{ border-top:0; padding-top:0; }
.wf-page .pg--dark .sked-tab tr{ border-top-color:rgba(255,255,255,.12); }
.wf-page .sked-tab td{ border:0; padding:0; text-align:left; }
.wf-page .sked-tab td:nth-child(1){ font-family:var(--font-heading); font-weight:400;
  color:var(--verde); font-size:.98rem; letter-spacing:.3px; white-space:nowrap; }
.wf-page .pg--dark .sked-tab td:nth-child(1){ color:var(--giallo); }
.wf-page .sked-tab td:nth-child(2){ color:var(--nero); font-size:.97rem; line-height:1.4; }
.wf-page .pg--dark .sked-tab td:nth-child(2){ color:rgba(255,255,255,.86); }
.wf-page .sked-tab td:nth-child(3){ grid-column:2; margin-top:3px; justify-self:start;
  font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:3px 8px; border-radius:50px; white-space:nowrap;
  background:rgba(75,107,38,.12); color:var(--verde-scuro); }
.wf-page .sked-tab td:nth-child(3):empty{ display:none; }
.wf-page .pg--dark .sked-tab td:nth-child(3){ background:rgba(255,255,255,.10); color:#cfe3b4; }

.wf-page .sked-legend{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--bordo); }
.wf-page .pg--dark .sked-legend{ border-top-color:rgba(255,255,255,.12); }
.wf-page .sked-legend > span{ display:inline-flex; align-items:center; gap:9px;
  color:var(--grigio); font-size:.93rem; }
.wf-page .pg--dark .sked-legend > span{ color:rgba(255,255,255,.72); }
@media (max-width:1024px){ .wf-page .sked{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .wf-page .sked{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .wf-page .sked{ grid-template-columns:minmax(0,1fr); } }

/* ====================== Utility ====================== */
.wf-page .stack > * + *{ margin-top:1.1em; }
.wf-page .mt-s{ margin-top:22px; } .wf-page .mt-m{ margin-top:38px; }
.wf-page .center{ text-align:center; }
.wf-page .btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.wf-page .btn-row.center{ justify-content:center; }

/* ====================== RESPONSIVE ====================== */
@media (max-width:900px){
  .wf-page .grid.c3, .wf-page .grid.c4{ grid-template-columns:repeat(2,1fr); }
  .wf-page .stats .wrap{ grid-template-columns:repeat(var(--n,3),1fr); }
  .wf-page .stat:not(:last-child)::after{ display:none; }
}
@media (max-width:560px){
  .wf-page .grid.c2, .wf-page .grid.c3, .wf-page .grid.c4{ grid-template-columns:1fr; }
  .wf-page .stats .wrap{ grid-template-columns:1fr 1fr; gap:24px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .wf-page .split, .wf-page .fcard, .wf-page .acard, .wf-page .info-card, .wf-page .acc .acc-item{ transition:none !important; }
  .wf-page .split__img, .wf-page .page-hero .ph-img, .wf-page .acard__photo{ animation:none !important; }
  .wf-page .fcard::before, .wf-page .acard::before{ transition:none; }
  .wf-page .fcard:hover::before, .wf-page .acard:hover::before{ animation:none; }
}

/* Galleria "Momenti" (pagina Attività e Laboratori) */
.att-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; }
.att-gallery figure{ margin:0; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.att-gallery figure span{ display:block; aspect-ratio:4/3; background-size:cover; background-position:center; transition:transform .6s ease; }
.att-gallery figure:hover span{ transform:scale(1.05); }
@media (max-width:820px){ .att-gallery{ grid-template-columns:repeat(2,1fr); } }

/* ===== Biglietteria WooCommerce raggruppata (pagina "Acquista i biglietti") ===== */
.shop-group{ padding-bottom:6px; }
/* Catalogo vuoto: lo shortcode [products] emette un <div class="woocommerce"> senza
   nulla dentro, e la fascia crema restava una striscia alta ~250px vuota fra la
   sezione bianca e la CTA. Si nasconde da sé, e ricompare appena i prodotti ci sono. */
.wf-page .shop-group:not(:has(ul.products)){ display:none; }

/* ===== Pagine proprie di WooCommerce (negozio, carrello, pagamento, mio-account) =====
   Non hanno le nostre .pg, quindi il contenuto arrivava a filo di header e footer
   (0px di stacco). Qui si dà loro lo stesso respiro delle pagine del tema. */
.woocommerce-page .wp-block-post-content,
.woocommerce-page main > .entry-content,
body.woocommerce-page main{ padding-block:clamp(40px,6vw,72px); }
.woocommerce-page .woocommerce{ max-width:var(--maxw); margin-inline:auto; }
.woocommerce-page .wp-block-post-title,
.woocommerce-page .entry-title{ max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
.page .woocommerce{ max-width:var(--maxw); margin:0 auto; padding:6px 28px 40px; }
.page .woocommerce .woocommerce-result-count,
.page .woocommerce .woocommerce-ordering{ display:none; }        /* niente "showing/ordina" tra i gruppi */
.page .woocommerce ul.products{ display:grid !important; gap:20px; margin:0; padding:0; }
.page .woocommerce ul.products.columns-4{ grid-template-columns:repeat(4,1fr); }
.page .woocommerce ul.products.columns-3{ grid-template-columns:repeat(3,1fr); }
/* WooCommerce mette un clearfix ::before/::after con display:table sulla lista prodotti.
   Con display:grid quei due pseudo-elementi diventano CELLE della griglia: la prima card
   slittava di una colonna e l'ultima finiva a capo da sola. Con grid il clearfix non serve. */
.page .woocommerce ul.products::before,
.page .woocommerce ul.products::after{ content:none !important; display:none !important; }
.page .woocommerce ul.products li.product{ width:auto !important; margin:0 !important; float:none !important;
  text-align:center; background:#fff; border:1px solid var(--bordo); border-radius:16px; padding:20px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); transition:transform .25s, box-shadow .25s; }
.page .woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.page .woocommerce ul.products li.product img{ border-radius:12px; margin-bottom:12px; }
.page .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-heading);
  text-transform:uppercase; font-size:17px; line-height:1.15; padding:.4em 0; color:var(--nero); }
.page .woocommerce ul.products li.product .price{ color:var(--nero); font-weight:700; font-size:20px; margin-bottom:12px; display:block; }
.page .woocommerce ul.products li.product .price .amount{ color:var(--verde-scuro); }
/* i pulsanti "Acquista" ballavano: quando il titolo del prodotto va a due righe
   il bottone scendeva rispetto ai vicini, e le card hanno tutte la stessa
   altezza quindi si notava. Ora la card e' una colonna e il bottone e' spinto
   in fondo, cosi' sono tutti sulla stessa linea. */
.page .woocommerce ul.products li.product{ display:flex; flex-direction:column; }
.page .woocommerce ul.products li.product .button{ margin-top:auto; }
.page .woocommerce a.button, .page .woocommerce a.added_to_cart{ display:inline-block; background:var(--giallo); color:var(--nero) !important;
  border-radius:50px; font-family:var(--font-body); font-weight:700; padding:.7em 1.5em; transition:transform .2s, background .2s; }
.page .woocommerce a.button:hover{ background:var(--giallo-scuro); transform:translateY(-2px); }
@media (max-width:820px){
  .page .woocommerce ul.products.columns-4,
  .page .woocommerce ul.products.columns-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .page .woocommerce ul.products.columns-4,
  .page .woocommerce ul.products.columns-3{ grid-template-columns:1fr; }
}

/* Griglia biglietteria robusta (riempie e centra, a prescindere dalle classi WC) */
.page .woocommerce ul.products{ grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)) !important; justify-content:center; }

/* Griglia biglietteria: auto-fit riempie l'intera riga (niente colonne vuote a sinistra) */
.page .woocommerce ul.products{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important; justify-content:stretch; }

/* Biglietteria: card più compatte + 2 colonne su mobile (niente cardoni giganti) */
.page .woocommerce ul.products li.product img{ aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; }
@media (max-width:640px){
  .page .woocommerce{ padding:6px 14px 30px; }
  .page .woocommerce ul.products{ grid-template-columns:1fr 1fr !important; gap:12px; }
  .page .woocommerce ul.products li.product{ padding:12px 10px; border-radius:14px; }
  .page .woocommerce ul.products li.product img{ aspect-ratio:1/1; margin-bottom:8px; }
  .page .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:12.5px; padding:.3em 0; }
  .page .woocommerce ul.products li.product .price{ font-size:15px; margin-bottom:8px; }
  .page .woocommerce a.button, .page .woocommerce a.added_to_cart{ padding:.5em .9em; font-size:12.5px; }
}

/* Biglietteria: card DECISAMENTE più compatte (immagini piccole, padding ridotto) */
.page .woocommerce ul.products{ gap:16px !important; }
.page .woocommerce ul.products li.product{ padding:14px 12px !important; }
.page .woocommerce ul.products li.product img{ aspect-ratio:4/3 !important; object-fit:cover; max-height:190px; margin-bottom:10px; }
.page .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:15px !important; }
.page .woocommerce ul.products li.product .price{ font-size:17px !important; margin-bottom:8px; }
@media (max-width:640px){
  .page .woocommerce ul.products{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .page .woocommerce ul.products li.product{ padding:10px 8px !important; }
  .page .woocommerce ul.products li.product img{ aspect-ratio:4/3 !important; max-height:110px; margin-bottom:6px; }
  .page .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:12px !important; }
  .page .woocommerce ul.products li.product .price{ font-size:14px !important; margin-bottom:6px; }
  .page .woocommerce a.button, .page .woocommerce a.added_to_cart{ padding:.45em .8em !important; font-size:12px !important; }
}

/* FIX DEFINITIVO griglia biglietteria: colonne pulite, allineate a sinistra, niente offset */
.page .woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:16px !important; width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 !important;
  justify-content:stretch !important; justify-items:stretch !important;
}
.page .woocommerce ul.products li.product{
  width:auto !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; float:none !important; clear:none !important;
}
@media(max-width:900px){ .page .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media(max-width:640px){ .page .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }

/* Foto prodotto: niente icona lente / zoom (l'utente non la vuole) */
.woocommerce-product-gallery__trigger{ display:none !important; }
.woocommerce-product-gallery img{ cursor:default !important; }

/* "IVA incl." sotto i prezzi dei biglietti: discreto, non deve competere
   con la cifra (vedi il filtro in functions.php). */
.wf-iva{ display:block; font-size:.72em; font-weight:400; opacity:.62; letter-spacing:.02em; margin-top:2px; }

/* Carrello: il numero sull'icona in cima alla cassa, e il rimando sotto il
   riepilogo. Senza questi due, dal pagamento non si tornava piu' indietro. */
.wc-block-cart-link{ position:relative; display:inline-flex; margin-right:10px; }  /* il margine fa spazio al pallino: sul telefono l'icona tocca il bordo
     e il numero sporgeva fuori, facendo scorrere la pagina di lato */
.wf-carrello-n{
	position:absolute; top:-6px; right:-8px; min-width:19px; height:19px;
	display:flex; align-items:center; justify-content:center;
	padding:0 5px; border-radius:999px;
	background:var(--giallo,#f5b800); color:#1a1a1a;
	font-size:11px; font-weight:700; line-height:1;
}
.wf-modifica-carrello{ margin:14px 0 0; text-align:center; font-size:14px; }
.wf-modifica-carrello a{ color:inherit; text-decoration:underline; }

/* Cassa e carrello si aprivano con mezzo schermo bianco: due contenitori
   annidati portavano ognuno 72px di aria in cima, piu' 24 di margine. Ne resta
   uno solo, come su tutte le altre pagine. */
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .entry-content{ padding-top:0; margin-top:0; }

/* Biglietteria: la fascia si apriva con mezzo schermo di crema vuota, e il
   sottotitolo era un blocco grande in corsivo che prendeva quattro righe. Ora
   la fascia parte subito sotto l'immagine grande e il sottotitolo e' una riga
   di servizio, della stessa misura di quella sotto il titolo grande. */
.wf-page .shop-group{ padding-top:clamp(34px,4vw,54px); }
.wf-page .shop-group .pg-head{ margin-bottom:12px; }
.wf-page .shop-group .pg-lead{
	font-family:inherit; font-style:normal; color:var(--grigio);
	font-size:clamp(16px,1.4vw,18.5px); line-height:1.6;
	max-width:58ch; margin:0 auto clamp(26px,3vw,36px);
}

/* Via la faccina triste del carrello vuoto: WooCommerce la disegna come icona
   davanti al titolo (classe with-empty-cart-icon). Resta la frase, che basta e
   avanza. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{ display:none !important; content:none !important; }
.wc-block-cart__empty-cart__title{ margin-top:0; }

/* La foto del biglietto sta ferma: niente ingrandimento al passaggio del mouse
   ne' cursore a lente. Vale sulla scheda e nella griglia. */
.woocommerce-product-gallery,
.woocommerce-product-gallery img,
.woocommerce-product-gallery__image,
.page .woocommerce ul.products li.product img{
	transform:none !important; transition:none !important; cursor:default !important;
}
.woocommerce-product-gallery .zoomImg,
.woocommerce-product-gallery__trigger{ display:none !important; }

/* Le griglie di prodotti a blocchi (i suggerimenti sul carrello vuoto) portano
   un margine negativo di 8px per lato che sul telefono faceva scorrere la
   pagina di lato. Il margine serve solo quando le colonne sono piu' di una. */
.wc-block-grid__products{ max-width:100%; }
@media (max-width:640px){
	.wc-block-grid__products{ margin-left:0; margin-right:0; }
	.wc-block-grid__product{ max-width:100%; }
}

/* Il calendario eventi era rimasto del blu di fabbrica del plugin (#334aff):
   pulsante Cerca, barrette degli eventi, link. Il plugin espone i suoi colori
   come variabili, quindi basta ridefinirle coi nostri. Pulsanti gialli con
   testo nero come nel resto del sito, link e accenti sul verde scuro perche'
   il giallo su bianco non si legge. */
:root{
	--tec-color-accent-primary:var(--verde-scuro,#3a5320);
	--tec-color-accent-primary-hover:var(--verde,#4b6b26);
	--tec-color-accent-primary-active:var(--verde,#4b6b26);
	--tec-color-accent-primary-background:rgba(75,107,38,.08);
	--tec-color-button-primary:var(--giallo,#fcba03);
	--tec-color-button-primary-hover:var(--giallo-scuro,#e0a400);
	--tec-color-button-primary-active:var(--giallo-scuro,#e0a400);
	--tec-color-button-primary-background:var(--giallo,#fcba03);
	--tec-color-link-accent:var(--verde-scuro,#3a5320);
	--tec-color-link-accent-hover:var(--verde,#4b6b26);
}
.tec-page .tribe-events-c-search__button,
.tec-page .tribe-events-c-search__button:hover,
.tec-page .tribe-events-c-search__button:focus{ color:var(--nero,#1a1a1a) !important; }
/* 'Iscriviti al calendario' giallo su bianco non si legge: verde scuro */
.tec-page .tribe-events-c-subscribe-dropdown__button-text,
.tec-page .tribe-events-c-subscribe-dropdown__button,
.tec-page .tribe-events-c-ical__link{ color:var(--verde-scuro,#3a5320) !important; border-color:var(--verde-scuro,#3a5320) !important; }
.tec-page .tribe-events-calendar-month__calendar-event-multiday-bar{ background:rgba(75,107,38,.22); }

/* Sezione senza foto (il pinguino di Black & White non e' ancora arrivato):
   il testo prende tutta la larghezza invece di lasciare il riquadro rigato. */
.wf-page .split--solo{ grid-template-columns:1fr; }
.wf-page .split--solo .split__media{ display:none; }

/* Il titolo della scheda evento usa il font dei titoli del sito, non quello
   di sistema del plugin. */
.tec-page .tribe-events-single-event-title{
	font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
	font-size:clamp(30px,4.4vw,48px); line-height:1.05; letter-spacing:.5px; color:var(--nero);
}

/* Schede prodotto: via la riga tecnica 'SKU / Category' (per i biglietti non
   dice niente al cliente ed esce mezza in inglese). */
body.single-product .product_meta{ display:none !important; }

/* 'IVA incl.' resta attaccato al prezzo, non va a capo da solo. */
.wf-iva{ white-space:nowrap; }

/* Prodotti correlati (scheda prodotto): card in colonna e pulsanti allineati
   in fondo, come nella griglia della biglietteria. */
body.single-product ul.products li.product{ display:flex; flex-direction:column; }
body.single-product ul.products li.product .button{ margin-top:auto; }

@media (max-width:640px){
	/* i pulsanti delle card restano su una riga anche col testo lungo */
	.page .woocommerce ul.products li.product .button{ padding:12px 8px; font-size:15px; }
}

/* In cima al calendario, sul telefono, usciva '8/2026': si mostra il nome del
   mese, che il markup ha gia' pronto nella variante da schermo grande. */
.tec-page .tribe-events-c-top-bar__datepicker-mobile{ display:none !important; }
.tec-page .tribe-events-c-top-bar__datepicker-desktop,
.tec-page .tribe-events-c-top-bar__datepicker-desktop.tribe-common-a11y-hidden{
	display:inline !important; position:static !important; width:auto !important;
	height:auto !important; clip:auto !important; clip-path:none !important;
	margin:0 !important; padding:0 !important; overflow:visible !important;
	white-space:normal !important; border:0 !important;
}

/* I separatori di data dell'elenco eventi arrivano dal plugin col mese
   maiuscolo: in italiano va minuscolo. */
.tec-page .tribe-events-calendar-list__month-separator-text,
.tec-page .tribe-events-calendar-day__time-separator-text{ text-transform:lowercase; }

/* Scheda prodotto sul telefono: il blocco d'acquisto toccava il bordo. */
@media (max-width:768px){
	body.single-product div.product{ padding-left:18px; padding-right:18px; }
}

/* Sezione compatta: stessa fascia ma con meta' dell'aria sopra e sotto. */
.wf-page .pg--slim{ padding-top:clamp(26px,3vw,48px); padding-bottom:clamp(26px,3vw,48px); }

/* Il riquadro del biglietto combinato respirava addosso alla foto qui sopra. */
.wf-page .single.wide{ margin-top:clamp(30px,4vw,52px); }

/* Statistiche in numero dispari sul telefono: l'ultima non resta orfana a
   sinistra, prende tutta la riga e si centra. */
@media (max-width:640px){
	.wf-page .stats .stat:last-child:nth-child(odd){ grid-column:1/-1; }
	/* il titolo del carrello respirava addosso al contenuto */
	body.woocommerce-cart h1.wp-block-post-title{ margin-bottom:18px; }
}

/* I titoli sulle fasce fotografiche reggono anche dove la foto e' chiara. */
.wf-page .imgband .ib-inner h2{ text-shadow:0 2px 14px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.8); }

/* ============================================================
   Foto e pulsanti diventati blocchi VERI di Gutenberg (15 ago 2026).
   Prima vivevano nel markup protetto: dal pannello non si potevano ne'
   sostituire ne' modificare i link. Ora sono un'Immagine e dei Pulsanti
   normali, quindi il resto del sito si comporta com'era prima ma da qui
   in poi sono editabili.
   ============================================================ */

/* La foto era uno <span> con lo sfondo dipinto via CSS; ora e' un
   <figure><img></figure> vero. Stesso posto, stesso riempimento. */
.wf-page figure.split__img{ position:absolute; inset:0; margin:0; }
.wf-page figure.split__img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* I pulsanti (fasce di chiusura, hero, fine delle sezioni foto+testo) erano
   <a class="btn ..."> scritti a mano; ora sono Pulsanti veri di Gutenberg,
   con la classe sul contenitore invece che sul link diretto. Stesso aspetto
   di sempre, dovunque compaiano: qui la regola base + le quattro varianti di
   colore valgono su TUTTO il sito, non solo nelle fasce di chiusura. */
.wf-page .cta-band .wp-block-buttons.btns{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.wf-page .wp-block-button .wp-block-button__link{
	display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:50px;
	font-family:var(--font-body); font-weight:700; font-size:16px; border:none; cursor:pointer;
	transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s;
	letter-spacing:.2px; text-decoration:none; white-space:nowrap;
}
.wf-page .wp-block-button.btn-primary .wp-block-button__link{ background:var(--giallo); color:var(--nero); box-shadow:0 6px 18px rgba(252,186,3,.35); }
.wf-page .wp-block-button.btn-primary .wp-block-button__link:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); background:var(--giallo-scuro); }
.wf-page .wp-block-button.btn-outline-w .wp-block-button__link{ background:transparent; color:#fff; border:2px solid #fff; }
.wf-page .wp-block-button.btn-outline-w .wp-block-button__link:hover{ background:#fff; color:var(--verde-scuro); transform:translateY(-3px); }
.wf-page .wp-block-button.btn-green .wp-block-button__link{ background:var(--verde); color:#fff; box-shadow:0 6px 18px rgba(75,107,38,.3); }
.wf-page .wp-block-button.btn-green .wp-block-button__link:hover{ transform:translateY(-3px); background:var(--verde-scuro); }
.wf-page .wp-block-button.btn-ghost .wp-block-button__link{ background:transparent; color:var(--nero); border:2px solid var(--nero); }
.wf-page .wp-block-button.btn-ghost .wp-block-button__link:hover{ transform:translateY(-3px); background:var(--nero); color:var(--bianco); }

/* I pulsanti singoli sono ora avvolti in un contenitore in piu' (Gutenberg
   vuole sempre .wp-block-buttons attorno a .wp-block-button). Il contenitore
   prende il posto che aveva il vecchio <a class="btn">: stesse regole di
   posizione, spostate dal link al nuovo contenitore. */
.wf-page .split__body .wp-block-buttons{ margin-top:22px; align-self:flex-start; }
.wf-page .sked-day.sked-cta .wp-block-buttons{ align-self:flex-start; }
.hp-col .wp-block-buttons{ align-self:center !important; }
.hp-col .wp-block-buttons{ align-self:flex-start; margin-top:auto; }

@media (max-width:640px){
	/* stessa regola gia' in vigore per i pulsanti scritti a mano: l'etichetta
	   lunga va a capo invece di sbordare dalla card */
	.wf-page .wp-block-button .wp-block-button__link{
		padding:12px 22px; font-size:15px; white-space:normal; max-width:100%;
		text-align:center; justify-content:center;
	}
}

/* Il contenitore del Pulsante non disegna niente: le classi colore
   (btn-primary, btn-outline-w...) stanno sul contenitore per WordPress, ma
   l'aspetto appartiene SOLO al link interno. Senza questa regola il bordo e lo
   sfondo comparivano due volte: pillola dentro, rettangolo fuori (visto dallo
   Zoo sul pulsante 'Sostieni la ricerca'). */
.wf-page .wp-block-button.btn-primary,
.wf-page .wp-block-button.btn-outline-w,
.wf-page .wp-block-button.btn-green,
.wf-page .wp-block-button.btn-ghost{
	background:transparent !important; border:none !important;
	box-shadow:none !important; padding:0 !important; color:inherit;
}

/* I titoli delle due famiglie di biglietti nella biglietteria. */
.wf-page .shop-titolo{ font-family:var(--font-heading); font-weight:400; text-transform:uppercase;
	font-size:clamp(20px,2.2vw,26px); color:var(--nero); margin:34px 0 6px; text-align:left; }
.wf-page .shop-titolo:first-of-type{ margin-top:0; }

/* Il codice QR del padrinato, dentro il riquadro IBAN. */
.wf-page .iban-box .iban-qr{ margin:16px 0 0; }
.wf-page .iban-box .iban-qr img{ width:150px; height:150px; border:1px solid var(--bordo); border-radius:10px; background:#fff; padding:6px; }
.wf-page .iban-box .iban-qr-nota{ font-size:.85rem; color:var(--grigio); margin:8px 0 0; }

/* Testate e fasce fotografiche: da sfondi dipinti a IMMAGINI VERE, cliccabili
   e sostituibili dall'editor come tutte le altre. Le regole storiche su
   .ph-img/.ib-img (posizione, scala, filtri, kenburns) valgono uguali perche'
   la classe e' rimasta la stessa: qui si aggiunge solo il riempimento. */
.page-hero figure.ph-img, .wf-page .imgband figure.ib-img{ margin:0; }
.page-hero figure.ph-img img, .wf-page .imgband figure.ib-img img{
	width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
figure.pos-y18 img{ object-position:50% 18%; }   /* il leopardo di Contatti, inquadrato sul muso */
figure.pos-y22 img{ object-position:50% 22%; }   /* la fascia di Bringing Species Back To Color */

/* Il modulo Scrivici: campi puliti e pulsante del brand. */
.wf-page .wf-modulo-box{ background:#fff; border:1px solid var(--bordo); border-radius:18px;
	padding:clamp(22px,3vw,36px); box-shadow:var(--shadow); max-width:640px; margin:0 auto; }
.wf-page .wpforms-field input[type=text], .wf-page .wpforms-field input[type=email],
.wf-page .wpforms-field textarea{
	width:100%; border:1px solid var(--bordo); border-radius:12px; padding:12px 14px;
	font-family:var(--font-body); font-size:16px; background:var(--crema); color:var(--nero); }
.wf-page .wpforms-field label.wpforms-field-label{ font-weight:700; font-size:14px; margin-bottom:6px; display:block; color:var(--nero); }
.wf-page button.wpforms-submit{
	background:var(--giallo) !important; color:var(--nero) !important; border:none !important;
	border-radius:50px !important; padding:15px 30px !important; font-family:var(--font-body) !important;
	font-weight:700 !important; font-size:16px !important; cursor:pointer;
	box-shadow:0 6px 18px rgba(252,186,3,.35); transition:transform .25s, background .25s; }
.wf-page button.wpforms-submit:hover{ transform:translateY(-3px); background:var(--giallo-scuro) !important; }
.wf-page .wpforms-confirmation-container-full{ background:var(--crema); border:1px solid var(--bordo);
	border-radius:12px; font-family:var(--font-body); }

/* Le card degli sconti: logo in alto, titolo, condizione. */
.wf-page .sconti-grid{ margin-bottom:26px; }
.wf-page .sconto-card{ display:flex; flex-direction:column; }
.wf-page .sconto-card .sconto-logo{ margin:0 0 16px; height:92px; display:flex; align-items:center; }
.wf-page .sconto-card .sconto-logo img{ max-height:92px; width:auto; max-width:100%; object-fit:contain; }
.wf-page .sconto-card h3{ min-height:0; margin:0 0 8px; }
.wf-page .nota-sconti{ font-size:.92rem; color:var(--grigio); max-width:70ch; margin:0 auto; text-align:center; }

/* ------------------------------------------------------------------
   SOPRATITOLI: da HTML grezzo a testo modificabile
   Le scritte piccole sopra i titoli ("Biglietti e visite", "La tua
   visita") erano <span> chiusi in un blocco HTML: sul sito si vedevano,
   ma nell'editor erano codice e lo Zoo non poteva cambiarle. Ora sono
   Paragrafi veri, cliccabili come ogni altro testo.

   Perche' servono queste righe: diventando <p> finiscono sotto regole
   scritte per i paragrafi di quella zona, per esempio
   ".wf-page .pg-head p", che ha piu' peso di ".wf-page .pg-kicker" e
   quindi vinceva imponendo corpo 18.5px, colore grigio e margini a zero.
   Il sopratitolo diventava un paragrafo qualunque e tutta la sezione si
   spostava. Qui gli stessi valori di sempre vengono riscritti con il
   peso giusto, aggiungendo l'interlinea che lo <span> ereditava (1.65).
   ------------------------------------------------------------------ */
.wf-page p.pg-kicker,
.wf-home p.pg-kicker{
	display:block; color:var(--giallo-scuro); font-weight:700; letter-spacing:2.5px;
	text-transform:uppercase; font-size:13px; line-height:1.65; margin:0 0 14px;
}
.wf-page .pg--dark p.pg-kicker{ color:var(--giallo); }
.wf-page .imgband p.pg-kicker{ color:var(--giallo); margin-bottom:12px; }

.page-hero p.ph-eyebrow{
	display:inline-block; font-family:var(--font-accent); font-style:italic;
	font-size:clamp(15px,1.5vw,20px); color:var(--giallo);
	background:rgba(0,0,0,.48); padding:4px 14px; border-radius:999px;
	text-shadow:0 1px 3px rgba(0,0,0,.9);
	line-height:1.65; margin:0 0 12px;
}

.wf-page p.split__eyebrow{
	display:block; font-weight:700; font-size:12px; letter-spacing:2.5px;
	text-transform:uppercase; color:var(--giallo-scuro); line-height:1.65; margin:0 0 12px;
}
/* Nella colonna di testo il sopratitolo e' rimasto l'unico paragrafo diretto
   (gli altri il JS li raccoglie nel gruppo del "Leggi tutto"), quindi cadeva
   sotto ".split__body p:last-of-type", che toglie il margine sotto all'ultimo
   capoverso. Gli va restituito il suo. */
.wf-page .split__body p.split__eyebrow,
.wf-page .split__body p.split__eyebrow:last-of-type{ margin:0 0 12px; }
.wf-page .split.green p.split__eyebrow{ color:var(--verde); }

/* le tre varianti della home */
.section-head p.kicker{
	display:block; color:var(--giallo-scuro); font-weight:700; letter-spacing:2px;
	text-transform:uppercase; font-size:14px; line-height:1.65; margin:0 0 14px;
}
p.vt-kicker{
	display:block; font-weight:700; font-size:13px; letter-spacing:2.5px;
	text-transform:uppercase; color:var(--giallo-scuro); line-height:1.65; margin:0 0 12px;
}
.padr-hero p.padr-eyebrow{
	display:block; font-family:var(--font-accent); font-style:italic;
	font-size:clamp(16px,1.5vw,20px); color:var(--giallo); line-height:1.65;
	margin:0 0 16px; text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* Il numero di conto era testo nudo dentro un blocco HTML: ora e' un paragrafo
   vero, cosi' lo Zoo puo' correggerlo se cambia banca. Dentro il riquadro pero'
   c'e' gia' ".iban-box p" (pensata per la riga della banca, sotto), che lo
   rimpiccioliva e gli aggiungeva un margine: il numero riprende il corpo grande
   del suo contenitore. */
.wf-page .iban-box .num p{ font:inherit; letter-spacing:inherit; color:inherit; margin:0; }
/* stessa cosa per l'etichetta "IBAN": era uno <span>, e da paragrafo si
   prendeva gli 8px di stacco pensati per la riga della banca. */
.wf-page .iban-box p.lab{ margin:0 0 8px; }

/* Le foto delle schede (Talk e Animal Experience) erano sfondi dipinti via CSS
   dentro un blocco HTML: non si potevano cambiare dall'editor. Ora sono
   immagini vere, sostituibili con un clic come tutte le altre. Stesso
   trattamento gia' usato per le foto delle sezioni (figure.split__img). */
.wf-page figure.acard__photo{ margin:0; overflow:hidden; }
.wf-page figure.acard__photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* L'etichetta "Gratuito" era uno <span>: da paragrafo non deve prendere i
   margini di serie ne' diventare larga quanto la card. */
.wf-page p.acard__badge{ margin:0; }
/* Nome scientifico, prezzo e nota della scheda erano <span>: da paragrafi
   finiscono sotto ".acard__body p", che azzera i margini, e la scheda si
   accorciava. Qui riprendono gli stacchi che hanno sempre avuto. */
.wf-page .acard__body p.acard__sci{ margin:0 0 10px; line-height:1.65; }
.wf-page .acard__body p.acard__price{ align-self:flex-start; margin-top:auto; padding-top:12px;
	line-height:1.65; font-size:1.1rem; font-family:var(--font-heading); color:var(--verde); }
.wf-page .acard__body p.acard__nota{ margin-top:6px; }

/* ------------------------------------------------------------------
   PULSANTI NELLE PAGINE DEL NEGOZIO (carrello, pagamento, account)
   Quelle pagine non hanno ne' il contenitore .wf-page ne' .wf-home, quindi
   restavano fuori dalle regole dei pulsanti: il riquadro si dipingeva da
   solo e dentro restava il pulsante di serie di WordPress, squadrato.
   E' lo stesso difetto visto sulla home. Qui le regole valgono ovunque:
   quelle con .wf-page/.wf-home pesano di piu' e continuano a comandare.
   ------------------------------------------------------------------ */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-outline-w .wp-block-button__link,
.wp-block-button.btn-green .wp-block-button__link,
.wp-block-button.btn-ghost .wp-block-button__link{
	display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:50px;
	font-family:var(--font-body); font-weight:700; font-size:16px; border:none; cursor:pointer;
	letter-spacing:.2px; text-decoration:none;
}
.wp-block-button.btn-primary .wp-block-button__link{ background:var(--giallo); color:var(--nero); box-shadow:0 6px 18px rgba(252,186,3,.35); }
.wp-block-button.btn-green .wp-block-button__link{ background:var(--verde); color:#fff; }
.wp-block-button.btn-ghost .wp-block-button__link{ background:transparent; color:var(--nero); border:2px solid var(--nero); }
.wp-block-button.btn-primary,
.wp-block-button.btn-outline-w,
.wp-block-button.btn-green,
.wp-block-button.btn-ghost{
	background:transparent !important; border:none !important;
	box-shadow:none !important; padding:0 !important; color:inherit;
}

/* Il carrello vuoto: il messaggio deve leggersi prima dei prodotti sotto. */
.wc-block-cart__empty-cart__title{ font-size:clamp(24px,3vw,34px) !important; margin-bottom:10px; }
.carrello-vuoto-testo{ max-width:56ch; margin:0 auto 22px; color:var(--grigio); }

/* I disegni di progetto in "Il futuro dello zoo".
   Devono leggersi come disegni, non come fotografie di aree esistenti: da qui
   l'etichetta sopra e la didascalia sotto, e il bordo chiaro che stacca
   l'immagine dal fondo della pagina. La regola vale anche senza il prefisso
   .wf-page perche' i blocchi immagine di WordPress hanno regole proprie che
   altrimenti vincono. */
.frend{ margin:26px 0 6px; }
.frend p.frend__tag{
  display:inline-block; margin:0 0 10px; padding:4px 12px; border-radius:999px;
  background:var(--giallo); color:var(--nero);
  font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; line-height:1.65;
}
.frend figure.frend__img{ margin:0; }
.frend figure.frend__img img{
  width:100%; height:auto; display:block; border-radius:14px;
  border:1px solid var(--bordo, #ece3cf); box-shadow:0 8px 26px rgba(0,0,0,.10);
}
.frend p.frend__cap{
  margin:10px 0 0; font-size:14px; line-height:1.6; color:var(--grigio);
  font-family:var(--font-accent); font-style:italic;
}
/* La premessa in cima: chiarisce che sono progetti, non lavori in corso. */
.wf-page p.pg-nota{
  max-width:70ch; margin:14px 0 0; padding:12px 16px;
  border-left:3px solid var(--giallo); background:rgba(252,186,3,.08);
  border-radius:0 10px 10px 0; font-size:15px; line-height:1.7; color:var(--grigio);
}