/* ===========================
   Locally - style.css (beige theme)
   Re-skin completo:
   - Sfondo sito: beige chiaro
   - Prima sezione (hero) e chatbot: beige leggermente più scuro
   - Testi: bianchi (ovunque tranne nei loghi)
   - Glow: beige scuro tendente al marrone
   - Sezione prezzi invariata, ma bottoni prezzi beige scuro + hover più scuro
   =========================== */

/* --- Webfont: Cormorant Garamond SemiBold (TTF) --- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("var/www/locally-agency.it/html/fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap; /* evita testo invisibile durante il load */
}

/* ---------------- Variables (Beige palette) ---------------- */
:root {
  /* Beige palette */
  --beige-light: #efe1ca;        /* sfondo sito (chiaro) */
  --beige: #EADCC6;              /* sezioni leggermente più scure (hero/chatbot) */
  --beige-dark: #B89362;         /* accenti, bottoni, elementi attivi */
  --beige-darker: #9E7A4F;       /* hover bottoni, glow più intenso */
  --black: #000000;              /* testi */

  /* Mappatura variabili progetto → nuova palette */
  --color-teal: var(--beige-dark);     /* sostituisce il verde */
  --color-cream: #000000;   
  --color-black: #000000;       /* testi bianchi */
  --color-dark: var(--beige-light);    /* sostituisce nero/grigi di base */

  /* Gradient e fondi */
  --gradient-background: linear-gradient(135deg, #F2E8D5, #EADCC6);
  --navbar-gradient: linear-gradient(90deg, #EADCC6, #F2E8D5);
  --hero-gradient: linear-gradient(100deg, #EADCC6 0%, #F2E8D5 120%);

  /* Glow/bevel uniformati in beige scuro → marrone */
  --glow-light: rgba(158,122,79,0.35);
  --glow-strong: rgba(158,122,79,0.80);
  --border-neon: rgba(158,122,79,0.45);

  /* Estesi (compat) */
  --main-gold: var(--black);
  --main-gold-glow: #fffbe7; /* conservato per effetti di luce soft */
  --main-dark1: var(--beige-light);
  --main-dark2: #E7D8C1;

  /* Ombre ritarate su beige */
  --card-glow: 0 0 24px 0 rgba(158,122,79,0.20), 0 0 1.5px #fff;
  --gold-shadow: 0 0 18px rgba(255,255,255,0.35), 0 1.5px 12px rgba(184,147,98,0.10);
  --hero-shadow: 0 8px 48px rgba(158,122,79,0.22);
  --bubble-shadow: 0 4px 18px rgba(158,122,79,0.22), 0 1.5px 6px rgba(255,255,255,0.10);

  /* Tipografia globale */
  --app-font: "Cormorant Garamond", serif;
  --app-font-weight: 900;

  /* Chat dimension vars (conservate) */
  --chat-fs-base: 1.08rem;
  --chat-fs-header: 1.50rem;
  --chat-fs-message: 1.50rem;
  --chat-fs-input: 1.08rem;

  /* FullCalendar vars (verranno ri-mappate più giù in beige) */
  --fc-border-color: rgba(158,122,79,.22);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgba(234,220,198,.50);
  --fc-button-bg-color: var(--beige-dark);
  --fc-button-border-color: var(--beige-dark);
  --fc-button-text-color: var(--black);
  --fc-button-hover-bg-color: var(--beige-darker);
  --fc-button-hover-border-color: var(--beige-darker);
  --fc-button-active-bg-color: var(--beige-dark);
  --fc-button-active-border-color: var(--beige-dark);
  --fc-today-bg-color: rgba(158,122,79,.10);
  --fc-event-bg-color: var(--beige-dark);
  --fc-event-border-color: var(--beige-dark);
  --fc-event-text-color: var(--black);
}

/* ---------------- Reset & Base ---------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--gradient-background) fixed !important; /* beige chiaro */
  color: #000000  !important;                    /* testi bianchi */
  font-family: var(--app-font);
  font-weight: var(--app-font-weight);
  overflow-x: hidden;
  opacity: 0;
  animation: bodyFadeIn 0.8s 0.1s forwards;
}

/* Titoli e loghi: font globale; NB: i loghi non vengono alterati nei colori del file immagine */
h1, h2, h3, h4, h5, h6, .logo-text, .logo-subtext, .main-hero-glow {
  font-family: var(--app-font);
  font-weight: var(--app-font-weight);
  color: #000000 !important; /* testi bianchi */
}

/* Link: bianchi con underline/bevel beige dark */
a {
  color: var(--color-black);
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}
a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--beige-dark);
  transition: width 0.3s ease;
}
a:hover { color: var(--color-cream); text-shadow: 0 0 6px var(--glow-strong); }
a:hover::after { width: 100%; }

/* ---------------- Keyframes (immutati, ma agganciati a nuove glow vars) ---------------- */
@keyframes bodyFadeIn { to { opacity: 1; } }

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 6px var(--glow-strong); }
  20%, 24%, 55% { text-shadow: none; }
}
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
@keyframes floatUpDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes popUp { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes glowPulse {
  0% { box-shadow: 0 0 5px var(--glow-light); }
  50% { box-shadow: 0 0 20px var(--glow-strong); }
  100% { box-shadow: 0 0 5px var(--glow-light); }
}
@keyframes backgroundShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes bounce { 0%{transform:translateY(0)} 40%{transform:translateY(-9px)} 60%{transform:translateY(4px)} 80%{transform:translateY(-5px)} 100%{transform:translateY(0)} }
@keyframes fadeInHeroText { to { opacity: 1; transform: none; } }
@keyframes btnFloat { to { transform: translateY(-5px) scale(1.04); } }
@keyframes shine-scroll { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } }
@keyframes faqGlowMove { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes faqSlideDown {
  0% { opacity: 0; transform: translateY(-20px) scaleY(0.96); }
  70%{ opacity: 1; transform: translateY(2px) scaleY(1.02); }
  100%{ opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes rotate-glow { to { transform: rotate(360deg); } }
@keyframes slideIn { from { transform: translateX(40px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sendButtonPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px var(--glow-light); }
  50% { transform: scale(1.1); box-shadow: 0 0 20px var(--glow-strong); }
}

/* ---------------- Navbar (beige) ---------------- */
.navbar {
  --nav-item-h: 52px;
  background: var(--navbar-gradient) !important;
  color: var(--color-cream) !important;
  box-shadow: var(--gold-shadow) !important;
  border-radius: 0 0 2.1rem 2.1rem !important;
  backdrop-filter: blur(8px) saturate(120%);
  transition: background .24s;
  position: sticky; top: 0; z-index: 1000;
  animation: backgroundShift 10s ease infinite;
}
.navbar .navbar-brand {
  display: inline-flex; align-items: center;
  font-size: 1.65rem; font-weight: 900;
  color: var(--color-cream) !important;
  letter-spacing: .06em; box-shadow: none;
  text-shadow: 0 2px 16px rgba(255,255,255,0.2);
  transition: transform 0.18s; cursor: pointer;
  animation: neonFlicker 3s infinite;
}
.navbar .navbar-brand:hover { animation: bounce 0.5s; }

.navbar .navbar-nav { display: flex; align-items: center; gap: .25rem; }

.navbar .nav-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-cream) !important; font-weight: 700; letter-spacing: .04em;
  transition: color .21s, background .18s, transform .18s;
  border-radius: .8em; height: var(--nav-item-h); padding: 0 16px !important; line-height: 1; margin: 0; z-index: 1;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--beige-light) !important;
  background: rgba(184,147,98,0.18);
}

/* Bottone in navbar (coerente) */
.navbar .btn, .navbar .btn-outline-light, .navbar .btn-contact {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--nav-item-h); padding: 0 20px; line-height: 1; margin: 0;
}
.btn-contact {
  background: linear-gradient(90deg, var(--beige) 60%, var(--beige-light) 90%);
  color: #1a1a1a !important;
  font-weight: 800; border-radius: 28px; font-size: 1.13rem;
  box-shadow: 0 2px 12px rgba(184,147,98,0.30), 0 0 1.5px #fff;
  letter-spacing: 0.04em; border: none; padding: 0.48rem 1.6rem;
  transition: box-shadow 0.17s, background 0.18s, color .13s;
  text-shadow: 0 1.5px 8px rgba(255,255,255,0.35), 0 1px 1px rgba(255,255,255,0.2);
  display: inline-block; vertical-align: middle; outline: none;
}
.btn-contact:hover,
.btn-contact:focus {
  background: linear-gradient(90deg, var(--beige) 80%, var(--beige-light) 100%);
  color: #111 !important;
  box-shadow: 0 4px 24px rgba(184,147,98,0.45), 0 0 16px rgba(255,255,255,0.5);
  text-decoration: none; outline: none;
}

