/* ============================================================
   SAFIRA — MIGLIORIE DESIGN ISPIRATE A BIONIQ  (v2)
   v2: le regole comuni (menu vetro, titoli, parole animate, card) valgono
   per le pagine con <body class="sito-v2">; quelle solo della home per
   <body class="home-v2">. Pagine senza queste classi non cambiano. Nessuna regola esistente viene
   modificata: questo file viene caricato per ULTIMO e si sovrappone.

   1. Menu rapido delle aree: card "vetro" ottanio cliccabili (senza foto)
   2. Titoli bicolore (parola chiave in ottanio)
   3. (v3) Scorrimento automatico di card aree e prodotti
   4. Menu fisso "vetro" flottante quando si scorre
   5. Angoli e ombre uniformi sulle card della home
   ============================================================ */
.home-v2, .sito-v2{
  --sf-ottanio:#1f8fa3;
  --sf-turchese:#49c5b6;
  --sf-notte:#082f52;
  --sf-blu:#123a63;
  --sf-sabbia:#e9dcc4;
  --sf-raggio:28px;
  --sf-raggio-piccolo:20px;
  --sf-ombra:0 14px 36px rgba(8,47,82,.08);
  --sf-ombra-hover:0 22px 50px rgba(8,47,82,.14);
}

/* ------------------------------------------------------------
   1. MENU RAPIDO AREE — card con foto e pannello vetro
   ------------------------------------------------------------ */
.home-v2 .aree-rapide{
  /* v3: le card scorrono da destra verso sinistra su tutta la larghezza */
  position:relative; left:50%; transform:translateX(-50%);
  width:100vw; max-width:100vw;
  margin:34px 0 0;
  padding:14px 0 22px;
  overflow:hidden;
  text-align:left;
  /* v4: dissolvenza ai lati piu' ampia, le card sfumano prima */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 7%, #000 18%, #000 82%, rgba(0,0,0,.35) 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 7%, #000 18%, #000 82%, rgba(0,0,0,.35) 93%, transparent 100%);
}
.home-v2 .area-card{ flex:0 0 276px; width:276px; box-sizing:border-box; }

.home-v2 .area-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:24px 24px 22px;
  border-radius:var(--sf-raggio);
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  /* vetro ottanio: lascia intravedere lo sfondo della hero */
  background:linear-gradient(150deg, rgba(9,66,96,.70) 0%, rgba(20,110,135,.62) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--sf-ombra);
  transition:box-shadow .45s ease, transform .45s cubic-bezier(.22,.9,.24,1), background .45s ease;
  -webkit-tap-highlight-color:transparent;
}
/* riflesso luminoso morbido nell'angolo, per dare profondita' al vetro */
.home-v2 .area-card::after{
  content:"";
  position:absolute; right:-60px; top:-60px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(73,197,182,.35), rgba(73,197,182,0) 70%);
  pointer-events:none;
  transition:transform .8s cubic-bezier(.22,.9,.24,1);
}
.home-v2 .area-card:hover,
.home-v2 .area-card.in-rilievo{
  transform:translateY(-6px) scale(1.03);
  box-shadow:var(--sf-ombra-hover);
  background:linear-gradient(150deg, rgba(9,66,96,.84) 0%, rgba(20,110,135,.78) 100%);
}
.home-v2 .area-card:hover::after,
.home-v2 .area-card.in-rilievo::after{ transform:scale(1.25); }

.home-v2 .area-card-pannello{
  position:relative; z-index:1;
  display:flex; flex-direction:column; flex:1;
  /* contenuto centrato nella card: margini uguali a destra e a sinistra
     anche quando il testo e' piu' corto della card */
  align-items:center;
  text-align:center;
}
/* i punti restano allineati tra loro (spunta sotto spunta), ma il blocco e' centrato */
.home-v2 .area-card-punti{ display:inline-block !important; text-align:left; }
.home-v2 .area-card-cta{ margin-top:auto; align-self:center; }

