:root{
  --bg:#2a2a2a;
  --bg-soft:#303030;
  --bg-deep:#242424;
  --bg-panel:#343434;

  --surface:rgba(255,255,255,.07);
  --surface-2:rgba(255,255,255,.11);
  --surface-3:rgba(255,255,255,.16);

  --text:#f3f3f3;
  --text-strong:#ffffff;
  --muted:rgba(255,255,255,.82);
  --muted-2:rgba(255,255,255,.68);

  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.22);

  --accent:#e5d7bf;
  --accent-strong:#f0e4cf;
  --accent-soft:rgba(229,215,191,.14);
  --accent-line:rgba(229,215,191,.34);

  --accent-urbanistica:#c9a24a;
  --accent-urbanistica-strong:#ead083;
  --accent-urbanistica-soft:rgba(201,162,74,.14);
  --accent-urbanistica-line:rgba(201,162,74,.38);

  --accent-infiltrazioni:#5d8fa8;
  --accent-infiltrazioni-strong:#8ebbd0;
  --accent-infiltrazioni-soft:rgba(93,143,168,.14);
  --accent-infiltrazioni-line:rgba(93,143,168,.38);

  --accent-contenzioso:#8b3f3f;
  --accent-contenzioso-strong:#c07777;
  --accent-contenzioso-soft:rgba(139,63,63,.15);
  --accent-contenzioso-line:rgba(139,63,63,.40);

  --accent-pratiche:#7f9275;
  --accent-pratiche-strong:#b4c4aa;
  --accent-pratiche-soft:rgba(127,146,117,.14);
  --accent-pratiche-line:rgba(127,146,117,.38);

  --accent-design:#b59b72;
  --accent-design-strong:#dec79f;
  --accent-design-soft:rgba(181,155,114,.14);
  --accent-design-line:rgba(181,155,114,.38);

  --page-accent:var(--accent);
  --page-accent-strong:var(--accent-strong);
  --page-accent-soft:var(--accent-soft);
  --page-accent-line:var(--accent-line);

  --hero-text:#ffffff;
  --hero-muted:rgba(255,255,255,.88);
  --hero-line:rgba(255,255,255,.22);

  --max:1100px;
  --padX:18px;
  --r:14px;
  --r-lg:18px;

  --shadow:0 14px 38px rgba(0,0,0,.28);
  --shadow-soft:0 8px 22px rgba(0,0,0,.18);
  --shadow-card:0 10px 26px rgba(0,0,0,.18);

  --headerH:64px;

  --transition-fast:.18s ease;
  --transition-mid:.24s ease;

  --h1-size:clamp(28px,3.2vw,40px);
  --h2-size:clamp(22px,2vw,28px);

  --body-size:15px;
  --body-line:1.68;
}

body.page-accent-urbanistica{
  --page-accent:var(--accent-urbanistica);
  --page-accent-strong:var(--accent-urbanistica-strong);
  --page-accent-soft:var(--accent-urbanistica-soft);
  --page-accent-line:var(--accent-urbanistica-line);
}

body.page-accent-infiltrazioni{
  --page-accent:var(--accent-infiltrazioni);
  --page-accent-strong:var(--accent-infiltrazioni-strong);
  --page-accent-soft:var(--accent-infiltrazioni-soft);
  --page-accent-line:var(--accent-infiltrazioni-line);
}

body.page-accent-contenzioso{
  --page-accent:var(--accent-contenzioso);
  --page-accent-strong:var(--accent-contenzioso-strong);
  --page-accent-soft:var(--accent-contenzioso-soft);
  --page-accent-line:var(--accent-contenzioso-line);
}

body.page-accent-pratiche{
  --page-accent:var(--accent-pratiche);
  --page-accent-strong:var(--accent-pratiche-strong);
  --page-accent-soft:var(--accent-pratiche-soft);
  --page-accent-line:var(--accent-pratiche-line);
}

body.page-accent-design{
  --page-accent:var(--accent-design);
  --page-accent-strong:var(--accent-design-strong);
  --page-accent-soft:var(--accent-design-soft);
  --page-accent-line:var(--accent-design-line);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-size:var(--body-size);
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--padX);
}

main{
  display:block;
  width:100%;
  background:var(--bg);
}

section{
  position:relative;
}

.page-home main{
  background:linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}

/* HEADER */

.header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:var(--headerH);
  display:flex;
  align-items:center;
  background:rgba(42,42,42,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  min-width:0;
  padding-top:10px;
  padding-bottom:10px;
}

.brand{
  flex:0 0 auto;
  min-width:0;
}

.brand a{
  display:block;
  font-weight:700;
  letter-spacing:.02em;
  font-size:20px;
  line-height:1.15;
  white-space:nowrap;
  color:var(--text-strong);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;
}

.nav a,
.nav-parent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  font-size:14px;
  line-height:1.2;
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
  white-space:nowrap;
}

.nav a:hover,
.nav-parent:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.nav a[aria-current="page"]{
  color:#fff;
  background:rgba(255,255,255,.14);
}

.nav-group{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.nav-parent{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  cursor:pointer;
}

.nav-parent::after{
  content:"▾";
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  line-height:1;
  opacity:.72;
}

.nav-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  min-width:180px;
  display:none;
  padding:9px;
  border-radius:14px;
  background:rgba(28,28,28,.98);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.30);
  z-index:999;
}

