/* ════════════════════════════════════════════════════════════════
   CILENTO A TAVOLA — style.css
   (aggiornato: homepage + nav rinnovata)
════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root{
  --olive:      #3F5E4A;
  --olive-dark: #2e4535;
  --olive-light:rgba(63,94,74,.08);
  --cream:      #F8F9F3;
  --terracotta: #C46A3A;
  --terra-light:rgba(196,106,58,.12);
  --text:       #2E2E2E;
  --muted:      #6B6B6B;
  --card:       #FFFFFF;
  --border:     rgba(46,46,46,.10);
  --border-dark:rgba(46,46,46,.22);
  --shadow-sm:  0 2px 8px rgba(46,46,46,.07);
  --shadow-md:  0 6px 24px rgba(46,46,46,.11);
  --shadow-lg:  0 16px 48px rgba(46,46,46,.14);
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
}

/* ── Reset & base ──────────────────────────────────────────────── */
*{ box-sizing:border-box; margin:0; padding:0 }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto }
.container{ max-width:1100px; margin:0 auto; padding:0 20px }
.hero-new .container{
  max-width: none;
  margin: 0;
  padding-left: clamp(24px, 8vw, 120px);
  padding-right: 20px;
}



/* ════════════════════════════════════════════════════════════════
   HEADER / NAV — rinnovato
════════════════════════════════════════════════════════════════ */
.header{
  background-color: #F8F9F3;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 16px;
}

/* Brand */
.brand{ display:flex; align-items:center; }
.brand-logo{
  height: 80px;
  width: auto;
  display: block;
}

/* Nav links */
.nav-links{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Btn base ── */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover{
  background: var(--cream);
  box-shadow: var(--shadow-sm);
}
.btn:active{ transform: scale(.97) }

/* Ghost nav link — solo testo */
.btn.ghost{
  background: transparent;
  border-color: transparent;
  color: var(--text);
  padding: 9px 12px;
}
.btn.ghost:hover{
  background: rgba(46,46,46,.06);
  box-shadow: none;
}

/* CTA primario nella nav */
.btn.primary{
  background: var(--olive);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(63,94,74,.25);
}
.btn.primary:hover{
  background: var(--olive-dark);
  box-shadow: 0 4px 14px rgba(63,94,74,.35);
}

/* Login — outline sottile */
.btn.outline{
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--text);
}
.btn.outline:hover{
  border-color: var(--olive);
  color: var(--olive);
  background: var(--olive-light);
  box-shadow: none;
}

/* Registrati — filled terracotta leggero */
.btn.register{
  background: var(--terra-light);
  border: 1.5px solid rgba(196,106,58,.25);
  color: var(--terracotta);
  font-weight: 600;
}
.btn.register:hover{
  background: rgba(196,106,58,.2);
  border-color: var(--terracotta);
  box-shadow: 0 2px 10px rgba(196,106,58,.2);
}

/* Diventa Host — pill verde scuro */
.btn.host{
  background: var(--olive);
  color: #fff;
  border-color: transparent;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(63,94,74,.22);
}
.btn.host:hover{
  background: var(--olive-dark);
  box-shadow: 0 4px 14px rgba(63,94,74,.33);
}


/* ════════════════════════════════════════════════════════════════
   HERO — nuovo
════════════════════════════════════════════════════════════════ */
.hero-new{
  position: relative;
  overflow: hidden;
  padding: 90px 0 80px;
  min-height: 560px;
  display: flex;
  align-items: center;
}

/* Background*/
.hero-bg{
  position: absolute; inset: 0;
  background: url('../img/prova.png'); 
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.45) 25%,
    rgba(0,0,0,0.2) 50%,
    rgba(0,0,0,0.05) 65%,
    rgba(0,0,0,0) 75%
  );

  z-index:0;
}

/* Hero — sfondo cream */
.hero-new{ background: var(--cream); }
.hero-orb{
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  opacity: .55;
}
.orb-1{
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(63,94,74,.35), transparent 70%);
  top: -120px; left: -80px;
}
.orb-2{
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(196,106,58,.22), transparent 70%);
  bottom: -100px; right: 5%;
}
.orb-3{
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(63,94,74,.18), transparent 70%);
  top: 40%; right: 20%;
}
.hero-grain{
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .4;
  pointer-events: none;
}


.hero-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 620px; /* importantissimo: blocco elegante */
}
/* Badge */
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(63,94,74,.25);
  background: rgba(255,255,255,0.9);
  font-size: 13px;
  color: var(--olive);
  font-weight: 500;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.hero-badge-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--olive);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(63,94,74,.5) }
  50%{ box-shadow:0 0 0 5px rgba(63,94,74,0) }
}

