/* ===== RESET BASE ===== */
* {
  box-sizing: border-box;
  margin: 0
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ===== VARIABILI ===== */
:root {
  --bg: #0b1220;
  --card: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #2563eb;
  --border: rgba(255,255,255,.12);
}

/* ===== BASE ===== */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #111827, #020617);
  color: var(--text);
  line-height: 1.6;
}

/* ===== HEADER ===== */
header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(245,246,248,.85); /* grigio chiaro */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.15);
}
header .menu a{
  color: #0f172a;        /* nero/grigio scuro */
}

header .menu a:hover{
  color: #1b0f5a;        /* blu logo al hover */
}
.brand-text em{
  color: #0f172a;        /* nero coerente col menu */
}
header .brand-text em{
  color: #0f172a !important;
}


.nav {
  max-width: 1100px;
  margin: auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand img {
  display: block;
  height: 70px;
  width: auto;
}

.brand,
.brand:visited {
  color: var(--text);
}

.brand * {
  color: inherit;
  text-decoration: none;
}

.brand-text em {
  color: rgba(255,255,255,.75);
}
header a{ color: #0f172a; }
header .top-cta a{ color: #0f172a; }


/* ===== HERO ===== */
.hero {
  max-width: 1100px;
  margin: auto;
  padding: 80px 20px;
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  margin-bottom: 12px;
}

.hero p {
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 20px;
}
.hero .container {
  text-align: center;
  margin: 0 auto;
}

.hero .trust,
.hero .actions {
  justify-content: center;
}
.hero h1,
.hero p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 900px;
}

.hero p {
  max-width: 780px;
}

.hero h1 { margin-top: 0; }
.hero{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  padding:60px 0;          /* altura de la franja */
  background:#120a45;      /* azul del logo (ajustamos luego si quieres) */
}

.hero-box{
  max-width:1100px;        /* ancho del contenido */
  margin:0 auto;
  padding:0 20px;          /* aire en móvil */
  text-align:center;       /* centra H1 + párrafo */
}
.hero{ max-width:none !important; }

}

.hero-box h1 {
  color: #ffffff;
  font-size: clamp(2.3rem, 4vw, 3.3rem);
  margin-bottom: 18px;
}

.hero-box p {
  color: #dfe4ff;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto 30px;
}

.hero-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.hero-gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
}



/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  background: transparent;
  color: red;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}

.btn.secondary {
  background: transparent;
  color: green;
  border: 1px solid var(--border);


}
.btn.big {
  background: #1b0f5a
; /* azul/logo */
  color: #fff;
  border: none;
}
.btn.call {
  color: #c62828;        /* rojo profesional */
  border: 1px solid #c62828;
}

.btn.call:hover {
  background: #c62828;
  color: white;
}
.btn.whatsapp {
  background: #16a34a;   /* verde pieno */
  color: #ffffff;       /* testo bianco */
  border: 1px solid #16a34a;
}

.btn.whatsapp:hover {
  background: #128c3b;   /* verde leggermente più scuro al hover */
  border-color: #128c3b;
}



/* ===== TRUST ===== */
.trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.trust {
  background: rgba(255,255,255,0.08);
  padding: 16px;
  border-radius: 20px;
}


.pill {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: .95rem;
}
.trust .pill {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.menu{display:flex;gap:18px}
.menu a{color:var(--text);text-decoration:none;opacity:.9;font-weight:600}
.menu a:hover{opacity:1}

.top-cta{display:flex;gap:10px}
.work-strip{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;                 /* separación entre fotos */
  padding: 14px;             /* margen interno */
  background: rgba(255,255,255,.10); /* franja clara */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
}

.work-strip img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 12px;                 /* esquinas */
  border: 6px solid rgba(255,255,255,.85); /* marco blanco */
  box-sizing: border-box;
}

