/* MOBILE — seguito di 16-mobile-2.css */
@media (max-width:900px){
  .lv-titolo,
  .lv-colonne > div:nth-child(1) .lv-titolo,
  .lv-colonne > div:nth-child(2) .lv-titolo{ left:0; }
  .lv-hero .scroll-cue{ left:auto; bottom:auto; width:52px; border:2px solid white; }
  .lv-hero .scroll-cue .cue-disco{ fill:rgba(217,217,217,.25); }
  .lv-hero .scroll-cue .cue-punta{ fill:#fff; }
  .lv-hero p{ font-size:clamp(15px,4vw,20px); line-height:1.4; margin-top:18px; }
  /* Il disco resta di 34px come a tavola, ma l'area toccabile arriva a 44
     senza spostare il logo: il riempimento e' compensato dal margine. */
  .header-indietro{
    width:34px; margin-right:7px; margin-left:-5px;
    box-sizing:content-box; padding:5px;
  }
  .sec-lv .wrap{ display:flex; flex-direction:column; }
  .lv-titolo{ font-size:24px; }   /* 24: testo grande, il rosso basta a 3:1 */
  .lv-vantaggi{ width:auto; margin:22px 0 0; gap:12px; }
  .lv-vantaggi li{ grid-template-columns:26px minmax(0,1fr); gap:10px; font-size:15px; align-items:start; }
  .lv-vantaggi img{ width:26px; height:28px; margin-top:0; }

  /* Su telefono le tre foto scorrono col dito come la storia, agganciate al centro. */
  .lv-striscia, .lv-striscia.is-ready{
    height:auto; margin-top:30px; display:flex; gap:12px; padding-inline:11%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; touch-action:auto; cursor:auto;
  }
  .lv-striscia::-webkit-scrollbar{ display:none; }
  .lv-striscia img,
  .lv-striscia .sx, .lv-striscia .mid, .lv-striscia .dx, .lv-striscia .fuori{
    position:static; left:auto; top:auto; flex:0 0 100%; width:100%; height:auto;
    aspect-ratio:3 / 2; border-radius:18px; box-shadow:none; clip-path:none;
    scroll-snap-align:center; scroll-snap-stop:always;
  }

  .lv-colonne{ display:contents; }
  .lv-colonne > div{ margin-top:30px; }
  .lv-colonne > div:nth-child(2){ order:2; }
  .lv-colonne ol{ margin-top:20px; padding-left:22px; font-size:14px; line-height:1.5; }
  .lv-finitura{ order:1; align-self:center; width:65%; max-width:280px; height:auto; aspect-ratio:3 / 2; margin:24px 0 0; }

  /* ---- REALIZZAZIONI ---- */
  .rz-titolo{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
  .sec-rz .wrap{ padding-inline:12px; }
  .rz-galleria{
    position:static; height:auto; margin:40px 0 0;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px;
    grid-template-rows:clamp(112px,37vw,260px) repeat(4,clamp(96px,31vw,220px));
    grid-template-areas:"a b" "c d" "c e" "f g" "h g";
  }
  .rz-item{
    position:static !important;
    left:auto !important; top:auto !important;
    width:auto !important; height:100% !important; min-width:0;
  }
  .rz-item[data-i="0"]{ grid-area:a; }
  .rz-item[data-i="1"]{ grid-area:b; }
  .rz-item[data-i="2"]{ grid-area:c; }
  .rz-item[data-i="3"]{ grid-area:d; }
  .rz-item[data-i="4"]{ grid-area:e; }
  .rz-item[data-i="5"]{ grid-area:f; }
  .rz-item[data-i="6"]{ grid-area:g; }
  .rz-item[data-i="7"]{ grid-area:h; }
  .rz-item .car-track, .rz-item .car-slide{ border-radius:10px; }
  .rz-item .car-nav{ width:36px; padding:8px; }
  .rz-item .car-prev{ left:0; }
  .rz-item .car-next{ right:0; }
  /* Pallini delle gallerie come quelli del banner: 7px a 6px di passo.
     Il bordo trasparente da 3px allarga un po' l'area toccabile. */
  .rz-item .car-dots{ bottom:8px; gap:0; }
  .rz-item .car-dots button{ width:7px; height:7px; border-width:3px; }
  .rz-banner{ width:100%; margin:0; aspect-ratio:366 / 276; }
  .rz-banner .car-nav{ width:44px; }
  .rz-banner .is-slideshow .car-dots{ left:50%; translate:-50% 0; gap:6px; }
  .rz-banner .is-slideshow .car-dots span{ width:7px; height:7px; }

  /* ---- CONTATTI ---- */
  .sec-ct{ min-height:0; }
  .sec-ct .wrap{ padding-inline:22px; }
  .ct-mappa{ width:100%; max-width:298px; height:auto; aspect-ratio:298 / 383; margin:0 auto; }
  .ct-griglia{
    grid-template-columns:minmax(0,1fr); gap:28px;
    padding-block:26px 40px;
  }
  .ct-titolo, .ct-form .ct-form-titolo{ font-size:30px; text-align:center; margin-bottom:20px; }
  .ct-dati{ font-size:16px; overflow-wrap:anywhere; }
  .ct-dati p{ margin-bottom:20px; }
  .ct-dati p:last-child{ margin-bottom:0; }
  .ct-tab{ grid-template-columns:minmax(0,1fr); row-gap:0; }
  .ct-tab dd{ margin-bottom:.5em; }
  .ct-tab .sep{ margin-top:12px; }
  .ct-tab .sep + dd{ margin-top:0; }
}

/* Intestazione condivisa: stesso asse e stessa misura del logo in ogni pagina. */
.site-header, .site-header--inner, .ft-home .site-header{
  height:clamp(64px, calc(108 * var(--px)), 108px);
  background:var(--nav-bg); border:1px solid var(--nav-border);
}
.ft-home .site-header::before{ display:none; }
@media (min-width:901px){
  .ft-home .site-header .header-logo{ display:none; }
  .ft-home .site-header .header-inner{ justify-content:flex-end; }
}
.site-header .header-inner{
  width:100%; max-width:calc(1512 * var(--px)); margin-inline:auto;
  justify-content:space-between;
  padding-inline:clamp(16px, calc(71 * var(--px)), 71px)
                 clamp(16px, calc(65 * var(--px)), 65px);
}
.header-logo, .header-logo--mobile{
  display:block; width:clamp(92px, calc(137 * var(--px)), 137px);
}
@media (max-width:900px){
  .site-header, .site-header--inner, .ft-home .site-header{ height:64px; }
  .site-header .header-inner{ padding-inline:12px; }
  .header-logo{ width:110px; }
}
@media (max-width:900px){ .card-perche .card-body p{ left:0; } }

/* A 320px conserviamo le due colonne senza tagliare le descrizioni. */
@media (max-width:360px){
  .sv-carta i{ top:8px; left:8px; height:30px; min-width:30px; padding:6px; }
  .sv-carta-testo{ --sfuma:28px; padding-inline:8px; padding-bottom:10px; }
}