/* --------- Variabili regolabili --------- */
:root{
  --container-max: 1280px;

  /* NAV */
  --nav-h: 96px;            /* altezza barra */
  --nav-pad-left: 8px;      /* padding sinistro nav */
  --nav-pad-right: 24px;    /* padding destro nav */
  --brand-gap: 12px;        /* spazio tra logo e testo */
  --logo-h: 100px;          /* altezza logo S2 */
  --brand-font: 20px;       /* grandezza “ESSEDUE · TUTTO PRATICHE” */

  /* Shift personalizzati */
  --brand-left-shift: 310px;  /* sposta logo+testo più a sinistra */
  --call-right-shift: 270px;  /* sposta box telefono più a destra */

  /* Box telefono */
  --phone-ic: 30px;
  --call-pad-y: 10px;
  --call-pad-x: 16px;

  /* Colori base */
  --primary: #0a66c2;

  /* HERO */
  --hero-h: 560px;
}

/* --------- Reset minimo --------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #0b2239;
  background: #fff;
  line-height: 1.45;
}

/* Layout per footer non fisso */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1; }

/* --------- Contenitore --------- */
.container{
  width: min(var(--container-max), 94vw);
  margin-inline: auto;
}

/* =========================================================
   HEADER / NAVBAR (griglia: logo | menu | telefono)
========================================================= */
.site-header{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav{
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding-left: var(--nav-pad-left);
  padding-right: var(--nav-pad-right);
}

/* Brand a sinistra (logo + testo) */
.brand{
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);
  margin-left: calc(-1 * var(--brand-left-shift));
}
.brand__logo{ height: var(--logo-h); width: auto; object-fit: contain; }
.brand__name{
  font-weight: 800;
  font-size: var(--brand-font);
  letter-spacing: .4px;
  white-space: nowrap;
}