@media (max-width: 768px){
  .work-strip{
    grid-template-columns: 1fr;
  }

  .work-strip img{
    height: 200px;
  }
}
/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {

  /* HEADER */
  .nav {
    flex-wrap: wrap;
    gap: 14px;
  }

  .brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand img {
    height: 56px;
    width: auto;
  }

  .brand-text {
    font-size: .9rem;
  }

  .menu {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 18px;
  }

  .top-cta {
    order: 2;
    margin-left: auto;
    gap: 10px;
  }

  /* HERO */
  .hero {
    padding: 0;
  }

  .hero-box {
    padding: 36px 16px;
    text-align: center;
  }

  .hero-box h1 {
    font-size: 2.1rem;
    line-height: 1.1;
  }

  .hero-box p {
    font-size: 1rem;
  }

  /* PILL (Google, sopralluogo, esperienza) */
  .trust {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pill {
    font-size: .9rem;
    padding: 8px 12px;
  }

  /* BOTTONI CTA */
  .actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .btn.big {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  /* CARDS / IMMAGINI */
  .card {
    width: 100%;
  }

  /* FOOTER */
  .footer {
    text-align: center;
  }
}
:root{
  --brand:#1b0f5a;
  --bg:#ffffff;
  --text:#1b1b1b;
  --muted:#5c5c66;
  --line:rgba(0,0,0,.08);
  --card:#ffffff;
  --shadow:0 10px 26px rgba(0,0,0,.06);
  --phone:#e11d2e;
  --wa:#16a34a;
}

.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

.seo-block{
  padding: clamp(28px, 3.5vw, 54px) 0;
  background: var(--bg);
}
.seo-block h2{
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--brand);
}
.seo-block p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16.5px;
}
.seo-cta{
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--brand);
  background: rgba(27,15,90,.04);
  border-radius: 10px;
  color: var(--text);
}

.services{
  padding: clamp(28px, 3.5vw, 54px) 0;
  background: linear-gradient(180deg, rgba(27,15,90,.03), rgba(27,15,90,0));
}
.section-head{
  text-align: center;
}

.section-head h2{
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 30px);
}

.section-head p{
  margin: 8px 0 0;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}
.section-head{
  text-align: center;
  background: var(--brand);   /* usa il blu già presente */
  padding: 30px 20px;
  border-radius: 12px;
}


.cards{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
}
.icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(27,15,90,.08);
  color: var(--brand);
  margin-bottom: 10px;
}
.card h3{
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--text);
}
.card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15.5px;
}

.services-cta{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
  will-change: transform;
}
.btn:active{ transform: translateY(1px); }
.btn-phone{
  color: var(--phone);
  border-color: rgba(225,29,46,.35);
  background: rgba(225,29,46,.06);
}
.btn-phone:hover{
  background: var(--phone);
  color: #fff;
}
.btn-wa{
  color: var(--wa);
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.06);
}
.btn-wa:hover{
  background: var(--wa);
  color: #fff;
}

@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .cards{ grid-template-columns: 1fr; }
}
.site-footer{
  margin-top: 40px;
  background: #0f0b2d;
  color: rgba(255,255,255,.86);
  padding: 34px 0 18px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 18px;
}
.footer-brand{
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 8px;
  font-size: 18px;
}
.site-footer h3{
  margin: 0 0 10px;
  font-size: 15px;
  color: #fff;
}
.footer-note{
  margin: 0;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}
.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer-link{
  color: rgba(255,255,255,.86);
  text-decoration: none;
}
.footer-link:hover{ text-decoration: underline; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 18px;
  padding-top: 14px;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  color: rgba(255,255,255,.66);
}
.footer-micro{
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.call-box{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 16px;
  border:2px solid #e11d2e;
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  line-height:1.1;
}

.call-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  color:#e11d2e;
}

.call-number{
  font-size:20px;
  font-weight:900;
  color:#1b0f5a; /* blu brand */
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  margin-bottom: 12px;
  color: #ffffff;   /* <-- AGGIUNGI QUESTO */
}
.pill-google{
  background: #ffffff;
  color: #120a45;               /* blu brand */
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: scale(1.05);
}

.pill-google:hover{
  transform: scale(1.08);
}
.content-image{
  text-align:center;
  margin: 25px 0 35px;
}

.content-image img{
  max-width: 700px;   /* larghezza massima */
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
}