.nav-dropdown::before{
  content:"";
  position:absolute;
  top:-10px;
  left:0;
  right:0;
  height:10px;
}

.nav-dropdown a{
  display:flex;
  justify-content:flex-start;
  min-height:34px;
  padding:8px 10px;
  border-radius:10px;
  white-space:nowrap;
  color:var(--muted);
  text-decoration:none;
}

.nav-dropdown a:hover{
  color:#fff;
  background:rgba(255,255,255,.09);
  transform:none;
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown{
  display:block;
}

/* TYPO */

.hero-title{
  margin:0 0 14px 0;
  font-size:var(--h1-size);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--hero-text);
  max-width:18ch;
}

.hero-lead{
  margin:0 0 14px 0;
  color:var(--hero-muted);
  font-size:15px;
  line-height:1.68;
  max-width:64ch;
}

.hero-lead-strong{
  max-width:860px;
  margin:0 0 16px 0;
  font-size:15.5px;
  line-height:1.76;
  color:rgba(255,255,255,.96);
  font-style:normal;
  font-weight:400;
  letter-spacing:0;
}

.section-title{
  margin:0 0 14px 0;
  font-size:var(--h2-size);
  line-height:1.15;
  color:var(--text-strong);
}

body[class*="page-accent-"] .section-title::after{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin-top:10px;
  background:var(--page-accent);
  opacity:.78;
}

.section-title-tight{
  margin-top:28px;
}

.section-intro{
  color:var(--muted);
  font-size:14px;
  line-height:1.66;
  margin:0 0 15px 0;
  max-width:78ch;
}

.section-intro-tight{
  margin-bottom:0;
}

.section-lead{
  margin:0 0 16px 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.66;
  max-width:78ch;
}

p{
  line-height:var(--body-line);
  color:var(--text);
}

ul{
  margin:0;
  padding-left:20px;
  color:var(--muted);
}

li{
  margin:0 0 8px 0;
  line-height:1.65;
}

h1,h2,h3,h4,p,strong,span{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

/* HERO */

.hero{
  min-height:auto;
  padding:52px 0 34px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:visible;
  color:var(--hero-text);
}

.hero-home{
  background-image:url('/assets/img/bg-home.webp');
}
.page-home .hero-home{
  min-height:72vh;
  display:flex;
  align-items:flex-end;
  padding:80px 0 40px;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(8,14,18,.84) 0%, rgba(8,14,18,.62) 55%, rgba(8,14,18,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.48) 100%);
  pointer-events:none;
}

.hero-shell{
  position:relative;
  z-index:2;
  min-height:auto;
  display:block;
}

.hero-copy{
  max-width:760px;
}

.hero-copy-wide{
  max-width:980px;
}

.hero-kicker,
.hero-meta{
  opacity:.94;
  font-size:13px;
  line-height:1.5;
  margin-bottom:12px;
  color:var(--hero-muted);
}

body[class*="page-accent-"] .hero-kicker,
body[class*="page-accent-"] .hero-meta{
  color:var(--page-accent-strong);
}

.hero-service .hero-kicker,
.hero-service .hero-meta{
  color:rgba(255,255,255,.94);
}

.hero-badge{
  display:inline-block;
  margin:0 0 18px 0;
  padding:11px 14px;
  border:1px solid var(--hero-line);
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.98);
  font-size:13.5px;
  line-height:1.6;
  border-radius:10px;
  backdrop-filter:blur(4px);
  max-width:760px;
}

body[class*="page-accent-"] .hero-badge{
  border-color:var(--page-accent-line);
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.10) 100%);
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 14px 0;
}

.hero-contact-line{
  margin-top:0;
  font-size:14px;
  line-height:1.5;
  opacity:.96;
  color:var(--hero-muted);
}

.hero-contact-line a{
  text-decoration:underline;
  color:#ffffff;
}

.hero-quicklinks{
  margin-top:24px;
  max-width:980px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:16px;
  align-items:start;
  position:relative;
  z-index:2;
}

.hero-side{
  display:grid;
  gap:10px;
}

.hero-cta-note{
  margin-top:10px;
  font-size:.95rem;
  line-height:1.5;
  color:rgba(255,255,255,.78);
}

/* BUTTON */

/* 
   SISTEMA BOTTONI GLOBALE
   Regola unica: tutte le CTA principali ereditano forma, altezza,
   padding, raggiatura e allineamento dallo stesso blocco.
   Risolve il problema dei bottoni telefono/rettangolari e dei btn-primary non stilizzati.
*/

.btn,
.btn-primary,
.btn-glass,
.btn-outline,
.btn-whatsapp,
a.btn,
a.btn-primary,
a.btn-glass,
a.btn-outline,
a.btn-whatsapp,
.hero-actions > a,
.cta-actions > a,
.luci-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:42px;
  padding:0 15px;

  border-radius:11px;
  border:1px solid rgba(255,255,255,.18);

  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;

  -webkit-appearance:none;
  appearance:none;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* CTA primaria */

.btn-primary,
a.btn-primary,
.hero-actions > a.btn-primary,
.cta-actions > a.btn-primary{
  border-color:var(--page-accent-line);
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.10) 100%);
  color:#ffffff;
}

.btn-primary:hover,
a.btn-primary:hover,
.hero-actions > a.btn-primary:hover,
.cta-actions > a.btn-primary:hover{
  border-color:var(--page-accent);
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.16) 100%);
  color:#ffffff;
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}

