/* ================================
   VARIABILI GLOBALI
   ================================ */
:root{
  /* Brand */
  --sa-teal:#006f78;
  --sa-teal-2:#004f53;      /* alias del 700, per hover */
  --sa-teal-700:#004f53;

  /* Testo & neutri */
  --sa-text:#3f4447;
  --sa-gray-1:#f6f6f6;
  --sa-gray-2:#f9f9f9;

  /* Ombre & raggi */
  --sa-shadow:0 4px 14px rgba(0,0,0,.08);
  --sa-radius:12px;

  /* Platino (neutri) */
  --pt-50:#f7f8fa;
  --pt-100:#f1f2f4;
  --pt-200:#e6e9ed;
  --pt-300:#d7dbe1;

  /* Utility */
  --radius-lg:14px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 8px 28px rgba(0,0,0,.10);
}

/* ================================
   HERO PROGETTAZIONE
   ================================ */
.hero-progettazione{
  width:100%;
  background:linear-gradient(to right,#eaf2f1,#f5f5f5);
  padding:80px 20px;
}
.hero-container{
  display:flex; flex-wrap:wrap; max-width:1200px; margin:0 auto;
  align-items:center; justify-content:space-between; gap:40px;
}
.hero-text{ flex:1 1 50%; min-width:300px; }
.hero-text h1{ font-size:2.5rem; color:var(--sa-teal); margin-bottom:20px; }
.hero-text .hero-subtitle{ font-size:1.2rem; color:#444; }
.hero-image{ flex:1 1 40%; min-width:300px; }
.hero-image img{ width:100%; height:auto; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.1); }

@media (max-width:768px){
  .hero-container{ flex-direction:column; text-align:center; }
  .hero-text h1{ font-size:2rem; }
  .hero-text .hero-subtitle{ font-size:1.1rem; }
}

/* CTA hero */
.hero-actions{ margin-top:22px; display:flex; gap:12px; align-items:center; }
.btn-ottanio{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sa-teal); color:#fff !important;
  padding:12px 24px; border-radius:999px; font-weight:800; letter-spacing:.2px;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,111,120,.18);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.btn-ottanio:hover{ background:var(--sa-teal-2); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,79,83,.22); }
.btn-ottanio:focus-visible{ outline:3px solid rgba(0,111,120,.35); outline-offset:2px; }
.btn-ottanio:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(0,79,83,.18); }

@media (max-width:768px){
  .hero-actions{ justify-content:center; }
}

/* ================================
   STEP PROGETTAZIONE
   ================================ */
