/* =========================================================
   MOBILE — tavole Figma Page 2, 8:2 (393–395 px), adattate da 320 a 900 px.
   Quote fluide e contenuti a flusso preservano leggibilità e testi aggiornati.
   ========================================================= */
@media (max-width:900px){
  :root{ --gutter:22px; }

  /* --- rimesse in riga le regole scritte a misura d'artboard --- */
  .sec-chisiamo .split{ margin-right:0 !important; }
  .sec-chisiamo .split-text{ margin-top:0; }
  .sec-chisiamo .split-text p{ margin-bottom:1em; }
  .strip-cell{ height:120px; }
  .sv-foto-colonna{ position:static; height:auto; margin-top:0; display:grid; gap:14px; }
  .sv-foto-colonna img:nth-child(1),
  .sv-foto-colonna img:nth-child(2),
  .sv-foto-colonna img:nth-child(3){ position:static; left:auto; top:auto; width:100%; height:190px; clip-path:none; }
  .sv-scheda{ min-height:0; height:auto; padding:24px 26px; }
  .acapo{ display:none; }
  .sv-imb-foto{ height:230px; }
  .sv-imb-foto img{ position:static; left:auto; top:auto; width:100%; height:100%; }
  .sv-coppia > *:nth-child(1), .sv-coppia > *:nth-child(2){ padding-inline:20px; }
  .sv-imballaggio .sv-blocco{ padding:24px 20px; height:auto; }
  .sv-coppia .sv-blocco{ height:auto; }
  .sv-coppia > * > img,
  .sv-coppia > *:nth-child(1) img, .sv-coppia > *:nth-child(2) img{ position:static; left:auto; top:auto; width:100%; height:180px; margin:20px 0 0; }
  .sv-coppia, .sv-imballaggio{ margin-left:0; }
  .rz-item[data-i] .car-slide img{ position:static; left:auto; top:auto; width:100%; height:100%; }
  .strip-cell:nth-child(1) img,
  .strip-cell:nth-child(2) img,
  .strip-cell:nth-child(3) img{ position:static; left:auto; top:auto; width:100%; height:100%; }
  .cert-lista{ margin-left:0; max-width:none; top:0; }
  .bollini{ width:auto; margin-top:0; }
  .bollino img, .bollino span,
  .bollino:first-child img, .bollino:first-child span,
  .bollino:last-child img, .bollino:last-child span{ top:0; }
  .timeline{ padding-left:0; margin-right:0; scroll-padding-inline-start:0; }
  .timeline figure{ transform:none; height:auto; }
  .timeline img{ position:static; left:auto; top:auto; width:100%; }
  .sv-imballaggio{ margin-left:0; }
  .sv-coppia > *:nth-child(2) img{ width:100%; height:180px; }
  .lv-colonne > div:first-child ol{ margin-top:20px; }
  .lv-colonne li{ margin-bottom:16px; }
  :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-testa,
  :is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-testa{ margin-top:0; }
  .sec-valori{ border-top:0; }
  body{ font-size:17px; line-height:1.35; }

  .site-header, .ft-home .site-header{ height:64px; min-height:64px; background:var(--nav-bg); }
  .ft-home .site-header::before{ display:none; }
  .header-inner{ justify-content:space-between; padding-inline:12px; }
  .header-logo--mobile{ display:block; }
  .header-inner--indietro .burger{ margin-left:auto; }

  .burger{
    display:block; position:relative; z-index:40;
    width:44px; height:44px; padding:9px 8px;
    background:none; border:0; cursor:pointer;
  }
  .burger span{
    display:block; height:2.5px; background:#000; border-radius:2px;
    margin:4px 0; transition:transform .22s ease, opacity .22s ease;
  }
  .burger[aria-expanded="true"] span{ background:#fff; }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* menu aperto: pannello rosso a tutto schermo che scende dall'alto, voci bianche */
  .nav{
    position:fixed; inset:0; z-index:35;
    flex-direction:column; justify-content:safe center; align-items:center; gap:8px;
    padding:80px 20px 24px; overflow-y:auto;
    background:var(--red-card);
    visibility:hidden;
    translate:0 -100%; transition:translate .28s ease, visibility 0s linear .28s;
  }
  .nav.is-open{ visibility:visible; translate:0 0; transition:translate .28s ease; }
  .nav a{ display:flex; align-items:center; justify-content:center; min-height:44px; font-size:19px; color:#fff; letter-spacing:.06em; }
  .nav a:hover, .nav a:focus-visible{ border-bottom-color:#fff; }
  .nav .nav-home{ display:flex; }
  @media (prefers-reduced-motion:reduce){ .nav, .nav.is-open{ transition:none; } }

  .ft-home .hero{
    height:auto; min-height:calc(100svh - 64px); margin-top:0;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:60px 22px 24px;
  }
  .ft-home .hero-s, .ft-home .hero-logo{ display:none; }
  .ft-home .hero-photo{ inset:0; width:100%; height:100%; opacity:1; }
  .hero-photo img{ left:0; top:0; width:100%; height:100%; object-position:center; }
  .ft-home .hero::after{
    content:""; position:absolute; inset:40% 0 0; pointer-events:none;
    background:linear-gradient(transparent,rgba(0,0,0,.55));
  }
  .ft-home .hero-title{
    position:relative; z-index:2; left:auto; top:auto; width:100%; max-width:420px; margin:0 auto;
    font-size:clamp(20px,5.6vw,28px); line-height:1.35; text-align:center; color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.45);
  }
  .scroll-cue{ position:relative; left:auto; top:auto; margin:28px auto 0; translate:0; transform:none; width:44px; }
  .scroll-cue:hover{ transform:translateY(5px); }
  .ft-home .scroll-cue{ top:auto; }

  .sec-chisiamo{ padding-block:32px 36px; }
  .sec-comelavoriamo{ padding-block:40px; }
  .sec-comelavoriamo .wrap{ padding-inline:22px; }
  .sec-comelavoriamo .display{ text-align:center; }
  .split{ grid-template-columns:1fr !important; gap:26px !important; margin-top:26px !important; }
  .display{ font-size:clamp(24px,5.6vw,30px);   /* 24: testo grande, il rosso basta a 3:1 */ line-height:1.25; text-align:center; }
  .sec-chisiamo .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:14px !important; align-items:center; }
  .sec-chisiamo .split-text{ font-size:clamp(14px,3.6vw,16px); line-height:1.4; }
  .sec-comelavoriamo .split-text{ font-size:16px; line-height:1.5; }

  .btn-overlay{
    position:static; width:auto; max-width:100%;
    margin:16px auto 0; display:flex;
  }
  .btn{ min-height:52px; font-size:17px; }
  .sec-chisiamo .btn{ min-height:44px; padding:10px 12px; font-size:14px; line-height:1.3; text-align:center; }
  .btn-w388, .btn-w433{ width:auto; padding-inline:26px; }
  .sv-centro .btn{ width:auto; min-height:44px; }
  .sec-comelavoriamo .btn{ min-height:48px; padding:12px 24px; font-size:16px; line-height:1.3; }
  /* su telefono niente foto: resta il bottone, sotto il testo e a sinistra */
  .sec-comelavoriamo .split{ margin-right:0; }
  .sec-comelavoriamo .split-media img{ display:none; }
  .sec-comelavoriamo .btn-overlay{ display:inline-flex; margin:0; }

  .card{ width:calc(100% - 44px); max-width:600px; aspect-ratio:auto; border-radius:20px; }
  .card-body, .card-perche .card-body, .card-lavori .card-body{ padding:32px 24px; }
  .card-body p{ max-width:none; font-size:15px; line-height:1.4; }
  .card-body .btn{ margin-top:30px; }
  .card-perche .card-body p{ margin-top:20px; text-align:center; }
  .card-body .btn{ width:100%; max-width:260px; min-height:44px; padding:10px 14px; font-size:14px; }
  .carousel{ width:100%; margin-top:26px; }

  /* I pallini restano piccoli come a progetto, ma il bordo trasparente
     porta l'area toccabile a 24px senza spostare il disegno. */
  .car-dots{ gap:10px; }
  .car-dots button{
    width:10px; height:10px; aspect-ratio:auto;
    box-sizing:content-box; border:7px solid transparent;
    background-clip:padding-box;
  }
  .card-lavori .car-nav{ width:34px; padding:5px; }
  .carousel .car-dots button,
  .carousel .car-dots button[aria-current="true"]{ background-clip:padding-box; }
  .sv-pannello .car-dots button{ width:10px; }

  .strip{ grid-template-columns:repeat(3,1fr); margin-top:32px; }
  .strip-cell{ height:clamp(72px,22vw,130px); }

  body[class] .site-footer{ min-height:0; padding-block:20px; font-size:14px; line-height:1.3; }
  .site-footer .wrap.footer-inner{ padding-inline:12px; }
  .footer-inner{ flex-direction:column; gap:16px; }
  .footer-brand{ width:100%; }
  .footer-brand address{ max-width:none; overflow-wrap:anywhere; font-weight:400; }
  .footer-et{ font-weight:300; }
  .footer-fiscale{ font-size:12px; }
  .site-footer .footer-brand img{ width:70px; margin-bottom:10px; }
  .site-footer .footer-nav{ align-items:flex-start; text-align:left; padding-top:0; }
  .footer-nav > a{ display:none; }
  html:not(.sial-js) .footer-nav > a{ display:block; }
  html:not(.sial-js) .burger{ display:none; }
  body[class] .footer-legal{ margin-top:0; font-size:14px; }
  .footer-legal a,
  .footer-legal .privacy-open{ display:inline-block; padding-block:8px; }

  /* ---- pagine interne ---- */
  .site-header--inner{ height:64px; min-height:64px; }
  .site-header--inner .header-inner{ padding-inline:18px 12px; }
  .header-logo{ width:110px; }

  /* proposta E: la foto apre la pagina e sfuma nel rosso, il titolo sta
     sulla sfumatura; la S qui non c'e'. Tavola 390: foto 340, titolo a 232. */
  .sec-benvenuti{ min-height:calc(100svh - 64px); padding:min(59.5vw, 390px) 0 36px; }
  .sec-benvenuti .benv-s{ display:none; }
  .benv-inner{ position:static; display:block; padding-inline:28px; }
  .benv-title{ padding-top:0; font-size:clamp(34px,13vw,58px); line-height:1.05; max-width:none; text-align:center; }
  .benv-grid{ display:block; margin-top:20px; }
  .benv-foto{ right:0; width:auto; height:min(87.2vw, 572px); -webkit-mask-image:none; mask-image:none; }
  .benv-foto img{ object-position:40% 30%; }
  .benv-foto::after{ background:linear-gradient(180deg, rgba(194,15,29,0) 35%, rgba(194,15,29,.82) 68%, var(--red-card) 100%); }
  .benv-testo{ padding-top:0; font-size:15px; line-height:1.4; max-width:620px; margin-inline:auto; }
}