/* ---------------- Hero (prima sezione) ---------------- */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 7rem 2rem 5rem; text-align: center; overflow: hidden;
  background: var(--hero-gradient);               /* beige leggermente più scuro */
  color: #000000;                                  /* testo nero di base */
  box-shadow: var(--hero-shadow);
  animation: fadeInUp 1.4s cubic-bezier(.19,.8,.41,1.15) 0.15s both;
  border-radius: 0 0 3rem 3rem;
}

/* Forza il testo dell'hero a nero senza alterare gli highlight */
.hero,
.hero *:not(.highlight-line) {
  color: #000000 !important; /* prevale su body/h1–h6 globali */
}

.hero-window {
  background: rgba(234,220,198,0.85);            /* pannello beige con trasparenza */
  border: 2px solid var(--border-neon);
  border-radius: 1rem; padding: 2rem 1.5rem;
  max-width: 90%; width: 100%;
  box-shadow: 0 0 20px var(--glow-light);
  animation: floatUpDown 6s ease-in-out infinite;
  display: inline-block;
  color: #000000 !important;                      /* testi neri su hero window */
}

/* Titolo principale / glow (solo cambio colore base a nero) */
.main-hero-glow {
  font-size: clamp(2.2rem, 4.8vw, 3.2rem);
  font-weight: 700;
  color: #000000 !important;                      /* testo nero */
  line-height: 1.22; text-align: center; letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(158,122,79,0.55), 0 0 36px rgba(158,122,79,0.35), 0 2px 12px rgba(158,122,79,0.30);
  margin-bottom: 2.2rem; position: relative; z-index: 2;
}

/* Evidenziazione con clipping: resta identica (non va colorata in nero) */
.highlight-line {
  display: inline-block;
  background: linear-gradient(90deg, #000 0%, #000 25%, #000 60%, #e7d8c1 100%);
  background-size: 200% auto; background-clip: text; -webkit-background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: shine-scroll 6s linear infinite;
  font-weight: 900;
  text-shadow:
    0 0 18px rgba(158,122,79,0.55),
    0 0 42px rgba(158,122,79,0.30),
    0 2px 14px rgba(158,122,79,0.22);
}

/* Scale titoli con highlight (invariato) */
.hero h2.highlight-line { font-size: clamp(2.6rem, 7.5vw, 5.2rem); line-height: 1.08; letter-spacing: 0.01em; margin-bottom: 0.4rem; }
.hero h3.highlight-line { font-size: clamp(2.2rem, 6.5vw, 4.2rem); line-height: 1.1;  letter-spacing: 0.01em; margin-bottom: 0.5rem; }
.hero h4.highlight-line { font-size: clamp(1.8rem, 5vw, 3rem);   line-height: 1.14; letter-spacing: 0.005em; margin-bottom: 0.8rem; }

/* Testo di titoli NON evidenziati, paragrafi e link in nero */
.hero h1:not(.highlight-line),
.hero h2:not(.highlight-line),
.hero h3:not(.highlight-line),
.hero h4:not(.highlight-line),
.hero h5:not(.highlight-line),
.hero h6:not(.highlight-line),
.hero p,
.hero a {
  color: #000000 !important;
}

/* Bottoni (invariati nello stile, leggibilità scura già corretta) */
.hero .btn, .btn-contact {
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--beige) 40%, var(--beige-light) 60%);
  color: #1a1a1a !important; border-radius: 28px; font-weight: 800; font-size: 1.18rem;
  box-shadow: 0 4px 20px rgba(184,147,98,0.18);
  letter-spacing: 0.04em; border: none; padding: 0.77rem 2.2rem;
  transition: box-shadow 0.17s, transform 0.17s, color .19s;
  animation: btnFloat 2.2s ease-in-out 1.1s infinite alternate;
  text-shadow: 0 1px 10px rgba(255,255,255,0.50), 0 1px 2px rgba(255,255,255,0.35);
}
.hero .btn:hover, .btn-contact:hover, .btn-contact:focus {
  background: linear-gradient(90deg, var(--beige-light) 60%, var(--beige) 90%);
  color: #111 !important;
  box-shadow: 0 4px 44px rgba(184,147,98,0.44), 0 1.5px 12px rgba(255,255,255,0.25);
  transform: scale(1.07);
}



/* ---------------- Generic primary button ---------------- */
.btn-primary {
  background: var(--beige-dark) !important;
  color: var(--color-cream) !important;
  border: none; border-radius: 2rem; padding: 1rem 2.5rem; font-size: 1.2rem;
  box-shadow: 0 0 12px var(--glow-light); transition: transform 0.2s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 30px var(--glow-strong); }

/* ---------------- Features (Accordion) – beige ---------------- */
#features {
  padding: 3rem 0;
  background-color: var(--beige); /* sostituisce #2c2c2c */
  position: relative; z-index: 3;
}
#features .glow-title {
  font-size: 3rem; color: var(--color-black);
  text-shadow: 0 0 10px var(--glow-strong); animation: neonFlicker 4s infinite; margin-bottom: 3rem;
}
#features .card {
  position: relative; border: none; border-radius: 1.25rem; padding: 1.75rem;
  box-shadow: 0 6px 12px rgba(158,122,79,0.25);
  overflow: hidden;
  background:
    radial-gradient(circle at top left, var(--beige-dark) 25%, transparent 0) no-repeat top left,
    radial-gradient(circle at top right, var(--beige-dark) 25%, transparent 0) no-repeat top right,
    radial-gradient(circle at bottom right,var(--beige-dark) 25%, transparent 0) no-repeat bottom right,
    radial-gradient(circle at bottom left, var(--beige-dark) 25%, transparent 0) no-repeat bottom left,
    var(--beige-light);
  background-size: 3rem 3rem, 3rem 3rem, 3rem 3rem, 3rem 3rem, auto;
}
.feature-window {
  background: rgba(234,220,198,0.80);
  border: 2px solid var(--border-neon);
  border-radius: 1rem; padding: 2.5rem;
  box-shadow: 0 0 15px var(--border-neon);
  opacity: 0; transform: translateY(40px);
  animation: fadeInUp 0.8s forwards; cursor: pointer; transition: box-shadow 0.3s ease;
  color: var(--color-cream);
}
.feature-window:hover { box-shadow: 0 0 20px var(--glow-strong); }
.feature-window:nth-of-type(1) { animation-delay: 0.3s; }
.feature-window:nth-of-type(2) { animation-delay: 0.6s; }
.feature-window:nth-of-type(3) { animation-delay: 0.9s; }
.feature-icon { font-size: 4rem; color: var(--beige-dark); margin-bottom: 1rem; animation: popUp 0.6s forwards; }
.feature-summary { margin-bottom: 0.75rem; }
.feature-details { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height 320ms ease, opacity 240ms ease, transform 240ms ease; }
.feature-window.expanded .feature-details,
.feature-window[aria-expanded="true"] .feature-details { max-height: 1000px; opacity: 1; transform: translateY(0); }
/* Focus keyboard */
.feature-window:focus, .feature-window:focus-visible { outline: 2px solid rgba(158,122,79,0.55); outline-offset: 3px; }