/* CTA telefono / vetro */

.btn-glass,
a.btn-glass,
.hero-actions > a.btn-glass,
.cta-actions > a.btn-glass{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.15);
  color:#ffffff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.btn-glass:hover,
a.btn-glass:hover,
.hero-actions > a.btn-glass:hover,
.cta-actions > a.btn-glass:hover{
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.38);
  color:#ffffff;
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}

/* CTA outline */

.btn-outline,
a.btn-outline,
.hero-actions > a.btn-outline,
.cta-actions > a.btn-outline{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.03);
  color:#ffffff;
}

.btn-outline:hover,
a.btn-outline:hover,
.hero-actions > a.btn-outline:hover,
.cta-actions > a.btn-outline:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.44);
  color:#ffffff;
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}

/* Bottoni piccoli dentro card */

.btn-card{
  height:32px;
  min-height:32px;
  padding:0 11px;
  font-size:12.5px;
  align-self:flex-end;
  margin-top:14px;
}

/* Fallback per .btn generico */

main .btn:not(.btn-primary):not(.btn-glass):not(.btn-outline):not(.btn-whatsapp){
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  color:var(--text-strong);
}

body[class*="page-accent-"] main .btn:not(.btn-primary):not(.btn-glass):not(.btn-outline):not(.btn-whatsapp){
  border-color:var(--page-accent-line);
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.08) 100%);
}

main .btn:not(.btn-primary):not(.btn-glass):not(.btn-outline):not(.btn-whatsapp):hover{
  background:rgba(255,255,255,.14);
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}

body[class*="page-accent-"] main .btn:not(.btn-primary):not(.btn-glass):not(.btn-outline):not(.btn-whatsapp):hover{
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.12) 100%);
  border-color:var(--page-accent);
}

/* COMPONENTE WHATSAPP GLOBALE */

