/* MOBILE — seguito di 15-mobile.css */
@media (max-width:900px){
  .benv-testo p{ margin-bottom:18px; }

  .etichetta{ gap:10px; margin-bottom:20px; font-size:15px; }
  .etichetta img{ width:28px; top:0; }
  .sec-valori .etichetta,
  .sec-certificazioni .etichetta,
  .sec-storia .etichetta{ top:0; margin-bottom:22px; }

  .sec-valori{ padding-block:40px 44px; }
  .sec-valori .wrap,
  .sec-certificazioni .wrap,
  .sec-storia .wrap{ padding-inline:22px; }
  .titolo-sezione{ font-size:clamp(24px,6.3vw,32px); line-height:1.3; }
  .sec-valori .titolo-sezione{ text-align:center; max-width:268px; margin-inline:auto; font-size:clamp(24px,7.63vw,30px); line-height:1.33; }
  /* Il verniciatore resta solo su desktop: su telefono la cliente lo ha tolto (30/9/2026). */
  .verniciatore{ display:none; }
  .valori{
    grid-template-columns:1fr; gap:24px;
    width:auto; max-width:600px; margin:48px auto 0;
  }
  .valore{ display:grid; grid-template-columns:66px minmax(0,1fr); column-gap:0; align-items:center; min-height:118px; padding-top:0; margin-left:12px; }
  /* Su mobile tutte le schede prevalgono sulle varianti desktop per posizione. */
  .valore:nth-child(n) .valore-bolla{ left:0; top:50%; translate:0 -50%; width:82px; height:82px; padding:0; align-items:center; z-index:4; }
  .valore-bolla span{ font-size:15px; }
  .valore:nth-child(n) .valore-icona{ left:-6px; top:calc(50% - 50px); translate:0; width:38px; height:46px; object-fit:contain; z-index:5; }
  .valore-testo{
    grid-column:2; border-width:1px; border-radius:30px; padding:10px 14px 10px 22px;
    font-size:14px; line-height:1.4; min-height:0;
  }
  .valore:nth-child(2) .valore-testo,
  .valore:nth-child(3) .valore-testo{
    padding:10px 14px 10px 22px; margin-top:0; min-height:0;
  }
  /* Qualita': proposta C "rosso" (scelta della cliente, 30/9/2026); colori
     comuni col computer in 05-chi-siamo.css. Qui solo misure del telefono. */
  .valore-bolla span{ font-size:13px; }
  .valore:nth-child(n) .valore-icona{
    left:-14px; top:calc(50% - 66px); width:52px; height:52px; padding:8px;
  }

  .sec-certificazioni{ padding-block:40px 44px; }
  /* 417:802 — l'arco chiaro entra da sinistra e esce sotto i bollini */
  .cert-onda{
    left:-84px; top:27px;
    width:430px; height:887px;
  }
  .sec-certificazioni .titolo-sezione{ margin:0 0 20px; text-align:center; }
  .cert-grid{ grid-template-columns:1fr; gap:30px; }
  .cert-intro{ margin:0 0 22px; max-width:none; font-size:15px; }
  .cert-lista{ gap:18px; }
  .cert-lista li{ grid-template-columns:26px 1fr; gap:12px; font-size:14px; }
  .cert-lista li:nth-child(1){ max-width:none; }
  .cert-lista li:nth-child(2),.cert-lista li:nth-child(3){ margin-top:0; }
  .cert-lista li img{ top:0; }
  .bollini{ grid-template-columns:1fr 1fr; gap:20px; width:100%; max-width:350px; margin-inline:auto; }
  .bollino, .bollino:last-child{ height:190px; border-radius:20px; padding:16px; gap:20px; }
  .bollino:first-child{ order:2; }
  .bollino:nth-child(n) img{ width:100%; height:84px; max-width:110px; max-height:none; margin:0; object-fit:contain; }
  .bollino span{ font-size:14px; }

  .sec-storia{
    padding-block:40px 44px;
    background-image:url("../img/cs-storia-s.png");
    background-repeat:no-repeat; background-position:center bottom 24px;
    background-size:100% calc(100% - 100px);
  }
  .storia-testa{ flex-direction:column; align-items:flex-start; gap:10px; }
  .sec-storia .titolo-sezione{ text-align:right; align-self:flex-end; margin-right:0; }
  .timeline, .timeline.is-ready{ width:100%; margin:30px 0 0; padding:0; gap:12px; }
  .timeline figure{ flex:0 0 86%; width:86%; height:auto; border-radius:0; }
  .timeline img{ position:static; width:100%; height:clamp(280px,100vw,425px); object-fit:cover; }
  .timeline figcaption, .timeline figure:first-child figcaption{
    position:absolute; inset:auto 8% 18px; padding:6px 10px; font-size:14px; line-height:1.25;
    text-align:center; background:#D9D9D9; border:1px solid #bcbcbc; border-radius:24px;
  }
  .timeline figcaption::before{ display:none; }
  .timeline figcaption span{ position:static; width:auto; }
  .timeline-nav button{ width:70px; min-height:44px; display:flex; align-items:center; }

  /* ---- SERVIZI ---- */
  .sec-sv .wrap{ padding-inline:22px; }
  .onda{ height:46px; }
  .sv-hero{ padding-block:36px 40px; }
  .sv-carte{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 24px;
    max-width:520px; margin:28px auto 0;
  }
  /* Velo scuro (08-servizi.css) a misura di telefono: carta 3:4, niente
     pulsante «Scopri» (la carta intera resta il link). */
  .sv-carta{ height:auto; aspect-ratio:3 / 4; border-radius:18px; }
  .sv-carta-link::after{ border-radius:18px; }
  .sv-carta-link::before{ display:none; }
  .sv-carta i{ top:10px; left:10px; height:36px; min-width:36px; padding:8px; }
  .sv-carta-testo{ --sfuma:36px; min-height:62%; padding:var(--sfuma) 12px 12px; border-radius:0 0 18px 18px; }
  .sv-carta b{ font-size:clamp(15px,4.4vw,18px); line-height:1.2; overflow-wrap:normal; }
  .sv-carta span{ font-size:13px; margin-top:4px; }
  .sv-cue{ margin-top:32px; }

  .sv-testa{ padding-top:20px; }
  .sv-titolo{ left:0; line-height:1.25; }
  :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-titolo,
  :is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-titolo,
  :is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-titolo,
  :is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-titolo{ left:0; }
  .sv-titolo,
  :is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-titolo,
  :is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-titolo,
  :is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-titolo{ font-size:clamp(30px,8.6vw,40px); }
  .sv-etichetta{ font-size:15px; text-align:center; left:0; }
  /* 30/9/2026: icone piu' piccole, la parola conta piu' del disegno (08-servizi.css) */
  .sv-icona{ height:26px; margin-top:10px; }
  :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-icona,
  :is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-icona,
  :is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-icona,
  :is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-icona{ transform:none; left:0; top:0; }

  .sv-pannello{
    width:auto; padding:22px 18px 26px; border-radius:16px;
    margin:22px auto 0; max-width:520px; height:auto;
  }
  .sv-pannello .carousel{ height:auto; aspect-ratio:auto; margin:0; width:auto; }
  .sv-pannello .car-track{ height:auto; }
  .sv-pannello .car-slide{ height:auto; }
  .sv-pannello .car-nav{ top:auto; bottom:0; translate:0 0; }
  .sv-pannello .car-dots{ position:static; translate:0; margin:14px 48px 0; min-height:44px; justify-content:center; align-items:center; }
  .card-lavori .carousel{ width:min(100%,240px); left:0; aspect-ratio:601 / 440; margin-top:20px; }
  .sv-pannello .car-nav{ width:44px; background:none; }
  .sv-pannello .car-nav svg{ width:100%; height:100%; }
  .sv-pannello .car-nav svg path{ fill:#8A8A8A; }
  /* le slide sono impaginate in assoluto a misura d'artboard: qui tornano
     a flusso normale */
  .sv-slide{ display:block; height:auto; }
  .sv-slide h3{
    position:static; width:fit-content; max-width:100%; height:auto; margin:0 auto 14px;
    padding:9px 18px; border-radius:9px; font-size:16px; display:flex;
  }
  .sv-slide p{ position:static; width:auto; margin:0 0 18px; font-size:15px; line-height:1.5; text-align:left; }
  .sv-slide img{ position:static; width:100%; height:200px; border-radius:12px; }

  .sv-due{ grid-template-columns:minmax(0,1fr); gap:24px; margin:26px 0 0; }
  .sv-scheda{ margin-top:0; padding:22px; border-radius:26px; font-size:14px; line-height:1.5; height:auto; }
  /* 30/9/2026, richiesta del cliente: le tre foto scorrono come la striscia di
     Lavorazioni (17-mobile-3.css), grande quella al centro e le due laterali
     che spuntano. 04-striscia.js parte dalla foto centrale. */
  .sv-foto-colonna{
    position:relative; display:flex; gap:12px; margin-inline:-22px; padding-inline:11%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
  }
  .sv-foto-colonna::-webkit-scrollbar{ display:none; }
  .sv-foto-colonna img:nth-child(n){ flex:0 0 100%; width:100%; height:auto; aspect-ratio:3 / 2; border-radius:18px; scroll-snap-align:center; scroll-snap-stop:always; }

  .sv-coppia{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:26px; margin-left:0; background:var(--scheda-sv); border:1px solid var(--scheda-sv); border-radius:28px; overflow:hidden; }
  .sv-blocco{ padding:24px 20px; border-radius:26px; font-size:14px; line-height:1.5; }
  .sv-coppia .sv-blocco{ background:transparent; border:0; border-radius:0; }
  .sv-coppia .sv-blocco{ height:auto; }
  .sv-coppia > *:nth-child(1), .sv-coppia > *:nth-child(2){ padding:24px 20px; margin-top:0; }
  /* dopo la prima foto lo stesso stacco che chiude la scheda dopo la seconda */
  .sv-coppia > *:nth-child(1){ padding-bottom:0; }
  .sv-blocco img{ width:100%; height:180px; margin-top:20px; }
  /* le due foto larghe quanto la scheda, come quella di Imballaggio (30/9/2026) */
  .sv-coppia > *:nth-child(n) > img{ position:static; left:auto; top:auto; width:100%; max-width:none; height:auto; aspect-ratio:3 / 2; margin:20px 0 0; border-radius:12px; }
  /* Il pulsante di Verniciatura sta a 28px dalle schede e, con il margine,
     a 28px anche dal fondo della fascia: il contenitore ne da' solo 13 di tavola. */
  .sv-centro{ margin-top:28px; margin-bottom:calc(28px - 13 * var(--px)); }

  .sv-imballaggio{ grid-template-columns:minmax(0,1fr); gap:0; margin:26px 0 0; padding:22px; background:var(--scheda-sv); border:1px solid var(--scheda-sv); border-radius:28px; }
  .sv-imballaggio .sv-blocco{ padding:22px 0 0; height:auto; border:0; background:none; }
  .sv-imb-foto{ width:100%; height:auto; aspect-ratio:304 / 256; margin-top:0; border-radius:12px; }
  .sv-imballaggio > img{ height:230px; }

  /* ---- LAVORAZIONI ---- */
  .lv-hero{ height:auto; min-height:calc(100svh - 64px); justify-content:flex-end; padding:60px 22px 28px; }
  /* 475:1671 — foto ruotata di 90°, 847 × 476px prima della rotazione.
     Il centro è spostato a destra; la foto parte sopra la barra mobile. */
  .lv-hero > img{
    left:55.85%; top:calc(50% - 29px);
    width:max(calc(100svh - 5px),198.6vw); height:auto;
    aspect-ratio:16 / 9; object-fit:cover;
    transform:translate(-50%,-50%) rotate(90deg);
  }
  .lv-hero h1{ font-size:clamp(28px,7.6vw,38px); line-height:1.5; }
  .lv-hero-testo{ left:0; padding:0; margin:0; }
}