/* ---------------- PRICING: sezione invariata tranne bottoni ---------------- */
/* Ripristina palette originale SOLO dentro #pricing */
#pricing {
  /* mantieni stilistica di fondo preesistente */
  padding: 6rem 1rem;
  background: var(--gradient-background);
  color: var(--color-dark);
  /* rebind delle vecchie var per non alterare colori esistenti della sezione */
  --color-teal: #9E7A4F;
  --color-cream: #F4EADB;
  --color-dark: #222222;
  --glow-light: #9E7A4F;
  --glow-strong: #9E7A4F;
  --border-neon: #9E7A4F;
}
#pricing .pricing-card {
  background: var(--color-cream);
  border: 2px solid var(--border-neon);
  border-radius: 1rem;
  padding: 2.5rem; text-align: center;
  box-shadow: 0 0 15px var(--border-neon);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#pricing .pricing-card:hover { transform: translateY(-10px); box-shadow: 0 0 30px var(--glow-strong); }
#pricing .pricing-card h3 { color: var(--color-teal); margin-bottom: 1rem; }
/* Bottoni prezzi: beige scuro + hover più scuro */
#pricing .pricing-card .btn,
#pricing .btn-outline-teal {
  background: #B89362 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(158,122,79,0.55) !important;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
  box-shadow: 0 2px 12px rgba(184,147,98,0.25);
}
#pricing .pricing-card .btn:hover,
#pricing .btn-outline-teal:hover {
  background: #9E7A4F !important;
  color: #FFFFFF !important;
  border-color: rgba(158,122,79,0.70) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(184,147,98,0.35);
}

/* ---------------- Contact (portato a beige chiaro) ---------------- */
#contact {
  padding: 6rem 1rem;
  background: var(--beige-light);
  text-align: center;
  color: var(--color-cream);
}
#contact input, #contact textarea {
  background: rgba(234,220,198,0.60);
  border: 1px solid var(--border-neon) !important;
  color: var(--color-cream) !important;
  border-radius: 0.5rem;
  transition: box-shadow 0.3s ease, border-color .2s ease;
}
#contact input:focus, #contact textarea:focus {
  box-shadow: 0 0 8px var(--glow-strong);
  outline: none; border-color: var(--glow-strong) !important;
}

/* ---------------- Scrollbar (beige) ---------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(184,147,98,0.45); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-neon); }

/* ---------------- Floating Chat Widget (beige) ---------------- */
.chat-widget {
  position: fixed; bottom: 20px; right: 20px; width: 320px; max-height: 500px;
  background: rgba(234,220,198,0.90);
  border: 2px solid var(--border-neon);
  border-radius: 1rem;
  box-shadow: 0 0 25px var(--glow-light);
  display: flex; flex-direction: column; overflow: hidden;
  animation: floatUpDown 6s ease-in-out infinite; z-index: 1050;
  color: var(--color-cream);
}
.chat-widget.closed { transform: translateY(100%) scale(0.8); opacity: 0; pointer-events: none; transition: transform .4s, opacity .4s; }
.chat-widget .chat-header {
  background: var(--beige);
  color: var(--color-cream);
  padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; font-weight: bold;
  text-shadow: 0 0 6px var(--glow-strong); animation: neonFlicker 3s infinite;
}
.chat-widget .chat-toggle { background: none; border: none; color: var(--color-cream); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.chat-widget .chat-body { flex: 1; display: flex; flex-direction: column; background: rgba(234,220,198,0.80); }

/* ---------------- Chatbox (widget pagina) ---------------- */
.chat-box {
  max-width: 600px; margin: 2.5rem auto;
  background: var(--beige);
  backdrop-filter: blur(16px);
  border: 2px solid var(--border-neon);
  border-radius: 2rem;
  box-shadow: 0 8px 24px rgba(184,147,98,0.35), 0 0 40px var(--glow-light), inset 0 0 30px var(--glow-strong);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 500px; position: static; font-size: var(--chat-fs-base);
  color: var(--color-cream);
}
.chat-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(184,147,98,0.40), 0 0 60px var(--glow-strong), inset 0 0 40px var(--glow-strong);
}

/* Header chat */
.chat-box .chat-header {
  background: linear-gradient(135deg, var(--beige-dark), var(--beige));
  color: var(--color-cream);
  padding: 1rem 1.5rem; font-weight: bold; font-size: var(--chat-fs-header);
  letter-spacing: 0.05em; text-shadow: 0 0 10px var(--glow-strong);
  border-bottom: 1px solid var(--border-neon); flex: 0 0 auto;
}

/* Body chat */
.chat-box .chat-body {
  display: flex; flex-direction: column; flex: 1 1 auto; padding: 1rem;
  background: rgba(242,232,213,0.65); /* beige chiaro trasparente */
  box-shadow: inset 0 0 20px var(--glow-light); overflow: hidden; color: var(--color-cream);
}

/* Messaggi */
.chat-box .chat-messages {
  flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding-right: .5rem;
  scrollbar-width: thin; scrollbar-color: var(--border-neon) transparent;
}
.chat-box .chat-messages::-webkit-scrollbar { width: 10px; }
.chat-box .chat-messages::-webkit-scrollbar-thumb { background: var(--border-neon); border-radius: 3px; }

.chat-box .message {
  display: inline-block; max-width: 80%; padding: .75rem 1rem; border-radius: 2rem; position: relative;
  animation: none !important;
  box-shadow: 0 2px 8px rgba(184,147,98,0.35), inset 0 0 5px var(--glow-light);
  font-size: var(--chat-fs-message); line-height: 1.45; color: var(--color-cream);
}
.chat-box .message.bot {
  background: rgba(185,147,98,0.22);
  color: var(--color-cream);
  border-top-left-radius: 0; align-self: flex-start; border: 1px solid var(--glow-light);
}
.chat-box .message.user {
  background: var(--beige-dark);
  color: var(--color-cream);
  border-top-right-radius: 0; align-self: flex-end; border: 1px solid var(--glow-light);
}

/* Input */
.chat-box .chat-input {
  flex: 0 0 auto; display: flex; align-items: center; padding: .75rem 1rem;
  background: rgba(234,220,198,0.60);
  border-top: 2px solid var(--border-neon);
  box-shadow: inset 0 0 10px var(--glow-light);
}
.chat-box .chat-input .form-control {
  flex: 1; background: transparent;
  border: 1px solid var(--border-neon); border-radius: 1rem; outline: none; color: var(--color-cream);
  padding: .75rem 1rem; font-size: var(--chat-fs-input); transition: border-color .2s ease, box-shadow .2s ease;
}
.chat-box .chat-input .form-control:focus { border-color: var(--glow-strong); box-shadow: 0 0 8px var(--glow-strong); }
.chat-box .chat-input .btn {
  margin-left: .5rem; background: var(--beige-dark); border: none; border-radius: 50%;
  width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px var(--glow-light), inset 0 0 8px var(--glow-strong);
  transition: transform .2s ease, box-shadow .3s ease; animation: sendButtonPulse 1.8s infinite; color: var(--color-cream);
}
.chat-box .chat-input .btn:hover { transform: scale(1.2); box-shadow: 0 0 20px var(--glow-strong), inset 0 0 12px var(--glow-strong); }

