/* ==========================================================================
   LUCA SCALA FISIOTERAPISTA — DESIGN SYSTEM
   Palette: bianco / verde salvia chiaro / verde profondo
   Tipografia: Sora (display) + Inter (testo) + JetBrains Mono (eyebrow/dati)
   Segno distintivo: "arco di movimento" — motivo grafico che richiama
   l'arco goniometrico (misurazione del range di movimento in clinica)
   e la traiettoria di un gesto sportivo.
   ========================================================================== */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- TOKENS ---------- */
:root{
  /* Colore */
  --c-white:        #FFFFFF;
  --c-bg-soft:       #F2F8F4;   /* verde salvia molto chiaro, per sezioni alternate */
  --c-bg-soft-2:     #EAF4EE;
  --c-primary:       #143C2B;   /* verde profondo — brand primario */
  --c-primary-700:   #0B271C;   /* verde profondo, hover/scuro */
  --c-primary-300:   #2E6B4C;   /* verde profondo, tinta intermedia */
  --c-accent:        #5FBE8A;   /* verde chiaro — energia, sport */
  --c-accent-600:    #3FA071;
  --c-accent-text:   #2E7D58;   /* variante più scura, per testo piccolo: garantisce contrasto AA su bianco */
  --c-accent-soft:   #DCF1E4;   /* verde pallido, chip/badge */
  --c-text:          #122017;   /* quasi nero a tinta verde, testo */
  --c-text-muted:    #51635A;
  --c-text-on-dark:  #EAF3ED;
  --c-text-on-dark-muted: #AFC8BC;
  --c-border:        #DEEBE3;
  --c-white-soft:    #FBFDFC;
  --c-danger:        #B3261E;

  /* Tipografia */
  --f-display: "Sora", "Segoe UI", sans-serif;
  --f-body: "Inter", "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "Courier New", monospace;

  /* Scala spaziature (base 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Raggi / ombre */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 1px 2px rgba(18,32,23,.04), 0 12px 32px -16px rgba(18,32,23,.18);
  --shadow-pop:  0 20px 60px -20px rgba(11,39,28,.35);

  --container: 1180px;
}

/* ---------- BASE ---------- */
body{
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--c-primary);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 700;
}
h1{ font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.45rem); }
p{ color: var(--c-text-muted); }
strong{ color: var(--c-text); }

.lead{ font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--c-text-muted); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--c-accent-600);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 720px){ .container{ padding-inline: var(--sp-7); } }

section{ padding-block: var(--sp-8); }
@media (max-width: 720px){ section{ padding-block: var(--sp-7); } }

.bg-soft{ background: var(--c-bg-soft); }
.bg-dark{ background: var(--c-primary); color: var(--c-text-on-dark); }
.bg-dark h1, .bg-dark h2, .bg-dark h3{ color: var(--c-white); }
.bg-dark p{ color: var(--c-text-on-dark-muted); }

/* Eyebrow / etichetta tecnica in mono — richiama il linguaggio clinico */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.bg-dark .eyebrow{ color: var(--c-accent); }
.eyebrow::before{
  content:"";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent-text);
}
.bg-dark .eyebrow::before{ background: var(--c-accent); }

.section-head{ max-width: 680px; margin-bottom: var(--sp-7); }
.section-head.center{ margin-inline: auto; text-align: center; }

