/* ===============================
   VARIABILI GLOBALI (PALETTE)
   =============================== */
:root {
  --bordeaux: #7a1f24;
  --oro: #ffd86b;
  --verde-salvia: #a3b18a;
  --beige: #f8f3e7;
  --grafite: #0f0f12;
}

/* ===============================
   RESET BASE
   =============================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

/* ===============================
   BASE / TIPOGRAFIA
   =============================== */
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 300;
  background-color: var(--grafite);
  color: var(--beige);
  line-height: 1.7;
  font-size: clamp(14px, 1.2vw, 18px);
  padding: 2rem;
}
p { margin-bottom: 1rem; }

/* Titoli (gerarchia) */
h1, h2, h3 { color: var(--oro); font-weight: 500; }
h2{
  font-size: clamp(22px, 3vw, 34px);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}
h3{
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 400;
  margin-bottom: 0.6rem;
}

/* Link & Bottoni */
a { color: var(--oro); text-decoration: none; font-weight: 600; transition: color .3s ease; }
a:hover { color: var(--verde-salvia); text-decoration: underline; }

.bottone{
  display: inline-block;
  background-color: var(--oro);
  color: var(--grafite);
  padding: 0.6rem 1.2rem;
  border-radius: 0.6rem;
  margin-top: 1rem;
  font-weight: 600;
  transition: all .3s ease-in-out;
}
.bottone:hover{ background-color: var(--verde-salvia); color: var(--grafite); }

/* Offset per header sticky quando si salta alle ancore */
main[id], section { scroll-margin-top: 80px; }

/* ===============================
   HEADER / MENU
   =============================== */
.header{
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--grafite);
  border-bottom: 1px solid #222533;
}
.logo{ height: 120px; width: auto; }

/* Menu desktop */
.menu{ display: flex; gap: 1.5rem; }
.menu a{ color: var(--beige); font-weight: 600; text-decoration: none; transition: color .3s ease; }
.menu a:hover{ color: var(--oro); }
.menu a.active{ color: var(--oro); text-decoration: underline; }

/* Toggle mobile */
.menu-toggle{
  display: none; background: none; border: none;
  font-size: 1.8rem; color: var(--oro); cursor: pointer;
}

/* ===============================
   HERO
   =============================== */
.hero{
  display: flex; justify-content: center; align-items: center;
  min-height: 80vh; text-align: center;
  background: linear-gradient(180deg, #0f0f12 0%, #151821 100%);
}
.hero-text{ max-width: 600px; }
.hero h2{ color: #9cd3ff; margin-bottom: 1rem; }
.hero p{ color: #f5f7fb; margin-bottom: 1.5rem; }

/* ===============================
   SEZIONE SERVIZI
   =============================== */
.servizi{
  padding: 4rem 2rem; background-color: var(--grafite); color: var(--beige); text-align: center;
}
.servizi h2{ color: var(--oro); margin-bottom: 2rem; }

/* Griglia servizi */
.grid-servizi{
  display: grid; gap: 2rem; max-width: 1000px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Card generica */
.card{
  background-color: #151821; border: 1px solid #222533; border-radius: 0.8rem; padding: 2rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,.4); }
.card h3{ color: var(--oro); margin-bottom: 1rem; }
.card p{ color: var(--beige); font-size: .95rem; line-height: 1.5; }

/* ===============================
   SEZIONE PORTFOLIO
   =============================== */
.portfolio{
  padding: 4rem 2rem; background-color: #151821; color: var(--beige); text-align: center;
}
.portfolio h2{ color: var(--oro); margin-bottom: 2rem; }

/* Griglia immagini */
.grid-portfolio{
  display: grid; gap: 1.5rem; max-width: 1100px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.item{
  position: relative; overflow: hidden; border-radius: .8rem; cursor: pointer;
  transition: transform .3s ease;
}
.item:hover{ transform: scale(1.03); }
.item img{ width: 100%; display: block; transition: opacity .4s ease; }

/* Overlay immagine */
.overlay{
  position: absolute; inset: 0; background: rgba(10,10,10,.7); color: var(--beige);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s ease;
}
.item:hover .overlay{ opacity: 1; }

/* ===============================
   SEZIONE CONTATTI
   =============================== */
.contatti{
  background-color: #151821; padding: 4rem 2rem; text-align: center; color: var(--beige);
}
.contatti h2{ color: var(--oro); margin-bottom: 2rem; }

.grid-contatti{
  display: grid; gap: 2rem; max-width: 1000px; margin: 0 auto; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Info/intro */
.info{ text-align: left; }
.info p{ margin-bottom: 1.5rem; line-height: 1.6; }

/* Form */
.form-contatti{ display: flex; flex-direction: column; gap: 1rem; }
.form-contatti input,
.form-contatti textarea{
  background-color: #0f0f12; color: var(--beige);
  border: 1px solid #333; border-radius: .5rem;
  padding: .8rem; font-size: 1rem; font-family: inherit;
}
.form-contatti input::placeholder,
.form-contatti textarea::placeholder{ color: #888; }
.form-contatti button{ align-self: flex-start; }

/* ===============================
   FOOTER
   =============================== */
.footer{
  background-color: #151821; color: var(--beige);
  padding: 2rem 1rem; text-align: center; border-top: 1px solid #222533;
}
.footer-content{ max-width: 1000px; margin: 0 auto; }

.footer-links{
  list-style: none; padding: 0; margin: 1rem 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem;
}
.footer-links a{ color: var(--oro); text-decoration: none; font-weight: 500; transition: color .3s ease; }
.footer-links a:hover{ color: var(--verde-salvia); }

.footer-social a{
  color: var(--oro); margin: 0 .5rem; font-size: 1.4rem;
  transition: color .3s ease, transform .3s ease;
}
.footer-social a:hover{ color: var(--verde-salvia); transform: scale(1.2); }

.footer p{
  margin: .5rem 0; font-size: .9rem; font-weight: 300; letter-spacing: .5px; color: var(--beige);
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.footer p strong{ font-weight: 500; color: var(--oro); }
.footer p i{ font-size: 1rem; color: var(--oro); }

/* ===============================
   RESPONSIVE
   =============================== */
/* Tablet */
@media (max-width: 768px){
  .header{ flex-direction: column; align-items: flex-start; }
  .menu{ display: none; flex-direction: column; width: 100%; background: #151821; margin-top: 1rem; padding: 1rem; border-radius: .5rem; }
  .menu a{ margin: .5rem 0; }
  .menu.open{ display: flex; }
  .menu-toggle{ display: block; }

  .hero{ min-height: 60vh; padding: 2rem 1rem; }
}

/* Smartphone */
@media (max-width: 480px){
  .header{ padding: 1rem; }
  .hero{ min-height: 70vh; }
  .bottone{ width: 100%; text-align: center; }
  main[id], section{ scroll-margin-top: 100px; } /* header più alto su mobile */
}

/* Video responsive 16:9 */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 0.8rem;
  overflow: hidden;
}

.video-wrapper video,
.video-wrapper iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* niente overlay/hover sulle card video */
.item.video .overlay { display: none; }
.item.video:hover { transform: none; box-shadow: none; }