/* Mobile tuning per chat */
@media (max-width: 600px) {
  .chat-box { font-size: 1.12rem; }
  .chat-box .chat-header { font-size: 1.55rem; }
  .chat-box .message { font-size: 1.12rem; }
  .chat-box .chat-input .form-control { font-size: 1.12rem; color: #000}
}

/* ---------------- Activity Section (testi bianchi, carte beige) ---------------- */
.activity-hero { margin-top: 2.5rem; }
.activity-hero h1 {
  font-weight: 800; font-size: 2.2rem; color: var(--color-cream);
  text-shadow: 0 0 12px rgba(158,122,79,0.45); margin-bottom: 1rem;
}

.activity-content { display: flex; gap: 2.5rem; justify-content: center; align-items: flex-start; margin: 2.5rem 0; }

.activity-types-grid { display: grid; grid-template-columns: repeat(1, 150px); gap: 1.3rem 1.3rem; }

.activity-card {
  background: linear-gradient(120deg, var(--beige-light) 80%, var(--beige) 100%);
  color: var(--beige-dark);
  border: none; outline: none; border-radius: 1.8rem;
  box-shadow: 0 2px 16px rgba(184,147,98,0.25), 0 2px 9px rgba(184,147,98,0.25);
  min-width: 110px; min-height: 110px; width: 140px; height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem;
  font-size: 1.13rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; position: relative;
  transition: box-shadow .21s cubic-bezier(.41,1.2,.52,1), transform .18s cubic-bezier(.41,1.3,.51,1.13), background .18s, color .14s;
  z-index: 2; border: 2px solid transparent;
}
.activity-card .activity-icon { font-size: 2rem; margin-bottom: .08rem; filter: drop-shadow(0 1.5px 6px rgba(158,122,79,0.08)); transition: filter .17s; }
.activity-card .activity-label { font-size: 1.02rem; font-weight: 700; color: var(--beige-dark); text-shadow: 0 1.5px 4px rgba(255,255,255,0.6); }

.activity-card.active,
.activity-card:hover,
.activity-card:focus {
  background: linear-gradient(120deg, var(--beige-dark) 38%, var(--beige-light) 150%);
  color: var(--color-cream);
  box-shadow: 0 8px 44px rgba(184,147,98,0.35), 0 2px 9px rgba(255,255,255,0.35);
  border-color: var(--beige-dark);
  transform: translateY(-7px) scale(1.07) rotate(-2deg);
}
.activity-card.active .activity-label,
.activity-card:hover .activity-label,
.activity-card:focus .activity-label { color: var(--color-cream); text-shadow: 0 1.5px 8px rgba(184,147,98,0.25), 0 0 5px rgba(255,255,255,0.75); }
.activity-card.active .activity-icon,
.activity-card:hover .activity-icon,
.activity-card:focus .activity-icon { filter: drop-shadow(0 3px 18px rgba(184,147,98,0.22)) drop-shadow(0 1.5px 8px rgba(255,255,255,0.35)); }

/* Chat demo container accanto alle card (mantiene vibe beige) */
.activity-chatbox { flex: 1; min-width: 340px; max-width: 470px; }


/* ---------------- Cards / Sections generiche in beige ---------------- */
.section {
  padding: 4.5rem 1.25rem;
  background: var(--beige-light);
  color: var(--color-cream);
}
.section.alt {
  background: var(--beige); /* alternanza leggermente più scura */
}

/* Bordi e highlight */
.hr-glow {
  border: 0; height: 2px; margin: 2rem auto; width: min(720px, 92%);
  background: linear-gradient(90deg, transparent, rgba(158,122,79,0.6), transparent);
  box-shadow: 0 0 12px var(--glow-strong);
}

/* ---------------- Info banner ---------------- */
.info-banner {
  background: linear-gradient(135deg, var(--beige-dark), var(--beige));
  color: var(--color-cream);
  padding: 1rem 1.5rem; border: 1px solid var(--border-neon);
  border-radius: 1rem; box-shadow: 0 2px 10px var(--glow-light);
}

/* ---------------- Footer ---------------- */
.footer {
  background: var(--beige);
  color: var(--color-cream);
  padding: 3rem 1rem; text-align: center;
  border-top: 1px solid var(--border-neon);
  box-shadow: 0 -6px 24px rgba(158,122,79,0.12);
}
.footer a { color: var(--color-cream); }
.footer .social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(158,122,79,0.25);
  margin: 0 .35rem; transition: background .2s ease, transform .2s ease;
}
.footer .social a:hover { background: var(--beige-dark); transform: translateY(-2px); }

/* ---------------- Grid helpers ---------------- */
.container { width: min(1200px, 94%); margin: 0 auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 992px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------------- Cards generali ---------------- */
.card {
  background: var(--beige-light);
  border: 1px solid var(--border-neon);
  color: var(--color-cream);
  border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(158,122,79,0.16);
}
.card .card-title { color: var(--color-cream); font-weight: 800; margin-bottom: .75rem; }
.card .card-text { color: var(--color-cream); opacity: .95; }

/* ---------------- Forms ---------------- */
.form-control {
  background: rgba(234,220,198,0.50) !important;
  border: 1px solid var(--border-neon) !important;
  color: var(--color-cream) !important;
  border-radius: .8rem; padding: .75rem 1rem;
}
.form-control::placeholder { color: rgba(255,255,255,0.75); }
.form-control:focus {
  box-shadow: 0 0 9px var(--glow-strong) !important;
  border-color: var(--glow-strong) !important; outline: none;
}

/* ---------------- Buttons (generali) ---------------- */
.btn {
  border-radius: 2rem; padding: .85rem 1.6rem; border: none;
  background: var(--beige-dark); color: var(--color-cream);
  box-shadow: 0 0 12px var(--glow-light); transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 22px var(--glow-strong); }

.btn-outline {
  background: transparent; border: 2px solid var(--beige-dark);
  color: var(--color-cream); padding: .75rem 1.35rem;
}
.btn-outline:hover { background: var(--beige-dark); }

/* ---------------- Tabs / Pills ---------------- */
.nav-pills .nav-link {
  color: var(--color-cream); background: rgba(234,220,198,0.35);
  border: 1px solid var(--border-neon); margin: .25rem; border-radius: 2rem;
}
.nav-pills .nav-link.active { background: var(--beige-dark); }

/* ---------------- Tables ---------------- */
.table {
  width: 100%; border-collapse: collapse;
  color: var(--color-cream);
  background: rgba(234,220,198,0.35);
  border: 1px solid var(--border-neon);
}
.table th, .table td { padding: .75rem 1rem; border-bottom: 1px solid rgba(158,122,79,0.25); }
.table thead th { background: rgba(184,147,98,0.25); }

/* ---------------- Alerts ---------------- */
.alert {
  border: 1px solid var(--border-neon); color: var(--color-cream);
  background: rgba(234,220,198,0.60); border-radius: .8rem; padding: 1rem 1.25rem;
}
.alert-success { background: rgba(184,147,98,0.35); }
.alert-danger { background: rgba(184,147,98,0.25); }

/* ---------------- Badges ---------------- */
.badge {
  display: inline-block; padding: .35rem .6rem; border-radius: 1rem;
  background: var(--beige-dark); color: var(--color-cream);
  border: 1px solid rgba(158,122,79,.45);
}

/* ---------------- Progress / Range ---------------- */
.progress {
  height: 10px; background: rgba(234,220,198,0.45);
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border-neon);
}
.progress-bar { background: var(--beige-dark); color: var(--color-cream); }
input[type="range"] {
  width: 100%; accent-color: var(--beige-dark);
  background: transparent;
}

/* ---------------- Modals ---------------- */
.modal-backdrop.show { background: rgba(158,122,79,0.45); }
.modal-content {
  background: var(--beige); color: var(--color-cream);
  border: 1px solid var(--border-neon); border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(158,122,79,0.25);
}
.modal-header, .modal-footer { border-color: rgba(158,122,79,0.35); }
.modal-title { color: var(--color-cream); }