.btn-whatsapp,
a.btn-whatsapp,
.btn.btn-whatsapp,
a.btn.btn-whatsapp,
.hero-actions > a.btn-whatsapp,
.cta-actions > a.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:42px;
  padding:0 15px;

  border-radius:11px;
  border:1px solid rgba(37,211,102,.46);

  background:rgba(37,211,102,.14);
  color:#ffffff;

  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  box-shadow:0 10px 30px rgba(0,0,0,.18);

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-whatsapp::before,
a.btn-whatsapp::before,
.btn.btn-whatsapp::before,
a.btn.btn-whatsapp::before,
.hero-actions > a.btn-whatsapp::before,
.cta-actions > a.btn-whatsapp::before{
  content:"";
  display:inline-block;
  width:17px;
  height:17px;
  flex:0 0 17px;

  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M16.04 3C8.86 3 3.02 8.82 3.02 15.98c0 2.3.61 4.54 1.77 6.51L3 29l6.68-1.75a13.02 13.02 0 0 0 6.36 1.63h.01c7.18 0 13.02-5.82 13.02-12.98C29.07 8.82 23.23 3 16.04 3zm0 23.67h-.01c-1.91 0-3.79-.51-5.43-1.48l-.39-.23-3.96 1.04 1.06-3.86-.25-.4a10.67 10.67 0 0 1-1.64-5.76c0-5.94 4.86-10.77 10.83-10.77 2.89 0 5.6 1.12 7.64 3.16a10.68 10.68 0 0 1 3.18 7.61c0 5.94-4.86 10.77-10.83 10.77zm5.94-8.06c-.33-.16-1.94-.95-2.24-1.06-.3-.11-.52-.16-.74.16-.22.33-.85 1.06-1.04 1.28-.19.22-.38.25-.71.08-.33-.16-1.39-.51-2.65-1.63-.98-.87-1.64-1.95-1.83-2.28-.19-.33-.02-.51.14-.67.15-.15.33-.38.49-.57.16-.19.22-.33.33-.55.11-.22.05-.41-.03-.57-.08-.16-.74-1.78-1.01-2.44-.27-.64-.54-.55-.74-.56h-.63c-.22 0-.57.08-.87.41-.3.33-1.14 1.11-1.14 2.71s1.17 3.15 1.33 3.37c.16.22 2.3 3.51 5.58 4.92.78.34 1.39.54 1.86.69.78.25 1.49.21 2.05.13.63-.09 1.94-.79 2.21-1.55.27-.76.27-1.42.19-1.55-.08-.13-.3-.21-.63-.37z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.btn-whatsapp:hover,
a.btn-whatsapp:hover,
.btn.btn-whatsapp:hover,
a.btn.btn-whatsapp:hover,
.hero-actions > a.btn-whatsapp:hover,
.cta-actions > a.btn-whatsapp:hover{
  background:rgba(37,211,102,.22);
  border-color:rgba(37,211,102,.68);
  color:#ffffff;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  transform:translateY(-2px);
}

.btn-primary:focus-visible,
a.btn-primary:focus-visible,
.btn-glass:focus-visible,
a.btn-glass:focus-visible,
.btn-outline:focus-visible,
a.btn-outline:focus-visible,
.btn-whatsapp:focus-visible,
a.btn-whatsapp:focus-visible,
.btn.btn-whatsapp:focus-visible,
a.btn.btn-whatsapp:focus-visible{
  outline:2px solid var(--page-accent);
  outline-offset:3px;
}

.btn-whatsapp:focus-visible,
a.btn-whatsapp:focus-visible,
.btn.btn-whatsapp:focus-visible,
a.btn.btn-whatsapp:focus-visible{
  outline-color:rgba(37,211,102,.75);
}

.btn-whatsapp svg{
  display:none;
}

/* BLINDATURA MOBILE BOTTONI */

@media (max-width:900px){
  .hero-actions,
  .cta-actions{
    align-items:stretch;
  }

  .btn,
  .btn-primary,
  .btn-glass,
  .btn-outline,
  .btn-whatsapp,
  a.btn,
  a.btn-primary,
  a.btn-glass,
  a.btn-outline,
  a.btn-whatsapp,
  .hero-actions > a,
  .cta-actions > a,
  .btn.btn-whatsapp,
  a.btn.btn-whatsapp{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;

    width:100% !important;
    min-height:44px !important;
    padding:0 15px !important;

    border-radius:11px !important;

    color:#ffffff !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap !important;

    -webkit-appearance:none !important;
    appearance:none !important;

    transform:none !important;
  }

  .btn-primary,
  a.btn-primary,
  .hero-actions > a.btn-primary,
  .cta-actions > a.btn-primary{
    border:1px solid var(--page-accent-line) !important;
    background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.10) 100%) !important;
  }

  .btn-glass,
  a.btn-glass,
  .hero-actions > a.btn-glass,
  .cta-actions > a.btn-glass{
    border:1px solid rgba(255,255,255,.26) !important;
    background:rgba(255,255,255,.15) !important;
  }

  .btn-whatsapp,
  a.btn-whatsapp,
  .btn.btn-whatsapp,
  a.btn.btn-whatsapp,
  .hero-actions > a.btn-whatsapp,
  .cta-actions > a.btn-whatsapp{
    border:1px solid rgba(37,211,102,.46) !important;

    background:rgba(37,211,102,.14) !important;
    background-color:rgba(37,211,102,.14) !important;
    background-image:none !important;

    box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
  }

  .btn-whatsapp::before,
  a.btn-whatsapp::before,
  .btn.btn-whatsapp::before,
  a.btn.btn-whatsapp::before,
  .hero-actions > a.btn-whatsapp::before,
  .cta-actions > a.btn-whatsapp::before{
    content:"" !important;
    display:inline-block !important;
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;

    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M16.04 3C8.86 3 3.02 8.82 3.02 15.98c0 2.3.61 4.54 1.77 6.51L3 29l6.68-1.75a13.02 13.02 0 0 0 6.36 1.63h.01c7.18 0 13.02-5.82 13.02-12.98C29.07 8.82 23.23 3 16.04 3zm0 23.67h-.01c-1.91 0-3.79-.51-5.43-1.48l-.39-.23-3.96 1.04 1.06-3.86-.25-.4a10.67 10.67 0 0 1-1.64-5.76c0-5.94 4.86-10.77 10.83-10.77 2.89 0 5.6 1.12 7.64 3.16a10.68 10.68 0 0 1 3.18 7.61c0 5.94-4.86 10.77-10.83 10.77zm5.94-8.06c-.33-.16-1.94-.95-2.24-1.06-.3-.11-.52-.16-.74.16-.22.33-.85 1.06-1.04 1.28-.19.22-.38.25-.71.08-.33-.16-1.39-.51-2.65-1.63-.98-.87-1.64-1.95-1.83-2.28-.19-.33-.02-.51.14-.67.15-.15.33-.38.49-.57.16-.19.22-.33.33-.55.11-.22.05-.41-.03-.57-.08-.16-.74-1.78-1.01-2.44-.27-.64-.54-.55-.74-.56h-.63c-.22 0-.57.08-.87.41-.3.33-1.14 1.11-1.14 2.71s1.17 3.15 1.33 3.37c.16.22 2.3 3.51 5.58 4.92.78.34 1.39.54 1.86.69.78.25 1.49.21 2.05.13.63-.09 1.94-.79 2.21-1.55.27-.76.27-1.42.19-1.55-.08-.13-.3-.21-.63-.37z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
  }

  .btn-whatsapp:hover,
  .btn-whatsapp:active,
  .btn-whatsapp:focus,
  a.btn-whatsapp:hover,
  a.btn-whatsapp:active,
  a.btn-whatsapp:focus,
  .btn.btn-whatsapp:hover,
  .btn.btn-whatsapp:active,
  .btn.btn-whatsapp:focus,
  a.btn.btn-whatsapp:hover,
  a.btn.btn-whatsapp:active,
  a.btn.btn-whatsapp:focus,
  .hero-actions > a.btn-whatsapp:hover,
  .hero-actions > a.btn-whatsapp:active,
  .hero-actions > a.btn-whatsapp:focus,
  .cta-actions > a.btn-whatsapp:hover,
  .cta-actions > a.btn-whatsapp:active,
  .cta-actions > a.btn-whatsapp:focus{
    border-radius:11px !important;
    border:1px solid rgba(37,211,102,.68) !important;

    background:rgba(37,211,102,.22) !important;
    background-color:rgba(37,211,102,.22) !important;
    background-image:none !important;

    color:#ffffff !important;
    box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
    transform:none !important;
    outline:none !important;
  }

  .btn-whatsapp svg{
    display:none !important;
  }

  .btn-whatsapp span{
    color:#ffffff !important;
  }
}