/* ---------- BOTTONI ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .98rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--c-accent-600); color: var(--c-primary-700); }
.btn-primary:hover{ background: var(--c-accent); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-dark{ background: var(--c-primary); color: var(--c-white); }
.btn-dark:hover{ background: var(--c-primary-700); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: rgba(20,60,43,.25); color: var(--c-primary); }
.btn-outline:hover{ border-color: var(--c-primary); background: rgba(20,60,43,.05); }
.bg-dark .btn-outline{ border-color: rgba(255,255,255,.35); color: var(--c-white); }
.bg-dark .btn-outline:hover{ background: rgba(255,255,255,.08); border-color: var(--c-white); }
.btn-whatsapp{ background:#1E8E5A; color:#fff; }
.btn-whatsapp:hover{ background:#176c44; transform: translateY(-2px); }
.btn-block{ width: 100%; }
.btn svg{ width: 18px; height: 18px; }

.cta-row{ display:flex; flex-wrap:wrap; gap: var(--sp-3); align-items:center; }

/* ---------- HEADER / NAV ---------- */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: var(--sp-3);
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; color: var(--c-primary); }
.brand .brand-mark{
  width: 40px; height:40px; border-radius: 10px;
  background: #FFFFFF; padding:4px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand .brand-mark img{ width: 100%; height: 100%; object-fit: contain; display:block; }
.brand small{ display:block; font-family: var(--f-body); font-weight:500; font-size:.68rem; color: var(--c-text-muted); letter-spacing:.02em; }

.nav-links{ display:none; align-items:center; gap: var(--sp-6); }
.nav-links a{ font-size:.94rem; font-weight:600; color: var(--c-text); position:relative; padding: 6px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--c-accent-600); transition: width .2s ease; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--c-primary); }

.nav-actions{ display:flex; align-items:center; gap: var(--sp-3); }
.nav-actions .btn{ padding: 11px 20px; font-size:.92rem; }
.nav-actions .btn-outline{ display:none; }
.nav-actions .btn-primary{ display:none; }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius: var(--radius-s);
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
}
.nav-toggle svg{ width:20px; height:20px; }

.mobile-panel{
  display:none; flex-direction:column; gap: var(--sp-2);
  padding: var(--sp-4) 0 var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.mobile-panel.open{ display:flex; }
.mobile-panel a{ padding: 12px var(--sp-2); font-weight:600; border-radius: var(--radius-s); }
.mobile-panel a:hover{ background: var(--c-bg-soft); }
.mobile-panel .cta-row{ padding: var(--sp-3) var(--sp-2) 0; }

@media (min-width: 640px){
  .nav-actions .btn-outline{ display:inline-flex; }
  .nav-actions .btn-primary{ display:inline-flex; }
}
@media (min-width: 1040px){
  .nav-toggle{ display:none; }
  .nav-links{ display:flex; }
  .mobile-panel{ display:none !important; }
}

/* ---------- HERO (home) ---------- */
/* ---------- HERO con foto a tutto schermo ---------- */
.hero-bg{
  position:relative; overflow:hidden;
  min-height: 640px;
  display:flex; align-items:center;
  padding-block: var(--sp-9);
  background: var(--c-primary-700);
}
.hero-bg-media{ position:absolute; inset:0; z-index:0; }
.hero-bg-media img{ width:100%; height:100%; object-fit:cover; object-position: 70% 30%; display:block; }
@media (max-width: 640px){
  .hero-bg-media img{ object-position: 50% 12%; }
}
.hero-bg-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,39,28,.78) 0%, rgba(11,39,28,.6) 45%, rgba(11,39,28,.88) 100%);
}
.hero-bg-content{ position:relative; z-index:1; max-width: 760px; margin-inline:auto; text-align:center; }
.hero-bg-content .eyebrow{ justify-content:center; color: var(--c-accent); }
.hero-bg-content .eyebrow::before{ background: var(--c-accent); }
.hero-bg-content h1{ color:#fff; }
.hero-bg-content .lead{ color: rgba(255,255,255,.85); max-width: 620px; margin-inline:auto; margin-top: var(--sp-4); margin-bottom: var(--sp-6); }
.hero-bg-content .cta-row{ justify-content:center; }
.btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.45); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color:#fff; }