/* ---------------- Tooltips / Popovers ---------------- */
.tooltip-inner {
  background: var(--beige-dark); color: var(--color-cream);
  box-shadow: 0 0 12px var(--glow-light);
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { background: var(--beige-dark); }

/* ---------------- Timeline / Steps ---------------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  background: var(--beige-light); padding: 2rem; border-radius: 1.25rem;
  border: 1px solid var(--border-neon); box-shadow: 0 8px 24px rgba(158,122,79,0.14);
}
.step {
  background: rgba(234,220,198,0.6);
  border: 1px solid var(--border-neon); border-radius: 1rem; padding: 1rem;
  color: var(--color-cream);
}
.step .idx {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--beige-dark); color: var(--color-cream);
  display: inline-flex; align-items: center; justify-content: center; margin-right: .5rem; font-weight: 800;
}

/* ---------------- FAQ ---------------- */
.faq {
  padding: 4rem 1rem; background: var(--beige);
  color: var(--color-cream);
}
.faq .item {
  border: 1px solid var(--border-neon);
  border-radius: 1rem; margin-bottom: 1rem; overflow: hidden;
  background: rgba(234,220,198,0.60); box-shadow: 0 8px 24px rgba(158,122,79,0.14);
}
.faq .q {
  padding: 1rem 1.25rem; cursor: pointer; font-weight: 800;
  background: rgba(184,147,98,0.25);
}
.faq .a { padding: 1rem 1.25rem; display: none; }
.faq .item.open .a { display: block; }

/* ---------------- Chips / Pills ---------------- */
.chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem;
  border-radius: 999px; border: 1px solid var(--border-neon);
  color: var(--color-cream); background: rgba(234,220,198,0.50);
}
.chip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--beige-dark);
  box-shadow: 0 0 6px var(--glow-strong);
}

/* ---------------- Code / Pre ---------------- */
code, pre, .code {
  background: rgba(234,220,198,0.55);
  border: 1px solid var(--border-neon); color: var(--color-cream);
  border-radius: .75rem; padding: .6rem .9rem; display: block;
  box-shadow: inset 0 0 6px var(--glow-light);
}

/* ---------------- Breadcrumb ---------------- */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: rgba(234,220,198,0.50); border: 1px solid var(--border-neon);
  padding: .6rem .9rem; border-radius: .75rem;
}
.breadcrumb a { color: var(--color-cream); }
.breadcrumb .sep { opacity: .7; }

/* ---------------- Pagination ---------------- */
.pagination {
  display: inline-flex; gap: .4rem; background: rgba(234,220,198,0.50);
  padding: .4rem; border-radius: 999px; border: 1px solid var(--border-neon);
}
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; color: var(--color-cream); border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.page-link:hover { background: var(--beige-dark); transform: translateY(-1px); }
.page-link.active { background: var(--beige-dark); border-color: rgba(158,122,79,0.60); }

/* ---------------- Toasts ---------------- */
.toast {
  background: var(--beige); color: var(--color-cream);
  border: 1px solid var(--border-neon); border-radius: .75rem;
  box-shadow: 0 8px 24px rgba(158,122,79,0.18);
}

/* ---------------- Shadows / Borders helpers ---------------- */
.shadow-glow { box-shadow: 0 0 22px var(--glow-strong) !important; }
.border-glow { border: 1px solid var(--border-neon) !important; }
.text-glow { text-shadow: 0 0 12px var(--glow-strong) !important; }

/* ---------------- Sections: About / Services ---------------- */
#about, #services {
  padding: 6rem 1rem; color: var(--color-cream);
}
#about { background: var(--beige-light); }
#services { background: var(--beige); }
.section-title {
  font-weight: 900; letter-spacing: .03em; margin-bottom: 1.25rem;
  color: var(--color-cream); text-shadow: 0 0 10px var(--glow-strong);
}
.section-subtitle { color: var(--color-cream); opacity: .95; margin-bottom: 2rem; }

/* Service cards */
.service-card {
  background: rgba(234,220,198,0.65);
  border: 1px solid var(--border-neon); border-radius: 1rem;
  padding: 1.5rem; color: var(--color-cream);
  box-shadow: 0 8px 24px rgba(158,122,79,0.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(158,122,79,0.26); }

/* ---------------- CTA Banner ---------------- */
.cta {
  padding: 3.2rem 1.2rem; text-align: center;
  background: linear-gradient(100deg, var(--beige) 0%, var(--beige-light) 100%);
  color: var(--color-cream); border-top: 1px solid var(--border-neon); border-bottom: 1px solid var(--border-neon);
}
.cta .btn { background: var(--beige-dark); }
.cta .btn:hover { background: var(--beige-darker); }

/* ---------------- Media elements ---------------- */
.figure, .media-box {
  background: rgba(234,220,198,0.60); border: 1px solid var(--border-neon);
  border-radius: 1rem; overflow: hidden; box-shadow: 0 8px 24px rgba(158,122,79,0.20);
}
.media-box .caption { padding: .75rem 1rem; color: var(--color-cream); background: rgba(184,147,98,0.20); }

/* ---------------- Chips di stato ---------------- */
.status-ok { background: rgba(184,147,98,0.35); color: var(--color-cream); }
.status-warn { background: rgba(184,147,98,0.25); color: var(--color-cream); }

/* ---------------- Calendar (FullCalendar) skin beige ---------------- */
.fc-theme-standard .fc-scrollgrid,
.fc .fc-scrollgrid,
.fc .fc-col-header,
.fc .fc-timegrid,
.fc .fc-daygrid,
.fc .fc-list {
  background: rgba(242,232,213,0.65) !important;
  color: var(--color-cream) !important;
  border-color: var(--fc-border-color) !important;
}
.fc .fc-toolbar-title { color: var(--color-cream) !important; text-shadow: 0 0 8px var(--glow-strong); }
.fc .fc-daygrid-day-number, .fc .fc-timegrid-slot-label { color: var(--color-cream) !important; }
.fc .fc-highlight { background: rgba(158,122,79,.20) !important; }
.fc .fc-timegrid-now-indicator-line { border-color: var(--beige-dark) !important; }

/* ---------------- Forms avanzati / switches ---------------- */
.form-switch .form-check-input {
  width: 3em; height: 1.6em; background-color: rgba(234,220,198,0.55);
  border: 1px solid var(--border-neon);
}
.form-switch .form-check-input:checked {
  background-color: var(--beige-dark); border-color: var(--beige-dark);
  box-shadow: 0 0 10px var(--glow-strong);
}

/* ---------------- Utilities colore tipografia ---------------- */
.text-black { color: var(--color-cream) !important; }
.text-muted { color: rgba(0, 0, 0, 0) !important; }
.text-soft { color: rgba(0, 0, 0, 0) !important; }
.text-accent { color: var(--beige-dark) !important; }

/* ---------------- Utilities background ---------------- */
.bg-site { background: var(--beige-light) !important; }
.bg-hero { background: var(--beige) !important; }
.bg-chat { background: var(--beige) !important; }
.bg-panel { background: rgba(234,220,198,0.60) !important; }

/* ---------------- List, markers ---------------- */
ul { list-style: none; }
ul.list-markers li::before {
  content: '•'; color: var(--beige-dark); margin-right: .5rem; text-shadow: 0 0 6px var(--glow-light);
}

/* ---------------- Anim helpers ---------------- */
.fade-in   { animation: fadeInUp .45s ease-out both; }
.pop-in    { animation: popUp .35s ease-out both; }
.slide-in  { animation: slideIn .35s ease-out both; }
.float-loop{ animation: floatUpDown 6s ease-in-out infinite; }

/* ---------------- Cards con bordo luminoso ---------------- */
.glow-card {
  position: relative; border-radius: 1.25rem; padding: 1.5rem;
  background: linear-gradient(145deg, rgba(242,232,213,0.95), rgba(234,220,198,0.90));
  border: 2px solid var(--border-neon);
  box-shadow: 0 0 18px var(--glow-light), inset 0 0 12px rgba(255,255,255,0.20);
  color: var(--color-cream);
}

/* ---------------- Pill buttons ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem;
  border-radius: 999px; background: var(--beige-dark); color: var(--color-cream);
  box-shadow: 0 0 12px var(--glow-light); border: 1px solid rgba(158,122,79,.45);
}
.pill:hover { background: var(--beige-darker); }

/* ---------------- Breadcrumb-hero (se presente) ---------------- */
.breadcrumb-hero {
  background: var(--beige); color: var(--color-cream);
  padding: 1rem; border-radius: 1rem; border: 1px solid var(--border-neon);
}

/* ---------------- Divider decorativi ---------------- */
.divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(158,122,79,.5), transparent);
  box-shadow: 0 0 10px var(--glow-light);
  margin: 1.2rem 0;
}

