/* ============================================================
   ZENITH — IL MONDO: il foglio della striscia di collegamento
   11 settembre 2026

   Sta in un file suo (e non dentro zenith-sito.css) perche' la
   pagina degli inviti digitali viaggia da sola — si manda a chi
   crea l'invito — e non carica il vestito del sito. Cosi' la
   striscia e' identica ovunque senza portarsi dietro altro.
   Usa gli stessi nomi di colore del sito (--oro, --ink, ...).
   ============================================================ */

/* ============================================================
   IL MONDO ZENITH — la striscia che collega TUTTE le pagine
   ------------------------------------------------------------
   Sta in fondo a ogni pagina, identica ovunque. Da qualunque
   punto del sito si raggiunge qualunque altro in UN clic:
   e' questo che rende il sito una piattaforma e non cinque
   pagine che si somigliano.

   IL PUNTO DI INNESTO: una pagina nuova = una tessera in piu'
   nel blocco <nav class="mondo">, e si aggiunge in ogni pagina
   copiando la stessa riga. La tessera della pagina in cui sei
   si marca con aria-current="page" e si spegne da sola.
   ============================================================ */
.mondo-sez{background:var(--bianco);border-top:1px solid var(--oro-ch);
  border-bottom:1px solid var(--oro-ch);padding:46px 0 50px;position:relative;overflow:hidden}
.mondo-sez::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,162,39,.12),rgba(201,162,39,0) 58%)}
.mondo-sez > *{position:relative}
.mondo-tit{text-align:center;margin:0 auto 26px;max-width:58ch}
.mondo-tit h2{font-family:var(--titoli);font-size:clamp(1.7rem,4vw,2.3rem);font-weight:600;
  margin:0 0 7px;line-height:1.16;text-wrap:balance}
.mondo-tit p{margin:0;color:var(--grigio);font-size:.93rem}
.mondo-tit p b{color:var(--ink);font-weight:600}

.mondo{display:grid;gap:12px;grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){ .mondo{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .mondo{grid-template-columns:repeat(2,1fr)} }
@media (max-width:380px){ .mondo{grid-template-columns:1fr} }

.mondo a{display:block;text-decoration:none;color:inherit;background:var(--bianco);
  border:1px solid var(--linea-g);border-radius:15px;padding:18px 15px 16px;text-align:center;
  position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(29,26,22,.03);
  transition:transform .28s cubic-bezier(.22,.8,.28,1),box-shadow .28s ease,border-color .28s ease}
.mondo a::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--oro-ch),var(--oro),var(--oro-sc));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.8,.28,1)}
.mondo a:hover,.mondo a:focus-visible{transform:translateY(-5px);border-color:var(--linea);
  box-shadow:0 16px 36px rgba(29,26,22,.10)}
.mondo a:hover::before,.mondo a:focus-visible::before{transform:scaleX(1)}
.mondo .seg{width:38px;height:38px;margin:0 auto 10px;border-radius:11px;background:var(--oro-sf);
  border:1px solid var(--linea);display:grid;place-items:center;color:var(--oro-sc);
  transition:background .28s ease}
.mondo a:hover .seg{background:var(--oro-ch)}
.mondo .seg svg{width:20px;height:20px;display:block}
.mondo .n{font-family:var(--titoli);font-size:1.1rem;font-weight:600;display:block;line-height:1.22}
.mondo .d{font-size:.73rem;color:var(--grigio);display:block;margin-top:4px;line-height:1.45}
.mondo .q{font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-sc);
  font-weight:700;display:block;margin-top:9px}
/* la tessera della pagina in cui sei: si spegne, non si clicca */
.mondo a[aria-current="page"]{background:var(--oro-sf);border-color:var(--linea);
  pointer-events:none;box-shadow:none}
.mondo a[aria-current="page"] .q{color:var(--ink)}
.mondo a[aria-current="page"] .seg{background:var(--bianco)}

/* la riga sotto la mappa: le due strade che restano */
.mondo-coda{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}

/* ---- il gruppo "le altre pagine" dentro al menu laterale ---- */
.menu-lato .gruppo{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio-ch);font-weight:700;margin:0 0 6px;padding:0 2px}
.menu-lato a.voce[aria-current="page"]{background:var(--oro-sf);border-color:var(--linea);
  pointer-events:none}

/* ---- le briciole (dove sono) ---- */
.briciole{font-size:.72rem;color:var(--grigio-ch);padding:14px 0 0;letter-spacing:.03em}
.briciole a{color:var(--grigio);text-decoration:none}
.briciole a:hover{color:var(--oro-sc);text-decoration:underline}
.briciole span{margin:0 .4rem;opacity:.6}
.briciole b{color:var(--ink);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .mondo a,.mondo .seg{transition:none}
  .mondo a:hover{transform:none}
}