/* Titolo */
.hero-h1{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 5.5vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 18px;

  text-shadow:
    0 3px 8px rgba(0,0,0,0.6),
    0 10px 30px rgba(0,0,0,0.5);

  animation: fadeUp .55s .08s ease both;
}

.hero-h1 em{
  font-style: italic;
  color: var(--olive);
}

/* Sottotitolo */
.hero-sub{
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  max-width: 48ch;
  margin-bottom: 32px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.6);

  animation: fadeUp .55s .16s ease both;
}

/* CTA */
.hero-cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
  animation: fadeUp .55s .24s ease both;
}
.btn-hero{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
  border: none;
}
.primary-hero{
  background: var(--olive);
  color: #fff;
  box-shadow: 0 4px 18px rgba(63,94,74,.32);
}
.primary-hero:hover{
  background: var(--olive-dark);
  box-shadow: 0 6px 24px rgba(63,94,74,.42);
  transform: translateY(-1px);
}
.primary-hero:active{ transform: scale(.97) }
.ghost-hero{
  background: rgba(255,255,255,.72);
  color: var(--text);
  border: 1.5px solid var(--border-dark);
  backdrop-filter: blur(6px);
}
.ghost-hero:hover{
  background: #fff;
  border-color: var(--olive);
  color: var(--olive);
}

/* Banner "Rete in costruzione" dentro l'hero */
.hero-banner-rete {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 32px;
  max-width: 560px;
  animation: fadeUp .55s .20s ease both;
}
.hero-banner-rete-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.4;
}
.hero-banner-rete-text {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-banner-rete-text strong {
  color: #fff;
}
.hero-banner-rete-text a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-banner-rete-text a:hover {
  opacity: 0.85;
}

/* Stats strip */
.hero-stats{
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  animation: fadeUp .55s .32s ease both;
}
.stat{ display:flex; flex-direction:column; gap:2px }
.stat-num{ font-size:22px; font-weight:800; color:white; line-height:1 }
.stat-label{ font-size:12px; color:white }
.stat-divider{
  width: 1px; height: 36px;
  background: var(--border-dark);
  flex-shrink: 0;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px) }
  to{   opacity:1; transform:translateY(0) }
}


/* ════════════════════════════════════════════════════════════════
   SEZIONI COMUNI
════════════════════════════════════════════════════════════════ */
.section-eyebrow{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.section-h2{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--text);
  margin-bottom: 0;
}
.section-header{
  margin-bottom: 36px;
}


/* ════════════════════════════════════════════════════════════════
   COME FUNZIONA
════════════════════════════════════════════════════════════════ */
.how-section{
  padding: 80px 0;
  background: var(--cream);
}
.how-grid{
  display: flex;
  align-items: center;
  gap: 0;
}
.how-card{
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.how-card:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.how-card--accent{
  border-color: rgba(63,94,74,.3);
  background: linear-gradient(145deg, rgba(63,94,74,.05), rgba(196,106,58,.04));
  box-shadow: var(--shadow-sm);
}
.how-icon{
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--olive-light);
  border: 1px solid rgba(63,94,74,.15);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.how-step{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.how-card h3{
  font-family: Georgia, serif;
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--text);
}
.how-card p{
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.how-connector{
  flex-shrink: 0;
  padding: 0 8px;
  opacity: .4;
}


/* ════════════════════════════════════════════════════════════════
   EVENTI
════════════════════════════════════════════════════════════════ */
.events-section{
  padding: 80px 0;
  background: #fff;
}
.events-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.see-all-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--olive);
  border-bottom: 1.5px solid rgba(63,94,74,.3);
  padding-bottom: 2px;
  transition: border-color .15s, gap .15s;
}
.see-all-link:hover{
  border-color: var(--olive);
  gap: 10px;
}

.events-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Card evento */
.ev-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.ev-card:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.ev-card:hover .ev-cta{ opacity:1; transform:translateX(0) }

.ev-thumb{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.ev-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .25s ease;
}
.ev-card:hover .ev-thumb img{ transform: scale(1.015) }

.ev-price-badge{
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--olive);
  box-shadow: var(--shadow-sm);
}
.ev-body{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ev-title{
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--text);
}
.ev-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.ev-meta span{
  display: flex;
  align-items: center;
  gap: 6px;
}
.ev-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ev-spots{
  font-size: 12px;
  color: var(--muted);
}
.ev-cta{
  font-size: 13px;
  font-weight: 700;
  color: var(--olive);
  opacity: .5;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}