.footer-legal-link{
  color: rgba(255,255,255,.78);
  text-decoration:none;
}

.footer-legal-link:hover{
  text-decoration:underline;
}

.footer-legal .sep{
  opacity:.35;
}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 18px;
  padding-top: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  text-align: center;
}
.footer-micro{ 
  margin: 0;
  text-align: center;
}
.service-intro {
  background: #ffffff;
  padding: 80px 20px;
}

.service-intro h1 {
  color: #120a45; /* blu brand */
  margin-bottom: 20px;
}

.service-intro p {
  color: #333;
  max-width: 800px;
  line-height: 1.6;
}

.service-page {
  background: #ffffff;
  color: #222;
}

.service-content {
  background: #ffffff;
  padding: 60px 0;
}

.service-content h1,
.service-content h2,
.service-content h3 {
  color: #120a45;
}

.service-hero {
  text-align: center;
  padding: 60px 20px 30px;
}

.service-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 15px;
}

.service-hero p {
  max-width: 700px;
  margin: 0 auto 30px;
}

.service-hero-image {
  text-align: center;
  margin-bottom: 30px;
  
}

.service-hero-image img {
  max-width: 500px;
  width: 100%;
  height: auto;
  border-radius: 12px;
 
}
.hero-service h1 {
  text-align: center;
}
h2 {
  margin-top: 0;
}
.cta-card{
  background: #120a45;
  color: #ffffff !important;
  padding: 30px 25px;
  border-radius: 14px;
  text-align: center;
  max-width: 650px;
  margin: 40px auto;
  box-shadow: 0 15px 35px rgba(0,0,0,.15);
}

.cta-card .cta-text{
  color: #ffffff !important;
}


.cta-buttons{
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.cta-btn{
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}

.cta-call{
  background: #e11d2e;
  color: #fff;
}

.cta-call:hover{
  background: #c51624;
}

.cta-wa{
  background: #16a34a;
  color: #fff;
}

.cta-wa:hover{
  background: #128c3b;
}
.contact-card {
  max-width: 800px;
  margin: 25px auto 0;
  padding: 25px;
  border-radius: 16px;
  background: rgba(10, 18, 50, 0.95);
  color: #fff;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.contact-card h2 {
  margin-bottom: 18px;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.contact-btn {
  padding: 12px 18px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  transition: 0.2s ease;
}

.contact-btn:hover {
  background: rgba(255,255,255,0.2);
}

.contact-btn.whatsapp {
  background: #16a34a;
  border: none;
}

.contact-note {
  font-size: 14px;
  opacity: 0.9;
}

/* ===== DROPDOWN MENU ===== */

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.menu a,
.dropbtn {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  min-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 12px 0;
  display: none;
  z-index: 1000;
}

.dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #222;
  text-decoration: none;
  font-size: 0.95rem;
}

.dropdown-menu a:hover {
  background: #f3f4f8;
}

/* apertura al hover (desktop) */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* freccia animata */
.dropdown:hover .dropbtn {
  opacity: 0.8;
}

/* apertura via tap (mobile) */
.dropdown.open .dropdown-menu {
  display: block;
}
.elettriche-image img {
  max-width: 650px; /* más grande */
}

.elettriche-image {
  margin-bottom: 5px; /* menos espacio debajo */
}

.google-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-size: 22px;
}

.review-screenshot img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  font-size:28px;
  cursor:pointer;
  color:#111;
}

@media (max-width: 900px){
  .nav-toggle{ display:block; }

  nav.menu{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:10px;
    padding:12px;
    border-radius:12px;
    background:#f2f2f2;
  }

  nav.menu.is-open{ display:flex; }

  nav.menu a, nav.menu .dropbtn{
    width:100%;
  }
}
.video-wrapper{
  position: relative;
  width: 100%;
  max-width: 600px;     /* limita solo su desktop */
  margin: 30px auto;
  aspect-ratio: 4 / 5; /* perfetto per Shorts verticali */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.video-wrapper iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.small-note{
    text-align:center;
    max-width:800px;
    margin:20px auto;
    font-size:0.95rem;
    color:#444;
}