.hero-proof{
  display:inline-flex; align-items:center; gap: var(--sp-4);
  margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-m); backdrop-filter: blur(4px);
  text-align:left; flex-wrap:wrap; justify-content:center;
}
.avatars-stack{ display:flex; }
.avatar-mini{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--c-primary-700);
  background: var(--c-accent-600); color:#fff; font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  margin-left:-10px; font-family: var(--f-display);
}
.avatar-mini:first-child{ margin-left:0; }
.hero-proof-text p{ color:#fff; font-size:.88rem; margin:0; max-width:320px; }
.hero-proof-rating{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:.82rem; color: var(--c-accent); font-weight:700; }
.hero-proof-rating svg{ width:13px; height:13px; }

@media (max-width: 720px){ .hero-bg{ min-height: 560px; } .hero-proof{ flex-direction:column; text-align:center; } .hero-proof-text p{ max-width:260px; } }

.hero-photo{
  position:relative; border-radius: var(--radius-l);
  overflow:hidden; aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--c-primary-300), var(--c-primary-700));
  display:flex; align-items:flex-end; box-shadow: var(--shadow-pop);
}
.hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo .photo-caption{
  position:relative; z-index:2;
  margin:var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: rgba(11,39,28,.55); backdrop-filter: blur(6px);
  border-radius: var(--radius-m); color:#fff; font-size:.85rem;
}

/* ---------- PHOTO FRAME (foto inline nel contenuto) ---------- */
.photo-frame{ position:relative; border-radius: var(--radius-m); overflow:hidden; box-shadow: var(--shadow-card); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-frame figcaption{ padding: var(--sp-3) var(--sp-4); background: var(--c-bg-soft); color: var(--c-text-muted); font-size:.82rem; }
.hero-badge-float{
  position:absolute; left: -18px; bottom: -18px;
  background: var(--c-white); border-radius: var(--radius-m);
  padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-card);
  display:flex; align-items:center; gap: var(--sp-3);
  max-width: 240px;
}
@media (max-width: 480px){ .hero-badge-float{ left: 8px; bottom: -16px; padding: var(--sp-3); } }
.hero-badge-float svg{ width:30px; height:30px; flex-shrink:0; color: var(--c-accent-600); }
.hero-badge-float strong{ display:block; font-size:.9rem; }
.hero-badge-float span{ font-size:.78rem; color: var(--c-text-muted); }

/* Segno distintivo — arco di movimento (decorativo, presente con misura) */
.motion-arc{ position:absolute; pointer-events:none; opacity:.5; }
.motion-arc.arc-1{ top:-60px; right:-80px; width:420px; }
.motion-arc.arc-2{ bottom:-40px; left:-60px; width:300px; }
@media (max-width: 720px){ .motion-arc{ display:none; } }