/* CARD BASE */

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
  height:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);
  background:rgba(255,255,255,.08);
  padding:15px;
  transition:
    border-color var(--transition-mid),
    box-shadow var(--transition-mid),
    background var(--transition-mid),
    transform var(--transition-mid);
  overflow:hidden;
}

.card h3{
  margin:0 0 9px 0;
  font-size:17px;
  line-height:1.24;
  color:var(--text-strong);
}

.card p{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
}

.card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}

.card-head h3{
  margin:0;
}

.card-label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:8px;
}

body[class*="page-accent-"] .card-label{
  color:var(--page-accent-strong);
}

.quick-card strong{
  display:block;
  margin-bottom:6px;
  font-size:17px;
  line-height:1.28;
  color:var(--text-strong);
}

.quick-card span{
  font-size:14px;
  line-height:1.58;
  opacity:1;
  color:var(--muted);
}

.service-card,
.info-card{
  min-height:112px;
}

.card-soft,
.card--soft{
  background:rgba(255,255,255,.07);
}

.card-highlight{
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.08) 100%);
  border:1px solid var(--page-accent-line);
}

/* CARD INFORMATIVE = STATICHE, TECNICHE */

div.card,
article.card{
  cursor:default;
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.05) 100%);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 5px 14px rgba(0,0,0,.10);
}

div.card:hover,
article.card:hover{
  border-color:rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.06) 100%);
  box-shadow:0 7px 18px rgba(0,0,0,.12);
  transform:none;
}

div.card h3,
article.card h3{
  color:rgba(255,255,255,.97);
}

/* CARD CLICCABILI = NAVIGAZIONE EVIDENTE */

a.card,
a.quick-card,
a.service-card,
a.info-card,
.card-link,
.luci-link-card{
  cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.08) 100%);
  border-color:var(--page-accent-line);
  border-left:4px solid var(--page-accent);
  box-shadow:0 10px 22px rgba(0,0,0,.17);
}

a.card h3,
a.quick-card strong,
a.service-card h3,
a.info-card h3,
.card-link h3,
.luci-link-card h3{
  color:#ffffff;
}

a.card::before,
a.quick-card::before,
a.service-card::before,
a.info-card::before,
.card-link::before,
.luci-link-card::before{
  content:none;
}

a.card::after,
a.quick-card::after,
a.service-card::after,
a.info-card::after,
.card-link::after,
.luci-link-card::after{
  content:"Apri pagina";
  display:block;
  width:calc(100% + 8px);
  margin-top:auto;
  margin-right:-8px;
  padding-top:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--page-accent-strong);
  opacity:.92;
  text-align:right;
}

a.card:hover,
a.quick-card:hover,
a.service-card:hover,
a.info-card:hover,
.card-link:hover,
.luci-link-card:hover{
  border-color:var(--page-accent);
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.10) 100%);
  box-shadow:0 13px 28px rgba(0,0,0,.22);
  transform:translateY(-3px);
}

a.card:hover .btn,
a.card:hover .luci-card-btn,
.card-link:hover .btn,
.card-link:hover .luci-card-btn,
a.quick-card:hover .btn,
a.quick-card:hover .luci-card-btn,
a.service-card:hover .btn,
a.service-card:hover .luci-card-btn,
a.info-card:hover .btn,
a.info-card:hover .luci-card-btn,
.luci-link-card:hover .btn,
.luci-link-card:hover .luci-card-btn{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}

/* CARD CTA = BLOCCO PIÙ CALDO E PIÙ PRESENTE */

.cta-card,
.card-highlight{
  border-color:var(--page-accent-line);
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.08) 100%);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}

.cta-card::before,
.card-highlight::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--page-accent-soft) 0%, transparent 40%, transparent 100%);
  pointer-events:none;
}

.cta-card:hover,
.card-highlight:hover{
  border-color:var(--page-accent);
  background:linear-gradient(180deg, var(--page-accent-soft) 0%, rgba(255,255,255,.10) 100%);
  transform:none;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.card-highlight:hover .btn,
.card-highlight:hover .luci-card-btn,
.luci-card-hover:hover .luci-moving-btn{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}

/* HERO CARDS */

.hero .card,
.hero .quick-card,
.hero .info-card,
.hero .service-card,
.hero .card--soft{
  backdrop-filter:blur(4px);
}

.hero div.card,
.hero article.card{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
}

.hero div.card:hover,
.hero article.card:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  transform:none;
}

.hero a.card,
.hero a.quick-card,
.hero a.service-card,
.hero .card-link{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.24);
  border-left:4px solid var(--page-accent);
  box-shadow:none;
}

.hero a.card:hover,
.hero a.quick-card:hover,
.hero a.service-card:hover,
.hero .card-link:hover{
  background:rgba(255,255,255,.20);
  border-color:var(--page-accent-line);
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.16);
}

.hero a.card::after,
.hero a.quick-card::after,
.hero a.service-card::after,
.hero .card-link::after{
  color:#fff;
  opacity:.92;
}

.hero .card h3,
.hero .quick-card strong{
  color:#ffffff;
}

.hero .card p,
.hero .quick-card span,
.hero .card-label{
  color:rgba(255,255,255,.88);
}

/* GRID */

.cards-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.cards-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.cards-grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.quick-grid{
  display:grid;
  gap:12px;
}