/* ---------------- Code blocks inline ---------------- */
code.inline {
  display: inline-block; border-radius: .4rem; padding: .18rem .45rem;
  background: rgba(234,220,198,0.55); color: var(--color-cream);
  border: 1px solid var(--border-neon);
}

/* ---------------- Header secondari ---------------- */
.subheader {
  padding: 1.2rem; background: var(--beige);
  border: 1px solid var(--border-neon); border-radius: .9rem;
  color: var(--color-cream); box-shadow: 0 6px 18px rgba(158,122,79,0.16);
}

/* ---------------- Notices ---------------- */
.notice {
  background: rgba(234,220,198,0.70);
  border: 1px solid var(--border-neon); color: var(--color-cream);
  border-radius: 1rem; padding: 1rem 1.25rem;
}
.notice.info { background: rgba(234,220,198,0.60); }
.notice.ok   { background: rgba(184,147,98,0.35); }
.notice.warn { background: rgba(184,147,98,0.25); }

/* ---------------- Selection ---------------- */
::selection { background: var(--beige-dark); color: var(--black); }
::-moz-selection { background: var(--beige-dark); color: var(--black); }

/* ---------------- Breadcrumb dark-to-light blend ---------------- */
.breadcrumb.is-hero {
  background: linear-gradient(90deg, var(--beige) 0%, var(--beige-light) 100%);
  border: 1px solid var(--border-neon);
  color: var(--color-cream);
}

/* ---------------- Accordions alt ---------------- */
.accordion .accordion-item {
  border: 1px solid var(--border-neon); background: rgba(234,220,198,0.55);
  color: var(--color-cream); border-radius: .9rem; overflow: hidden; margin-bottom: .8rem;
}
.accordion-button {
  background: rgba(184,147,98,0.25) !important; color: var(--color-cream) !important;
}
.accordion-button:not(.collapsed) { background: var(--beige-dark) !important; color: var(--color-cream) !important; }
.accordion-body { background: rgba(234,220,198,0.60); }

/* ---------------- Tabs alt ---------------- */
.nav-tabs { border-bottom: 1px solid var(--border-neon); }
.nav-tabs .nav-link {
  color: var(--color-cream);
  background: rgba(234,220,198,0.40);
  border: 1px solid var(--border-neon);
  border-bottom: none; margin-right: .25rem; border-top-left-radius: .8rem; border-top-right-radius: .8rem;
}
.nav-tabs .nav-link.active { background: var(--beige-dark); border-color: rgba(158,122,79,0.60); }

/* ---------------- Cards: hover-lift ---------------- */
.card.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(158,122,79,0.24); }

/* ---------------- Inputs con icona ---------------- */
.input-icon {
  position: relative;
}
.input-icon .icon {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--color-cream); opacity: .9;
}
.input-icon .form-control { padding-left: 2.2rem; }

/* ---------------- Chips filtri ---------------- */
.filters {
  display: flex; gap: .5rem; flex-wrap: wrap;
  background: rgba(234,220,198,0.50); padding: .6rem; border-radius: .8rem; border: 1px solid var(--border-neon);
}
.filters .chip { background: rgba(234,220,198,0.70); }

/* ---------------- Lists check ---------------- */
.list-check li {
  display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .45rem; color: var(--color-cream);
}
.list-check li .mark {
  width: 1.1rem; height: 1.1rem; border-radius: .3rem; background: var(--beige-dark);
  box-shadow: 0 0 6px var(--glow-light); margin-top: .25rem;
}

/* ---------------- Window / Pane generici ---------------- */
.pane {
  background: rgba(234,220,198,0.62); color: var(--color-cream);
  border: 1px solid var(--border-neon); border-radius: 1rem; padding: 1.1rem 1.2rem;
  box-shadow: 0 8px 22px rgba(158,122,79,0.16), inset 0 0 12px rgba(255,255,255,0.18);
}

/* ---------------- Hero banner secondario ---------------- */
.hero-sub {
  background: linear-gradient(120deg, var(--beige) 0%, var(--beige-light) 120%);
  color: var(--color-cream); padding: 3.2rem 1rem; text-align: center; border-top: 1px solid var(--border-neon); border-bottom: 1px solid var(--border-neon);
}


/* ===========================
   CONTINUAZIONE — Beige theme
   =========================== */

/* ---------------- Chatbot Demo (sezione pubblica) ---------------- */
.chat-demo {
  position: static;
  max-width: 480px;
  height: 500px;
  margin: 2.5rem auto;
  display: flex;
  flex-direction: column;
  background-color: var(--beige);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(158,122,79,0.28);
  z-index: 1;
  color: var(--color-cream);
}
.chat-demo .chat-messages {
  position: static;
  z-index: 2;
  flex: 1 1 auto;
  padding: 1rem;
  overflow-y: auto;
  background-color: rgba(242,232,213,0.55);
  color: var(--color-cream);
  font-size: 1rem;
}

/* ---------------- Hero/Subheader extra ---------------- */
.hero-subtle {
  background: var(--beige-light);
  color: var(--color-cream);
  padding: 2rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border-neon);
  box-shadow: 0 8px 24px rgba(158,122,79,0.18);
}

/* ---------------- Footer (dettagli aggiuntivi) ---------------- */
footer, footer.bg-primary {
  background: linear-gradient(90deg, var(--beige), var(--beige-light)) !important;
  color: var(--color-cream) !important;
  border-radius: 1.3rem 1.3rem 0 0;
  box-shadow: 0 -2px 22px rgba(158,122,79,0.18);
  margin-top: 2.5rem;
  padding-top: 2.2rem !important;
  padding-bottom: 2.1rem !important;
}
footer a { color: var(--color-cream) !important; text-decoration: underline dotted; font-weight: 600; }
footer a:hover { color: var(--black) !important; text-decoration: underline wavy; }
footer, footer .container {
  width: 100%; max-width: 100vw !important;
  text-align: center !important; margin: 0 auto !important; justify-content: center !important;
  display: block; border-radius: 1.3rem 1.3rem 0 0;
}
footer p, footer small, footer h5 { margin-left: auto; margin-right: auto; display: block; }

/* ---------------- Contact page ---------------- */
.contact-hero {
  background: linear-gradient(110deg, var(--beige) 0%, var(--beige-light) 120%);
  box-shadow: 0 8px 48px rgba(158,122,79,0.22);
  border-radius: 0 0 3rem 3rem;
  text-align: center;
  padding: 5rem 1rem 2rem 1rem;
  margin-bottom: 2.5rem;
  color: var(--color-cream);
}
.contact-hero h1 {
  color: var(--color-cream);
  text-shadow: 0 0 24px var(--glow-strong), 0 2px 20px rgba(255,255,255,0.35);
  font-weight: 900; font-size: 2.5rem; letter-spacing: .05em;
}
.contact-form-section {
  max-width: 540px; margin: 0 auto;
  background: linear-gradient(120deg, var(--beige-light) 0%, var(--beige) 120%);
  border-radius: 1.3rem;
  box-shadow: 0 4px 22px rgba(158,122,79,0.20), 0 0 24px rgba(255,255,255,0.20);
  padding: 2.3rem 2rem 2rem 2rem;
  color: var(--color-cream);
}
.contact-form label { color: var(--color-cream); font-weight: 600; letter-spacing: .02em; }
.contact-form .form-control {
  background: rgba(234,220,198,0.55);
  border-radius: 13px;
  border: 1.2px solid rgba(158,122,79,0.45);
  color: var(--color-cream);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  padding: 0.68rem 1rem;
}
.contact-form .form-control:focus {
  background: rgba(234,220,198,0.65);
  border-color: var(--border-neon);
  box-shadow: 0 0 0 2px var(--glow-strong);
  color: var(--color-cream);
}
.btn-send {
  background: var(--beige-dark);
  color: var(--color-cream) !important;
  font-weight: 800; border-radius: 22px;
  padding: 0.7rem 2.2rem;
  box-shadow: 0 2px 18px rgba(184,147,98,0.30);
  transition: box-shadow .18s, background .15s, color .13s;
}
.btn-send:hover {
  background: var(--beige-darker);
  color: var(--black) !important;
  box-shadow: 0 4px 22px rgba(184,147,98,0.45);
}
.contact-success { color: var(--black); font-weight: 700; margin-top: 1.1rem; text-align: center; letter-spacing: .02em; }