/* ---------- PAGE HEADER (sottopagine) ---------- */
.page-header{
  position:relative; overflow:hidden;
  background: var(--c-primary); color: var(--c-white);
  padding-block: var(--sp-7) var(--sp-8);
}
.page-header .btn-outline{ border-color: rgba(255,255,255,.45); color: var(--c-white); }
.page-header .btn-outline:hover{ background: rgba(255,255,255,.1); border-color: var(--c-white); }
.page-header .eyebrow{ color: var(--c-accent); }
.page-header .eyebrow::before{ background: var(--c-accent); }
.breadcrumb{ font-size:.85rem; color: var(--c-text-on-dark-muted); margin-bottom: var(--sp-4); display:flex; gap:8px; align-items:center; }
.breadcrumb a{ color: var(--c-text-on-dark-muted); }
.breadcrumb a:hover{ color:#fff; }
.page-header h1{ color:#fff; max-width: 760px; }
.page-header .lead{ color: var(--c-text-on-dark-muted); max-width:620px; margin-top: var(--sp-3); }

/* ---------- CARDS ---------- */
.grid{ display:grid; gap: var(--sp-5); }
.grid-2{ grid-template-columns: repeat(1,1fr); }
.grid-3{ grid-template-columns: repeat(1,1fr); }
.grid-4{ grid-template-columns: repeat(1,1fr); }
@media (min-width: 640px){ .grid-2{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr); } .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 640px){ .sticky-photo{ position:sticky; top:100px; } }
@media (min-width: 960px){ .grid-3{ grid-template-columns: repeat(3,1fr); } .grid-4{ grid-template-columns: repeat(4,1fr); } }

.card{
  background: var(--c-white); border:1px solid var(--c-border);
  border-radius: var(--radius-m); padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; height:100%;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.card .icon-tile{
  width:48px; height:48px; border-radius: var(--radius-s);
  background: var(--c-accent-soft); color: var(--c-primary);
  display:flex; align-items:center; justify-content:center; margin-bottom: var(--sp-4);
}
.card .icon-tile svg{ width:24px; height:24px; }
.card h3{ margin-bottom: var(--sp-2); }
.card p{ flex-grow:1; }
.card .card-link{ margin-top: var(--sp-4); font-weight:700; color: var(--c-primary); display:inline-flex; align-items:center; gap:6px; font-size:.92rem; }
.card .card-link svg{ width:16px; height:16px; transition: transform .15s ease; }
.card:hover .card-link svg{ transform: translateX(3px); }

/* ---------- PROCESSO (step numerati: ha senso, è una sequenza reale) ---------- */
.process{ display:grid; gap: var(--sp-5); counter-reset: step; }
@media (min-width: 880px){ .process{ grid-template-columns: repeat(4,1fr); } }
@media (min-width: 880px){ .process-3{ grid-template-columns: repeat(3,1fr); } }
.step{ position:relative; padding-top: var(--sp-8); }
.step::before{
  counter-increment: step; content: counter(step);
  position:absolute; top:0; left:0;
  width:52px; height:52px; border-radius:50%;
  background: var(--c-primary); color:#fff;
  font-family: var(--f-display); font-weight:800; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ font-size:1.1rem; margin-bottom:6px; }
.step p{ font-size:.95rem; }
.process-4 .step:not(:last-child)::after{
  content:""; position:absolute; top:26px; left:64px; right:-30px; height:2px;
  background: repeating-linear-gradient(90deg, var(--c-border) 0 8px, transparent 8px 14px);
}
@media (max-width: 880px){ .process-4 .step::after{ display:none; } }
.process-3 .step:not(:last-child)::after{
  content:""; position:absolute; top:26px; left:64px; right:-30px; height:2px;
  background: repeating-linear-gradient(90deg, var(--c-border) 0 8px, transparent 8px 14px);
}
@media (max-width: 880px){ .process-3 .step::after{ display:none; } }

/* ---------- VALORI / PERCHÉ SCEGLIERMI ---------- */
.value-row{ display:flex; gap: var(--sp-4); align-items:flex-start; padding: var(--sp-5) 0; border-bottom:1px solid var(--c-border); }
.value-row:last-child{ border-bottom:none; }
.value-row .icon-tile{ width:44px; height:44px; border-radius: var(--radius-s); background: var(--c-bg-soft); color: var(--c-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.value-row .icon-tile svg{ width:22px; height:22px; }
.value-row h3{ margin-bottom:4px; font-size:1.05rem; }
.value-row p{ font-size:.95rem; margin:0; }

/* ---------- TESTIMONIANZE ---------- */
.review-card{
  background: var(--c-white); border:1px solid var(--c-border); border-radius: var(--radius-m);
  padding: var(--sp-5); height:100%; display:flex; flex-direction:column; box-shadow: var(--shadow-card);
}
.stars{ display:flex; gap:3px; color: var(--c-accent-600); margin-bottom: var(--sp-3); }
.stars svg{ width:16px; height:16px; }
.review-card p.quote{ color: var(--c-text); font-size:.97rem; flex-grow:1; }
.review-card .reviewer{ display:flex; align-items:center; gap:10px; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top:1px solid var(--c-border); }
.reviewer .avatar{ width:38px; height:38px; border-radius:50%; background: var(--c-accent-soft); color:var(--c-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--f-display); flex-shrink:0; }
.reviewer strong{ display:block; font-size:.9rem; }
.reviewer span{ font-size:.78rem; color: var(--c-text-muted); }
.review-note{ font-size:.82rem; color: var(--c-text-muted); margin-top: var(--sp-6); text-align:center; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--c-border); }
.faq-item:first-child{ border-top:1px solid var(--c-border); }
.faq-q-heading{ margin:0; font-size:inherit; font-weight:inherit; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  background:none; border:none; text-align:left; padding: var(--sp-5) var(--sp-1);
  font-family: var(--f-display); font-weight:700; font-size:1.02rem; color: var(--c-primary);
}
.faq-q .chev{ width:20px; height:20px; flex-shrink:0; transition: transform .2s ease; color: var(--c-accent-600); }
.faq-item.open .faq-q .chev{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-a-inner{ padding: 0 var(--sp-1) var(--sp-5); font-size:.95rem; max-width: 760px; }

/* ---------- CTA BANNER ---------- */
.cta-banner{
  background: var(--c-primary); border-radius: var(--radius-l);
  padding: var(--sp-8) var(--sp-6); text-align:center; position:relative; overflow:hidden;
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color: var(--c-text-on-dark-muted); max-width:560px; margin:var(--sp-3) auto var(--sp-6); }
.cta-banner .eyebrow{ color: var(--c-accent); }
.cta-banner .eyebrow::before{ background: var(--c-accent); }
.cta-banner .cta-row{ justify-content:center; }
.cta-banner .btn-outline{ border-color: rgba(255,255,255,.45); color: var(--c-white); }
.cta-banner .btn-outline:hover{ background: rgba(255,255,255,.1); border-color: var(--c-white); }

/* ---------- FORM CONTATTI ---------- */
.form-field{ margin-bottom: var(--sp-4); }
.form-field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:6px; color: var(--c-text); }
.form-field input, .form-field textarea{
  width:100%; padding: 13px 16px; border-radius: var(--radius-s);
  border:1px solid var(--c-border); background: var(--c-white-soft); font-size:.96rem;
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-row{ display:grid; gap: var(--sp-4); }
@media (min-width:600px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:.8rem; color: var(--c-text-muted); margin-top: var(--sp-2); }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color: var(--c-text-muted); }
.checkbox-row input{ margin-top:3px; }

.contact-card{ background: var(--c-bg-soft); border-radius: var(--radius-m); padding: var(--sp-6); }
.contact-line{ display:flex; align-items:flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; }
.contact-line .icon-tile{ width:40px; height:40px; background:#fff; border-radius: var(--radius-s); color:var(--c-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow: var(--shadow-card); }
.contact-line .icon-tile svg{ width:20px; height:20px; }
.contact-line strong{ display:block; font-size:.92rem; }
.contact-line a, .contact-line span{ font-size:.9rem; color: var(--c-text-muted); }
.map-frame{ position:relative; border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--c-border); aspect-ratio: 16/9; }
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- BLOG ---------- */
.post-card{ background:#fff; border:1px solid var(--c-border); border-radius: var(--radius-m); overflow:hidden; box-shadow: var(--shadow-card); display:flex; flex-direction:column; height:100%; }
.post-thumb{ aspect-ratio: 16/9; background: linear-gradient(135deg, var(--c-accent-soft), var(--c-bg-soft)); display:flex; align-items:center; justify-content:center; color: var(--c-primary); }
.post-thumb svg{ width:48px; height:48px; opacity:.6; }
.post-card .post-body{ padding: var(--sp-5); display:flex; flex-direction:column; flex-grow:1; }
.post-tag{ font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--c-accent-text); font-weight:700; }
.post-card h3{ margin: var(--sp-2) 0; }
.post-meta{ font-size:.8rem; color: var(--c-text-muted); margin-top:auto; padding-top: var(--sp-4); }
.article-body{ max-width: 700px; margin: 0 auto; }
.article-body h2{ margin-top: var(--sp-7); margin-bottom: var(--sp-3); font-size:1.5rem; }
.article-body h3{ margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.article-body p{ margin-bottom: var(--sp-4); color: var(--c-text); }
.article-body ul, .tick-list{ margin-bottom: var(--sp-5); display:flex; flex-direction:column; gap:12px; }
.article-body ul li, .tick-list li{ padding-left: 28px; position:relative; color: var(--c-text); font-size:.97rem; }
.article-body ul li::before, .tick-list li::before{ content:""; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background: var(--c-accent-soft); border:2px solid var(--c-accent-600); }
.two-col-lists{ display:grid; gap: var(--sp-6); }
@media (min-width: 760px){ .two-col-lists{ grid-template-columns: 1fr 1fr; } }
.article-meta-bar{ display:flex; gap: var(--sp-4); align-items:center; flex-wrap:wrap; color: var(--c-text-on-dark-muted); font-size:.85rem; margin-top: var(--sp-4); }
.callout{ background: var(--c-bg-soft); border-left:4px solid var(--c-accent-600); border-radius: var(--radius-s); padding: var(--sp-5); margin: var(--sp-6) 0; font-size:.95rem; }

/* ---------- BADGE / CHIP ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; background: var(--c-accent-soft); color: var(--c-primary); font-size:.8rem; font-weight:700; padding:6px 14px; border-radius:999px; }

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:58px; height:58px; border-radius:50%;
  background:#1E8E5A; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -10px rgba(11,39,28,.5);
  transition: transform .15s ease;
}
.wa-float:hover{ transform: scale(1.08); }
@media (max-width: 480px){
  .wa-float{ width:48px; height:48px; right:14px; bottom:14px; }
  .wa-float svg{ width:24px; height:24px; }
}
.wa-float svg{ width:28px; height:28px; }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--c-primary-700); color: var(--c-text-on-dark-muted); padding-block: var(--sp-8) var(--sp-6); }
.footer-grid{ display:grid; gap: var(--sp-6); }
@media (min-width:760px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h3{ color:#fff; font-size:.92rem; margin-bottom: var(--sp-4); font-family: var(--f-display); }
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ font-size:.9rem; }
.footer-grid a:hover{ color:#fff; }
.footer-brand p{ color: var(--c-text-on-dark-muted); font-size:.9rem; max-width:300px; margin-top: var(--sp-3); }
.footer-bottom{ margin-top: var(--sp-8); padding-top: var(--sp-5); border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap: var(--sp-3); justify-content:space-between; font-size:.8rem; }
.social-row{ display:flex; gap:10px; margin-top: var(--sp-4); }
.social-row a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background: var(--c-accent-600); color: var(--c-primary-700); }
.social-row svg{ width:17px; height:17px; }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- UTILS ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mx-auto{ margin-inline:auto; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 16px; z-index:100; }
.skip-link:focus{ left: 10px; top:10px; }

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background: var(--c-primary-700); color:#fff;
  padding: var(--sp-5) var(--sp-5);
  transform: translateY(110%); transition: transform .3s ease;
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,.3);
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner-inner{
  max-width: 1100px; margin-inline:auto;
  display:flex; gap: var(--sp-5); align-items:center; flex-wrap:wrap; justify-content:space-between;
}
.cookie-banner p{ color: var(--c-text-on-dark-muted); font-size:.88rem; max-width:640px; margin:0; }
.cookie-banner p a{ color:#fff; font-weight:700; text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap: var(--sp-3); flex-wrap:wrap; }
.cookie-banner .btn{ padding: 10px 18px; font-size:.88rem; }

/* ---------- PLACEHOLDER MAPPA (in attesa di consenso) ---------- */
.map-consent-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--sp-3); text-align:center; padding: var(--sp-5); background: var(--c-bg-soft);
}
.map-consent-placeholder p{ font-size:.88rem; color: var(--c-text-muted); max-width:280px; margin:0; }