.progettazione-step{
  background:#f2f4f3; padding:65px 40px 130px; width:100%;
}
.progettazione-step .container{
  max-width:1200px; margin:0 auto; text-align:center; padding:60px 40px;
  background:#fff; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.progettazione-step .sezione-title{ font-size:2.2rem; color:var(--sa-teal); margin-bottom:20px; }
.progettazione-step .intro{ font-size:1.1rem; color:#555; max-width:800px; margin:0 auto 50px; }

.step-cards-wrapper{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.step-card{
  background:#f9f9f9; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.06);
  padding:30px 25px; text-align:left; flex:1 1 calc(25% - 30px); max-width:260px;
  transition:transform .3s, box-shadow .3s;
}
.step-card:hover{ transform:translateY(-5px); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.step-card img{ width:100%; height:150px; object-fit:cover; border-radius:10px; margin-bottom:15px; }
.step-card h3{ font-size:1.1rem; color:var(--sa-teal); margin-bottom:10px; }
.step-card p{ font-size:.95rem; color:#444; line-height:1.5; }

/* CTA sotto le card */
.progettazione-step .step-cta{ margin-top:22px; display:flex; justify-content:center; }
.btn-ebook{ gap:10px; }
.btn-ebook .pdf-pill{
  font-size:.75rem; line-height:1; padding:3px 8px; border-radius:999px;
  background:#fff; color:var(--sa-teal-2); border:1px solid rgba(255,255,255,.7);
}

/* Grid mobile */
@media (max-width:767px) and (min-width:360px){
  .pagina-progettazione .progettazione-step .step-cards-wrapper{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
  }
  .pagina-progettazione .progettazione-step .step-card{
    display:flex; flex-direction:column; height:100%; padding:14px; border-radius:12px;
  }
  .pagina-progettazione .progettazione-step .step-card img{
    width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin-bottom:10px;
  }
  .pagina-progettazione .progettazione-step .step-card h3{
    font-size:clamp(.95rem,1.6vw + .6rem,1.05rem); margin:6px 0 8px;
  }
  .pagina-progettazione .progettazione-step .step-card p{ font-size:.95rem; line-height:1.45; }
}
@media (max-width:359.98px){
  .pagina-progettazione .progettazione-step .step-cards-wrapper{
    display:grid; grid-template-columns:1fr; gap:12px;
  }
}

/* ================================
   CAPITOLATI — switch + accordion
   ================================ */
.capitolati-wrapper{
  max-width:1100px; margin:0 auto; padding:60px 20px 40px; text-align:center;
}
.capitolati-wrapper h2{ color:var(--sa-teal); font-size:2.2rem; margin-bottom:8px; }
.capitolati-intro{ color:var(--sa-text); opacity:.9; margin-bottom:24px; }

/* switch */
.capitolati-wrapper .cat-switch{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  max-width:720px; margin:10px auto 22px; padding:4px;
  background:#fff; border:1px solid var(--pt-300); border-radius:999px;
}
.capitolati-wrapper .cat-switch::after{
  content:""; position:absolute; inset:4px auto 4px 4px; width:calc(50% - 8px); border-radius:999px;
  background:var(--pt-100); box-shadow:0 6px 20px rgba(0,0,0,.08); transition:transform .25s; z-index:0;
}
.capitolati-wrapper .cat-switch.is-brand::after{ transform:translateX(0%); }
.capitolati-wrapper .cat-switch.is-neutri::after{ transform:translateX(100%); }
.capitolati-wrapper .cat-btn{
  position:relative; z-index:1; background:transparent; border:none; box-shadow:none; color:#4b5a5b;
  font-weight:800; border-radius:999px; padding:12px 18px; cursor:pointer; transition:color .2s, transform .18s;
}
.capitolati-wrapper .cat-btn:hover{ transform:translateY(-1px); }
.capitolati-wrapper .cat-btn.active{ color:var(--sa-teal-700); }

/* pannelli */
.capitolati-wrapper .cap-panel{ display:none; }
.capitolati-wrapper .cap-panel.active{ display:block; }

/* accordion */
.capitolati-wrapper .cap-accordion{ max-width:1100px; margin:0 auto; }
.capitolati-wrapper .cap-item{
  margin-bottom:14px; border-radius:12px; border:1px solid var(--pt-300); background:#fff; box-shadow:var(--shadow-sm);
}
.capitolati-wrapper .cap-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border:0; text-align:left; cursor:pointer; border-radius:12px;
  background:var(--pt-100); color:var(--sa-teal-700);
  transition:background .18s, box-shadow .18s, transform .18s;
}
.capitolati-wrapper .cap-head:hover{ background:var(--pt-200); }
.capitolati-wrapper .cap-head[aria-expanded="true"]{ background:var(--pt-100); box-shadow:0 4px 16px rgba(0,0,0,.06); }

.capitolati-wrapper .cap-badge{
  font-size:.85rem; font-weight:700; color:#0a7d4f;
  background:#e9f6ef; border:1px solid #d6efe3; border-radius:999px; padding:6px 10px;
}

/* body + CTA file */
.capitolati-wrapper .cap-body{ padding:18px; border-top:1px solid var(--pt-300); }
.capitolati-wrapper .cap-body[hidden]{ display:none; }
.capitolati-wrapper .cap-body h4{ margin:4px 0 8px; font-size:1rem; font-weight:800; color:#2f3b3c; }

.capitolati-wrapper .cap-ctas{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:10px 0 18px;
}
.capitolati-wrapper .cap-cta{
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  border-radius:12px; padding:12px 14px; font-weight:800; letter-spacing:.1px; line-height:1.1;
  border:1px solid var(--pt-300); background:var(--pt-50); color:var(--sa-teal-700);
  box-shadow:0 2px 8px rgba(0,0,0,.05); transition:transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.capitolati-wrapper .cap-cta:hover{ background:var(--pt-100); transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.10); }
.capitolati-wrapper .cap-cta:focus-visible{ outline:3px solid rgba(0,111,120,.35); outline-offset:2px; }
.capitolati-wrapper .cap-cta:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.05); }

/* testo mai bianco in hover (scoped) */
.capitolati-wrapper .cap-head,
.capitolati-wrapper .cap-head:hover,
.capitolati-wrapper .cap-head:focus,
.capitolati-wrapper .cap-cta,
.capitolati-wrapper .cap-cta:hover,
.capitolati-wrapper .cap-cta:focus,
.capitolati-wrapper .cap-cta *{ color:inherit !important; }

/* accento brand vs neutri */
.capitolati-wrapper{ --brand-matte:#116a6e; --brand-ink:#0b4f52; }
.capitolati-wrapper #cap-brand .cap-item{ border-color:#c6d7d8; }
.capitolati-wrapper #cap-brand .cap-head{ background:var(--pt-100); border-left:5px solid var(--brand-matte); color:var(--brand-ink) !important; }
.capitolati-wrapper #cap-brand .cap-head:hover{ background:var(--pt-200); }
.capitolati-wrapper #cap-brand .cap-cta{ border-color:rgba(17,106,110,.45); color:var(--brand-ink) !important; }
.capitolati-wrapper #cap-brand .cap-cta:hover{ background:var(--pt-100); color:var(--brand-ink) !important; box-shadow:0 10px 24px rgba(17,106,110,.12); }

.capitolati-wrapper #cap-neutri .cap-item{ border-color:var(--pt-300); }
.capitolati-wrapper #cap-neutri .cap-head{ background:var(--pt-100); border-left:5px solid var(--pt-300); color:#3a4246 !important; }
.capitolati-wrapper #cap-neutri .cap-cta{ border-color:var(--pt-300); color:#3a4246 !important; }
.capitolati-wrapper #cap-neutri .cap-cta:hover{ background:var(--pt-100); color:#3a4246 !important; box-shadow:0 10px 24px rgba(0,0,0,.08); }

/* Mobile capitolati generico */
@media (max-width:860px){
  .capitolati-wrapper{ padding-left:16px; padding-right:16px; }
  .capitolati-wrapper .cat-switch{ grid-template-columns:1fr 1fr; }
  .capitolati-wrapper .cap-ctas{ grid-template-columns:1fr; }
  .capitolati-wrapper .cap-item{ border-radius:14px; margin-bottom:12px; border:1px solid #e1e7ea; box-shadow:0 2px 10px rgba(0,0,0,.04); }
  .capitolati-wrapper .cap-head{ gap:10px; padding:14px 16px; font-size:16px; line-height:1.25; background:#f6f8f9; border-radius:14px; }
  .capitolati-wrapper .cap-badge{ font-size:.8rem; padding:4px 8px; white-space:nowrap; }
  .capitolati-wrapper .cap-body{ padding:12px 14px; border-top:1px solid #e8edef; }
  .capitolati-wrapper .cap-ctas{ gap:8px; }
  .capitolati-wrapper .cap-cta{ padding:11px 12px; font-size:15px; }
}

/* Mobile capitolati – pill compatta e centrata (hard override) */
@media (max-width:430px){
  .capitolati-wrapper .cat-switch{
    display:inline-grid !important;
    inline-size:min(340px,100%) !important;
    width:auto !important; max-width:340px !important;
    margin:10px auto 12px !important;
    padding:4px !important; gap:6px !important;
    border:1px solid var(--pt-300) !important;
    border-radius:999px !important; background:#fff !important;
  }
  .capitolati-wrapper .cat-switch::after{
    top:4px !important; left:4px !important;
    width:calc(50% - 8px) !important; height:calc(100% - 8px) !important;
    border-radius:999px !important; background:#edf5f4 !important;
    box-shadow:0 3px 10px rgba(0,0,0,.06) !important; transform:translateX(0) !important;
    pointer-events:none;
  }
  .capitolati-wrapper .cat-switch.is-neutri::after{
    background:#f4f5f6 !important; transform:translateX(100%) !important;
  }
  .capitolati-wrapper .cat-btn{
    position:relative; z-index:1; display:-webkit-box !important;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    align-items:center; justify-content:center;
    padding:6px 8px !important; min-height:36px !important;
    font-size:13px !important; font-weight:800; line-height:1.08;
    color:#4b5a5b; background:transparent; border:0; border-radius:999px;
    white-space:normal !important;
  }
  .capitolati-wrapper .cat-btn.active{ color:var(--sa-teal-700) !important; }
}

/* ================================
   VIDEO – stile come fascia “passaggi”
   ================================ */
.video-capitolati{ background:#f2f4f3; padding:65px 40px 90px; }
.video-capitolati .container{
  max-width:1200px; margin:0 auto; text-align:center; padding:60px 40px;
  background:#fff; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.video-capitolati .sezione-title{ font-size:2.2rem; color:var(--sa-teal); margin-bottom:12px; }
.video-capitolati .intro{ font-size:1.05rem; color:#555; max-width:900px; margin:0 auto 26px; }
.video-capitolati .video-wrapper{
  position:relative; max-width:960px; margin:0 auto;
  aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
}
.video-capitolati .video-wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width:600px){
  .video-capitolati .container{ padding:16px 14px; border-radius:16px; }
  .video-capitolati .sezione-title{
    font-size:clamp(1.15rem,4.6vw,1.45rem); line-height:1.2; margin-bottom:10px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .video-capitolati .intro{ font-size:.98rem; line-height:1.5; margin-bottom:14px; }
  .video-capitolati .video-wrapper{ width:100%; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08); }
}

/* ================================
   CTA sezione finale
   ================================ */
.cta-progettazione{
  background:linear-gradient(to right,#006f78,#008f92);
  color:#fff; padding:80px 20px; text-align:center;
}
.cta-progettazione .cta-container{ max-width:800px; margin:0 auto; }
.cta-progettazione h2{ font-size:2rem; margin-bottom:20px; }
.cta-progettazione p{ font-size:1.1rem; margin-bottom:30px; }
.btn-cta{
  background:#fff; color:#006f78; font-weight:700; padding:14px 30px;
  border-radius:30px; text-decoration:none; transition:all .3s;
}
.btn-cta:hover{ background:#eaf2f1; color:#004f53; }

/* ================================
   FAQ semplificate
   ================================ */
.faq-progettazione{ padding:80px 20px; background:#f8f9f7; }
.faq-container{ max-width:800px; margin:0 auto; }
.faq-progettazione h2{ font-size:2rem; color:var(--sa-teal); text-align:center; margin-bottom:40px; }
.faq-item{ border-bottom:1px solid #ccc; padding:15px 0; }
.faq-question{
  background:#004f59; color:#fff; border:none; padding:12px 20px; width:100%; text-align:left;
  cursor:pointer; font-weight:600; margin-bottom:5px; border-radius:4px; transition:background-color .3s;
}
.faq-question:hover{ background:#007f89; }
.faq-answer{ display:none; padding:10px 0; }
.faq-item.active .faq-answer{ display:block; }
.faq-answer p{ margin:10px 0 0; font-size:1rem; color:#444; }

/* ================================
   Mobile fine-tuning (iPhone 14 / 430px)
   ================================ */
@media (max-width:430px){
  /* HERO più compatto */
  .hero-progettazione{ padding:36px 16px 28px; }
  .hero-text h1{
    font-size:clamp(1.45rem,5.2vw,1.7rem);
    line-height:1.15; max-width:18ch; margin:0 auto 12px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hero-text .hero-subtitle{ font-size:.98rem; }
  .hero-actions .btn-ottanio{ padding:11px 22px; }

  /* PASSAGGI – card alleggerite */
  .progettazione-step{ padding:42px 14px 66px; }
  .progettazione-step .container{ padding:18px 14px; }
  .progettazione-step .sezione-title{ font-size:1.45rem; }

  .pagina-progettazione .progettazione-step .step-card{
    display:flex; flex-direction:column;
    padding:12px 12px 14px;
    background:#fff; border:1px solid #e8edef; border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
  }
  .pagina-progettazione .progettazione-step .step-card img{
    aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin-bottom:10px;
  }
  .pagina-progettazione .progettazione-step .step-card h3{
    font-size:1.05rem; line-height:1.25; margin:6px 0 6px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(1.25em * 2);
  }
  /* paragrafo: niente clamp (gestisce lo script) */
  .pagina-progettazione .progettazione-step .step-card p{
    color:#5a6768; font-size:.95rem; line-height:1.45; margin-bottom:4px;
  }
  /* bottone “Leggi tutto” elegante e compatto */
  .pagina-progettazione .progettazione-step .step-card .read-more,
  .pagina-progettazione .progettazione-step .step-card a.read-more,
  .pagina-progettazione .progettazione-step .step-card a:last-child{
    align-self:flex-start; margin-top:6px; padding:6px 10px;
    border-radius:999px; border:1px solid var(--pt-300);
    background:#fff; color:var(--sa-text) !important;
    font-size:.90rem; font-weight:600; line-height:1.1; letter-spacing:.1px;
    box-shadow:none; text-decoration:none;
  }
  .pagina-progettazione .progettazione-step .step-card .read-more::after,
  .pagina-progettazione .progettazione-step .step-card a.read-more::after,
  .pagina-progettazione .progettazione-step .step-card a:last-child::after{
    content:"→"; margin-left:6px; font-size:.95em; transition:transform .18s ease;
  }
  .pagina-progettazione .progettazione-step .step-card .read-more:hover::after,
  .pagina-progettazione .progettazione-step .step-card a.read-more:hover::after,
  .pagina-progettazione .progettazione-step .step-card a:last-child:hover::after{
    transform:translateX(2px);
  }
  .pagina-progettazione .progettazione-step .step-card .read-more:focus-visible,
  .pagina-progettazione .progettazione-step .step-card a.read-more:focus-visible,
  .pagina-progettazione .progettazione-step .step-card a:last-child:focus-visible{
    outline:2px solid rgba(0,111,120,.25); outline-offset:2px;
  }

  /* FAQ + CTA finali */
  .faq-progettazione{ padding:48px 16px; }
  .faq-progettazione h2{ font-size:1.45rem; }
  .faq-question{ padding:11px 14px; font-size:1rem; }
  .cta-progettazione{ padding:52px 16px; }
  .cta-progettazione h2{ font-size:1.45rem; }
  .btn-cta{ padding:12px 22px; }
}

/* iOS Safari: uniforma l’auto-zoom del testo */
html{ -webkit-text-size-adjust:100%; }

/* Spaziatura “testo + bottone” su mobile largo (<=768) */
@media (max-width:768px){
  .progettazione-step .step-card p{ margin-bottom:4px !important; }
  .progettazione-step .step-card .read-more{ margin-top:6px !important; padding:8px 12px; }
}