/* ---------------- FAQ (sezione complessa) ---------------- */
.faq-section {
  background: linear-gradient(120deg, var(--beige-light) 0%, var(--beige) 120%);
  border-radius: 1.15rem;
  box-shadow: 0 8px 24px rgba(158,122,79,0.25), 0 0 40px var(--glow-light), inset 0 0 30px var(--glow-strong);
  padding: 2.6rem 1.6rem 2.3rem 1.6rem;
  margin: 3.5rem auto 2rem auto;
  max-width: 720px;
  color: var(--color-cream);
}
.faq-title {
  color: var(--color-cream);
  font-weight: 900; font-size: 2.1rem; margin-bottom: 2.2rem; letter-spacing: .02em; text-align: center;
  background: linear-gradient(110deg, #ffffff 15%, #f3ecdf 50%, #efe2cf 85%);
  background-size: 300% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: faqGlowMove 5.5s linear infinite;
}
.accordion-flush .accordion-item { border: none; background: transparent; }
.accordion-button {
  background: rgba(234,220,198,0.55);
  color: var(--color-cream);
  font-weight: 700; font-size: 1.08rem; border-radius: .8em !important; margin-bottom: .6rem;
  transition: background .19s, color .18s, box-shadow .18s;
  box-shadow: 0 1px 6px rgba(255,255,255,0.1);
  outline: none;
}
.accordion-button:not(.collapsed) {
  background: var(--beige-dark);
  color: var(--color-cream);
  font-weight: 900; box-shadow: 0 2px 16px rgba(184,147,98,0.35);
  outline: none;
}
.accordion-button:focus { box-shadow: 0 0 0 2px var(--glow-strong); border-color: var(--beige-dark); outline: none; }
.accordion-body {
  background: rgba(234,220,198,0.55);
  color: var(--color-cream);
  border-radius: .7em; margin-bottom: .8rem; font-size: 1.02rem;
  animation: faqSlideDown 0.56s cubic-bezier(.5,1.45,.56,1) both;
  border: none; box-shadow: 0 1px 10px rgba(255,255,255,0.10);
}

/* ---------------- Logo text (NON alterare i loghi) ---------------- */
/* Ripristino cromia brand per i testi-logo, come da richiesta */
.logo-text,
.logo-textlogin,
.logo-subtext {
  color: #2C5D53 !important; /* colore originale brand */
  text-shadow: 0 2px 10px rgba(0,0,0,0.20), 0 1px 4px #2C5D53;
  font-weight: 700;
}

/* ---------------- Home Floating Action Button ---------------- */
.home-fab {
  position: fixed; bottom: 32px; right: 28px; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  background: linear-gradient(135deg, var(--beige-light) 70%, var(--beige) 100%);
  color: #232323; border-radius: 50%;
  box-shadow: 0 4px 22px rgba(0,0,0,0.20), 0 0 14px rgba(184,147,98,0.45);
  font-size: 2rem; transition: background .19s, color .14s, box-shadow .21s, transform .14s;
  cursor: pointer; border: none; outline: none; opacity: .94; text-decoration: none;
}
.home-fab:hover, .home-fab:focus {
  background: linear-gradient(135deg, var(--beige) 40%, var(--beige-light) 100%);
  color: #1a1a1a; box-shadow: 0 8px 32px rgba(184,147,98,0.45), 0 0 18px rgba(255,255,255,0.65);
  transform: scale(1.07); opacity: 1;
}
.home-fab i { display: block; font-size: 1.2em; transition: transform .23s cubic-bezier(.33,1.52,.62,.99); }
.home-fab:hover i { transform: scale(1.15) rotate(-7deg); }

/* ===========================
   Login Activity (layout)
   =========================== */
body.login {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1rem, 3vw, 1.6rem);
  background: var(--gradient-background);
  color: var(--color-cream);
}
body.login > a.align-items-center {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-bottom: .6rem; text-decoration: none;
}
body.login > a.align-items-center img { height: clamp(48px, 9vw, 72px); width: auto; }

/* Wrapper che centra il pannello */
.login-wrapper {
  width: 100%; flex: 1; display: grid; place-items: center; padding: 0;
}

/* Pannello */
.login-panel {
  width: min(520px, 96vw); margin: 0 auto;
  background: rgba(234,220,198,0.88);
  border: 1.5px solid rgba(158,122,79,0.32);
  border-radius: 1.2rem;
  box-shadow: 0 18px 54px rgba(158,122,79,0.25), 0 0 32px rgba(255,255,255,0.20), inset 0 0 24px rgba(158,122,79,0.25);
  backdrop-filter: blur(6px) saturate(120%);
  padding: 1.2rem 1rem 1rem;
  position: relative; color: var(--color-cream);
}
.login-panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.10), transparent 50%);
  z-index: 0;
}
.login-panel .panel-body { position: relative; z-index: 1; }

/* Typography */
.login-title {
  margin: 0 0 .8rem 0; line-height: 1.06; text-align: center;
  font-size: clamp(2rem, 6vw, 3rem); color: var(--color-cream);
}
.login-sub {
  margin: 0 0 1rem 0; opacity: .95; text-align: center;
  font-size: clamp(1rem, 2.6vw, 1.1rem); color: var(--color-cream);
}

/* Form */
.form-grid { display: grid; gap: .9rem; margin-top: .6rem; }
.form-grid label { font-size: .98rem; letter-spacing: .01em; color: var(--color-cream); }
.form-grid input {
  background: rgba(234,220,198,0.35); border: 1px solid rgba(158,122,79,0.35);
  color: var(--color-cream); border-radius: .8rem; padding: .8rem .9rem; outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s; width: 100%;
}
.form-grid input:focus {
  border-color: rgba(158,122,79,0.60); box-shadow: 0 0 0 2px rgba(158,122,79,0.55);
  background: rgba(234,220,198,0.42);
}