/* Stato vuoto */
.ev-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ev-empty-icon{ font-size: 40px; margin-bottom: 16px }
.ev-empty h3{
  font-family: Georgia, serif;
  font-size: 20px;
  margin-bottom: 8px;
}
.ev-empty p{ color: var(--muted); font-size:14px; max-width:44ch; margin:0 auto }


/* ════════════════════════════════════════════════════════════════
   HOST CTA BAND
════════════════════════════════════════════════════════════════ */
.host-band{
  padding: 70px 0;
  background: linear-gradient(135deg, var(--olive-dark) 0%, var(--olive) 60%, #4a7257 100%);
  position: relative;
  overflow: hidden;
}
.host-band::before{
  content:"";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.host-band-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.host-band-text{ flex: 1; min-width: 280px }
.host-band-text h2{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3vw, 32px);
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
}
.host-band-text p{
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 46ch;
}
.btn-band{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--olive-dark);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: all .18s;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.btn-band:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.btn-band:active{ transform: scale(.97) }


/* ════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════ */
.footer{
  border-top: 1px solid var(--border);
  padding: 24px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  background: var(--cream);
}


/* ════════════════════════════════════════════════════════════════
   FORM (login/register/etc — invariato)
════════════════════════════════════════════════════════════════ */
.form{
  max-width:420px; margin:28px auto 56px;
  padding:18px; background:var(--card);
  border:1px solid var(--border); border-radius:18px;
}
.form h2{ margin:0 0 14px; font-family:Georgia,serif }
.form .row{ margin-bottom:12px }
.form label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px }

.input{
  width:100%; padding:12px;
  border-radius:12px; border:1px solid var(--border);
  background:#fff; font-family:inherit; font-size:14px; color:var(--text);
  outline:none; transition:border-color .18s;
}
.input:focus{ border-color:var(--olive) }


/* ════════════════════════════════════════════════════════════════
   AUTH PAGES
════════════════════════════════════════════════════════════════ */
.auth-wrap{
  min-height:calc(100vh - 76px);
  display:flex; align-items:center; padding:34px 0 56px;
}
.auth-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:18px; width:100%; align-items:stretch;
}
.auth-panel{
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(63,94,74,.08),rgba(196,106,58,.08));
  border-radius:22px; padding:22px; overflow:hidden; position:relative;
}
.auth-panel::before{
  content:""; position:absolute; inset:-40% -40% auto auto;
  width:260px; height:260px;
  background:radial-gradient(circle,rgba(63,94,74,.25),transparent 60%);
  transform:rotate(18deg);
}
.auth-panel h1{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif; font-size:34px;
}
.auth-panel p{ margin:0 0 14px; color:var(--muted); max-width:52ch }
.auth-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.8); border:1px solid var(--border);
  font-size:13px; color:var(--text);
}
.badge.ok{
  border-color:rgba(63,94,74,.35); background:rgba(63,94,74,.08); color:var(--olive);
}
.badge.ko{
  border-color:rgba(176,0,32,.25); background:rgba(176,0,32,.06); color:#7a0016;
}
.auth-card{
  background:rgba(255,255,255,.92); border:1px solid var(--border);
  border-radius:22px; padding:18px;
}
.auth-card h2{
  margin:0 0 10px;
  font-family:Georgia,"Times New Roman",serif; font-size:22px;
}
.helper{ font-size:13px; color:var(--muted); margin-top:10px }
.alert{
  border:1px solid rgba(176,0,32,.18); background:rgba(176,0,32,.06);
  color:#7a0016; padding:10px 12px; border-radius:14px;
  margin:10px 0 12px; font-size:13px;
}
.input-group{ position:relative }
.input-group .toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; color:var(--olive);
  font-weight:700; cursor:pointer; padding:6px 8px; border-radius:10px;
}
.input-group .toggle:hover{ background:rgba(63,94,74,.08) }


/* ════════════════════════════════════════════════════════════════
   DASHBOARD STYLES
════════════════════════════════════════════════════════════════ */
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-top:18px;
}
.section-title h2{
  margin:0; font-family:Georgia,"Times New Roman",serif; font-size:20px;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.75); font-size:13px; color:var(--muted);
}
.kpi{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px; margin-top:14px;
}
.kpi .card{ border-radius:20px }
.kpi .num{ font-size:28px; font-weight:900; color:var(--olive); margin-top:6px }
.kpi .label{ font-size:13px; color:var(--muted) }
.split{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:14px; margin-top:14px;
}
.list-item{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px; border-top:1px solid var(--border);
}
.list-item:first-child{ border-top:none }
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.small{ font-size:13px; color:var(--muted) }
.avatar{
  width:42px; height:42px; border-radius:14px;
  background:linear-gradient(135deg,rgba(63,94,74,.18),rgba(196,106,58,.18));
  border:1px solid var(--border);
}
.profile{ display:flex; gap:12px; align-items:center }
.panel{
  background:rgba(255,255,255,.85); border:1px solid var(--border);
  border-radius:22px; padding:16px;
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; overflow:hidden;
}


