:root{
      --brand-red:#D73438; --brand-red-dark:#A0252E; --offwhite:#F3F3F0; --black:#0c0c0c; --white:#fff;
      --bg:var(--offwhite); --panel:#fff; --panel-weak:#f7f7f7; --text:#1a1a1a; --muted:#4a4a4a;
      --accent:var(--brand-red); --accent-2:var(--brand-red-dark); --line:#d6d6d0; --radius:16px; --maxw:1200px; --nav-offset: 88px;
    }
      

  
    *{box-sizing:border-box}
    html{scroll-behavior:smooth; scroll-padding-top: var(--nav-offset);}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 85% -10%, rgba(215,52,56,.08), transparent 60%),
        radial-gradient(800px 600px at -20% -10%, rgba(160,37,46,.06), transparent 60%),
        var(--bg);
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:110%;display:block}
    .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

    /* Header position:sticky;top:0;*/
    header{border-bottom:2px solid lightcoral;background:var(--accent)}
    header.mainNav {z-index:50;}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px; position:relative;top:-10px;}
    .logo-img{height:66px;width:auto}
    nav ul{list-style:none;display:flex;gap:18px;padding:0;margin:0}
    nav a{padding:10px 12px;border-radius:10px;color:var(--white);font-weight:600;transition:.2s}
    nav a:hover{color:var(--accent);background:var(--white)}
    nav a.active{background:var(--white);color:var(--accent)}

    /* CTA */
    .cta{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:12px;font-weight:800;border:2px solid transparent;transition:.2s;box-shadow:none}
    .cta .mdi{font-size:18px}
    .cta:hover{transform:translateY(-1px)}
    .cta--primary{background:var(--accent);color:var(--white);border-color:color-mix(in srgb,var(--accent) 70%,black)}
    .cta--primary:hover{background:var(--accent-2)}
    .cta--secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
    .cta--secondary:hover{background:var(--accent-2);color:var(--white);border-color:var(--accent-2)}
    .cta--light{background:#fff;color:var(--accent);border-color:#fff}
    .cta--light:hover{background:#f3f3f0;color:var(--accent-2);border-color:#f3f3f0}
    .cta-row{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:12px;align-items:center}

    /* Hero */
    .hero{padding:72px 0 40px;background:var(--panel)}
    .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
    h1{font-size:clamp(32px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em;margin:8px 0 16px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
    .lead{font-size:clamp(16px,1.4vw,20px);color:var(--muted);max-width:56ch}
    .hero-card{background:var(--panel-weak);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
    .hero-media{aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#f1f1f1;position:relative}
      
   /* === Varianti layout ultime righe Services === */
/* base: .card fa span 4 => 3 per riga su desktop */

    /* quando rimane 1 card: 8 colonne per riempire meglio */
    .grid .card.card--highlight{
      grid-column: span 8;
      background:#fff5f6;
      border-color:#f0c9cb;
    }
    .grid .card.card--highlight h3{ font-size:20px }
    .grid .card.card--highlight .icon{ background:#fff; border-color:#f0c9cb }

    /* quando rimangono 2 card: 6 + 6 colonne */
    .grid .card.card--half{
      grid-column: span 6;
    }

    @media (max-width:1024px){
      .grid .card.card--highlight,
      .grid .card.card--half{
        grid-column: span 12; /* su tablet/mobile a tutta larghezza */
      }
    }


      
    /* === Text animation panel (hero-media) === */
    .hero-media{
      aspect-ratio: 16/10; border-radius: 14px; overflow:hidden; border:1px solid var(--line);
      position:relative; background:
        radial-gradient(1200px 600px at 80% -20%, rgba(215,52,56,.18), transparent 60%),
        radial-gradient(900px 500px at -10% 120%, rgba(160,37,46,.12), transparent 60%),
        #0f1317;
    }

    /* subtle grid */
    .hero-media::before{
      content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
      background-image:
        linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 22px 22px;
      mask: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.9), transparent);
    }

    .tw{
      position:absolute; inset:0; display:flex; flex-direction:column;
      justify-content:center; align-items:center; text-align:center; padding:24px;
      color:#fff;
    }
    .tw-eyebrow{
      display:inline-flex; align-items:center; gap:8px;
      font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:12px;
      color: color-mix(in srgb, white 88%, var(--accent));
      margin-bottom:10px;
    }
    .tw-line{
      font-size: clamp(20px, 2.6vw, 30px);
      font-weight:800; letter-spacing:-.02em; line-height:1.2;
      background: linear-gradient(180deg, #fff, #f6f6f6);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      text-shadow: 0 1px 0 rgba(0,0,0,.25);
      min-height: 1.2em;
    }
    .tw-sub{
      margin-top:10px; font-size:14px; color: color-mix(in srgb, white 80%, var(--accent));
    }

    /* caret */
    .cursor{ display:inline-block; margin-left:2px; animation: blink .9s steps(1,end) infinite; }
    @keyframes blink { 50% { opacity: 0 } }

    /* respect reduced motion: nessuna digitazione, solo cambio testo */
    @media (prefers-reduced-motion: reduce){
      .cursor{ display:none }
    }


    /* Sections */
    section{padding:64px 0;border-top:1px solid var(--line);background:transparent}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
    .section-head h2{margin:0;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.02em}
    .section-head p{margin:0;color:var(--muted);max-width:70ch}

    /* Installazioni (rosso brand) */
    .section-dark{background:var(--accent);color:var(--offwhite);border-top:1px solid color-mix(in srgb,var(--accent) 80%,black)}
    .section-dark .section-head p{color:color-mix(in srgb,white 92%,var(--accent))}
    .section-dark .cta{background:#fff;color:var(--accent);border-color:#fff}
    .section-dark .cta:hover{background:#f3f3f0;color:var(--accent-2);border-color:#f3f3f0}

    /* Carousel 3/2/1 */
    .carousel{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#f2f2f2;padding:16px}
    .carousel-viewport{overflow:hidden}
    .carousel-track{display:flex;gap:16px;transition:transform .5s ease}
    .slide{flex:0 0 calc(33.333% - 10.666px);min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
    .slide img{width:100%;height:400px;object-fit:cover;background:#eee}
    .slide .caption{padding:10px 12px;font-weight:600;display:flex;align-items:center;justify-content:space-between}
    
    .slide .caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.caption-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.caption-ente {
  font-size: 12px;
  font-weight: 500;
  color: #e5e5e5; /* grigio chiaro leggibile sul fondo scuro */
  opacity: 0.9;
}

    .carousel-controls{display:flex;gap:8px;justify-content:space-between;margin-top:12px}
    .carousel-btn{appearance:none;border:1px solid var(--line);background:#fff;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;cursor:pointer}
    .dots{display:flex;gap:8px;align-items:center}
    .dot{width:9px;height:9px;border-radius:99px;background:#d0d0ce;border:1px solid var(--line);cursor:pointer}
    .dot[aria-current="true"]{background:var(--accent)}
      
    /* High-contrast captions in carousel */
    .slide{ position: relative; overflow: hidden; }
    .slide::after{
      content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
      background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0));
      pointer-events:none;
    }
    .slide .caption{
      position:absolute; left:8px; right:8px; bottom:8px;
      padding:10px 12px; border-radius:12px;
      background: rgba(0,0,0,.72);
      color:#fff; border:1px solid rgba(255,255,255,.15);
      font-weight:700; line-height:1.35; text-shadow:0 1px 1px rgba(0,0,0,.35);
    }
    .section-dark .slide .caption{ background: rgba(0,0,0,.78); }
    .slide .caption .mdi{ color:#fff; opacity:.9; }

    /* Link sempre leggibile sopra la caption */
    .slide a{ color:inherit; }

    /* Accessibilità focus */
    .carousel-btn:focus-visible,
    .dot:focus-visible,
    .slide a:focus-visible{
      outline: 3px solid #fff; outline-offset: 2px;
    }


    /* Services */
    .grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr);background:#f8f8f8;padding:40px;border-radius:12px}
    .card{grid-column:span 4;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;color:var(--text)}
    .card h3{margin:10px 0 6px;font-size:18px}
    .card p{color:var(--muted);margin:0}
    .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff5f5;border:1px solid #f0c9cb}
    .icon .mdi{font-size:22px;color:var(--accent)}

    /* Team */
    .team-wrap{background:#fafafa;padding:40px;border-radius:12px}
    .team{display:grid;gap:20px;grid-template-columns:repeat(12,1fr)}
    .person{grid-column:span 4;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:center;color:var(--text)}
    .avatar{width:64px;height:64px;min-width: 64px; border-radius:50%;overflow:hidden;border:1px solid var(--line)}
    .role{color:var(--muted);font-size:14px}
    .mail{font-size:10px;}

    /* CTA + Footer */
    .cta-panel{background:var(--brand-red);color:var(--white);border:1px solid color-mix(in srgb,var(--accent) 70%,black);border-radius:18px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
    .cta-panel p{color:#fffefc}
    footer{padding:0px 0 64px;color:var(--muted)}
    .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:52px}
      
    /* Partner: audioguide.it */
    .partner-wrap{ background:#f8f8f8; border:1px solid var(--line); border-radius:18px; padding:28px; }
    .partner{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:24px; }
    .partner h2{ margin:0 0 6px; font-size: clamp(22px, 2.6vw, 28px); letter-spacing:-.01em; }
    .partner p{ margin:0; color:var(--muted); max-width: 75ch; }
    .partner-logo{ display:flex; align-items:center; gap:14px; }
    .partner-logo img{ height:44px; width:auto; filter: none; border-radius:8px; background:#fff; border:1px solid var(--line); padding:6px; }
    @media (max-width: 820px){
      .partner{ grid-template-columns: 1fr; align-items: start; }
      .partner-logo{ order:-1 }
        #inquadro-info {display: block;font-size: x-small}
    }


    /* Responsive */
    @media (max-width:1024px){
      .hero-grid{grid-template-columns:1fr}
      .card{grid-column:span 6}
      .person{grid-column:span 6}
      .slide{flex-basis:calc(50% - 8px)}
    }
    @media (max-width:640px){
      nav ul{display:none}
      .card{grid-column:span 12}
      .person{grid-column:span 12}
      .slide{flex-basis:100%}
      .hero{padding-top:124px}
    }
      
/* ==== CAROSELLO DETTAGLIO (viewer) – mobile safe ==== */
.viewer{ width:100%; max-width:100%; }
.viewer .media{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;               /* niente larghezze oltre viewport */
  aspect-ratio:16/9;
  object-fit:cover;
}

/* su mobile: niente aspect-ratio rigido, evita overflow e letterbox */
@media (max-width:640px){
  .viewer{ margin-inline:-12px; border-radius:12px; } /* full-bleed soft */
  .viewer .media{
    aspect-ratio:auto;
    height:auto;
    max-height:62vh;
    object-fit:contain;      /* l'immagine si contiene nella viewport */
  }
  /* frecce dentro il box, non allargano la layout box */
  .nav-arrow{ inset-inline:auto 10px; top:auto; bottom:10px; }
  .nav-arrow.left{ left:10px; right:auto; }
  .nav-arrow.right{ right:10px; left:auto; }
}

/* la strip di thumbs non deve creare overflow verticale/orizzontale */
.thumbs{
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  margin-inline:-12px; padding-inline:12px;
}

/* ==== CAROSELLO HOME ==== */
/* l’immagine non deve mai superare la viewport */
.slide img{
  width:100%;
  max-width:100%;
  height: clamp(220px, 48vw, 400px);   /* altezza elastica */
  object-fit:cover;
}

/* contenitori: niente clip che taglia immagini quando "sanguinano" ai bordi */
.carousel,
.carousel-viewport{ overflow:hidden; }

/* difese extra: evita qualsiasi overflow orizzontale casuale */
html, body{ max-width:100%; overflow-x:hidden; }

/* === Social (stile minimal) === */
#social{ padding:32px 0; }
.social-wrap{
  display:flex; gap:40px; flex-wrap:wrap;
  align-items:center; justify-content:center;
}

/* Bottoni “nudi”: niente bordi, niente box-shadow */
.social-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; background:transparent; border:none; padding:6px 2px;
  color: var(--muted);
  outline: none;
  transform: translateZ(0);
}

/* Icone grandi e pulite */
.social-btn .mdi{
  font-size:56px; line-height:1;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

/* Etichetta sobria */
.social-btn .label{
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color: color-mix(in srgb, var(--text) 60%, var(--muted));
  transition: color .18s ease, opacity .18s ease;
}

/* Hover/focus: solo colore + leggero scale */
.social-btn:hover .mdi,
.social-btn:focus-visible .mdi{
  transform: scale(1.04);
  opacity: .95;
}
.social-btn:hover .label,
.social-btn:focus-visible .label{
  color: var(--text);
}

/* Focus ring minimale per accessibilità */
.social-btn:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
}

/* Colori brand SOLO all'interazione (default grigio elegante) */
.social-ln:hover, .social-ln:focus-visible{ color:#0A66C2; }   /* LinkedIn */
.social-fb:hover, .social-fb:focus-visible{ color:#1877F2; }   /* Facebook */
.social-ig:hover, .social-ig:focus-visible{ color:#E1306C; }   /* Instagram */

/* Mobile: icone un filo più piccole, spazi leggermente ridotti */
@media (max-width:640px){
  .social-wrap{ gap:22px; }
  .social-btn .mdi{ font-size:48px; }
}
.social-ln{ color:#0A66C2; }
.social-fb{ color:#1877F2; }
.social-ig{ color:#E1306C; }



/* === Sezione Esempi Audio (AI) === */
#audio-ai{ padding:64px 0; border-top:1px solid var(--line); background:transparent; }

.audio-filters{
  display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; margin:0 0 14px;
}
.filter-group{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.fg-label{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.filter-chip{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--text);
  padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer; transition:.18s;
}
.filter-chip:hover{ transform: translateY(-1px); }
.filter-chip.is-active{ background:var(--accent); color:#fff; border-color:color-mix(in srgb,var(--accent) 70%, black); }

.audio-grid{ background:#f8f8f8; border-radius:12px; }
.audio-card{ display:flex; flex-direction:column; gap:10px; }
.audio-head{ display:flex; flex-direction:column; gap:6px; }
.audio-title{ margin:0; font-size:18px; display:flex; align-items:center; gap:8px; }
.audio-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--line); background:#fff5f5; color:var(--accent);
}
.audio-desc{ margin:0; color:var(--muted); }
.audio-player{
  display:flex; flex-direction:column; gap:8px;
  background:var(--panel-weak); border:1px solid var(--line); border-radius:12px; padding:10px;
}
.audio-player audio{ width:100%; height:40px; }

/* micro-flow del framework */
.iq-mini-flow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin: -6px 0 60px; padding:0; list-style:none;
  justify-content: flex-end;
}
.iq-mini-flow li{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 10px;
}
.iq-mini-flow .mdi{ font-size:16px; color:var(--accent); }


/* === WanderMe section (layout aggiornato) === */
#wanderme{ padding:64px 0; border-top:1px solid var(--line); background:transparent; }
.wm-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr; /* video sx / testo dx */
  grid-auto-rows:auto;
  gap:24px;
  align-items:center;
}

/* Titolo full-width */
.wm-head{
  grid-column:1 / -1;
}
.wm-head h2{
  margin:0 0 6px;
  width:100%; /* richiesto */
  font-size:clamp(24px,3.2vw,36px);
  letter-spacing:-.01em;
}
.wm-head .wm-sub{
  margin:0;
  color:var(--muted);
  max-width:80ch;
}

/* Media + side */
.wm-media video{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:#000;
  aspect-ratio:16/9;
  object-fit:cover;
}
.wm-side .wm-lead{ margin:0 0 12px; color:var(--muted); max-width:62ch; }
.wm-points{ margin:10px 0 14px; padding:0; list-style:none; display:grid; gap:8px; }
.wm-points li{ display:flex; align-items:center; gap:10px; }
.wm-points .mdi{ font-size:18px; color:var(--accent); }

/* Configuratore full-width sotto */
.wm-play{
  grid-column:1 / -1;     /* 100% width sotto le due colonne */
  margin-top:4px;
  background:var(--panel-weak);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.wm-groups{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  align-items:center;
  margin-bottom:10px;
}
/* Il gruppo 'Scenario' occupa l'intera riga */
.wm-groups .filter-group[data-group="scenario"]{
  flex: 1 1 100%;
}
.wm-preview{
  border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.wm-pretitle{
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:6px;
}
.wm-text{ font-size:14px; }
.wm-preview .mdi{ color:var(--accent); }

/* Responsive */
@media (max-width:1024px){
  .wm-grid{ grid-template-columns:1fr; }
}

header.wm-head {
    background: transparent;
    border-bottom: none;
}

/* === InQuadro Vision (senza demo) === */
#inq-vision{ padding:64px 0; border-top:1px solid var(--line); background:transparent; }

.iv-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr; /* testo sx / immagine dx */
  gap:24px;
  align-items:center;
  grid-auto-rows:auto;
}

/* Titolo full-width */
.iv-head{
  grid-column:1 / -1;
}
.iv-head h2{
  margin:0 0 6px;
  width:100%; /* richiesto: titolo 100% */
  font-size:clamp(24px,3.2vw,36px);
  letter-spacing:-.01em;
}
.iv-head .iv-sub{
  margin:0;
  color:var(--muted);
  max-width:80ch;
}

/* Testo */
.iv-lead{ margin:0 0 12px; color:var(--muted); max-width:62ch; }
.iv-points{ margin:10px 0 14px; padding:0; list-style:none; display:grid; gap:8px; }
.iv-points li{ display:flex; align-items:center; gap:10px; }
.iv-points .mdi{ font-size:18px; color:var(--accent); }

/* Immagine */
.iv-media{ display:flex; align-items:center; justify-content:center; }
.iv-illustration{
  width:100%;
  max-width:360px;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:10px; /* cornice bianca */
}

/* Responsive: stack su mobile */
@media (max-width:1024px){
  .iv-grid{ grid-template-columns:1fr; }
  /* ordine naturale: titolo -> testo -> immagine uno sotto l’altro */
}
header.iv-head {
    background: transparent;
    border-bottom: none;
}

/* Mobile: immagine sopra, testo sotto */
@media (max-width:1024px){
  #inq-vision .iv-grid{ grid-template-columns: 1fr; }

  /* Ordine esplicito su una colonna */
  #inq-vision .iv-head  { grid-row: 1; } /* titolo sempre per primo */
  #inq-vision .iv-media { grid-row: 2; } /* immagine */
  #inq-vision .iv-side  { grid-row: 3; } /* testo */
}


/* === DIDA: testo centrato, icone consistenti, box QR/dida rifiniti === */

/* 1) Testo sotto il titolo: full-width ma centrato e leggibile */
#dida .dida-side{
  /* max-width: 72ch;            blocco più equilibrato */
  margin-inline: auto;       /* centrato */
  text-align: left;          /* testo allineato a sx dentro il blocco */
}

/* === DIDA — heading più grande, layout testo+CTA, media allineati === */

/* Titolo: stesso impatto delle altre sezioni “forti” */
#dida .dida-head h2{
  font-size: clamp(26px, 3.8vw, 42px);  /* ↑ rispetto a prima */
}

/* Colonna testo: 2 colonne interne → copy a sx, CTA a dx */
#dida .dida-side{
  display: grid;
  /* grid-template-columns: 1fr auto;   testo espanso | bottoni a destra */
  gap: 16px 20px;
  align-items: start;
}

/* Testo: non limitare più a 72ch, lascia usare tutta la view disponibile */
#dida .dida-copy{ min-width: 0; }

/* Feature list: piena larghezza, griglia responsive */
#dida .feature-list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 14px;
}
#dida .feature-item{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
}
#dida .feature-item .icon{
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background:#fff5f5; border:1px solid #f0c9cb;
}
#dida .feature-item .icon .mdi{ font-size:22px; color:var(--accent); }
#dida .feature-item .f-body{ color:var(--muted); }

/* CTA: allineate orizzontalmente a destra */
#dida .dida-cta{ display: flex; align-items: start; justify-content: center; padding: 60px;}
#dida .dida-cta .cta-row{ justify-content: flex-end; gap: 12px; }

/* Riga media: QR a sx, dida a dx; centrati verticalmente */
#dida .dida-media{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;   /* sx / dx */
  grid-template-areas: "qr card";
  gap: 16px;
  align-items: center;                  /* centra verticalmente i due box */
}

/* Box coerenti */
#dida .dida-qr,
#dida .dida-card{
  background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* QR box: centrato e “a misura” dell’immagine */
#dida .dida-qr{
  grid-area: qr;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px;
  width:max-content;           /* fit al contenuto */
  max-width:100%;
  margin-inline:auto;          /* centrato nella colonna sx */
}
#dida .dida-qr-link{ display:block; }
#dida .dida-qr img{
  width: clamp(180px, 28vw, 260px);
  height:auto; display:block;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
#dida .dida-qr figcaption{
  text-align:center; padding:8px 10px; font-size:12px; color:var(--muted);
  border-top:1px solid var(--line); width:100%;
}

/* Didascalia: leggermente più piccola visivamente */
#dida .dida-card{
  grid-area: card;
  display:flex; flex-direction:column; align-items:center;
  padding-top:6px;
}
#dida .dida-card img{
  width: 92%;                 /* <— immagine un filo più piccola */
  height:auto;
  display:block;
  border-radius:10px;
  margin: 4px auto 0;
}
#dida .dida-card figcaption{
  align-self: stretch;
  padding:8px 10px; font-size:12px; color:var(--muted);
  border-top:1px solid var(--line);
}

/* Stack su mobile: testo sopra CTA, poi QR → dida */
@media (max-width:1024px){
  #dida .dida-side{
    grid-template-columns: 1fr;
  }
  #dida .dida-cta{ justify-content: flex-start; }
  #dida .dida-media{
    grid-template-columns: 1fr;
    grid-template-areas:
      "qr"
      "card";
    justify-items: center;
  }
  #dida .dida-card{ width:100%; }
}

header.dida-head {
    background: transparent;
    border-bottom: none;
}

/* ===== FIX HAMBURGER: default nascosto (niente doppio display) ===== */
.hamburger{
  display: none;                  /* visibile solo su mobile */
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  width: 42px; height: 42px; border-radius: 12px;
  place-items: center;            /* non attivo finché è hidden */
  cursor: pointer;
}
.hamburger .mdi{ font-size: 24px; }

/* ===== MOBILE HEADER LAYOUT ===== */
@media (max-width:640px){
  header .nav{ position: relative; justify-content: center; } /* centro la barra */
  header .brand{ margin-inline: auto; }                       /* logo centrato */
  header .cta--light{ display: none; }                        /* nascondi CTA */
  nav ul{ display: none; }                                    /* già presente, qui per chiarezza */

  .hamburger{
    display: grid;                 /* ora visibile */
    position: absolute;            /* pin a destra */
    right: 14px;
    top: 50%; transform: translateY(-50%);
    z-index: 2;
  }
  .logo-img{ height: 46px; }       /* un filo più compatto */
}

/* === Mobile Nav – header brand + close semplice === */
.mobile-nav{ display:none; }
.mobile-nav.is-open{ display:block; position:fixed; inset:0; z-index:100; }

/* backdrop parte sotto l'header fisso */
.mobile-nav.is-open::before{
  content:""; position:absolute; left:0; right:0;
  top: var(--header-h, 0px); bottom:0;
  background:rgba(0,0,0,.44); backdrop-filter:saturate(1.1) blur(2px);
}

/* sheet fixed, agganciato sotto l'header */
.mobile-nav__sheet{
  position:fixed; left:0; right:0;
  top: var(--header-h, 0px);
  background:#fff; border-bottom:1px solid var(--line);
  border-radius:0 0 16px 16px;
  transform: translateY(-14px);
  transition: transform .22s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  padding:14px 16px 16px;
  max-height: min(78vh, 640px); overflow:auto;
}
.mobile-nav.is-open .mobile-nav__sheet{ transform: translateY(0); }

/* head: brand sx + close dx */
.mobile-nav__head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.mnav-brand img{ display:block; height:28px; width:auto; }
.mnav-close{
  appearance:none; border:none; background:transparent; cursor:pointer;
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
}
.mnav-close .mdi{ font-size:24px; color: var(--text); opacity:.9; }
.mnav-close:hover .mdi, .mnav-close:focus-visible .mdi{ color: var(--accent); }

/* voci sempre leggibili */
.mobile-nav .mnav-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mobile-nav .mnav-list a{
  display:block; padding:12px 12px;
  color: var(--text) !important;
  background:#fff; border:1px solid var(--line); border-radius:12px; font-weight:700;
}
.mobile-nav .mnav-list a:hover,
.mobile-nav .mnav-list a:focus-visible{
  background: var(--panel-weak);
  color: var(--accent) !important;
}

/* niente CTA nello sheet (come richiesto) */
.mobile-nav .mnav-cta{ display:none; }

/* header mobile: logo centrato, hamburger a destra */
@media (max-width:640px){
      
  header .nav{ position:relative; justify-content:center; }
  header .brand{ margin-inline:auto; }
  header .cta--light{ display:none; }
  nav ul{ display:none; }
  .hamburger{
    display:grid; position:absolute; right:14px; top:50%; transform:translateY(-50%);
    border:1px solid var(--line); background:#fff; color:var(--accent);
    width:42px; height:42px; border-radius:12px; place-items:center; cursor:pointer;
  }
  .hamburger .mdi{ font-size:24px; }
}

/* su desktop lo sheet è sempre spento */
@media (min-width:641px){
  .mobile-nav{ display:none !important; }
     
}

@media (max-width:768px){
    header.mainNav {
        position: fixed;
        width: 100%;
    }   
}

/* === Pulsante "Torna su" === */
.to-top{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 140; /* sopra ai contenuti, sotto ad eventuali modali */
  width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(10,10,10,.72);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  backdrop-filter: saturate(1.2) blur(4px);
  cursor: pointer;

  /* nascosto di default */
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.to-top .mdi{ font-size: 22px; line-height: 1; }
.to-top:hover{ background: rgba(10,10,10,.84); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.to-top:focus-visible{ outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }

.to-top.is-visible{
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* Mobile: un filo più grande per tappability */
@media (max-width:640px){
  .to-top{ right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; }
  .to-top .mdi{ font-size: 24px; }
}

/* Rispetta ridotta animazione */
@media (prefers-reduced-motion: reduce){
  .to-top{ transition: none; }
}

@media screen and (max-width: 768px) {
    #dida .dida-cta .cta-row {
        justify-content: center;
    }
}

.cta-panel .cta[href^="mailto:"]{ overflow-wrap:anywhere; word-break:break-word; }