/* Bottoni */
.login-actions { display: flex; align-items: center; gap: .6rem; justify-content: space-between; margin-top: .8rem; }
.btn-primary-login {
  background: linear-gradient(90deg, var(--beige) 40%, var(--beige-light) 60%);
  color: #1a1a1a; border: none; border-radius: .9rem; font-weight: 800; padding: .8rem 1.2rem;
  box-shadow: 0 4px 18px rgba(184,147,98,0.25); cursor: pointer;
  transition: transform .16s, box-shadow .18s, background .18s;
}
.btn-primary-login:hover, .btn-primary-login:focus {
  background: linear-gradient(90deg, var(--beige-light) 60%, var(--beige) 90%);
  box-shadow: 0 6px 28px rgba(184,147,98,0.35); transform: translateY(-1px);
}
.login-error { color: #ffb4b4; font-weight: 700; min-height: 1.2em; }

/* Fix centratura mobile login */
html, body { margin: 0; }
body.login {
  min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr; align-items: start; justify-items: center;
  padding: clamp(1rem, 3vw, 1.6rem); overflow-x: hidden;
}
body.login > a.align-items-center {
  width: 100%; max-width: 1024px; display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin: 0 0 .6rem 0; text-decoration: none;
}
.login-wrapper {
  width: 100%; max-width: 1024px; display: grid; place-items: center; min-height: 100%;
}
.login-panel { width: min(520px, 94vw); margin: 0 auto; padding: 1.2rem 1rem 1rem; transform: translateZ(0); }
@media (max-width: 600px) { .form-grid input { font-size: 16px; } }
@supports (-webkit-touch-callout: none) { .form-grid input { font-size: 16px; } }

/* ===========================
   Admin: Generazione credenziali
   =========================== */
body.admin-gen {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem;
  background: var(--gradient-background); color: var(--color-cream);
}
.gen-panel {
  width: min(720px, 94vw);
  background: rgba(234,220,198,0.88);
  border: 1.5px solid rgba(158,122,79,0.32);
  border-radius: 1.2rem;
  box-shadow: 0 18px 54px rgba(158,122,79,0.25), 0 0 32px rgba(255,255,255,0.20), inset 0 0 24px rgba(158,122,79,0.25);
  backdrop-filter: blur(6px) saturate(120%);
  padding: 1.6rem 1.4rem 1.4rem 1.4rem;
  position: relative; color: var(--color-cream);
}
.gen-panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.10), transparent 50%);
  z-index: 0;
}
.gen-panel .panel-body { position: relative; z-index: 1; }
.gen-title {
  margin: 0 0 0.8rem 0; line-height: 1.06; text-align: center;
  font-size: clamp(2rem, 6vw, 3rem); color: var(--color-cream);
}
.gen-sub {
  margin: 0 0 1.2rem 0; opacity: .95; text-align: center;
  font-size: clamp(1rem, 2.6vw, 1.1rem); color: var(--color-cream);
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: .6rem; }
.form-grid label { font-size: .98rem; letter-spacing: .01em; color: var(--color-cream); }
.form-grid input {
  background: rgba(234,220,198,0.35); border: 1px solid rgba(158,122,79,0.35);
  color: var(--color-cream); border-radius: .8rem; padding: .8rem .9rem; outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s; width: 100%;
}
.form-grid input:focus {
  border-color: rgba(158,122,79,0.60); box-shadow: 0 0 0 2px rgba(158,122,79,0.55);
  background: rgba(234,220,198,0.42);
}
.gen-actions { display: flex; align-items: center; gap: .6rem; justify-content: space-between; margin-top: .8rem; }
.btn-primary-gen {
  background: linear-gradient(90deg, var(--beige) 40%, var(--beige-light) 60%);
  color: #1a1a1a; border: none; border-radius: .9rem; font-weight: 800; padding: .8rem 1.2rem;
  box-shadow: 0 4px 18px rgba(184,147,98,0.25); cursor: pointer;
  transition: transform .16s, box-shadow .18s, background .18s;
}
.btn-primary-gen:hover, .btn-primary-gen:focus {
  background: linear-gradient(90deg, var(--beige-light) 60%, var(--beige) 90%);
  box-shadow: 0 6px 28px rgba(184,147,98,0.35); transform: translateY(-1px);
}
.gen-error { color: #ffb4b4; font-weight: 700; min-height: 1.2em; }

/* Risultato credenziali */
.gen-result {
  margin-top: 1.2rem; background: rgba(234,220,198,0.35);
  border: 1px dashed rgba(158,122,79,0.35); border-radius: 1rem; padding: 1rem; color: var(--color-cream);
}
.gen-result-title { font-size: clamp(1.2rem, 3.2vw, 1.6rem); margin: 0 0 .6rem 0; }
.result-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-bottom: .8rem; }
.gen-notice { font-size: .98rem; opacity: .95; }
.gen-clipboard { margin-top: .7rem; display: flex; justify-content: flex-end; }
.btn-secondary-gen {
  background: transparent; color: var(--color-cream);
  border: 1px solid rgba(158,122,79,0.35);
  border-radius: .7rem; padding: .5rem .9rem; cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .16s;
}
.btn-secondary-gen:hover, .btn-secondary-gen:focus {
  background: rgba(234,220,198,0.18);
  box-shadow: 0 0 0 2px rgba(158,122,79,0.25) inset;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  body.admin-gen { padding: 1.2rem; }
  .gen-panel { width: min(760px, 96vw); }
}

/* ===========================
   Calendario attività — tema beige
   =========================== */
.calendar-page {
  min-height: 100svh; display: grid; grid-template-rows: auto 1fr; gap: .8rem;
  padding: clamp(.6rem, 2.5vw, 1rem); background: var(--beige-light); color: var(--color-cream);
}
.calendar-hero { text-align: center; margin-top: .2rem; }
.calendar-title {
  font-size: clamp(1.4rem, 4.5vw, 2.2rem); line-height: 1.1; margin: 0 .2rem .2rem;
  text-shadow: 0 0 12px rgba(158,122,79,0.45), 0 0 24px rgba(158,122,79,0.30), 0 1px 10px rgba(255,255,255,0.18);
  color: var(--color-cream);
}
.calendar-sub { font-size: clamp(.9rem, 2.6vw, 1rem); opacity: .95; color: var(--color-cream); }

.calendar-window {
  background: linear-gradient(120deg, rgba(234,220,198,.68), rgba(234,220,198,.46));
  border: 1px solid rgba(158,122,79,.32); border-radius: 1rem;
  box-shadow: 0 14px 44px rgba(158,122,79,.25), 0 0 24px rgba(255,255,255,.14), inset 0 0 18px rgba(158,122,79,.18);
  padding: clamp(.4rem, 2vw, .8rem); position: relative; overflow: hidden;
}
.calendar-window::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06), transparent 50%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

/* FullCalendar skin overrides già mappate nelle :root */
#calendar {
  background: linear-gradient(120deg, rgba(234,220,198,.5), rgba(234,220,198,.3));
  border: 1px solid rgba(158,122,79,.30);
  border-radius: .9rem;
  box-shadow: 0 8px 26px rgba(158,122,79,.22), inset 0 0 18px rgba(158,122,79,.16);
  padding: .3rem;
}
.fc .fc-toolbar { gap: .4rem; }
.fc .fc-toolbar-title {
  background: linear-gradient(90deg, #ffffff, #f3ecdf);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 10px rgba(158,122,79,0.35);
  font-size: clamp(1.1rem, 3.8vw, 1.5rem); margin: 0 .2rem;
}
.fc .fc-button-group { display: flex; flex-wrap: wrap; gap: .25rem; }
.fc .fc-button {
  border-radius: .55rem; padding: .35rem .55rem; font-size: .9rem; line-height: 1;
  background: var(--beige-dark); border: 1px solid rgba(158,122,79,.60); color: var(--black);
  box-shadow: 0 1px 8px rgba(158,122,79,.28), 0 0 1px #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .16s, filter .16s;
}
.fc .fc-button:hover { transform: translateY(-1px); filter: brightness(1.02); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background: var(--beige-darker); border-color: var(--beige-darker); }
.fc .fc-daygrid-day-number, .fc a { color: var(--color-cream); }
.fc .fc-list-event:hover td { background: rgba(184,147,98,.18); }

/* ===========================
   Helpers responsivi e accessibilità
   =========================== */
@media (min-width: 992px) {
  .hero { padding: 10rem 2rem 6rem; }
  .hero h2.highlight-line { font-size: clamp(3rem, 6.6vw, 5.6rem); }
  .hero h3.highlight-line { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
  .hero h4.highlight-line { font-size: clamp(2rem, 4.2vw, 3.2rem); }
}
@media (max-width: 600px) {
  .hero { padding: 5rem 1rem 3rem; }
  .hero h4.highlight-line { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.1; }
  .section { padding: 3rem 1rem; }
  .grid-2, .grid-3 { gap: 1.25rem; }
}

/* ===========================
   Fine — Beige Theme overhaul
   =========================== */