.quick-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.cards-grid-gap-top{
  margin-top:10px;
}

/* SECTION SPACING */

.section-block{
  padding:24px 0 0 0;
}

.section-block + .section-block{
  border-top:1px solid rgba(255,255,255,.07);
  margin-top:24px;
  padding-top:24px;
}

/* CTA */

.cta-row{
  margin-top:18px;
}

.cta-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.cta-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.cta-copy strong{
  font-size:16px;
  color:var(--text-strong);
}

.cta-copy span{
  color:var(--muted);
  line-height:1.58;
}

.cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* SEO TEXT */

.seo-text{
  padding-top:16px;
}

.seo-text h2{
  margin:22px 0 10px 0;
  color:var(--text-strong);
}

.seo-text p{
  max-width:82ch;
  margin:0 0 12px 0;
  line-height:1.66;
  color:var(--muted);
}

.seo-text a{
  text-decoration:underline;
}

/* REVIEWS READY */

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.review-card{
  position:relative;
}

.review-stars{
  display:flex;
  gap:4px;
  margin-bottom:10px;
  color:var(--page-accent);
  font-size:14px;
}

.review-author{
  margin-top:12px;
  font-size:13px;
  color:var(--muted-2);
}

.review-link-row{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* FOOTER */

.site-footer{
  border-top:1px solid var(--line);
  margin-top:32px;
  background:#262626;
}

.site-footer-inner{
  display:grid;
  gap:8px;
  padding:18px 18px 22px;
}

.site-footer-inner span{
  color:var(--muted);
}

.site-footer-inner a{
  color:var(--text-strong);
}

/* PAGINA DIFFORMITÀ EDILIZIA — SOLO MICRO-OTTIMIZZAZIONI MIRATE */

#difformitaHeroGrid + *,
#difformitaClusterGrid,
#difformitaQuickGrid{
  position:relative;
}

#difformitaClusterGrid > a.card,
#difformitaClusterGrid > a.service-card{
  background:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.10) 100%);
  border-color:var(--page-accent-line);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

#difformitaClusterGrid > a.card:hover,
#difformitaClusterGrid > a.service-card:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.12) 100%);
  border-color:var(--page-accent);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

#difformitaQuickGrid > .card,
#difformitaHeroGrid .card,
#difformitaHeroGrid .service-card{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
}

#difformitaQuickGrid > .card:hover,
#difformitaHeroGrid .card:hover,
#difformitaHeroGrid .service-card:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
}

h2.section-title,
#difformitaClusterGrid{
  scroll-margin-top:90px;
}

body.page-pratiche .section-block{
  padding:28px 0 0 0;
}

body.page-pratiche .section-block + .section-block{
  margin-top:26px;
  padding-top:28px;
}

body.page-pratiche .section-block .section-title{
  color:rgba(255,255,255,.99);
}

body.page-pratiche .section-block p.section-lead,
body.page-pratiche .section-block .section-lead{
  color:rgba(255,255,255,.84);
}

/* TABLET */

@media (max-width:980px){

  .cards-grid,
  .cards-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cards-grid-3,
  .quick-grid-3,
  .reviews-grid,
  .hero-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .nav{
    gap:6px;
  }

  .nav a,
  .nav-parent{
    font-size:13px;
    padding:7px 9px;
  }

  .page-home .hero-home{
    min-height:64vh;
  }
}

/* MOBILE */