/* Menu centrato */
.menu{ display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.menu a{ font-weight: 600; padding: 8px 4px; }
.menu a:hover{ color: var(--primary); }

/* (se le usi) voci come lista */
.menu__list{ list-style:none; display:flex; gap:18px; justify-content:center; margin:0; padding:0 }
.menu__list a{
  text-decoration:none; color:#1f2a37; font-weight:600;
  padding:8px 10px; border-radius:8px; transition:.2s background,.2s color
}
.menu__list a:hover{ background:#eef3f9; color:var(--primary) }
.menu__list .is-active{ color:var(--primary) }

/* Box telefono tutto a destra */
.call-us{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: var(--call-pad-y) var(--call-pad-x);
  border-radius: 10px;
  border: 1px solid #e1e7f0;
  background: #f3f6fb;
  white-space: nowrap;
  margin-right: calc(-1 * var(--call-right-shift));
}
.phone-ic{ width: var(--phone-ic); height: var(--phone-ic); fill: var(--primary); flex-shrink: 0; }
.call-us__num { font-weight: 800; }

/* ======= HERO CORTO ======= */
.hero{
  background: linear-gradient(180deg,#0b4a7a 0%, #0b4a7a 60%, #0b4a7a 100%);
  color:#fff;
}
.hero__inner{ padding:34px 0 26px }
.hero__title{ margin:0 0 4px; font-size:clamp(28px,4vw,40px); font-weight:900 }
.hero__subtitle{ margin:0 0 16px; opacity:.95 }
.searchbar input{
  width:100%; max-width:680px; height:48px; border-radius:12px;
  border:1px solid #cfe0f2; padding:0 14px; font-size:16px;
  outline:none; box-shadow:0 2px 8px rgba(0,0,0,.08)
}

/* =========================================================
   LISTA PRATICHE – ACCORDION
========================================================= */
.page{ padding:28px 0 80px }  /* più respiro sopra il footer */

.module-list{
  list-style:none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* riquadro */
.module-item{
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(13,38,76,.05);
  overflow:hidden;
  transition: box-shadow .2s ease, transform .15s ease;
}
.module-item:hover{ box-shadow:0 6px 18px rgba(13,38,76,.10); transform: translateY(-1px); }

/* head cliccabile */
.module-head{
  display:grid;
  grid-template-columns: 48px 1fr 24px;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  width:100%;
  border:0;
  background:none;
  cursor:pointer;
  text-align:left;
}
.module-ic{ width:38px; height:38px; object-fit:contain; opacity:.95 }
.module-title{ font-weight:800; font-size:1rem; color:#0b2239 }
.module-head .chev{ transition: transform .3s ease; fill:#0b2239 }
.module-item.open .chev{ transform: rotate(90deg) }

/* body */
.module-body{
  background:#f9fafc;
  border-top:1px solid #e6ecf5;
  padding:0;
  animation: fadeIn .25s ease;
}
.module-body__inner{ padding:18px 22px }
.module-body h4{ margin:0 0 10px; font-size:1rem; font-weight:700; color:#0b2239 }

.docs{ margin:0 0 16px; padding-left:18px; color:#4a6076; line-height:1.5 }
.docs li{ margin-bottom:6px }

/* azioni */
.actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn-primary{
  display:inline-block;
  background: linear-gradient(90deg, #0a66c2, #1a8cff);
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(11,56,90,.18);
  transition:.2s transform, .2s box-shadow, .2s background;
  text-decoration:none;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,74,122,.28); background:#084f97 }

.btn-whatsapp{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px;
  background:#25D366; color:#fff; font-weight:800;
  border-radius:10px; text-decoration:none;
  box-shadow:0 6px 16px rgba(37,211,102,.25);
  transition:.2s transform, .2s box-shadow, .2s background;
}
.btn-whatsapp:hover{ background:#1ebe5d; transform:translateY(-2px); box-shadow:0 10px 22px rgba(37,211,102,.35) }
.btn-whatsapp svg{ fill:#fff }

/* Pulsante WhatsApp come primario elegante */
.btn-wa-primary{
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 800;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 18px rgba(37,211,102,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-wa-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37,211,102,.35);
  filter: saturate(1.05);
}
.btn-wa-primary:focus-visible{
  outline: 3px solid rgba(37,211,102,.45);
  outline-offset: 2px;
}

/* animazione */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-5px) }
  to{ opacity:1; transform:translateY(0) }
}

/* =========================================================
   FOOTER (non fisso)
========================================================= */
.footer{
  background:#f8f8f8;
  color:#0b2239;
  padding: 10px 20px;
  font-size: 10px;
}
.footer .container{ width:100%; margin:0; padding:0 10px }

/* Spazio sotto alla lista */
.module-list { margin-bottom: 28px; }

/* Stacca la CTA dall’ultima card e centrala */
.cta-bottom{
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid #e6ecf5;
  display: flex;
  justify-content: center;
}
.cta-bottom .btn-primary{ margin-bottom: 10px; }

/* =========================================================
   RESPONSIVE CONTENUTO
========================================================= */
@media (max-width:900px){
  .brand__name{ display:none }
}
@media (max-width:768px){
  .module-head{ grid-template-columns:40px 1fr 20px; padding:14px }
  .module-ic{ width:32px; height:32px }
  .module-title{ font-size:.95rem }
  .actions{ flex-direction:column }
  .actions a{ width:100%; text-align:center }
}

/* =========================================================
   HAMBURGER & NAV MOBILE — IDENTICO A "CHI SIAMO"
========================================================= */
.hamburger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid #e1e7f0; background:#f3f6fb; border-radius:10px;
  cursor:pointer;
}
.hamburger__bar{
  display:block; width:22px; height:2px; background:#0b2239;
  margin:3px 0; transition:transform .2s ease,opacity .2s ease;
}
body.menu-open .hamburger__bar:nth-child(1){ transform:translateY(5px) rotate(45deg); }
body.menu-open .hamburger__bar:nth-child(2){ opacity:0; }
body.menu-open .hamburger__bar:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Overlay sotto la navbar quando il menu è aperto */
body.menu-open::before{
  content:""; position:fixed; inset:var(--nav-h) 0 0 0;
  background:rgba(0,0,0,.3); z-index:900;
}

/* Mobile nav */
@media (max-width:900px){
  .nav{ grid-template-columns:auto 1fr auto auto; }
  .call-us{ grid-column:3; }
  .hamburger{ display:inline-flex; grid-column:4; justify-self:end; }

  .menu{
    display:none;
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:#fff; padding:14px 16px;
    box-shadow:0 10px 20px rgba(0,0,0,.12);
    z-index:1000;
    flex-direction:column; gap:12px;
  }
  body.menu-open .menu{ display:flex; }

  .menu a{ padding:10px 6px; border-radius:8px; }
  .menu a:hover{ background:#eef3f9; color:var(--primary); }
}

/* XS tweaks */
@media (max-width:720px){
  .brand__name{ display:none; }
  .brand__logo{ height:72px; }
  .menu{ gap:12px; }
  .call-us{ padding:8px 12px; }
  .phone-ic{ width:24px; height:24px; }
}