/* ============================================================
   Forchetta Anonima — stile v2 ("osiamo")
   Palette dal logo: crema del cerchio, terracotta della
   forchetta, nero della maschera, verde oliva della foglia.
   Interazioni: ticker, reveal allo scroll, timbro che si
   stampa, radar animato. Tutto CSS + 40 righe di JS vanilla.
   ============================================================ */

:root {
  --carbone: #171310;
  --fumo: #201b17;
  --cenere: #302823;
  --crema: #f5eee3;
  --sabbia: #a99c8d;
  --terra: #c2603a;
  --terra-chiaro: #d97b52;
  --oliva: #6d8a48;
  --vino: #a23327;

  --font-display: "Fraunces", serif;
  --font-body: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--carbone);
  color: var(--crema);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* grana leggera su tutto: dà materia, toglie l'effetto "flat da template" */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3, .footer-brand {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.25rem; }

.muto { color: var(--sabbia); }
.chiaro { color: var(--crema); }
.piccola { font-size: 0.875rem; }
.marcato { color: var(--terra); }

/* ---- eyebrow ---- */
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--terra);
  margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--terra); }

/* ---- reveal allo scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visibile { opacity: 1; transform: none; }
.cascata > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cascata.visibile > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .cascata > * { opacity: 1; transform: none; }
}

/* ---- bottoni ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px;
  padding: 0.9rem 1.7rem;
  font-weight: 700; font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  font-family: var(--font-body);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-pieno { background: var(--terra); color: var(--carbone); box-shadow: 0 0 0 rgba(194,96,58,0); }
.btn-pieno:hover { box-shadow: 0 10px 30px rgba(194, 96, 58, 0.35); }
.btn-crema { background: var(--crema); color: var(--carbone); }
.btn-crema:hover { box-shadow: 0 10px 30px rgba(245, 238, 227, 0.18); }
.btn-bordo { border-color: var(--terra); color: var(--terra); }
.btn-bordo:hover { background: var(--terra); color: var(--carbone); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.btn-largo { width: 100%; }
@media (min-width: 640px) { .btn-largo { width: auto; } }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23, 19, 16, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cenere);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; }
.nav-logo img { border-radius: 50%; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-logo:hover img { transform: rotate(-12deg) scale(1.08); }
.nav-logo span { display: none; }
@media (min-width: 480px) { .nav-logo span { display: inline; } }
.nav-links { display: none; gap: 1.5rem; color: var(--sabbia); font-size: 0.9rem; }
.nav-links a { position: relative; padding-bottom: 2px; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--terra);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover { color: var(--crema); }
.nav-links a:hover::after { transform: scaleX(1); }
@media (min-width: 820px) { .nav-links { display: flex; } }

/* ---- pillole di navigazione, solo mobile: saltare a una sezione senza scorrere tutto ---- */
.nav-mobile-pillole {
  display: flex; gap: 0.5rem;
  padding: 0 1.25rem 0.7rem;
  overflow-x: auto; scrollbar-width: none;
}
.nav-mobile-pillole::-webkit-scrollbar { display: none; }
.nav-mobile-pillole a {
  flex: 0 0 auto;
  font-size: 0.78rem; font-weight: 600; color: var(--sabbia);
  border: 1px solid var(--cenere); border-radius: 999px;
  padding: 0.4rem 0.9rem; white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-mobile-pillole a:active { border-color: var(--terra); color: var(--crema); }
@media (min-width: 820px) { .nav-mobile-pillole { display: none; } }

.hero { position: relative; overflow: hidden; }
.hero::before {
  /* alone terracotta dietro il logo */
  content: ""; position: absolute;
  right: -15%; top: 10%;
  width: 55vw; max-width: 640px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(194, 96, 58, 0.16) 0%, transparent 65%);
  pointer-events: none;
}
.hero-grid {
  display: grid; gap: 2.5rem; align-items: center;
  padding-top: 3.5rem; padding-bottom: 4rem;
  position: relative;
}
@media (min-width: 820px) {
  .hero-grid { grid-template-columns: 3fr 2fr; padding-top: 5.5rem; padding-bottom: 5.5rem; }
}
.hero h1 .marcato {
  position: relative; display: inline-block;
  white-space: nowrap;
}
.hero h1 .marcato::after {
  /* sottolineatura "a mano" che si disegna al caricamento */
  content: ""; position: absolute; left: 0; bottom: 0.05em;
  width: 100%; height: 0.14em;
  background: var(--terra); border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  animation: disegna 0.7s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes disegna { to { transform: scaleX(1); } }

/* entrata in scena del hero al caricamento */
.hero-entra > * {
  opacity: 0; transform: translateY(22px);
  animation: entra 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-entra > *:nth-child(1) { animation-delay: 0.05s; }
.hero-entra > *:nth-child(2) { animation-delay: 0.15s; }
.hero-entra > *:nth-child(3) { animation-delay: 0.3s; }
.hero-entra > *:nth-child(4) { animation-delay: 0.42s; }
.hero-entra > *:nth-child(5) { animation-delay: 0.54s; }
@keyframes entra { to { opacity: 1; transform: none; } }

.hero-testo { margin-top: 1.25rem; max-width: 34rem; color: var(--sabbia); font-size: 1.05rem; }
.hero-testo-secondaria { margin-top: 0.6rem; color: var(--terra-chiaro); font-weight: 600; }
.hero-motto {
  margin-top: 1.5rem;
  font-family: var(--font-display); font-weight: 600;
  color: var(--terra-chiaro); font-size: 1.15rem;
}
.hero-cta { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .hero-cta { flex-direction: row; } }

.hero-logo { display: flex; justify-content: center; }
.hero-logo img {
  width: min(68vw, 340px); height: auto;
  filter: drop-shadow(0 18px 50px rgba(194, 96, 58, 0.3));
  animation: fluttua 6s ease-in-out infinite;
}
@keyframes fluttua {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

/* ---- ticker manifesto ---- */
.ticker {
  background: var(--terra);
  color: var(--carbone);
  overflow: hidden;
  border-top: 1px solid var(--cenere);
  border-bottom: 1px solid var(--cenere);
  transform: rotate(-1deg) scale(1.02);  /* strappo da poster */
  padding: 0.7rem 0;
}
.ticker-riga {
  display: flex; width: max-content;
  animation: scorri 26s linear infinite;
}
.ticker:hover .ticker-riga { animation-play-state: paused; }
.ticker span {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.06em; white-space: nowrap;
  padding: 0 1.2rem;
}
@keyframes scorri { to { transform: translateX(-50%); } }

/* ---- sezioni ---- */
.sezione { border-bottom: 1px solid var(--cenere); padding: 4.5rem 0; position: relative; }
.griglia-2 { display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .griglia-2 { grid-template-columns: 1fr 1fr; } }

/* cos'è */
.negazioni { list-style: none; }
.negazioni li {
  font-size: 1.2rem; font-weight: 700;
  padding-left: 1.7rem; position: relative; margin-bottom: 0.45rem;
}
.negazioni li::before {
  content: "✕"; position: absolute; left: 0;
  color: var(--vino); font-weight: 800;
}
.cosa-testo > * + * { margin-top: 1.1rem; }

/* format */
.cards-format { display: grid; gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 640px) { .cards-format { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards-format { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--fumo); border: 1px solid var(--cenere);
  border-radius: 1.1rem; padding: 1.6rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  border-color: var(--terra);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.card p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--sabbia); }
.barra {
  display: block; width: 2.5rem; height: 5px;
  border-radius: 999px; margin-bottom: 1.1rem;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .barra { width: 4rem; }
.barra-crema { background: var(--crema); }
.barra-oliva { background: var(--oliva); }
.barra-vino { background: var(--vino); }
.barra-terra { background: var(--terra); }
.barra-sabbia { background: var(--sabbia); }

/* ultimi posti */
.intesta-posti {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem; margin-bottom: 2.2rem;
}
.intesta-posti p { max-width: 20rem; font-size: 0.9rem; }
.cards-posti { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .cards-posti { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards-posti { grid-template-columns: repeat(3, 1fr); } }

.posto {
  background: var(--fumo); border: 1px solid var(--cenere);
  border-radius: 1.1rem; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.posto:hover {
  transform: translateY(-6px);
  border-color: var(--terra);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.posto-copertina {
  position: relative; aspect-ratio: 4 / 3; background: var(--cenere);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.posto-copertina > img:not(.posto-placeholder) {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.posto:hover .posto-copertina > img:not(.posto-placeholder) { transform: scale(1.05); }
.posto-placeholder {
  opacity: 0.3; width: 110px; height: 110px; border-radius: 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.posto:hover .posto-placeholder { transform: rotate(-8deg) scale(1.1); opacity: 0.45; }

/* ---- carousel foto (le tue, caricate a mano) ---- */
.carosello { position: relative; width: 100%; height: 100%; }
.carosello-traccia {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carosello-traccia::-webkit-scrollbar { display: none; }
.carosello-foto {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover; scroll-snap-align: start;
}
.carosello-puntini {
  position: absolute; bottom: 0.6rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.35rem; z-index: 2;
}
.puntino {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(245, 238, 227, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}
.puntino.attivo { background: var(--crema); transform: scale(1.3); }
.carosello-freccia {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(23, 19, 16, 0.6); color: var(--crema);
  border: none; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 1.05rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 2;
}
.posto:hover .carosello-freccia { opacity: 1; }
.carosello-freccia:hover { background: var(--terra); }
.carosello-prev { left: 0.5rem; }
.carosello-next { right: 0.5rem; }
@media (hover: none) {
  /* touch: niente frecce invisibili da cercare, si scorre e basta */
  .carosello-freccia { display: none; }
}

/* ---- anteprime foto nel form admin ---- */
.anteprime-foto { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.anteprima-foto-mini {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 0.6rem; border: 1px solid var(--cenere);
}
.anteprima-foto-copertina { border-color: var(--terra); box-shadow: 0 0 0 2px rgba(194, 96, 58, 0.25); }
.foto-esistente {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; color: var(--sabbia); cursor: pointer;
}
.foto-esistente-rimuovi { display: flex; align-items: center; gap: 0.25rem; }
.foto-esistente:has(input:checked) .anteprima-foto-mini { opacity: 0.35; border-color: var(--vino); }
.foto-esistente:has(input:checked) { color: #d16a5c; }

/* ---- assistente descrizione: piccolo riquadro "chat" nel form admin ---- */
.assistente-descrizione {
  background: rgba(194, 96, 58, 0.06);
  border: 1px solid rgba(194, 96, 58, 0.25);
  border-radius: 0.9rem;
  padding: 1rem 1.1rem;
}
.assistente-titolo {
  font-weight: 700; font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

.badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  border-radius: 999px; padding: 0.28rem 0.85rem;
  font-size: 0.72rem; font-weight: 700;
}
.badge-chicca-pugliese { background: var(--oliva); color: var(--crema); }
.badge-hype-check { background: var(--vino); color: var(--crema); }
.badge-esperienza { background: var(--sabbia); color: var(--carbone); }
.badge-cucina-diversa { background: var(--terra); color: var(--carbone); }
.badge-recensione { background: var(--crema); color: var(--carbone); }

.posto-corpo { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.posto-testata { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }

/* il timbro si "stampa" quando la card entra nello schermo */
.timbro {
  font-family: var(--font-display); font-weight: 800;
  color: var(--terra); border: 2px solid var(--terra);
  padding: 0.15rem 0.6rem; font-size: 1.15rem;
  flex-shrink: 0;
  transform: rotate(3deg);
}
.cascata.visibile .timbro { animation: stampa 0.5s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes stampa {
  0% { transform: rotate(14deg) scale(2); opacity: 0; }
  100% { transform: rotate(3deg) scale(1); opacity: 1; }
}
.timbro small { font-size: 0.7rem; }

.verdetto {
  border-left: 3px solid var(--terra); padding-left: 0.8rem;
  font-size: 0.92rem; font-weight: 500;
}
.pro-contro { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; font-size: 0.85rem; }
.pro-contro ul { list-style: none; color: var(--sabbia); }
.etichetta {
  font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 0.25rem; font-weight: 700;
}
.etichetta-oliva { color: var(--oliva); }
.etichetta-vino { color: #d16a5c; }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
  font-size: 0.72rem; color: var(--sabbia);
  border: 1px solid var(--cenere); border-radius: 999px;
  padding: 0.1rem 0.6rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tag:hover { border-color: var(--terra); color: var(--crema); }
.link-tiktok { margin-top: auto; font-weight: 700; font-size: 0.88rem; color: var(--terra); }
.link-tiktok:hover { text-decoration: underline; }

/* segnala */
.griglia-segnala { align-items: start; }
@media (min-width: 820px) { .griglia-segnala { grid-template-columns: 2fr 3fr; } }
.segnala-testo > * + * { margin-top: 1rem; }
.segnala-forte { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.segnala-testo ul { list-style: none; }

.pannello {
  background: var(--fumo); border: 1px solid var(--cenere);
  border-radius: 1.1rem; padding: 1.5rem;
}
@media (min-width: 640px) { .pannello { padding: 2rem; } }

.campo { margin-bottom: 1.1rem; }
.campo label, .label-span {
  display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem;
}
.riga-2 { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .riga-2 { grid-template-columns: 1fr 1fr; } }

input, select, textarea {
  width: 100%;
  background: var(--carbone); color: var(--crema);
  border: 1px solid var(--cenere); border-radius: 0.75rem;
  padding: 0.75rem 1rem; font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(194, 96, 58, 0.15);
  outline: none;
}
input::placeholder, textarea::placeholder { color: rgba(169, 156, 141, 0.55); }
textarea { resize: vertical; }

.errore { color: #d16a5c; font-size: 0.78rem; margin-top: 0.3rem; }

.scelta-anonimo { display: flex; gap: 0.6rem; }
.radio {
  flex: 1; text-align: center; cursor: pointer;
  border: 1px solid var(--cenere); border-radius: 0.75rem;
  padding: 0.75rem; font-size: 0.85rem; color: var(--sabbia);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.radio.attivo, .radio:has(input:checked) {
  border-color: var(--terra); color: var(--crema);
  background: rgba(194, 96, 58, 0.1);
}
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.conferma { text-align: center; padding: 2rem 0; }
.conferma-titolo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  animation: stampa 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  display: inline-block;
}
.conferma p { margin-bottom: 1.2rem; }

/* ---- radar (la firma) ---- */
.sezione-radar { background: var(--fumo); overflow: hidden; }
.radar-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 820px) { .radar-grid { grid-template-columns: 3fr 2fr; } }
.radar-titolo { font-size: clamp(2.1rem, 6vw, 3.4rem); }
.radar-testo { max-width: 38rem; margin-top: 1.5rem; }
.radar-testo p + p { margin-top: 0.8rem; }
.radar-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.2rem; }
.chip {
  background: var(--carbone); border: 1px solid var(--cenere);
  border-radius: 999px; padding: 0.5rem 1.1rem;
  font-size: 0.85rem; color: var(--sabbia);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.chip:hover { border-color: var(--terra); transform: translateY(-2px); }
.chip em {
  font-style: normal; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-left: 0.4rem;
}
.chip-pronta {
  background: var(--terra); border-color: var(--terra); color: var(--carbone); font-weight: 700;
}
.chip-pronta em { color: var(--carbone); opacity: 0.75; }
.chip-pronta:hover { border-color: var(--terra-chiaro); }

/* ---- mappa ---- */
.mappa-layout { display: grid; gap: 1.5rem; margin-top: 2.2rem; }
@media (min-width: 900px) { .mappa-layout { grid-template-columns: 3fr 2fr; align-items: stretch; } }

#mappa-contenitore {
  height: 420px; border-radius: 1.1rem; overflow: hidden;
  border: 1px solid var(--cenere); background: var(--cenere);
}

.mappa-lista {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 420px; overflow-y: auto;
  padding-right: 0.3rem;
}
.mappa-voce {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--fumo); border: 1px solid var(--cenere);
  border-radius: 0.75rem; padding: 0.7rem 0.9rem;
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color 0.2s ease, transform 0.2s ease;
  font-family: var(--font-body); color: var(--crema);
}
.mappa-voce:hover { transform: translateX(2px); }
.mappa-voce.attiva { border-color: var(--terra); background: rgba(194, 96, 58, 0.08); }
.mappa-voce-badge-puntino { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mappa-voce-testo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mappa-voce-testo strong { font-size: 0.9rem; }
.timbro-mini {
  font-family: var(--font-display); font-weight: 800;
  color: var(--terra); border: 1.5px solid var(--terra);
  border-radius: 999px; padding: 0.1rem 0.55rem;
  font-size: 0.78rem; flex-shrink: 0;
}

/* pin personalizzati: foto dentro un anello colorato per badge */
.mappa-pin-anello {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--terra); overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  background: var(--cenere);
}
.mappa-pin-anello img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* cluster: quando più posti si raggruppano (stessa città geocodificata al
   centro, vedi geocoding.py), invece dei cerchi verde/giallo/arancio di
   default di Leaflet usiamo lo stesso linguaggio visivo del resto del sito. */
.mappa-cluster-wrapper { background: transparent !important; border: none !important; }
.mappa-cluster {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--terra); color: var(--carbone);
  border: 3px solid var(--crema);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* popup Leaflet: sovrascrive il bianco di default per restare in tema */
.leaflet-popup-content-wrapper {
  background: var(--fumo); color: var(--crema);
  border: 1px solid var(--cenere); border-radius: 0.9rem;
}
.leaflet-popup-tip { background: var(--fumo); }
.leaflet-popup-content { margin: 0; width: auto !important; }
.leaflet-container a.leaflet-popup-close-button { color: var(--sabbia); }
.mappa-popup { display: flex; gap: 0.7rem; padding: 0.7rem; align-items: flex-start; }
.mappa-popup-foto { width: 60px; height: 60px; border-radius: 0.6rem; object-fit: cover; flex-shrink: 0; }
.mappa-popup-corpo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.mappa-popup-corpo strong { font-size: 0.95rem; line-height: 1.25; }
.mappa-popup-verdetto { font-size: 0.83rem; color: var(--sabbia); margin: 0.15rem 0; line-height: 1.4; }
.leaflet-control-attribution { background: rgba(23, 19, 16, 0.75) !important; color: var(--sabbia) !important; }
.leaflet-control-attribution a { color: var(--sabbia) !important; }

/* lo schermo radar animato */
.radar-visual {
  position: relative;
  width: min(75vw, 320px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(109, 138, 72, 0.5);
  background:
    radial-gradient(circle, transparent 32.5%, rgba(109, 138, 72, 0.28) 33%, transparent 33.5%),
    radial-gradient(circle, transparent 65.5%, rgba(109, 138, 72, 0.28) 66%, transparent 66.5%),
    linear-gradient(rgba(109, 138, 72, 0.18), rgba(109, 138, 72, 0.18)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(109, 138, 72, 0.18), rgba(109, 138, 72, 0.18)) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle at center, rgba(109, 138, 72, 0.1), var(--carbone) 75%);
}
.radar-visual::before {
  /* fascio che ruota */
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(109, 138, 72, 0.55), transparent 22%);
  animation: scandaglia 4s linear infinite;
}
@keyframes scandaglia { to { transform: rotate(360deg); } }
.radar-visual::after {
  /* la forchetta al centro del radar */
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../img/logo-400.png") center / contain no-repeat;
  border-radius: 50%;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.45));
}
.blip {
  position: absolute;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--terra);
  animation: pulsa 4s ease-out infinite;
}
.blip:nth-child(1) { top: 22%; left: 64%; animation-delay: 0.6s; }
.blip:nth-child(2) { top: 70%; left: 26%; animation-delay: 2.1s; }
.blip:nth-child(3) { top: 38%; left: 15%; animation-delay: 3.2s; }
.blip:nth-child(4) { top: 78%; left: 72%; animation-delay: 1.4s; background: var(--oliva); }
@keyframes pulsa {
  0%, 12% { opacity: 0; transform: scale(0.4); }
  16% { opacity: 1; transform: scale(1.5); }
  30% { transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.6); }
}

/* ---- contatti ---- */
.contatti-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contatti-inner .eyebrow::before { display: none; }
.contatti-inner h2 { max-width: 34rem; }

/* footer */
.footer { padding: 3rem 0 2rem; }
.footer-grid {
  display: flex; flex-direction: column; gap: 2rem;
  justify-content: space-between;
}
@media (min-width: 640px) { .footer-grid { flex-direction: row; } }
.footer-brand { font-size: 1.2rem; margin-bottom: 0.4rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; color: var(--sabbia); }
.footer-links a:hover { color: var(--crema); }
.footer-basso {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--cenere);
  color: rgba(169, 156, 141, 0.6);
}

/* admin */
.admin-lista { display: grid; gap: 1rem; margin-top: 2rem; }
.admin-card > * + * { margin-top: 0.5rem; }
.admin-card a { color: var(--terra); text-decoration: underline; }