@media (max-width:768px){

  :root{
    --padX:16px;
    --headerH:auto;
    --r:13px;
  }

  .container{
    padding-left:var(--padX);
    padding-right:var(--padX);
  }

  .header{
    height:auto;
    min-height:unset;
  }

  .header-inner{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:10px;
    padding-top:12px;
    padding-bottom:12px;
  }

  .brand{
    width:100%;
  }

  .brand a{
    font-size:18px;
    line-height:1.15;
    white-space:normal;
  }

  .nav{
    display:flex;
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .nav a,
  .nav-parent{
    flex:0 0 auto;
    font-size:13px;
    padding:8px 10px;
    min-height:34px;
  }

  .nav-group{
    flex:0 0 auto;
  }

  .nav-dropdown{
    left:0;
    transform:none;
    min-width:160px;
  }

  .hero{
    min-height:auto;
    padding:34px 0 30px 0;
  }

  .page-home .hero-home{
    min-height:auto;
    padding:42px 0 34px 0;
  }

  .hero-title{
    font-size:32px;
    line-height:1.08;
    max-width:none;
  }

  .hero-badge{
    width:100%;
    max-width:none;
  }

  .hero-lead{
    max-width:none;
  }

  .hero-lead-strong{
    font-size:15px;
    line-height:1.72;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .btn,
  .luci-card-btn{
    width:100%;
    min-height:44px;
  }

  .btn-whatsapp,
  a.btn-whatsapp,
  .btn.btn-whatsapp,
  a.btn.btn-whatsapp{
    width:100%;
    min-height:44px;
  }

  .btn-card{
    width:auto;
  }

  .cards-grid,
  .cards-grid-3,
  .cards-grid-4,
  .quick-grid-3,
  .reviews-grid,
  .hero-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .hero-side{
    gap:12px;
  }

  .card{
    padding:16px;
  }

  .card h3{
    font-size:16px;
    line-height:1.3;
  }

  .card p{
    font-size:14px;
    line-height:1.62;
  }

  .quick-card strong{
    font-size:16px;
  }

  .quick-card span{
    font-size:14px;
  }

  .section-block{
    padding-top:24px;
  }

  .section-block + .section-block{
    margin-top:24px;
    padding-top:24px;
  }

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

  .cta-card .btn{
    width:100%;
  }

  .cta-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  a.card::after,
  a.quick-card::after,
  a.service-card::after,
  a.info-card::after,
  .card-link::after,
  .luci-link-card::after{
    width:calc(100% + 10px);
    margin-right:-10px;
    font-size:11px;
    padding-top:12px;
    text-align:right;
  }

  a.card .btn-card,
  a.quick-card .btn-card,
  a.service-card .btn-card,
  a.info-card .btn-card,
  .card-link .btn-card,
  .luci-link-card .btn-card,
  a.card .luci-card-btn,
  a.quick-card .luci-card-btn,
  a.service-card .luci-card-btn,
  a.info-card .luci-card-btn,
  .card-link .luci-card-btn,
  .luci-link-card .luci-card-btn{
    display:none !important;
  }

  .site-footer-inner{
    padding:18px 16px 22px;
  }
}

/* SMALL MOBILE */

@media (max-width:480px){

  :root{
    --padX:14px;
  }

  .brand a{
    font-size:17px;
    line-height:1.15;
  }

  .hero-title{
    font-size:28px;
  }

  .hero-lead-strong{
    font-size:14.5px;
  }

  .nav a,
  .nav-parent{
    font-size:12.5px;
    padding:7px 9px;
  }

  .card{
    padding:15px;
    border-radius:12px;
  }

  .card h3{
    font-size:15px;
  }

  .card p{
    font-size:13.5px;
  }

  .section-title{
    font-size:26px;
    line-height:1.15;
  }

  .quick-card strong{
    font-size:15px;
  }

  .quick-card span{
    font-size:13.5px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TEMPLATE VECCHIO — CLASSI AGGIUNTE
   Standard definitivo: perizia-infiltrazioni-roma.html
   Principio: aggiunta pura — zero modifiche all'esistente sopra
   v3000
   ═══════════════════════════════════════════════════════════════════ */


/* SITE-HEADER
   Equivalente funzionale di .header — template vecchio
   Usato come: <header class="site-header"> */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:var(--headerH);
  display:flex;
  align-items:center;
  background:rgba(42,42,42,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}


/* LOGO
   Equivalente funzionale di .brand — template vecchio
   Usato come: <div class="logo"><a href="/">...</a></div> */

.logo{
  flex:0 0 auto;
  min-width:0;
}

.logo a{
  display:block;
  font-weight:700;
  letter-spacing:.02em;
  font-size:20px;
  line-height:1.15;
  white-space:nowrap;
  color:var(--text-strong);
}


/* MAIN-NAV
   Equivalente funzionale di .nav — template vecchio
   Usato come: <nav class="main-nav">
   Nota: .nav-parent, .nav-group, .nav-dropdown restano condivisi
         e continuano a funzionare dentro .main-nav senza override */

.main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;
}

.main-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  font-size:14px;
  line-height:1.2;
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
  white-space:nowrap;
}

.main-nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.main-nav a[aria-current="page"]{
  color:#fff;
  background:rgba(255,255,255,.14);
}


/* HERO-SERVICE
   Hero per pagine di servizio — template vecchio
   Supporta background-image via stile o classe modificatrice
   Usato come: <section class="hero-service"> oppure
               <section class="hero-service" style="background-image:url(...)">
   .hero-overlay e .hero-shell funzionano già al suo interno */

.hero-service{
  padding:52px 0 36px;
  background:var(--bg-soft);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  color:var(--hero-text);
}


/* HERO-CONTENT
   Colonna sinistra del .hero-grid dentro .hero-service — template vecchio
   Contiene titolo, lead, badge, actions */

.hero-content{
  display:flex;
  flex-direction:column;
  min-width:0;
}


/* HERO-CARD
   Colonna destra del .hero-grid dentro .hero-service — template vecchio
   Card contatti / CTA in sidebar al hero */

.hero-card{
  background:rgba(255,255,255,.10);
  border:1px solid var(--page-accent-line);
  border-radius:var(--r);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:start;
}

.hero-card h3{
  margin:0 0 6px 0;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  color:var(--text-strong);
}

.hero-card p{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,.84);
}


/* NARROW-CONTAINER
   Contenitore stretto per sezioni a testo prevalente — template vecchio
   Sostituisce .container nelle sezioni dove la misura ridotta migliora la leggibilità
   Usato come: <div class="narrow-container"> dentro una <section> */

.narrow-container{
  width:100%;
  max-width:860px;
  margin:0 auto;
  padding:0 var(--padX);
}


/* SECTION-MUTED
   Sezione con sfondo alternato per ritmo visivo — template vecchio
   Usato come: <section class="section-muted"> */

.section-muted{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  padding:32px 0;
}


/* FAQ-LIST
   Accordion FAQ via details/summary — template vecchio
   Usato come: <div class="faq-list">
                 <details><summary>...</summary><p>...</p></details>
               </div>
   Colori e accento pilotati da --page-accent via body class */

.faq-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:0;
}

.faq-list details{
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.faq-list details[open]{
  border-color:var(--page-accent-line);
  background:rgba(255,255,255,.09);
}

.faq-list summary{
  padding:14px 16px;
  cursor:pointer;
  font-size:14.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--text-strong);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  user-select:none;
}

