/* ============ RESET + TOKENS ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #1f1f1b;
  background: var(--bg);
}

:root{
  --white: #ffffff;
  --beige: #f3efe6;      /* beige chiaro (primario) */
  --olive: #5b6b3a;      /* verde oliva (accent) */
  --olive-dark: #46522d;
  --text: #1f1f1b;
  --muted: #6b6b63;
  --border: rgba(31,31,27,0.12);
  --bg: var(--beige);
  --card: rgba(255,255,255,0.72);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --radius: 18px;
  --container: 1120px;
}

/* A11y: focus visibile */
:focus-visible{
  outline: 3px solid rgba(91,107,58,0.35);
  outline-offset: 3px;
}

/* ============ LAYOUT ============ */
.container{
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}
.section{ padding: 72px 0; }
.grid{
  display: grid;
  gap: 22px;
}
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .section{ padding: 54px 0; }
}

/* ============ TYPO ============ */
h1, h2, h3{
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1{ font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
h3{ font-size: 1.15rem; }
p{ color: var(--text); }
.muted{ color: var(--muted); }

.kicker{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--olive);
}

/* Link base */
a { color: inherit; }
a:hover { opacity: 0.98; }

/* ============ HEADER/NAV ============ */
.header{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(243,239,230,0.75);
  border-bottom: 1px solid var(--border);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand strong{
  letter-spacing: 0.08em;
}
.brand span{
  font-size: 0.85rem;
  color: var(--muted);
}
.nav-links{
  display: flex;
  gap: 18px;
  align-items: center;
}
.nav-links a{
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  padding: 8px 10px;
  border-radius: 999px;
}
.nav-links a:hover{ background: rgba(255,255,255,0.6); }
.nav-links a[aria-current="page"]{
  background: rgba(91,107,58,0.12);
  color: var(--olive-dark);
}

.burger{
  display: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.burger:active{ transform: scale(0.98); }

@media (max-width: 860px){
  .burger{ display: inline-flex; }
  .nav{
    position: relative;
  }
  .nav-links{
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 58px;
    background: rgba(255,255,255,0.86);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ padding: 12px 14px; }
}

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: end;
  padding: 86px 0 48px;
  overflow: hidden;
}
.hero-media{
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #000;
}
.hero-media video,
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  filter: saturate(0.95) contrast(1.05);
}
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(1200px 500px at 20% 80%,
    rgba(243,239,230,0.90),
    rgba(243,239,230,0.12) 60%,
    rgba(0,0,0,0.38)
  );
}

.hero-card{
  background: rgba(243,239,230,0.84);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  max-width: 720px;
}
.hero-card p{ color: #2b2b26; }
.hero-actions{
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ============ COMPONENTS ============ */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card.clean{ box-shadow: none; background: rgba(255,255,255,0.55); }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 120ms ease, background 160ms ease, opacity 160ms ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--olive);
  color: var(--white);
  border-color: rgba(0,0,0,0.05);
}
.btn-primary:hover{ background: var(--olive-dark); }

.btn-ghost{
  background: rgba(255,255,255,0.65);
  color: var(--text);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.85); }

.badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.badge{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ============ SERVICES ============ */
.service{
  display: grid;
  gap: 10px;
}
.service .icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  background: rgba(91,107,58,0.12);
  border: 1px solid rgba(91,107,58,0.18);
  display: grid;
  place-items: center;
  color: var(--olive-dark);
  font-weight: 800;
}

/* ============ GALLERY ============ */
.gallery{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.gallery a{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
  min-height: 170px;
}
.gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 220ms ease;
}
.gallery a:hover img{ transform: scale(1.03); }

.gallery a:nth-child(1){ grid-column: span 7; }
.gallery a:nth-child(2){ grid-column: span 5; }
.gallery a:nth-child(3){ grid-column: span 4; }
.gallery a:nth-child(4){ grid-column: span 4; }
.gallery a:nth-child(5){ grid-column: span 4; }

@media (max-width: 900px){
  .gallery{ grid-template-columns: 1fr; }
  .gallery a{ min-height: 220px; }
  .gallery a:nth-child(n){ grid-column: auto; }
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 80;
}
.lightbox.open{ display: flex; }
.lightbox img{
  max-width: min(1100px, 96vw);
  max-height: 86vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
}
.lightbox button{
  position: absolute;
  top: 18px;
  right: 18px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: white;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
}

/* ============ FORMS ============ */
.form{
  display: grid;
  gap: 12px;
}
.input{
  display: grid;
  gap: 6px;
}
label{ font-size: 0.9rem; color: var(--muted); }
input, textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  outline: none;
}
textarea{ min-height: 130px; resize: vertical; }
input:focus, textarea:focus{
  border-color: rgba(91,107,58,0.35);
  box-shadow: 0 0 0 4px rgba(91,107,58,0.14);
}
.form-note{
  font-size: 0.88rem;
  color: var(--muted);
}

/* ============ FOOTER ============ */
.footer{
  padding: 34px 0;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.4);
}
.footer .row{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer a{ color: var(--olive-dark); text-decoration: none; }
.footer a:hover{ text-decoration: underline; }

/* ============ FOOTER (enhanced) ============ */
.footer{
  padding: 44px 0 26px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.42);
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 22px;
}

.footer-brand{
  font-weight: 800;
  letter-spacing: 0.08em;
}