/* ════════════════════════════════════════════════════════════════
   SEARCH + MAP SECTION
════════════════════════════════════════════════════════════════ */
.search-map-section{
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.search-map-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.search-map-inner--solo{
  grid-template-columns: 1fr;
  max-width: 760px;
}

/* Search side */
.search-side{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.search-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}
.search-input-wrap{
  position: relative;
}
.search-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.search-text-input{
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .18s;
}
.search-text-input:focus{ border-color: var(--olive) }
.search-select{
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
}

/* Special toggle */
.special-toggle-label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  padding: 4px 0;
}
.special-toggle-cb{ display: none }
.special-toggle-box{
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-dark);
  border-radius: 5px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  transition: background .15s, border-color .15s;
}
.special-toggle-cb:checked ~ .special-toggle-box{
  background: var(--olive);
  border-color: var(--olive);
}
.special-toggle-cb:checked ~ .special-toggle-box::after{
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 7px; height: 11px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.search-submit{
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 15px;
}
.search-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.search-field{ display: flex; flex-direction: column; gap: 4px; }
.search-field-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.search-field .input{ width: 100%; }

/* Filters on catalog page */
.events-filters-form{
  margin: 20px 0 24px;
}
.filters-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}
.filter-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.filter-actions{
  display: flex;
  gap: 8px;
}
.filter-actions .btn{
  min-height: 44px;
}
.active-filters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-chip{
  background: var(--olive-light);
  color: var(--olive);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.filter-count{
  color: var(--muted);
  font-size: 13px;
  align-self: center;
}
.events-map-section{
  margin: 0 0 24px;
}
.map-centered-note{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}
.events-empty{
  color: var(--muted);
}

/* Rete in costruzione — card temporanea al posto della mappa */
.rete-costruzione-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  min-height: 320px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
}
.rete-costruzione-icon {
  font-size: 40px;
  margin-bottom: 16px;
}
.rete-costruzione-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -.02em;
}
.rete-costruzione-body {
  font-size: 0.97rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.rete-costruzione-body a {
  color: var(--olive);
  font-weight: 600;
  text-decoration: underline;
}

/* Map side */
.map-wrap{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.map-label{
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1000;
  background: rgba(248,249,243,.95);
  backdrop-filter: blur(8px);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  pointer-events: none;
}

/* Leaflet map container */
#cilento-map{
  width: 100%;
  height: 400px;
}

/* Vuoto mappa */
.map-empty{
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  background: var(--cream);
}

.input,
.search-text-input,
.search-select{
  min-height: 44px;
  font-size: 16px;
}

/* ── Marker prezzo stile booking.com ────────────────────────── */
.map-marker-wrap{
  background: none !important;
  border: none !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.map-marker{
  background: var(--olive);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  border: 2px solid #fff;
  cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .15s;
  position: relative;
  user-select: none;
}
.map-marker::after{
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--olive);
  border-bottom: none;
}
.map-marker:hover,
.map-marker--active{
  background: var(--olive-dark);
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  z-index: 9999 !important;
}
.map-marker--special{
  background: linear-gradient(135deg, #d97706, #b45309);
}
.map-marker--special::after{
  border-top-color: #b45309;
}
.map-marker--special.map-marker--active,
.map-marker--special:hover{
  background: linear-gradient(135deg, #b45309, #92400e);
}

/* ── Popup Leaflet ───────────────────────────────────────────── */
.map-popup-wrap .leaflet-popup-content-wrapper{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-popup-wrap .leaflet-popup-content{
  margin: 0;
  width: 240px !important;
}
.map-popup-wrap .leaflet-popup-tip-container{
  margin-top: -1px;
}
.map-popup{
  display: flex;
  flex-direction: column;
}
.map-popup-img{
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
.map-popup-img--placeholder{
  width: 100%;
  height: 130px;
  background: linear-gradient(135deg, var(--olive-light), var(--terra-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.map-popup-body{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-popup-special{
  display: inline-flex;
  align-self: flex-start;
  background: linear-gradient(135deg,#f59e0b,#d97706);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.map-popup-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.map-popup-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--muted);
}
.map-popup-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.map-popup-price{
  font-size: 16px;
  font-weight: 800;
  color: var(--olive);
}
.map-popup-per{
  font-size: 11px;
  color: var(--muted);
}
.map-popup-spots{
  font-size: 11px;
  color: var(--terracotta);
  font-weight: 600;
}
.map-popup-btn{
  display: block;
  text-align: center;
  background: var(--olive);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  transition: background .15s;
  text-decoration: none;
}
.map-popup-btn:hover{
  background: var(--olive-dark);
}

@media(max-width:1024px){
  .search-map-inner{ grid-template-columns: 1fr }
  #cilento-map,
  .map-empty{ height: 340px }
}


/* ════════════════════════════════════════════════════════════════
   VECCHIE SEZIONI HOME (compatibilità)
════════════════════════════════════════════════════════════════ */
.section{ padding:60px 0 }
.section.dark{ background: var(--cream) }
.grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .events-grid{ grid-template-columns:1fr 1fr }
  .how-grid{ flex-direction:column }
  .how-connector{ transform:rotate(90deg) }
  .auth-grid{ grid-template-columns:1fr }
  .kpi{ grid-template-columns:1fr 1fr }
  .split{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr }
  .nav-links .btn.ghost:not(:last-child){ display:none }
}

@media(max-width:768px){
  .brand-logo{ height: 64px }
  .nav{ gap: 10px }
  .nav-links{ gap: 4px; flex-wrap: wrap; justify-content: flex-end }
  .nav-links .btn{ padding: 8px 12px; font-size: 13px }
  .hero-new{ padding:60px 0 56px }
  .hero-new .container{ padding-left: 20px; padding-right: 20px }
  .hero-inner{ max-width: 100% }
  .hero-stats{ justify-content:center }
  .how-section, .events-section, .host-band{ padding:56px 0 }
  .events-grid{ grid-template-columns:1fr }
  .host-band-inner{ flex-direction:column; text-align:center }
  .search-row-2{ grid-template-columns: 1fr }
  .filters-grid{ grid-template-columns: 1fr 1fr }
  .filter-actions{ grid-column: 1 / -1 }
  #cilento-map,
  .map-empty{ height: 300px }
}

@media(max-width:480px){
  .hero-new{ padding:60px 0 56px }
  .container{ padding: 0 14px }
  .brand-logo{ height: 54px }
  .nav-links .btn{ padding: 8px 10px; font-size: 12px }
  .btn.host, .btn.register, .btn.outline{ min-height: 40px }
  .hero-h1{ font-size: clamp(30px, 10vw, 40px) }
  .hero-sub{ font-size: 15px }
  .filters-grid{ grid-template-columns: 1fr }
  .filter-actions{ flex-direction: column }
  .filter-actions .btn,
  .filter-actions a.btn{ width: 100%; justify-content: center }
  .map-label{ left: 8px; right: 8px; width: auto; text-align: center; font-size: 11px }
  #cilento-map,
  .map-empty{ height: 280px }
}


/* ── Separatori tra sezioni ────────────────────────────────────── */
.values-section,
.how-section,
.events-section,
.territory-section,
.host-band {
  border-top: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════
   SEZIONE VALORI
════════════════════════════════════════════════════════════════ */
.values-section {
  padding: 80px 0;
  background: #fff;
}
.section-header.centered {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
}
.section-desc {
  margin-top: 12px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.value-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.value-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.value-card--featured {
  border-color: rgba(63,94,74,.3);
  background: linear-gradient(150deg, rgba(63,94,74,.06), rgba(196,106,58,.04));
  box-shadow: var(--shadow-sm);
}
.value-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
}
.value-card h3 {
  font-family: Georgia, serif;
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--text);
}
.value-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.value-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--olive);
  border: 1px solid rgba(63,94,74,.25);
  background: rgba(63,94,74,.07);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ════════════════════════════════════════════════════════════════
   SEZIONE TERRITORIO
════════════════════════════════════════════════════════════════ */
.territory-section {
  padding: 80px 0;
  background: var(--cream);
}
.territory-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
}
.territory-text h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  margin-bottom: 16px;
}
.territory-text h2 em {
  font-style: italic;
  color: var(--olive);
}
.territory-text p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 48ch;
}
.territory-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
.t-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.t-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .values-grid { grid-template-columns: 1fr; }
  .territory-inner { grid-template-columns: 1fr; gap: 32px; }
}