.faq-list summary::-webkit-details-marker{
  display:none;
}

.faq-list summary::after{
  content:"+";
  flex-shrink:0;
  font-size:20px;
  font-weight:300;
  color:var(--page-accent);
  line-height:1;
}

.faq-list details[open] summary::after{
  content:"−";
}

.faq-list details > p,
.faq-list details > div{
  padding:2px 16px 16px;
  margin:0;
  font-size:14px;
  line-height:1.68;
  color:var(--muted);
}

.faq-list details > ul{
  padding:2px 16px 16px 34px;
  margin:0;
}

.faq-list details > ul li{
  font-size:14px;
  color:var(--muted);
  margin-bottom:6px;
}


/* FOOTER-GRID
   Footer a tre colonne con link ai servizi — template vecchio
   Usato come: <div class="footer-grid"> dentro un wrapper footer
   Nota: nelle pagine standard (post-migrazione) si usa solo
         .site-footer + .site-footer-inner senza footer-grid */

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  padding:32px 0 28px;
  border-bottom:1px solid var(--line);
}

.footer-grid h3{
  margin:0 0 14px 0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-strong);
}

.footer-grid ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-grid ul li{
  margin-bottom:7px;
}

.footer-grid ul a{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.5;
  transition:color var(--transition-fast);
}

.footer-grid ul a:hover{
  color:var(--text-strong);
}


/* FOOTER-BOTTOM
   Barra inferiore del footer — template vecchio
   Contiene copyright, p.IVA, link legali
   Usato come: <div class="footer-bottom"> dopo .footer-grid
               o come unico elemento dentro il wrapper footer */

.footer-bottom{
  padding:16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--muted-2);
}

.footer-bottom a{
  color:var(--muted);
  transition:color var(--transition-fast);
}

.footer-bottom a:hover{
  color:var(--text-strong);
}


/* CTA-SECTION
   Sezione chiamata all'azione a livello di pagina — template vecchio
   Distinta da .cta-card (componente) e .cta-row (spacing)
   Usato come: <section class="cta-section">
   Accento pilotato da --page-accent via body class */

.cta-section{
  padding:36px 0;
  background:linear-gradient(180deg,var(--page-accent-soft) 0%,var(--bg-deep) 100%);
  border-top:1px solid var(--page-accent-line);
}

.cta-section .section-title{
  max-width:52ch;
}

.cta-section .section-intro{
  max-width:68ch;
}


/* HERO-PILLS
   Indicatori di area geografica nel hero — homepage
   Usato come: <div class="hero-pills">
                 <span class="hero-pill">Roma</span>
               </div> */

.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1;
  border-radius:10px;
  white-space:nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — TEMPLATE VECCHIO
   Blocchi aggiuntivi per le classi introdotte sopra
   ═══════════════════════════════════════════════════════════════════ */

/* TABLET */

@media (max-width:980px){

  .main-nav{
    gap:6px;
  }

  .main-nav a{
    font-size:13px;
    padding:7px 9px;
  }

  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
}

/* MOBILE */

@media (max-width:768px){

  .site-header{
    height:auto;
    min-height:unset;
  }

  .logo{
    width:100%;
  }

  .logo a{
    font-size:18px;
    line-height:1.15;
    white-space:normal;
  }

  .main-nav{
    display:flex;
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .main-nav a{
    flex:0 0 auto;
    font-size:13px;
    padding:8px 10px;
    min-height:34px;
  }

  .hero-service{
    padding:28px 0 24px;
  }

  .section-muted{
    padding:24px 0;
  }

  .faq-list summary{
    font-size:14px;
    padding:13px 14px;
  }

  .faq-list details > p,
  .faq-list details > div{
    padding:2px 14px 14px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:18px;
    padding:24px 0 20px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .cta-section{
    padding:28px 0;
  }
}

/* SMALL MOBILE */

@media (max-width:480px){

  .logo a{
    font-size:17px;
    line-height:1.15;
  }

  .main-nav a{
    font-size:12.5px;
    padding:7px 9px;
  }

  .faq-list summary{
    font-size:13.5px;
  }

  .hero-pill{
    min-height:36px;
    width:100%;
    justify-content:center;
  }
}

/* ============================================================
   TESTIMONIALS + HERO RATING
   Incollare in coda a /assets/css/style.css
   Dopo l'aggiunta aggiornare il version string: ?v=3001
   ============================================================ */

/* Badge rating sotto i bottoni nell'hero */
.hero-rating {
  margin-top: .625rem;
  font-size: .78rem;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .55);
}

/* Griglia 3 colonne per le recensioni */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 800px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Card singola recensione */
.testimonial-card {
  margin: 0;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border, rgba(200, 190, 175, .15));
  background: transparent;
}

/* Etichetta area tematica — usa il colore accent della pagina */
.testimonial-area {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--page-accent, #e5d7bf);
  margin: 0 0 .875rem;
}

/* Testo della recensione */
.testimonial-quote {
  margin: 0 0 1.125rem;
  padding: 0;
  border: none;
  font-size: .95rem;
  line-height: 1.7;
  font-style: italic;
}

/* Autore */
.testimonial-author {
  display: block;
  font-size: .75rem;
  letter-spacing: .03em;
  opacity: .55;
}