.footer-title{
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-text{
  color: var(--muted);
  margin-top: 10px;
  max-width: 44ch;
}

.footer-links{
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.footer-links a{
  color: var(--text);
  text-decoration: none;
}

.footer-links a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.footer-badge{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-social{
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-social a{
  color: var(--olive-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(70,82,45,0.25);
}

.footer-social a:hover{
  border-bottom-color: rgba(70,82,45,0.55);
}

.footer-bottom{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-bottom a{
  color: var(--muted);
  text-decoration: none;
}
.footer-bottom a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-sep{ margin: 0 8px; }

@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
}

/* ============ BRAND LOGO ============ */
.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo{
  display: block;
  height: 36px;        /* desktop */
  width: auto;
}

@media (max-width: 768px){
  .brand-logo{
    height: 32px;      /* mobile */
  }
}

/* ============ FOOTER PRO ============ */
.footer-pro{
  padding: 56px 0 28px;
  background: rgba(255,255,255,0.35);
  border-top: 1px solid var(--border);
}

.footer-pro-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 32px;
}

.footer-pro-logo{
  letter-spacing: 0.14em;
  font-weight: 800;
}

.footer-pro-brand p{
  margin-top: 12px;
  color: var(--muted);
  max-width: 46ch;
}

.footer-pro-nav h4,
.footer-pro-contacts h4{
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.footer-pro-nav ul{
  list-style: none;
  display: grid;
  gap: 8px;
}

.footer-pro-nav a{
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
}

.footer-pro-nav a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-pro-contacts p{
  margin-bottom: 8px;
  color: var(--muted);
}

.footer-pro-contacts a{
  color: var(--olive-dark);
  text-decoration: none;
}

.footer-pro-contacts a:hover{
  text-decoration: underline;
}

.footer-pro-bottom{
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--muted);
}

.footer-pro-links a{
  color: var(--muted);
  text-decoration: none;
}

.footer-pro-links a:hover{
  text-decoration: underline;
}

@media (max-width: 1024px){
  .footer-pro-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .footer-pro-grid{
    grid-template-columns: 1fr;
  }
}

/* ============ FOOTER PRO – LOGO & LEGAL ============ */
.footer-logo{
  display: inline-flex;
  align-items: center;
}

.footer-logo img{
  height: 34px;
  width: auto;
}

.footer-pro-description{
  margin-top: 14px;
  color: var(--muted);
  max-width: 46ch;
}

.footer-pro-legal{
  max-width: 60ch;
}

.footer-pro-microcopy{
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(31,31,27,0.6);
}











/* ============ FOOTER DARK VARIANT ============ */
.footer-dark{
  background: #1f2418; /* oliva molto scuro */
  border-top: none;
}

/* Testi */
.footer-dark,
.footer-dark p,
.footer-dark li{
  color: rgba(255,255,255,0.82);
}

.footer-dark .footer-pro-description,
.footer-dark .footer-pro-microcopy{
  color: rgba(255,255,255,0.62);
}

/* Titoli */
.footer-dark h4{
  color: #ffffff;
}

/* Link */
.footer-dark a{
  color: rgba(255,255,255,0.88);
}

.footer-dark a:hover{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Logo */
.footer-dark .footer-logo img{
  filter: brightness(1.15);
}

/* Separatore bottom */
.footer-dark .footer-pro-bottom{
  border-top: 1px solid rgba(255,255,255,0.18);
}

/* Link bottom */
.footer-dark .footer-pro-links a{
  color: rgba(255,255,255,0.7);
}

.footer-dark .footer-pro-links a:hover{
  color: #ffffff;
}

/* Badge/accents (se presenti) */
.footer-dark .footer-badge{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
}

/* Logo bianco via CSS */
.footer-dark .footer-logo img{
  filter: brightness(0) invert(1);
}

/* ============ COOKIE BANNER ============ */
.cookie-banner{
  position: fixed;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 18px;
  background: rgba(0,0,0,0.45);
  z-index: 120;
}

.cookie-card{
  width: min(920px, 100%);
  background: rgba(243,239,230,0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.cookie-head strong{
  letter-spacing: 0.02em;
}

.cookie-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cookie-links{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.cookie-links a{
  color: var(--olive-dark);
  text-decoration: none;
}
.cookie-links a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.cookie-settings{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
}

.cookie-setting{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}

.cookie-pill{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Toggle switch */
.switch{
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
}
.switch input{ display: none; }
.slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  transition: 160ms ease;
}
.slider:before{
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  transition: 160ms ease;
}
.switch input:checked + .slider{
  background: rgba(91,107,58,0.35);
  border-color: rgba(91,107,58,0.35);
}
.switch input:checked + .slider:before{
  transform: translate(22px, -50%);
}

/* “Gestisci cookie” floating button */
.cookie-manage{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 110;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.cookie-manage:hover{
  background: rgba(255,255,255,0.95);
}

@media (max-width: 520px){
  .cookie-actions{ justify-content: stretch; }
  .cookie-actions .btn{ flex: 1 1 auto; }
}

/* ============ GESTISCI COOKIE – FOOTER ============ */
.footer-cookie-link{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-cookie-link:hover{
  color: var(--text);
}

/* Forza il comportamento dell'attributo hidden anche se hai display:grid */
.cookie-banner[hidden],
.cookie-settings[hidden]{
  display: none !important;
}

[hidden]{
  display: none !important;
}