.home-v2 .area-card-kicker{
  display:block;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#9fe6dc; margin-bottom:6px;
}
.home-v2 .area-card-titolo{
  display:block;
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:21px; line-height:1.15; letter-spacing:-.02em;
  color:#fff; margin-bottom:10px;
}
.home-v2 .area-card-punti{
  display:block; margin:0 0 14px; padding:0;
  font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.92);
}
.home-v2 .area-card-punti span{ display:block; padding-left:20px; position:relative; }
.home-v2 .area-card-punti span::before{
  content:""; position:absolute; left:2px; top:.52em;
  width:9px; height:5px; border-left:2px solid #9fe6dc; border-bottom:2px solid #9fe6dc;
  transform:rotate(-45deg);
}
.home-v2 .area-card-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  background:#fff; color:var(--sf-notte);
  font-family:'Manrope',sans-serif; font-weight:800; font-size:13px;
  transition:background .3s ease, color .3s ease, gap .3s ease;
}
.home-v2 .area-card:hover .area-card-cta,
.home-v2 .area-card.in-rilievo .area-card-cta{ background:var(--sf-turchese); color:#fff; gap:12px; }
.home-v2 .area-card:focus-visible{ outline:3px solid var(--sf-ottanio); outline-offset:4px; }

/* tablet: due colonne, l'ultima card su tutta la riga */
@media (max-width:720px){
  .home-v2 .area-card{ flex-basis:260px; width:260px; min-height:220px; }
  .home-v2 .aree-rapide{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* v7 — SMARTPHONE: card piu' piccole, se ne vedono 3 intere alla volta
   (+ i bordi delle vicine). Stesso contenuto, testi ridotti in proporzione.
   Le regole sopra restano: queste vengono dopo e le sostituiscono solo sul telefono. */
@media (max-width:720px){
  .home-v2 .aree-rapide{
    /* dissolvenza ai lati piu' stretta (era 40px), altrimenti coprirebbe mezza card */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .home-v2 .aree-rapide .scorrimento-traccia{ gap:8px; }
  .home-v2 .area-card{ flex-basis:122px; width:122px; min-height:0; padding:13px 6px 11px; border-radius:18px; }
  .home-v2 .area-card::after{ width:110px; height:110px; right:-40px; top:-40px; }
  .home-v2 .area-card-kicker{ font-size:8.5px; letter-spacing:.12em; margin-bottom:3px; }
  .home-v2 .area-card-titolo{ font-size:11px; letter-spacing:-.035em; margin-bottom:7px; }
  .home-v2 .area-card-punti{ font-size:9px; line-height:1.35; margin-bottom:10px; }
  .home-v2 .area-card-punti span{ padding-left:11px; }
  .home-v2 .area-card-punti span::before{ width:5px; height:3px; left:0; border-left-width:1.5px; border-bottom-width:1.5px; }
  .home-v2 .area-card-cta{ font-size:9px; padding:6px 8px; gap:3px; white-space:nowrap; letter-spacing:-.01em; }
  .home-v2 .area-card:hover .area-card-cta,
  .home-v2 .area-card.in-rilievo .area-card-cta{ gap:5px; }
}

/* ------------------------------------------------------------
   2. TITOLI BICOLORE
   ------------------------------------------------------------ */
.home-v2 mark.accento{ background:none; color:var(--sf-ottanio); font:inherit; letter-spacing:inherit; padding:0; }
.home-v2 .partner-box .accento{ color:rgba(255,255,255,.72); }

/* ------------------------------------------------------------
   4. MENU FISSO "VETRO" FLOTTANTE
   Quando si scorre, la fascia azzurra a tutta larghezza diventa una
   barra bianca semitrasparente, staccata dai bordi, angoli morbidi.
   ------------------------------------------------------------ */
html body.sito-v2 .header.scrolled{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  border:0 !important;
  padding-top:10px !important;
  padding-left:20px !important;
  padding-right:20px !important;
}
html body.sito-v2 .header.scrolled .header-inner{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:22px !important;
  box-shadow:0 10px 30px rgba(8,47,82,.10) !important;
  padding-left:18px !important;
  padding-right:18px !important;
}
html body.sito-v2 .header.scrolled .nav-side a{
  color:var(--sf-blu) !important;
  text-shadow:none !important;
  background:transparent !important;
}
html body.sito-v2 .header.scrolled .nav-side a:hover{
  background:rgba(73,197,182,.14) !important;
}
html body.sito-v2 .header.scrolled .nav-side a.active{
  color:var(--sf-ottanio) !important;
  background:rgba(73,197,182,.16) !important;
}
@media (max-width:1050px){
  html body.sito-v2 .header.scrolled{ padding:8px 12px 0 !important; }
}
@media (max-width:720px){
  html body.sito-v2 .header.scrolled{ padding:6px 8px 0 !important; }
  html body.sito-v2 .header.scrolled .header-inner{
    border-radius:18px !important; padding-left:8px !important; padding-right:8px !important;
  }
}

/* ------------------------------------------------------------
   5. ANGOLI E OMBRE UNIFORMI (solo card della home)
   ------------------------------------------------------------ */
.home-v2 .science-card{
  border-radius:var(--sf-raggio) !important;
  box-shadow:var(--sf-ombra) !important;
  border:1px solid rgba(31,143,163,.08) !important;
}
.home-v2 .partner-box{
  border-radius:34px !important;
  box-shadow:0 18px 44px rgba(31,143,163,.18) !important;
}


/* ============================================================
   MIGLIORIE ISPIRATE A CAMERA 203  (aggiunte in v1)
   6. Gerarchia tipografica: titoli grandi ma leggeri, etichette
      maiuscole spaziate, testi piu' ariosi
   7. Link secondari con freccia e sottolineatura che si disegna
   8. Titoli che salgono parola per parola (con js/migliorie.js)
   ============================================================ */

/* ------------------------------------------------------------
   6. GERARCHIA TIPOGRAFICA
   ------------------------------------------------------------ */
/* etichette sopra i titoli: piccole, maiuscole, molto spaziate */
.home-v2 .section-title > span,
.home-v2 .science-copy > span{
  font-family:'Inter',sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  color:var(--sf-ottanio) !important;
  margin-bottom:14px !important;
}
/* titoli di sezione: piu' grandi, peso medio, niente "grassetto gridato" */
.home-v2 .section-title h2,
.home-v2 .science-copy h2{
  font-size:clamp(32px, 4.2vw, 54px) !important;
  line-height:1.08 !important;
  font-weight:600 !important;
  letter-spacing:-.035em !important;
  white-space:normal !important;
  color:var(--sf-notte) !important;
  max-width:880px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-wrap:balance;
}
.home-v2 .partner-box h2{
  font-size:clamp(26px, 3vw, 38px) !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
  line-height:1.12 !important;
  text-shadow:none !important;
}
/* testi descrittivi: interlinea ampia, colore piu' morbido */
.home-v2 .section-title + p,
.home-v2 .science-copy p,
.home-v2 .section > p{
  line-height:1.8 !important;
  color:#4a6378 !important;
}

/* ------------------------------------------------------------
   7. LINK SECONDARI "CON FRECCIA"
   "Scopri di piu'" nelle schede prodotto: da pillola scura a testo
   maiuscolo spaziato, con sottolineatura che si disegna da sinistra
   e freccia che avanza. "Acquista" resta il tasto principale.
   ------------------------------------------------------------ */
.home-v2 .product-card .small-btn{
  position:relative;
  background:none !important;
  color:var(--sf-notte) !important;
  padding:6px 18px 6px 0 !important;
  border-radius:0 !important;
  font-family:'Inter',sans-serif !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  box-shadow:none !important;
  transform:none !important;
}
.home-v2 .product-card .small-btn::before{
  content:"";
  position:absolute; left:0; right:18px; bottom:2px; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s cubic-bezier(.22,.9,.24,1);
}
.home-v2 .product-card .small-btn::after{
  content:"→";
  position:absolute; right:0; top:50%;
  transform:translate(0,-52%);
  transition:transform .35s cubic-bezier(.22,.9,.24,1);
}
.home-v2 .product-card .small-btn:hover{ background:none !important; color:var(--sf-ottanio) !important; }
.home-v2 .product-card .small-btn:hover::before{ transform:scaleX(1); transform-origin:0 50%; }
.home-v2 .product-card .small-btn:hover::after{ transform:translate(4px,-52%); }

/* ------------------------------------------------------------
   8. TITOLI CHE SALGONO PAROLA PER PAROLA
   Le parole vengono divise da js/migliorie.js. Il testo si nasconde
   SOLO se lo script e' partito (classe parole-pronte): senza script
   i titoli restano normali.
   ------------------------------------------------------------ */
/* le parole sono <span>: il vecchio stile ".section-title span" (etichetta
   piccola maiuscola) non deve applicarsi alle parole del titolo */
.home-v2 .section-title h2 span,
.home-v2 .science-copy h2 span,
.home-v2 .partner-box h2 span{
  font:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
  color:inherit !important;
  margin:0 !important;
  line-height:inherit !important;
}
.home-v2 .section-title h2 .parola,
.home-v2 .science-copy h2 .parola,
.home-v2 .partner-box h2 .parola,
.home-v2 .section-title h2 .parola-in,
.home-v2 .science-copy h2 .parola-in,
.home-v2 .partner-box h2 .parola-in{ display:inline-block !important; }
.parole-pronte .home-v2 .parola{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.12em;
  margin-bottom:-.12em;
}
.parole-pronte .home-v2 .parola-in{
  display:inline-block;
  transform:translate3d(0,110%,0);
  transition:transform .95s cubic-bezier(.19,.9,.22,1);
  transition-delay:calc(var(--i, 0) * 60ms);
  will-change:transform;
}
.parole-pronte .home-v2 .titolo-visibile .parola-in{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .parole-pronte .home-v2 .parola-in{ transform:none !important; transition:none !important; }
}


/* ============================================================
   v2 — STESSO STILE SU RICERCA, CONTATTI E PRODOTTI
   (body class="sito-v2")
   ============================================================ */

/* titoli bicolore */
.sito-v2 mark.accento{ background:none; color:var(--sf-ottanio); font:inherit; letter-spacing:inherit; padding:0; }
/* su sfondi scuri (hero di Ricerca e Contatti) e sul riquadro turchese finale */
.sito-v2 .hero mark.accento{ color:#9fe6dc; }
.sito-v2 .cta-box mark.accento{ color:rgba(255,255,255,.74); }
/* prodotti: hero chiara */
.sito-v2 .hero-heading mark.accento{ color:var(--sf-ottanio); }

/* gerarchia: titoli grandi ma piu' leggeri */
.sito-v2:not(.home-v2) .hero h1{
  font-weight:600 !important;
  letter-spacing:-.04em !important;
  text-wrap:balance;
}
.sito-v2:not(.home-v2) .section-title h2{
  font-size:clamp(30px, 3.8vw, 50px) !important;
  line-height:1.08 !important;
  font-weight:600 !important;
  letter-spacing:-.035em !important;
  white-space:normal !important;
  text-wrap:balance;
}
.sito-v2:not(.home-v2) .cta-box h2{
  font-weight:600 !important;
  letter-spacing:-.03em !important;
  text-shadow:none !important;
}

/* le parole animate sono <span>: gli stili "etichetta" delle pagine non devono toccarle */
.sito-v2 h1 span.parola, .sito-v2 h1 span.parola-in,
.sito-v2 h2 span.parola, .sito-v2 h2 span.parola-in{
  font:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
  color:inherit !important;
  margin:0 !important;
  padding-left:0 !important; padding-right:0 !important;
  background:none !important;
  border:0 !important;
  line-height:inherit !important;
  display:inline-block !important;
}
.parole-pronte .sito-v2 .parola{
  overflow:hidden; vertical-align:bottom;
  padding-bottom:.12em !important; margin-bottom:-.12em !important;
}
.parole-pronte .sito-v2 .parola-in{
  transform:translate3d(0,110%,0);
  transition:transform .95s cubic-bezier(.19,.9,.22,1);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.parole-pronte .sito-v2 .titolo-visibile .parola-in{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .parole-pronte .sito-v2 .parola-in{ transform:none !important; transition:none !important; }
}

/* card con angoli e ombre uniformi */
.sito-v2 .research-card,
.sito-v2 .form-card,
.sito-v2 .info-card{
  border-radius:var(--sf-raggio) !important;
  box-shadow:var(--sf-ombra) !important;
}
.sito-v2 .cta-box{
  border-radius:34px !important;
  box-shadow:0 18px 44px rgba(31,143,163,.18) !important;
}

/* Prodotti: "Apri" nelle card delle aree diventa testo spaziato con freccia */
.sito-v2 .category-open-pill{
  position:relative;
  background:none !important;
  box-shadow:none !important;
  padding:6px 0 !important;
  border-radius:0 !important;
  color:var(--sf-notte) !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  min-width:0 !important;
  width:auto !important;
  justify-content:flex-start !important;
}
.sito-v2 .category-open-pill::before{
  content:""; position:absolute; left:0; right:1.35em; bottom:4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s cubic-bezier(.22,.9,.24,1);
}
.sito-v2 .category-open-pill::after{
  content:"→"; display:inline-block; margin-left:2px; letter-spacing:0;
  transition:transform .35s cubic-bezier(.22,.9,.24,1);
}
.sito-v2 .category-card:hover .category-open-pill{ color:var(--sf-ottanio) !important; }
.sito-v2 .category-card:hover .category-open-pill::before{ transform:scaleX(1); transform-origin:0 50%; }
.sito-v2 .category-card:hover .category-open-pill::after{ transform:translateX(4px); }


/* ============================================================
   v3 — SCORRIMENTO AUTOMATICO (stile Bioniq)
   Card delle aree: da destra verso sinistra.
   Prodotti: da sinistra verso destra, senza frecce e pallini.
   Il movimento lo fa js/migliorie.js; passando il mouse o toccando
   una card lo scorrimento si ferma e quella card viene messa in
   rilievo. Con "Riduci movimento" nulla si muove e si scorre a mano.
   ============================================================ */
.home-v2 .scorrimento-traccia{
  display:flex;
  gap:18px;
  width:max-content;
  will-change:transform;
}
/* mentre uno scorrimento e' in pausa, le altre card si attenuano */
/* v15 — niente velo sulle card delle aree: quando una card e' in rilievo le
   altre restano piene, resta solo l'ingrandimento della card scelta.
   (Prima le altre card si attenuavano al 72%. I prodotti, piu' sotto,
   mantengono la loro attenuazione: quella non e' stata toccata.) */
.home-v2 [data-scorrimento].in-pausa .area-card:not(.in-rilievo){ opacity:1; }
.home-v2 .area-card{ transition:box-shadow .45s ease, transform .45s cubic-bezier(.22,.9,.24,1), background .45s ease, opacity .35s ease; }

/* prodotti: niente frecce, niente pallini, niente card "rimpicciolite" */
.home-v2 .products-carousel-wrap .carousel-arrow,
.home-v2 .products-carousel-wrap .carousel-dots{ display:none !important; }
.home-v2 .products-carousel-wrap{ padding-left:0 !important; padding-right:0 !important; max-width:1240px; }
.home-v2 .products-grid[data-scorrimento]{
  overflow:hidden !important;
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
  padding:34px 0 52px !important;
  perspective:none !important;
}
.home-v2 .products-grid[data-scorrimento] .scorrimento-traccia{ gap:20px; align-items:stretch; }
.home-v2 .products-grid[data-scorrimento] .product-card{
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  scroll-snap-align:none !important;
  box-shadow:0 14px 34px rgba(5,32,60,.08) !important;
}
.home-v2 .products-grid[data-scorrimento] .product-card.in-rilievo{
  transform:translateY(-10px) scale(1.04) !important;
  box-shadow:0 30px 70px rgba(5,32,60,.20) !important;
  border-color:rgba(46,196,182,.35) !important;
  z-index:3;
}
.home-v2 .products-grid[data-scorrimento].in-pausa .product-card:not(.in-rilievo){ opacity:.62 !important; }
.home-v2 .products-grid[data-scorrimento] .product-card.in-rilievo .product-image img{ transform:scale(1.06); }

/* v8 — SMARTPHONE: prodotti piu' piccoli, se ne vedono 3 alla volta
   (stessa logica delle card aree). La fascia prende tutta la larghezza dello
   schermo; sotto ogni prodotto prezzo, "Scopri di piu'" e "Acquista" vanno uno
   sotto l'altro. Le descrizioni lunghe si fermano a 4 righe con "..." (il testo
   completo resta in "Scopri di piu'"). Computer e tablet non cambiano. */
@media (max-width:720px){
  .home-v2 .products-grid[data-scorrimento]{
    width:100vw !important; max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important; margin-right:0 !important;
    padding:22px 0 34px !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .home-v2 .products-grid[data-scorrimento] .scorrimento-traccia{ gap:8px; }
  .home-v2 .products-grid[data-scorrimento] .product-card{
    flex:0 0 122px !important; width:122px !important; min-width:0 !important; max-width:none !important;
    border-radius:18px !important;
    box-shadow:0 8px 20px rgba(5,32,60,.08) !important;
  }
  .home-v2 .products-grid[data-scorrimento] .product-card.in-rilievo{ transform:translateY(-6px) scale(1.04) !important; box-shadow:0 18px 40px rgba(5,32,60,.18) !important; }
  .home-v2 .products-grid[data-scorrimento] .product-image{ height:92px !important; }
  .home-v2 .products-grid[data-scorrimento] .product-badge{ font-size:7px !important; padding:3px 6px !important; letter-spacing:.1em !important; top:6px !important; right:6px !important; }
  .home-v2 .products-grid[data-scorrimento] .product-content{ padding:9px 8px 10px !important; }
  .home-v2 .products-grid[data-scorrimento] .product-content h3{ font-size:12px !important; margin:0 0 4px !important; line-height:1.15 !important; }
  .home-v2 .products-grid[data-scorrimento] .product-content p{ font-size:9px !important; line-height:1.35 !important; min-height:48.6px !important; margin:0 0 8px !important;
    display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
  .home-v2 .products-grid[data-scorrimento] .product-footer{ flex-direction:column !important; align-items:stretch !important; gap:6px !important; }
  .home-v2 .products-grid[data-scorrimento] .price{ font-size:12px !important; justify-content:center; gap:5px !important; }
  .home-v2 .products-grid[data-scorrimento] .price *{ font-size:inherit; }
  .home-v2 .products-grid[data-scorrimento] .small-btn{ font-size:8px !important; letter-spacing:.08em !important; padding:2px 0 !important; text-align:center; justify-content:center; white-space:nowrap; }
  .home-v2 .products-grid[data-scorrimento] .cart-add-btn{ font-size:10.5px !important; padding:7px 6px !important; width:100% !important; min-width:0 !important; }
}

/* ============================================================
   v40 — DUE COSE CHE SUL TELEFONO COSTANO MOLTO E NON SI VEDONO

   (1) IL VETRO SFOCATO DELLE CARD AREE, SOLO SUL TELEFONO.
   Le 5 card hanno backdrop-filter: blur(14px), cioe' il browser deve
   prendere quello che sta dietro, sfocarlo e ricomporlo. Finche' stanno
   ferme lo fa una volta; qui si muovono di continuo E la pagina scorre,
   quindi lo rifa' a ogni fotogramma, per cinque card. Su iPhone e' il
   lavoro piu' caro della pagina, ed e' anche quello che fa svuotare e
   ridisegnare gli strati — che e' quello che si vede come un lampo.
   Sul telefono, sopra uno sfondo quasi uniforme, la sfocatura non si
   distingue: al suo posto lo stesso colore un po' piu' pieno.
   SUL COMPUTER NON CAMBIA NIENTE: li' il vetro resta.

   (2) LA SFUMATURA AI BORDI DEL NASTRO PRODOTTI.
   Era una maschera (mask-image) applicata all'elemento che contiene il
   nastro in movimento: il browser deve disegnare tutto a parte e poi
   applicarci la maschera, a ogni fotogramma. Lo stesso identico effetto si
   ottiene con due velature ferme sopra il nastro, che costano quanto un
   rettangolo colorato. Lo sfondo li' e' bianco pieno, quindi il risultato
   e' indistinguibile.
   La fascia delle AREE tiene la sua maschera: li' dietro c'e' la foto
   della hero, non un colore pieno, e una velatura non potrebbe imitarla.
   ============================================================ */
@media (max-width:720px){
  .home-v2 .area-card{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:linear-gradient(150deg, rgba(9,66,96,.90) 0%, rgba(20,110,135,.86) 100%) !important;
  }
  .home-v2 .area-card:hover,
  .home-v2 .area-card.in-rilievo{
    background:linear-gradient(150deg, rgba(9,66,96,.96) 0%, rgba(20,110,135,.92) 100%) !important;
  }

  .home-v2 .products-grid[data-scorrimento]{
    -webkit-mask-image:none !important;
    mask-image:none !important;
    position:relative;
  }
  .home-v2 .products-grid[data-scorrimento]::before,
  .home-v2 .products-grid[data-scorrimento]::after{
    content:"";
    position:absolute; top:0; bottom:0; width:14px;
    z-index:5; pointer-events:none;
  }
  .home-v2 .products-grid[data-scorrimento]::before{
    left:0;  background:linear-gradient(90deg,  #fff 0%, rgba(255,255,255,0) 100%);
  }
  .home-v2 .products-grid[data-scorrimento]::after{
    right:0; background:linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
  }
}

/* la fascia delle aree e' larga quanto lo schermo: sui computer con barra di
   scorrimento visibile (Windows) non deve creare uno scorrimento orizzontale */
.home-v2 .hero{ overflow-x:clip; }

/* v5: sulle fasce che scorrono il dito sposta le card in orizzontale,
   mentre in verticale continua a scorrere la pagina */
.home-v2 [data-scorrimento]{ touch-action:pan-y pinch-zoom !important; -webkit-user-select:none; user-select:none; }
.home-v2 [data-scorrimento] img{ -webkit-user-drag:none; pointer-events:auto; }

/* ------------------------------------------------------------
   v9 — FIRMA E "BENESSERE" IN IMMAGINE (solo home)
   Le scritte sono immagini con sfondo trasparente. La larghezza e' in "em",
   cioe' legata alla dimensione del carattere: cosi' l'ingrandimento e la
   riduzione durante lo scorrimento (js/migliorie.js) funzionano come prima.
   Firma: stessa larghezza della vecchia scritta (3.571em).
   "Benessere": piu' piccola della firma; sul telefono ancora un po' di piu'.
   ------------------------------------------------------------ */
.home-v2 .hero-signature .scritta-img{ display:block; width:3.571em; max-width:none; height:auto; margin:0 auto; }
.home-v2 .hero-title-big .scritta-img{ display:block; width:3em; max-width:none; height:auto; margin:0 auto; }
@media (max-width:720px){
  .home-v2 .hero-title-big .scritta-img{ width:2.6em; }
}

/* ------------------------------------------------------------
   v10 — MENU IN ALTO PIU' GRANDE (solo computer, da 1025px in su)
   Solo il menu che si vede all'apertura (intestazione non ancora
   "scrolled"); quello che compare scorrendo non cambia.
   Voci Home / Prodotti / Ricerca / Contatti: testo doppio (15px -> 30px),
   piu' spazio tra le voci (34px -> 60px) e piu' spazio al centro, dove
   c'e' l'emblema (220px -> 340px). Due voci a sinistra e due a destra
   come prima. Telefono e tablet invariati.
   ------------------------------------------------------------ */
@media (min-width:1025px){
  .sito-v2 .header:not(.scrolled) .header-inner{
    /* v11: spazio centrale 340px sugli schermi grandi, un po' meno sui portatili
       piccoli per lasciare posto alla distanza tra le voci */
    grid-template-columns:minmax(0,1fr) clamp(240px, 20vw, 340px) minmax(0,1fr) !important;
    max-width:1320px !important;
  }
  /* v11: Home-Prodotti e Ricerca-Contatti piu' distanti: circa 125px su uno
     schermo da 1800px, in proporzione sugli schermi piu' piccoli (minimo 50px) */
  .sito-v2 .header:not(.scrolled) .nav-side{ gap:clamp(50px, calc(8vw - 20px), 130px) !important; }
  .sito-v2 .header:not(.scrolled) .nav-side a{ font-size:30px !important; }
}

/* ------------------------------------------------------------
   v18 — COLORE DELLA ZONA DI ORARIO E ICONE IN ALTO (solo telefono)
   Colore del marchio: ottanio #1f8fa3.

   COSA SAPPIAMO, provato sull'iPhone e non preso dalle guide:
   1. iPhone fino a iOS 18 e Android: decide <meta name="theme-color">.
      Resta nelle pagine, serve ancora a loro.
   2. iOS 26: quel tag non viene letto. Il colore della barra in alto viene
      dallo SFONDO DEL DOCUMENTO (html/body).
   3. MA se esiste un elemento in position:fixed attaccato al bordo con uno
      sfondo pieno, Safari legge quello e ignora lo sfondo del documento.
      E' l'errore della versione 17: lo strato bianco che rimetteva il colore
      della pagina era fisso, quindi Safari leggeva BIANCO in alto (sotto
      restava l'ottanio del documento: si vedeva solo la barra in basso).

   Quindi qui: il colore sta sullo sfondo del documento (sia html sia body,
   cosi' funziona comunque il browser lo legga) e lo sfondo vero della pagina
   torna con uno strato in position:ABSOLUTE - non fisso, e per di piu' un
   pseudo-elemento: due motivi per cui Safari non puo' scambiarlo per la
   sorgente del colore della barra.

   I pezzi e il perche':
     * position:relative su body -> serve a dare il riferimento allo strato
     * isolation:isolate su body -> senza, lo sfondo di body verrebbe
       disegnato SOPRA lo strato (gli elementi con z-index negativo stanno
       dietro allo sfondo del contenitore solo se il contenitore e' un
       contesto di impilamento a se'). Non sposta nulla e non cambia il
       comportamento degli elementi fissi.
     * due colori di sfondo, gli stessi di sempre: bianco sulla home,
       azzurrino #f6fbff sulle altre pagine.

   La striscia .tinta-barra del passo 12 resta spenta: non serviva, e da
   spenta Safari la ignora del tutto. Il div resta nelle pagine, cosi' se le
   regole di iOS cambiassero ancora basta riaccenderlo da qui.
   Tutto dentro max-width:720px: su computer e tablet non cambia nulla.
   L'ottanio si intravede solo tirando la pagina oltre il bordo (l'effetto
   elastico), dove prima c'era il bianco.
   ------------------------------------------------------------ */
.tinta-barra{ display:none; }

@media (max-width:720px){
  html{ background-color:#1f8fa3; }
  body{
    background-color:#1f8fa3 !important;
    position:relative;
    isolation:isolate;
  }
  body::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    min-height:100vh;
    background-color:#f6fbff;
    z-index:-1;
    pointer-events:none;
  }
  body.home-v2::before{ background-color:#ffffff; }

  /* Il pannello del carrello, anche da chiuso, e' un elemento fisso bianco
     attaccato ai bordi e largo quasi quanto lo schermo: proprio il tipo di
     elemento che Safari 26 puo' leggere al posto dello sfondo della pagina.
     Da chiuso lo rendiamo non disegnato (e quindi non leggibile). Il ritardo
     di 0,35s serve a non tagliare l'animazione di chiusura. */
  .cart-panel{
    visibility:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s;
  }
  .cart-panel.active{
    visibility:visible;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
}

/* ------------------------------------------------------------
   v19 — CAPSULE CHE CADONO NEL BARATTOLO (solo home, computer e smartphone)
   Le immagini sono in assets/img/capsule/, il movimento lo fa js/capsule.js.
   Lo strato delle capsule e' fisso allo schermo; il barattolo invece sta in
   due contenitori appoggiati alla pagina, che scorrono con il sito: cosi'
   resta fermo al suo posto durante lo scorrimento.
   ------------------------------------------------------------ */
/* v19: l'animazione vale ora anche su smartphone e tablet, quindi queste
   regole non stanno piu' dentro una media query. ATTENZIONE a .capsule-fermo:
   deve restare SEMPRE position:absolute. Quando era spento sotto i 1025px
   senza essere assoluto, restava nel flusso della pagina e in fondo alla home
   comparivano i barattoli in una coda vuota di circa 1250px.
   Le misure (barattolo, capsule, -40% sul telefono) le decide js/capsule.js. */

  /* Finche' js/capsule.js non ha misurato tutto, questi elementi NON esistono
     per l'impaginazione. Senza questa regola, per qualche istante le immagini
     stanno alla loro dimensione naturale (il barattolo e' 640px di larghezza)
     e sporgono dalla pagina: il telefono se ne accorge e rimpicciolisce TUTTA
     la home per farcela stare. Misurato: la pagina passava da 390 a 660px di
     larghezza, in modo intermittente, a seconda dei tempi di caricamento.
     La classe "capsule-pronte" la mette il javascript dopo la prima misura. */
  .home-v2 .capsule-strato,
  .home-v2 .capsule-fermo{ display:none; }

  .home-v2.capsule-pronte .capsule-strato{
    display:block;
    /* la dissolvenza quando i barattoli escono dallo schermo in alto */
    transition:opacity .2s linear;
    /* v38 — LO STRATO E' APPOGGIATO ALLA PAGINA, NON AGGANCIATO ALLO SCHERMO.
       Prima era position:fixed con inset:0, cioe' grande quanto lo schermo e
       fermo rispetto a lui, mentre i barattoli stanno nella pagina e scorrono.
       Due sistemi diversi: il javascript doveva indovinare a ogni fotogramma
       dove sarebbe finito il barattolo per tagliare li' le capsule, e negli
       scorrimenti di slancio il browser disegnava le due cose in momenti
       leggermente diversi — ed e' li' che le capsule uscivano sotto il
       barattolo.
       Ora lo strato e' assoluto come i barattoli: scorrono insieme per forza.
       Larghezza e altezza le scrive js/capsule.js (aggiornaAltezzaStrato):
       l'altezza arriva ESATTAMENTE alla linea del fondo dei barattoli, e
       overflow:hidden fa il resto. Sotto quella linea non c'e' piu' strato,
       quindi non si puo' disegnare niente, a nessuna velocita'.
       contain:paint ripete la stessa promessa al browser (e gli permette di
       disegnare meno); non si usa piu' "strict", che comprende contain:size e
       qui non serve, visto che l'altezza e' quella vera. */
    position:absolute; top:0; left:0;
    z-index:2;              /* sotto i testi della prima schermata (z 3) e sotto menu e icone */
    pointer-events:none;
    overflow:hidden;
    contain:layout paint;
  }
  .home-v2 .capsule-strato img{
    position:absolute; top:0; left:0;
    max-width:none; height:auto;
    will-change:transform;
    -webkit-user-select:none; user-select:none;
  }
  /* niente ombra sulle capsule: con 14 immagini in movimento l'ombra costa
     molto al browser e non si nota; le capsule hanno gia' profondita' grazie
     alle dimensioni e alla trasparenza diverse */
  .home-v2 .capsule-strato .capsula{ width:auto; }
  /* il barattolo sta in due contenitori appoggiati alla pagina: scorrono con
     il sito, quindi restano fermi al loro posto. Dietro (sotto le capsule che
     cadono) e davanti (sopra), per l'effetto di entrata. */
  .home-v2.capsule-pronte .capsule-fermo{
    display:block;
    position:absolute; top:0; left:0;
    pointer-events:none;
    will-change:transform;
  }
  .home-v2 .capsule-dietro{ z-index:1; }
  .home-v2 .capsule-davanti{ z-index:3; }
  .home-v2 .capsule-fermo img{ position:absolute; top:0; left:0; max-width:none; height:auto; }
  /* LE CAPSULE DENTRO IL BARATTOLO. Stanno nel contenitore di dietro e sono
     ritagliate dall'apertura in giu' (lo fa il javascript): si intravedono
     dalla bocca, come le pastiglie vere dentro un barattolo semitrasparente.
     Il livello sale mentre il barattolo entra nello schermo. */
  .home-v2 .capsule-dentro{ position:absolute; top:0; left:0; }
  .home-v2 .capsule-dentro .capsula-interna{ filter:none; width:auto; }

/* v20 — SPAZIO PER I BARATTOLI SULLO SMARTPHONE
   Sul telefono i barattoli non hanno posto ai lati del titolo: lo occupa tutto
   il testo. Qui si apre una fascia bianca vuota fra il paragrafo e il menu
   scorrevole dei prodotti, ed e' li' che i barattoli si mettono (ci pensa
   js/capsule.js, che la misura da solo e li centra dentro). Prima lo spazio
   era di 26px: non bastava e i barattoli finivano sopra il testo.
   Sul computer non cambia nulla: li' i barattoli stanno ai lati del titolo. */
@media (max-width:1024px){
  .home-v2 #prodotti .products-carousel-wrap{ margin-top:172px; }
}

/* ============================================================
   v26 — LA FILA DEI PRODOTTI SULLA HOME: SOLO IL PRODOTTO

   In questa fase il visitatore deve incuriosirsi, non fare i conti. Quindi:
   niente riquadro bianco, niente sfondo colorato dietro l'immagine, niente
   ombre e NIENTE PREZZO. Restano la confezione, il nome, la descrizione e i
   due tasti: "Scopri di piu'" (apre la scheda) e "Acquista" (per chi sa gia'
   cosa vuole).

   Il prezzo NON viene cancellato dal codice della pagina: viene solo nascosto.
   Serve ancora, e resta dov'era, perche' lo leggono la finestra "Scopri di
   piu'" e il carrello. Cancellarlo davvero significherebbe toglierlo anche
   da li'.
   ============================================================ */

/* via il riquadro: la card non e' piu' un oggetto, e' il prodotto e basta */
.home-v2 .products-grid[data-scorrimento] .product-card,
.home-v2 .products-grid[data-scorrimento] .product-card.in-rilievo{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.home-v2 .products-grid[data-scorrimento].in-pausa .product-card:not(.in-rilievo){ opacity:.72 !important; }

/* via lo sfondo dietro la confezione e il velo scuro che ci stava sopra.
   L'immagine passa da "riempi e taglia" a "mostrala tutta": prima le
   confezioni erano ritagliate dentro un riquadro alto 118px. */
.home-v2 .products-grid[data-scorrimento] .product-image{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:visible !important;
  height:150px !important;
  display:flex; align-items:center; justify-content:center;
  padding:0 6px;
}
.home-v2 .products-grid[data-scorrimento] .product-image::after{ display:none !important; }
.home-v2 .products-grid[data-scorrimento] .product-image img{
  width:100% !important; height:100% !important;
  object-fit:contain !important;
  filter:none !important;
}

/* nome e descrizione centrati sotto l'immagine */
.home-v2 .products-grid[data-scorrimento] .product-content{ text-align:center; }
.home-v2 .products-grid[data-scorrimento] .product-content h3{ margin-top:6px; }
.home-v2 .products-grid[data-scorrimento] .product-content p{ margin-left:auto; margin-right:auto; }

/* il prezzo non si vede in questa fase */
.home-v2 .products-grid[data-scorrimento] .product-footer .price{ display:none !important; }

/* i due tasti, incolonnati e centrati */
.home-v2 .products-grid[data-scorrimento] .product-footer{
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:12px !important;
}
.home-v2 .products-grid[data-scorrimento] .product-footer .small-btn{ justify-content:center; }

/* il tasto Acquista in questa fila: piu' piccolo e piu' sobrio. Resta il
   tasto del sito (stesso colore, stessa forma, stesso alone), solo in
   proporzione al nuovo spazio: carattere piu' leggero, pillola piu' sottile e
   piu' larga, alone piu' corto e vicino. Gli altri tasti del sito non
   cambiano. */
.home-v2 .products-grid[data-scorrimento] .cart-add-btn{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  padding:7px 20px !important;
  box-shadow:0 5px 13px rgba(73,197,182,.18) !important;
}
@media (max-width:720px){
  .home-v2 .products-grid[data-scorrimento] .cart-add-btn{
    font-size:9.5px !important;
    padding:6px 12px !important;
    width:auto !important;
    box-shadow:0 4px 10px rgba(73,197,182,.16) !important;
  }
}

/* v27 — SMARTPHONE: nome, descrizione e tasti attaccati alla confezione.
   Il vuoto che si vedeva non erano i margini: era il RIQUADRO dell'immagine.
   La v26 lo ha portato a 150px di altezza per tutti, ma sul telefono la card
   e' larga 122px, quindi la confezione — che viene mostrata intera — ne
   riempie sì e no 90: i restanti 60px erano aria, meta' sopra e meta' sotto.
   Qui il riquadro si stringe attorno alla confezione e gli spazi fra nome,
   descrizione e tasti si accorciano. Computer e tablet non cambiano. */
@media (max-width:720px){
  .home-v2 .products-grid[data-scorrimento] .product-image{
    height:96px !important;
    padding:0 2px !important;
  }
  .home-v2 .products-grid[data-scorrimento] .product-content{ padding:2px 6px 8px !important; }
  .home-v2 .products-grid[data-scorrimento] .product-content h3{ margin:0 0 3px !important; }
  .home-v2 .products-grid[data-scorrimento] .product-content p{ margin:0 0 6px !important; }
  .home-v2 .products-grid[data-scorrimento] .product-footer{
    margin-top:4px !important;
    gap:6px !important;
  }
}

/* ============================================================
   v28 — AL POSTO DELLA DESCRIZIONE, L'ICONA DELL'AREA BENESSERE

   Sotto il nome del prodotto compare l'icona dell'area a cui appartiene
   (gastrointestinale, cardiovascolare, neurologica, energetica,
   uroginecologica). La descrizione scritta non viene cancellata dalla pagina,
   viene solo nascosta: la leggono ancora la finestra "Scopri di piu'" e i
   motori di ricerca. Toglierla davvero significherebbe perderla anche li'.
   ============================================================ */
.home-v2 .products-grid[data-scorrimento] .product-content p{ display:none !important; }
.home-v2 .products-grid[data-scorrimento] .icona-area{
  display:block;
  width:auto;
  height:62px;
  margin:6px auto 2px;
  object-fit:contain;
}
@media (max-width:720px){
  .home-v2 .products-grid[data-scorrimento] .icona-area{ height:44px; margin:4px auto 0; }
}

/* L'etichetta scritta dell'area (GASTRO / CARDIO / NEURO...) non serve piu':
   adesso l'area la dice l'icona sotto il nome, e la confezione resta pulita.
   Nascosta, non cancellata: resta nel codice per la finestra "Scopri di piu'"
   e per chi legge la pagina con un lettore vocale. */
.home-v2 .products-grid[data-scorrimento] .product-badge{ display:none !important; }

/* ============================================================
   v29 — PAGINA PRODOTTI: il prezzo non si spezza piu'

   Nelle schede di area il piede della card mette sulla stessa riga il prezzo
   e i due tasti. Non ci stavano: il prezzo veniva schiacciato a 68px e
   andava a capo DENTRO se stesso, cosi' si leggeva "€ 18,90", poi "€" da
   solo e "17,00" sulla riga dopo. Succedeva su tutti i prodotti con il
   prezzo scontato.

   Adesso prezzo e tasti possono andare su due righe, ma un prezzo non si
   spezza mai al suo interno. Riguarda solo la pagina Prodotti: la home non
   ha le .product-slide.
   ============================================================ */
.product-slide .product-footer{ flex-wrap:wrap; row-gap:10px; justify-content:flex-start; gap:10px; }
/* il prezzo si prende tutta la prima riga e i due tasti stanno insieme sulla
   seconda: piu' ordinato che vedere un tasto accanto al prezzo e l'altro da
   solo sotto */
.product-slide .price{ flex:1 0 100%; min-width:max-content; }
.product-slide .cart-add-btn, .product-slide .details-btn{ flex:0 1 auto; }
.product-slide .price .prezzo-old,
.product-slide .price .prezzo-nuovo{ white-space:nowrap; }

/* ============================================================
   v30 — UN SOLO GRUPPO DI ICONE PER TUTTE E DUE LE PAGINE

   La home e la pagina Prodotti usavano due serie di file diversi con lo
   stesso disegno: cinque PNG da 428 KB in tutto e cinque WebP da 79 KB.
   Adesso usano le stesse cinque WebP.

   C'e' una differenza fra i due file: nei PNG vecchi il disegno occupava
   solo il riquadro centrale della tela (da 53 a 284 in larghezza, da 119 a
   374 in altezza, su una tela di 337x505), mentre nelle WebP nuove riempie
   tutto. A parita' di riquadro, quindi, l'icona verrebbe grande il doppio.
   Qui torna esattamente della misura di prima: 50,5% dell'altezza del
   riquadro, che e' la stessa proporzione che aveva il disegno dentro il file
   vecchio. Il riquadro resta grande com'era, quindi non si sposta nulla
   attorno. Vale su computer e su telefono, perche' e' una percentuale.
   ============================================================ */
/* NOTA sul selettore: in prodotti.css c'e' gia'
   ".category-card .category-icon img{width:100%!important;height:100%!important}".
   Due classi battono una classe sola, quindi una regola scritta come
   ".category-icon img" verrebbe ignorata anche con !important. Qui si usa lo
   stesso selettore a due classi: a parita' di forza vince l'ultimo letto, e
   migliorie.css viene caricato dopo. */
.category-card .category-icon{ display:flex; align-items:center; justify-content:center; }
.category-card .category-icon img{ width:auto !important; height:50.5% !important; object-fit:contain !important; }

/* ============================================================
   v31 — NELLA BARRA STICKY, LA SCRITTA AL POSTO DELL'EMBLEMA

   Vedi il blocco v13 in js/migliorie.js per il momento in cui compare.
   Qui ci sono solo l'aspetto e le misure.

   In cima alla pagina (barra non ancora comparsa) non cambia niente: resta
   il logo grande sopra il hero.
   ============================================================ */

/* barra comparsa: il centro e' vuoto, l'emblema non si vede piu' */
.header.scrolled .logo-img{ opacity:0 !important; visibility:hidden !important; }

/* la scritta: sovrapposta al posto dell'emblema, spenta finche' la barra
   non ha sorpassato la scritta grande del hero */
.header .firma-barra{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(calc(-50% + var(--firma-sposta, 0px)),-50%) scale(.94);
  width:auto;
  height:0;
  max-width:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.9,.24,1);
}
.header .logo-wrap{ position:relative; }

/* La scritta e' alta al massimo 40px, ma mai piu' larga dello spazio libero
   fra i link: quel valore (--firma-spazio) lo calcola js/migliorie.js. Con
   larghezza e altezza "auto" e due massimi, l'immagine si rimpicciolisce
   restando in proporzione. */
.header.scrolled.firma-presa .firma-barra{
  height:auto;
  width:auto;
  max-height:40px;
  max-width:var(--firma-spazio, 150px);
  opacity:1;
  transform:translate(calc(-50% + var(--firma-sposta, 0px)),-50%) scale(1);
}

/* Sul telefono e sul tablet non servono misure a parte: la larghezza
   massima calcolata tiene gia' conto di quanto poco spazio c'e' fra i link. */

/* ============================================================
   v32 — IL FOGLIETTO SI SFOGLIA ANCHE SUL COMPUTER

   In css/style.css ci sono DUE blocchi con lo stesso selettore che si
   contraddicono:
     riga ~2240  "...torna a impilare le pagine e a scorrere"
                 overflow-y:auto  + touch-action:pan-y
     riga ~2294  "...zoom stabile via CSS transform"
                 overflow:hidden  + touch-action:none
   Hanno la stessa forza, quindi vince il secondo perche' viene dopo: il
   riquadro non scorre mai. Sul telefono si notava poco, perche' il
   documento ci sta quasi tutto (678px di pagine in 506 di riquadro) e si
   puo' pizzicare e trascinare; sul computer il documento e' molto piu' alto
   del riquadro (1401px in 590) e piu' della meta' del foglietto era
   irraggiungibile.

   Qui si rimette l'intenzione del primo blocco, e si lascia al secondo
   quello che gli serve davvero: quando si INGRANDISCE, il riquadro non deve
   scorrere, perche' li' lo spostamento lo fa il javascript.

   In piu': il riquadro era rimasto "display:flex" con contenuto centrato,
   eredita' del vecchio visualizzatore a immagini. Con le pagine impilate
   questo centrava il blocco e TAGLIAVA la prima pagina in alto. Adesso le
   pagine partono dall'alto.

   I due blocchi in style.css non li ho tolti: li' dentro ci sono anche
   altre regole (sfondo, altezze minime, posizione) da cui dipende
   l'aspetto del riquadro. Quando vorrai si possono ripulire insieme.
   ============================================================ */
#leafletModal .leaflet-viewer,
.leaflet-overlay .leaflet-viewer{
  display:block !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch;
}
/* ingrandito: comanda il javascript, il riquadro sta fermo */
#leafletViewer.pdf-zoomato{
  overflow:hidden !important;
  touch-action:none !important;
}

/* ============================================================
   v33 — LA FIRMA "SAFIRA HEALTH" ANCHE IN CIMA A PRODOTTI

   Fino a ora la pagina Prodotti si apriva senza il marchio da nessuna
   parte: il centro della barra e' vuoto finche' non si scorre (l'immagine
   del logo li' e' nascosta), e nella pagina non c'era nessuna firma. Ora
   la firma compare sopra "Catalogo prodotti" con la stessa idea della
   home: entra da sola all'apertura, con una salita morbida.

   E' la stessa immagine gia' usata nella barra e nella home
   (scritta-safira-health.webp), quindi non si aggiunge nessun file nuovo
   e sul telefono e' gia' in memoria.

   ATTENZIONE, effetto voluto: da adesso anche su Prodotti la scritta
   nella barra aspetta il sorpasso, come sulla home, invece di comparire
   insieme alla barra. Lo fa da sola js/migliorie.js, che cerca proprio
   .hero-signature: qui prima non la trovava.

   Le misure NON stanno in style.css (Prodotti non lo carica): vanno
   scritte qui per intero.
   ============================================================ */
/* ERRORE CORRETTO (v34): prima queste regole erano agganciate a
   ".sito-v2 .hero-signature". Ma "sito-v2" ce l'hanno TUTTE le pagine,
   home compresa: la firma gigante della home si ritrovava larga 440px
   invece della sua misura, e con lei si spostava tutto il blocco di
   apertura (l'emblema sul computer passava da 434px a 310px). Adesso le
   regole sono agganciate a una classe dedicata, "firma-prodotti", che
   esiste solo nella pagina Prodotti. */
.firma-prodotti{
  display:block;
  width:clamp(300px, 31vw, 440px);   /* 440px sul computer, 300px sul telefono */
  max-width:86vw;                    /* non tocca mai i bordi dello schermo */
  margin:0 auto 22px;
  opacity:0;
  animation:firmaProdottiEntra 1.35s cubic-bezier(.22,.85,.22,1) .25s forwards;
}
.firma-prodotti .scritta-img{ display:block; width:100%; height:auto; }
@keyframes firmaProdottiEntra{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@media (max-width:720px){
  .firma-prodotti{ width:min(300px, 80vw); margin-bottom:18px; }
}
/* chi ha chiesto meno animazioni la vede subito, ferma */
@media (prefers-reduced-motion: reduce){
  .firma-prodotti{ animation:none; opacity:1; }
}

/* ============================================================
   v35 — EMBLEMA PIU' PICCOLO DEL 20%, OVUNQUE

   La misura dell'emblema non sta in un posto solo: in style.css ci sono
   QUATTRO regole, una per fascia di schermo, e ognuna fissa una larghezza
   e un tetto in percentuale della finestra. Ridurre solo la prima non
   avrebbe cambiato niente sul telefono, e ridurre solo la larghezza senza
   il tetto avrebbe lasciato l'emblema grande sugli schermi stretti (dove
   a comandare e' il tetto, non la larghezza). Quindi si riducono tutte e
   quattro, larghezza E tetto, della stessa quantita': 20%.

       fascia di schermo   prima            adesso
       computer            310px / 46vw     248px / 36,8vw
       fino a 720px        255px / 64vw     204px / 51,2vw
       fino a 430px        238px / 62vw     190px / 49,6vw
       fino a 390px        220px / 60vw     176px / 48vw

   Da qui scende tutto il resto da solo: la spinta di apertura e il
   rimpicciolimento durante lo scorrimento sono moltiplicatori di questa
   misura, quindi restano proporzionati senza toccare il javascript.

   Le regole sono agganciate a ".home-v2 .hero-emblem" — due classi invece
   di una — cosi' vincono su quelle di style.css indipendentemente
   dall'ordine in cui i due fogli vengono caricati.
   ============================================================ */
.home-v2 .hero-emblem{
  width:248px !important;
  max-width:min(36.8vw, 248px) !important;
}
/* ATTENZIONE ALL'ORDINE. In style.css queste tre fasce stanno in
   quest'ordine: prima 430, poi 720, poi 390. Non e' un dettaglio: quando
   piu' fasce valgono insieme (a 430px valgono sia "fino a 430" sia "fino a
   720") vince l'ultima scritta. Scrivendole in ordine diverso, a 430px
   avrei fatto vincere una regola che prima perdeva, e l'emblema li' sarebbe
   calato del 25% invece che del 20%. Quindi si ricopia lo stesso ordine. */
@media (max-width:430px){
  .home-v2 .hero-emblem{ width:152px !important; max-width:39.7vw !important; }
}
@media (max-width:720px){
  .home-v2 .hero-emblem{ width:163px !important; max-width:41vw !important; }
}
@media (max-width:390px){
  .home-v2 .hero-emblem{ width:141px !important; max-width:38.4vw !important; }
}