/* style.css - versione CONSOLIDATA
   Generata accorpando le regole duplicate del file originale (append-only).
   Cascata verificata: per ogni (contesto media + selettore) i valori vincenti
   di ogni proprieta' sono identici all'originale. Keyframes e variabili invariati.
   Origine: style_modifica6_fix_chirurgico.css
*/
:root{--primary:#49c5b6;--secondary:#4fa3d9;--accent:#d9c2a3;--light:#F6FAFD;--text:#17304f;--white:#fff;--safira-product-bg:rgba(73, 197, 182, 0.18);--safira-product-bg-soft:rgba(79, 163, 217, 0.10);--safira-product-panel:rgba(73, 197, 182, 0.18);--safira-product-panel-soft:rgba(246, 251, 255, 0.82)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:start;gap:16px 52px;max-width:1320px;margin:0 auto;transition:gap .35s ease, align-items .35s ease}
.nav-side{display:flex;align-items:center;gap:42px;padding-top:0;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:22px;transition:padding .35s ease, border .35s ease, gap .35s ease}
.nav-left{justify-content:flex-end;grid-column:1;grid-row:1}
.nav-right{justify-content:flex-start;grid-column:3;grid-row:1}
.nav-side a::after{content:"";position:absolute;left:0;bottom:1px;width:100%;height:2px;border-radius:999px;background:linear-gradient(135deg,var(--secondary),var(--accent));transform:scaleX(0);transform-origin:center;transition:transform .3s ease}
.nav-side a:hover,.nav-side a.active{color:var(--accent)}
.nav-side a:hover::after,.nav-side a.active::after{transform:scaleX(1)}
.header.scrolled .nav-side a::after{display:none}
.header.scrolled .nav-side a:hover,.header.scrolled .nav-side a.active{background:rgba(46,196,182,.14)}
.logo-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:330px;grid-column:2;grid-row:2;margin-top:42px;margin-bottom:-20px;width:100%;text-align:center;transition:margin .35s ease, min-width .35s ease}
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-width:220px;padding:16px 28px;border-radius:50px;text-decoration:none;transition:.3s;font-weight:700;font-size:16px}
.btn-secondary{border:1px solid rgba(255,255,255,.72);color:white;background:rgba(3,16,31,.26);backdrop-filter:blur(8px)}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-4px)}
.stat{display:flex;justify-content:center;align-items:center;gap:9px;padding:0 14px;border-right:1px solid rgba(255,255,255,.22);min-width:0;text-align:left}
.stat:last-child{border-right:none}
.stat-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;filter:drop-shadow(0 6px 14px rgba(46,196,182,.22))}
.stat-icon img{width:100%;height:100%;display:block;object-fit:contain}
.section{padding:88px 7% 96px;background:white}
.section-title{text-align:center;max-width:980px;margin:0 auto 44px;display:flex;flex-direction:column;align-items:center;gap:14px}
.section-title span{color:#0b9f95;font-weight:800;letter-spacing:2px;font-size:12px;text-transform:uppercase;display:block;line-height:1;margin:0}
.section-title h2{font-size:26px;line-height:1.2;margin:0;color:var(--primary);text-align:center;white-space:nowrap;font-weight:800}
.products-carousel-wrap::before{left:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.82) 42%,rgba(255,255,255,0) 100%)}
.products-carousel-wrap::after{right:0;background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.82) 42%,rgba(255,255,255,0) 100%)}
.products-grid::-webkit-scrollbar{display:none}
.product-image{height:118px;position:relative;overflow:hidden;background:#edf5f8}
.product-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(6,28,53,.16) 100%);pointer-events:none}
.product-image img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02);transition:transform .55s ease}
.product-card:hover .product-image img, .product-card.active .product-image img{transform:scale(1.045)}
.product-badge{position:absolute;top:16px;left:16px;z-index:2;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);color:var(--primary);padding:6px 10px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;box-shadow:0 8px 22px rgba(5,32,60,.12)}
.product-content{padding:14px 14px 14px}
.product-content h3{font-size:15px;line-height:1.15;margin-bottom:8px;color:var(--primary);letter-spacing:-.3px}
.product-content p{line-height:1.55;font-size:11px;color:#243b59;min-height:44px}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.small-btn:hover{background:#0b315b;transform:translateY(-2px)}
.carousel-arrow{position:absolute;top:45%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:1px solid rgba(6,28,53,.08);background:rgba(255,255,255,.86);backdrop-filter:blur(14px);color:var(--primary);font-size:32px;font-weight:300;box-shadow:0 16px 36px rgba(5,32,60,.16);cursor:pointer;z-index:6;transition:transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease}
.carousel-arrow:hover{transform:translateY(-50%) scale(1.08);background:var(--primary);color:white;box-shadow:0 20px 44px rgba(5,32,60,.24)}
.carousel-prev{left:2px}
.carousel-next{right:2px}
.carousel-dots{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:6px}
.carousel-dot{width:26px;height:4px;border-radius:999px;border:none;background:#dce5ed;cursor:pointer;transition:width .3s ease, background .3s ease, opacity .3s ease;opacity:.85}
.carousel-dot.active{width:42px;background:linear-gradient(135deg,var(--secondary),var(--accent));opacity:1;transform:none}
.center-button{text-align:center;margin-top:34px}
.center-button a{min-width:210px;padding:13px 25px}
.science{padding:92px 7%;background:linear-gradient(135deg,#eef7fb,#ffffff)}
.science-grid{max-width:1130px;margin:0 auto;display:flex;flex-direction:column;gap:44px;align-items:center}
.science-copy{text-align:center;max-width:760px;margin:0 auto 10px}
.science-copy span{color:#0b9f95;font-weight:800;letter-spacing:1.8px;font-size:13px;text-transform:uppercase;display:block}
.science-copy h2{font-size:36px;line-height:1.18;margin:14px 0 20px;color:var(--primary);text-align:center}
.science-copy p{line-height:1.8;font-size:16px;color:#1f3858;text-align:center;margin:0 auto;max-width:700px}
.science-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.science-card h3{font-size:15px;color:var(--primary);margin-bottom:8px}
.science-card p{font-size:12px;line-height:1.55;color:#263f5d}
.partner{padding:8px 7% 92px;background:linear-gradient(135deg,#eef7fb,#ffffff)}
.partner-box h2{font-size:28px;margin-bottom:8px;color:white;text-shadow:0 8px 24px rgba(0,0,0,.24)}
.partner-box p{opacity:1;line-height:1.6;color:rgba(255,255,255,.9)}
.footer-grid{max-width:1130px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:46px}
.footer-grid h3,.footer-grid h4{margin-bottom:12px}
.footer-grid p,.footer-grid a{color:#d7e3ef;font-size:14px;line-height:1.8}
.footer-grid a{display:block;text-decoration:none;margin-bottom:7px}
.search-float{position:fixed;right:25px;bottom:100px;width:62px;height:62px;background:linear-gradient(135deg,var(--secondary),var(--accent));color:white;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:27px;z-index:1001;box-shadow:0 14px 30px rgba(0,0,0,.22);cursor:pointer;transition:.3s}
.search-float:hover{transform:translateY(-4px)}
.search-overlay{position:fixed;inset:0;background:rgba(6,28,53,.72);backdrop-filter:blur(8px);z-index:2000;display:none;align-items:center;justify-content:center;padding:24px}
.search-overlay.active{display:flex}
.search-modal{width:min(680px,100%);background:white;border-radius:28px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.28);position:relative}
.search-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:none;border-radius:50%;background:#edf4f8;color:var(--primary);font-size:24px;cursor:pointer}
.search-modal h3{font-size:26px;color:var(--primary);margin-bottom:10px}
.search-modal p{font-size:14px;color:#52677f;margin-bottom:22px;line-height:1.6}
.search-box{display:flex;gap:12px}
.search-box input{flex:1;border:1px solid #dce7ef;border-radius:50px;padding:15px 20px;font-family:'Inter',sans-serif;font-size:15px;outline:none}
.search-box input:focus{border-color:var(--secondary);box-shadow:0 0 0 4px rgba(46,196,182,.12)}
.search-box button{border:none;border-radius:50px;padding:0 24px;background:var(--primary);color:white;font-weight:700;cursor:pointer}
.search-results{margin-top:16px;display:grid;gap:12px;max-height:280px;overflow:auto}
.search-result{border:1px solid #e1ebf2;border-radius:16px;padding:14px 16px;cursor:pointer;transition:.25s}
.search-result:hover{border-color:var(--secondary);background:#f5fffd}
.search-result strong{display:block;color:var(--primary);font-size:15px;margin-bottom:4px}
.search-result span{font-size:13px;color:#52677f}
.search-empty{font-size:14px;color:#52677f;padding:8px 0}
.search-highlight{animation:searchPulse 1.4s ease}
@keyframes searchPulse{
0%{box-shadow:0 0 0 0 rgba(46,196,182,.55)}
100%{box-shadow:0 0 0 18px rgba(46,196,182,0)}
}
.whatsapp{position:fixed;right:25px;bottom:25px;width:62px;height:62px;background:#25D366;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:26px;z-index:1001;box-shadow:0 14px 30px rgba(0,0,0,.22)}
@keyframes fadeUpSoft{
0%{
opacity:0;
transform:translateY(24px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeInSoft{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes floatSoft{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
}
@keyframes glowPulse{
0%,100%{
box-shadow:0 12px 30px rgba(46,196,182,.35);
}
50%{
box-shadow:0 16px 42px rgba(46,196,182,.48);
}
}
.logo-img{width:310px;max-width:100%;height:auto;display:block;margin:0 auto;object-fit:contain;transition:width .35s ease, filter .35s ease;animation:fadeInSoft .9s ease both}
.hero p{font-size:clamp(16px,1.55vw,20px);line-height:1.72;max-width:720px;margin:0 auto;color:rgba(255,255,255,.94);opacity:1;text-shadow:0 10px 28px rgba(0,0,0,.42);animation:fadeUpSoft .78s ease .34s both}
.hero-buttons{margin-top:34px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;animation:fadeUpSoft .78s ease .46s both}
.hero-stats{margin:42px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:790px;align-items:stretch;animation:fadeUpSoft .78s ease .58s both}
.hero-dna{position:absolute;left:0;top:210px;width:34%;max-width:470px;z-index:1;opacity:.92;pointer-events:none;animation:fadeInSoft 1.1s ease .28s both, floatSoft 7s ease-in-out 1.2s infinite}
.hero-tube{position:absolute;right:6%;top:180px;width:18%;max-width:250px;min-width:170px;z-index:1;pointer-events:none;animation:fadeInSoft 1.1s ease .38s both, floatSoft 6.5s ease-in-out 1.3s infinite}
/* Rimuove DNA e provetta dalla hero su tutti i formati: resta solo l'emblema. */
.hero-dna, .hero-tube{display:none !important}
.product-card, .science-card, .partner-box{transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease, filter .35s ease}
.science-card:hover{transform:translateY(-7px);box-shadow:0 22px 52px rgba(5,32,60,.13)}
.partner-box:hover{transform:translateY(-4px);box-shadow:0 28px 68px rgba(5,32,60,.25)}
.nav-side a, .carousel-arrow, .search-float, .whatsapp{will-change:transform}
.reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .75s ease, transform .75s ease}
.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.hero-content, .hero-dna, .hero-tube{z-index:2}
.stat strong{display:block;font-size:20px;line-height:1;color:white;letter-spacing:-.3px;text-shadow:0 8px 20px rgba(0,0,0,.32)}
.section-title h2, .science-copy h2, .product-content h3, .science-card h3{color:#041f3b}
.price{font-weight:800;font-size:15px;letter-spacing:-.2px;color:#078f86}
.small-btn{text-decoration:none;color:white;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:700;white-space:nowrap;transition:background .3s ease, transform .3s ease;background:#061c35}
.search-modal h3, .search-result strong{color:#041f3b}
.search-modal p, .search-result span, .search-empty{color:#405974}
.section, .science, .partner, footer{content-visibility:auto;contain-intrinsic-size:1px 760px}
.product-card, .science-card, .partner-box, .search-modal{contain:layout paint}
.product-image img, .logo-img, .hero-dna, .hero-tube{backface-visibility:hidden}
@media (max-width:480px){.section{padding:64px 5% 70px}.section-title{margin-bottom:28px;gap:10px}.science{padding:66px 5%}.science-card{padding:26px 18px}.partner{padding:0 5% 66px}.partner-box{border-radius:24px;padding:32px 22px}footer{padding:54px 6% 28px}.products-grid{padding-left:14px;padding-right:14px;scroll-padding-left:14px;scroll-padding-right:14px}.product-card{min-width:230px}.search-float, .whatsapp{width:56px;height:56px;right:18px}.search-float{bottom:88px}.whatsapp{bottom:20px}}
.stat-icon img, .science-card .icon img{filter:drop-shadow(0 8px 18px rgba(46,196,182,.22)) brightness(1.08)}
h1,h2,h3,h4, .hero h1, .section-title h2, .science-copy h2, .partner-box h2, .product-content h3, .science-card h3, .footer-grid h3, .footer-grid h4, .search-modal h3{font-family:'Manrope',sans-serif;letter-spacing:-.035em}
.nav-side a, .btn-primary, .btn-secondary, .small-btn, .product-badge, .section-title span, .science-copy span, .hero-kicker, .stat strong, .price{font-family:'Manrope',sans-serif}
.hero h1{font-size:clamp(38px,5.15vw,62px);line-height:1.08;max-width:930px;margin:0 auto 22px;text-shadow:0 14px 38px rgba(0,0,0,.52);animation:fadeUpSoft .78s ease .22s both;font-weight:800;letter-spacing:-.055em}
.section-title h2, .science-copy h2{font-weight:800;letter-spacing:-.045em}
.product-content h3, .science-card h3{font-weight:800}
.hero p, .science-copy p, .product-content p, .science-card p, .partner-box p, .footer-grid p, .footer-grid a{font-family:'Inter',sans-serif;letter-spacing:-.01em}
.nav-side a{color:white;text-decoration:none;font-size:15px;transition:color .3s ease, background .3s ease, transform .3s ease;position:relative;padding:8px 2px;text-shadow:0 6px 18px rgba(0,0,0,.28);font-weight:700;letter-spacing:-.015em}
.hero-kicker, .section-title span, .science-copy span, .product-badge{letter-spacing:.14em}
.stat span{display:block;font-size:10.5px;margin-top:4px;opacity:.92;line-height:1.18;white-space:nowrap;letter-spacing:-.01em}
@media (min-width:1440px){.hero{min-height:900px;padding-top:260px}.hero h1{font-size:64px}.products-carousel-wrap{max-width:1240px}.science-grid,.partner-box,.footer-grid{max-width:1240px}}
@media (min-width:1025px) and (max-width:1439px){.header-inner{max-width:1180px}.hero{min-height:820px}.hero-content{max-width:880px}.products-carousel-wrap{max-width:1120px}}
@media (min-width:721px) and (max-width:1024px){.header-inner{gap:14px 28px}.logo-img{width:230px}.header.scrolled .logo-img{width:92px}.nav-side{gap:18px}.nav-side a{font-size:14px}.hero{padding-top:270px;min-height:780px}.hero h1{font-size:44px}.hero p{font-size:17px}.hero-stats{max-width:720px}.product-card{min-width:170px;max-width:205px}.science-cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:721px) and (max-width:900px){.header-inner{grid-template-columns:1fr;grid-template-rows:auto;gap:12px}.logo-wrap{grid-column:auto;grid-row:auto;margin-top:0;margin-bottom:0;min-width:0;order:1}.nav-left{order:2;grid-column:auto;grid-row:auto;justify-content:center}.nav-right{order:3;grid-column:auto;grid-row:auto;justify-content:center}.nav-side{border-bottom:none;padding-bottom:0;justify-content:center}.hero{padding-top:300px}.products-grid{padding-left:80px;padding-right:80px;scroll-padding-left:80px;scroll-padding-right:80px}}
@media (min-width:391px) and (max-width:480px){.logo-img{width:220px}.header.scrolled .logo-img{width:70px !important}.hero{padding-top:300px}.hero h1{font-size:35px}.hero p{font-size:15.5px}.hero-stats{gap:10px}.stat{padding:12px 10px}.product-card{flex-basis:74vw;min-width:225px}.search-modal{padding:24px;border-radius:24px}.search-box{flex-direction:column}.search-box button{padding:14px 20px}}
@media (max-height:520px) and (orientation:landscape){.hero{padding-top:190px;padding-bottom:48px;min-height:auto}.logo-img{width:180px}.header.scrolled .logo-img{width:62px !important}.hero h1{font-size:32px}.hero p{font-size:14px}.hero-stats{display:none}}
img,video,canvas,svg{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
.partner-box{max-width:1130px;margin:0 auto;border-radius:30px;color:white;padding:46px 74px;display:flex;align-items:center;justify-content:space-between;gap:36px;box-shadow:0 22px 55px rgba(5,32,60,.2);background:linear-gradient(135deg,#49c5b6,#4fa3d9)}
.btn-primary{box-shadow:0 12px 30px rgba(46,196,182,.35);animation:glowPulse 3.6s ease-in-out infinite;color:#ffffff;text-shadow:0 4px 14px rgba(0,0,0,.18);background:linear-gradient(135deg,#49c5b6,#d9c2a3)}
.carousel-dot.active, .nav-side a::after{background:linear-gradient(135deg,#49c5b6,#d9c2a3)}
footer{color:white;padding:64px 7% 32px;background:linear-gradient(135deg,#4fa3d9,#2d6ea1) !important}
.footer-grid p, .footer-grid a, .footer-grid h3, .footer-grid h4{color:white !important}
.header.scrolled .nav-side a:hover, .header.scrolled .nav-side a.active{background:rgba(255,255,255,.075) !important}
@keyframes stickySoftEnter{
0%{
transform:translateY(-10px);
background:rgba(79,163,217,.04);
backdrop-filter:blur(2px) saturate(105%);
-webkit-backdrop-filter:blur(2px) saturate(105%);
box-shadow:0 0 0 rgba(0,0,0,0);
}
55%{
transform:translateY(0);
background:rgba(79,163,217,.13);
backdrop-filter:blur(9px) saturate(115%);
-webkit-backdrop-filter:blur(9px) saturate(115%);
}
100%{
transform:translateY(0);
background:rgba(79,163,217,.18);
backdrop-filter:blur(12px) saturate(118%);
-webkit-backdrop-filter:blur(12px) saturate(118%);
box-shadow:0 8px 22px rgba(0,0,0,.055);
}
}
.header.scrolled .logo-img{width:118px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.10));transition:width .58s cubic-bezier(.22,.9,.24,1), filter .58s ease, transform .58s cubic-bezier(.22,.9,.24,1);transform:scale(1)}
.header.scrolled .nav-side a{padding:9px 12px;border-radius:999px;text-shadow:0 2px 8px rgba(0,0,0,.22);background:rgba(255,255,255,.032) !important;box-shadow:none !important;transition:background .45s ease,
color .35s ease,
padding .58s cubic-bezier(.22,.9,.24,1),
font-size .58s cubic-bezier(.22,.9,.24,1)}
.header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:22px 7% 0;color:white;transform:translateY(0);will-change:transform, padding, background, backdrop-filter;transition:padding .72s cubic-bezier(.18,.85,.22,1),
background .72s cubic-bezier(.18,.85,.22,1),
box-shadow .72s cubic-bezier(.18,.85,.22,1),
backdrop-filter .72s cubic-bezier(.18,.85,.22,1),
border-color .72s cubic-bezier(.18,.85,.22,1),
transform .72s cubic-bezier(.18,.85,.22,1)}
.header .logo-wrap, .header .nav-side, .header .nav-side a{transition:opacity .62s ease,
transform .72s cubic-bezier(.18,.85,.22,1),
gap .72s cubic-bezier(.18,.85,.22,1),
padding .72s cubic-bezier(.18,.85,.22,1),
font-size .72s cubic-bezier(.18,.85,.22,1),
background .62s ease,
filter .62s ease}
@keyframes stickyGlassFadeIn{
0%{
opacity:.72;
transform:translateY(-14px);
background:rgba(79,163,217,0);
backdrop-filter:blur(0px) saturate(100%);
-webkit-backdrop-filter:blur(0px) saturate(100%);
box-shadow:0 0 0 rgba(0,0,0,0);
border-bottom-color:rgba(255,255,255,0);
}
35%{
opacity:.86;
transform:translateY(-5px);
background:rgba(79,163,217,.06);
backdrop-filter:blur(5px) saturate(108%);
-webkit-backdrop-filter:blur(5px) saturate(108%);
}
70%{
opacity:.96;
transform:translateY(0);
background:rgba(79,163,217,.13);
backdrop-filter:blur(10px) saturate(116%);
-webkit-backdrop-filter:blur(10px) saturate(116%);
}
100%{
opacity:1;
transform:translateY(0);
background:rgba(79,163,217,.18);
backdrop-filter:blur(12px) saturate(118%);
-webkit-backdrop-filter:blur(12px) saturate(118%);
box-shadow:0 8px 22px rgba(0,0,0,.055);
border-bottom-color:rgba(255,255,255,.075);
}
}
@keyframes mainLogoFadeCompact{
0%{
opacity:.55;
transform:translateY(8px) scale(1.04);
filter:blur(.4px);
}
55%{
opacity:.82;
transform:translateY(2px) scale(.98);
filter:blur(.15px);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}
@keyframes mainNavFadeCompact{
0%{
opacity:.58;
transform:translateY(8px);
filter:blur(.35px);
}
60%{
opacity:.86;
transform:translateY(2px);
filter:blur(.1px);
}
100%{
opacity:1;
transform:translateY(0);
filter:blur(0);
}
}
.header:not(.scrolled) .logo-wrap, .header:not(.scrolled) .nav-side{animation:mainMenuFadeBack .56s ease both}
@keyframes mainMenuFadeBack{
0%{
opacity:.72;
transform:translateY(-4px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
.hero{min-height:850px;position:relative;display:flex;align-items:center;justify-content:center;padding:245px 7% 86px;overflow:hidden;padding-top:285px !important}
.hero-kicker, .hero-badge{margin-top:-12px !important}
.product-modal-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(6,28,53,.18));pointer-events:none}
@keyframes modalFadeIn{
from{opacity:0}
to{opacity:1}
}
@keyframes modalScaleIn{
from{opacity:0;transform:translateY(18px) scale(.96)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.header:not(.scrolled) .logo-img{width:420px !important;max-width:100%}
.header:not(.scrolled) .logo-img[alt]{font-size:0 !important}
.hero-section, .main-hero, .hero-wrapper{background:radial-gradient(circle at top, rgba(120,255,235,.12), transparent 34%),
linear-gradient(180deg,
#2e889b 0%,
#2b7f92 34%,
#2d7a8f 62%,
#317f93 100%) !important}
body{font-family:'Inter',sans-serif;color:var(--text);overflow-x:hidden;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-width:320px;background:linear-gradient(180deg,
#2d8397 0%,
#2b7f92 45%,
#317f93 100%) !important}
.product-modal-overlay{position:fixed;inset:0;z-index:3200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,16,31,.62);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
.product-modal-overlay.active{display:flex;animation:singleProductFade .28s ease both}
.product-modal{gap:0;animation:modalScaleIn .34s cubic-bezier(.2,.85,.25,1) both;width:min(980px,100%);max-height:90vh;overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;border-radius:36px;background:rgba(255,255,255,.95);box-shadow:0 36px 100px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.38);position:relative}
.product-modal-image{position:relative;min-height:480px;background:linear-gradient(135deg,#eaf9fb,#ffffff);overflow:hidden}
.product-modal-image img{width:100%;height:100%;object-fit:cover;display:block}
.product-modal-content{padding:44px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.product-modal-badge{align-self:flex-start;padding:8px 13px;border-radius:999px;background:rgba(73,197,182,.12);color:#0b8d83;font-family:Manrope,sans-serif;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.product-modal h3{font-family:Manrope,sans-serif;font-size:clamp(36px,4.5vw,54px);line-height:1;letter-spacing:-.055em;color:#082f52;margin-bottom:18px}
.product-modal p{font-size:15px;line-height:1.85;color:#405d78;margin-bottom:20px}
.product-detail-box{display:grid;gap:10px;margin:4px 0 22px}
.product-detail-item{padding:14px 16px;border-radius:18px;background:rgba(73,197,182,.08)}
.product-detail-item strong{display:block;font-family:Manrope,sans-serif;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#0b8d83;margin-bottom:6px}
.product-detail-item span{font-size:13px;line-height:1.6;color:#405d78}
.product-modal-price{font-family:Manrope,sans-serif;font-size:32px;font-weight:800;color:#078f86;margin-bottom:24px}
.product-modal-actions{display:flex;gap:12px;flex-wrap:wrap}
.product-modal-actions a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:999px;font-family:Manrope,sans-serif;font-size:13px;font-weight:800}
.product-modal-whatsapp{background:linear-gradient(135deg,#49c5b6,#d9c2a3);color:#03263f}
.product-modal-secondary{background:#082f52;color:white}
.product-modal-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:none;border-radius:50%;background:white;color:#082f52;font-size:28px;cursor:pointer;z-index:5;box-shadow:0 10px 28px rgba(0,0,0,.15)}
@keyframes singleProductFade{
from{opacity:0}
to{opacity:1}
}
.header:not(.scrolled) .logo-wrap .logo-img, .header:not(.scrolled) .logo-img{font-size:0 !important;color:transparent !important;width:340px !important;max-width:340px !important;height:auto !important;display:block !important;object-fit:contain !important;border:0 !important;outline:0 !important;background:transparent !important;filter:drop-shadow(0 12px 30px rgba(0,0,0,.16))}
.hero-kicker{display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;padding:9px 18px;border:1px solid rgba(110,231,183,.34);border-radius:999px;background:rgba(3,16,31,.34);backdrop-filter:blur(10px);color:#8ff4d0;font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:fadeUpSoft .75s ease .12s both;margin-top:0 !important}
.header.scrolled{background:rgba(79,163,217,.18) !important;backdrop-filter:blur(12px) saturate(118%) !important;-webkit-backdrop-filter:blur(12px) saturate(118%) !important;box-shadow:0 8px 22px rgba(0,0,0,.055) !important;border-bottom:1px solid rgba(255,255,255,.075) !important;animation:stickyGlassFadeIn .82s cubic-bezier(.18,.85,.22,1) both;min-height:0 !important;padding:14px 7% !important}
.header.scrolled .header-inner{justify-items:center;max-width:1120px;margin:0 auto;display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;grid-template-rows:1fr !important;align-items:center !important;min-height:118px !important;height:118px !important;gap:34px !important}
.header.scrolled .nav-left{justify-self:end;padding-right:16px;grid-column:1 !important;grid-row:1 !important;justify-content:flex-end !important;align-self:center !important}
.header.scrolled .nav-right{justify-self:start;padding-left:16px;grid-column:3 !important;grid-row:1 !important;justify-content:flex-start !important;align-self:center !important}
.header.scrolled .logo-wrap{margin-top:0;margin-bottom:0;animation:mainLogoFadeCompact .78s cubic-bezier(.18,.85,.22,1) both;display:flex;justify-content:center;align-items:center;grid-column:2 !important;grid-row:1 !important;justify-self:center !important;align-self:center !important;width:210px !important;min-width:210px !important;height:110px !important;min-height:110px !important;max-height:none !important;margin:0 !important;padding:0 !important;overflow:visible !important;line-height:0 !important;transform:translateY(8px) !important}
.header.scrolled .logo-wrap .logo-img, .header.scrolled .logo-img{width:210px !important;max-width:210px !important;height:auto !important;max-height:none !important;object-fit:contain !important;transform:none !important;transform-origin:center center !important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.16)) !important}
.header.scrolled .nav-side{border-bottom:none;transition:gap .58s cubic-bezier(.22,.9,.24,1), padding .58s cubic-bezier(.22,.9,.24,1), border .58s ease;animation:mainNavFadeCompact .78s cubic-bezier(.18,.85,.22,1) both;min-width:260px;padding-top:0 !important;padding-bottom:0 !important;align-items:center !important;height:auto !important;min-height:0 !important;padding:0 !important;gap:34px !important}
@keyframes safiraEmblemFloatPremium{
  0%,100%{
    transform:translateX(-50%) translateY(0) scale(1);
  }
  50%{
    transform:translateX(-50%) translateY(-8px) scale(1.025);
  }
}
@keyframes safiraSignatureFadeElegant{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
.hero-signature{font-family:'Qwigley', cursive !important;font-size:clamp(90px, 16vw, 176px) !important;font-weight:400 !important;line-height:.86 !important;color:rgba(255,255,255,.98) !important;text-align:center !important;letter-spacing:.01em !important;margin:0 auto 24px !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;text-shadow:none !important;white-space:nowrap !important;position:relative !important;z-index:5 !important;display:block !important;width:max-content !important;max-width:92vw !important;opacity:0;animation:safiraSignatureFadeElegant 1.45s cubic-bezier(.22,.85,.22,1) .35s forwards !important;will-change:opacity, transform !important}
@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}.hero-emblem, .hero-signature{animation:none !important;opacity:1 !important;transform:none !important;will-change:auto !important}}
.header:not(.scrolled){padding:18px 5% 0 !important}
.header:not(.scrolled) .header-inner{justify-items:center !important;display:grid !important;grid-template-columns:minmax(0,1fr) clamp(112px,18vw,220px) minmax(0,1fr) !important;grid-template-rows:auto !important;align-items:center !important;max-width:1120px !important;margin:0 auto !important;gap:0 !important}
.header:not(.scrolled) .logo-wrap{margin-bottom:-24px !important;display:flex !important;justify-content:center !important;align-items:center !important;border:none !important;background:transparent !important;position:absolute !important;left:50% !important;top:78px !important;transform:translateX(-50%) !important;padding:0 !important;max-width:none !important;z-index:8 !important;overflow:visible !important;grid-column:2 !important;grid-row:1 !important;width:100% !important;min-width:0 !important;height:1px !important;margin:0 !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
.header:not(.scrolled) .nav-left{padding-right:18px !important;grid-column:1 !important;grid-row:1 !important;justify-self:end !important;justify-content:flex-end !important;padding:0 !important;border-bottom:none !important}
.header:not(.scrolled) .nav-right{padding-left:18px !important;grid-column:3 !important;grid-row:1 !important;justify-self:start !important;justify-content:flex-start !important;padding:0 !important;border-bottom:none !important}
.header:not(.scrolled) .nav-side{min-width:255px !important;display:flex !important;align-items:center !important;gap:34px !important}
@keyframes safiraEmblemFloatCentered{
  0%,100%{transform:translate3d(-50%,0,0) scale(1)}
  50%{transform:translate3d(-50%,-7px,0) scale(1.018)}
}
.header:not(.scrolled) + .hero .hero-emblem, body:not(.is-scrolled) .hero-emblem, .hero .hero-emblem{opacity:1 !important;filter:none !important;-webkit-filter:none !important;mix-blend-mode:normal !important}
.header:not(.scrolled) + .hero .hero-emblem{transform:translate3d(-50%,0,0) scale(1) !important;animation:safiraEmblemFloatCentered 7.5s ease-in-out .8s infinite !important}
.header.scrolled + .hero .hero-emblem{animation:none !important;opacity:0 !important;transform:translate3d(-50%,-36px,0) scale(.82) !important;filter:blur(2px) !important;-webkit-filter:blur(2px) !important;pointer-events:none !important}
.hero-main-title{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;gap:8px !important;max-width:980px !important}
.hero-title-small{display:block !important;font-size:clamp(23px,3.1vw,40px) !important;line-height:1.14 !important;font-weight:600 !important;letter-spacing:-.035em !important}
.hero-title-big{display:block !important;width:100% !important;text-align:center !important;font-size:clamp(56px,8.2vw,106px) !important;line-height:.92 !important;font-weight:900 !important;letter-spacing:.035em !important}
.hero-main-description{max-width:920px !important;font-size:clamp(15px,1.35vw,18px) !important;line-height:1.82 !important}
.hero-emblem{position:absolute;height:auto;display:block;object-fit:contain;z-index:4;pointer-events:none;filter:drop-shadow(0 18px 42px rgba(0,0,0,.22));animation:safiraEmblemFloatPremium 7.5s ease-in-out .9s infinite !important;will-change:transform !important;left:50% !important;right:auto !important;width:310px !important;max-width:min(46vw,310px) !important;transform:translate3d(-50%,0,0) scale(1) !important;transform-origin:center center !important;opacity:1 !important;transition:opacity .55s ease, transform .55s cubic-bezier(.22,.85,.22,1), filter .55s ease !important;top:30px !important}
.products-carousel-wrap{position:relative;margin:0 auto;padding:0 52px;isolation:isolate;touch-action:pan-y pinch-zoom;max-width:1080px;padding-left:44px;padding-right:44px}
.products-carousel-wrap::before, .products-carousel-wrap::after{content:"";position:absolute;top:0;z-index:4;pointer-events:none;width:82px;bottom:54px}
.products-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:34px 170px 52px;-webkit-overflow-scrolling:touch;scrollbar-width:none;perspective:1200px;overscroll-behavior-x:contain;touch-action:pan-y pinch-zoom !important;gap:20px;padding-left:clamp(92px, 12vw, 132px);padding-right:clamp(92px, 12vw, 132px);scroll-padding-left:50%;scroll-padding-right:50%;align-items:stretch}
.product-card{background:linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%);border:1px solid rgba(6,28,53,.06);border-radius:28px;overflow:hidden;box-shadow:0 18px 45px rgba(5,32,60,.10);transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .45s ease, box-shadow .45s ease, border-color .45s ease;position:relative;opacity:.42;transform:scale(.78) translateY(10px);filter:saturate(.72) blur(.15px);will-change:transform, opacity;cursor:pointer;flex:0 0 clamp(178px, 18.5vw, 214px);min-width:178px;max-width:214px;scroll-snap-align:center}
.product-card.active{opacity:1;filter:saturate(1.08) blur(0);box-shadow:0 34px 80px rgba(5,32,60,.22);border-color:rgba(46,196,182,.22);z-index:3;transform:scale(1.04) translateY(-6px)}
.product-card:hover{opacity:1;filter:saturate(1.05);transform:scale(.92) translateY(-4px)}
.product-card.active:hover{transform:scale(1.07) translateY(-10px)}
.hero-stats .stat{gap:24px !important;align-items:center !important}
.hero-stats .stat-icon{width:132px !important;height:132px !important;flex:0 0 132px !important;display:flex !important;align-items:center !important;justify-content:center !important}
.hero-stats .stat-icon img{width:100% !important;height:100% !important;object-fit:contain !important;display:block !important}
.science-card{background:white;border-radius:16px;text-align:center;box-shadow:0 15px 38px rgba(5,32,60,.08);padding:42px 30px !important}
.science-card .icon{margin-bottom:22px;width:190px !important;height:190px !important;margin:0 auto 30px !important;display:flex !important;align-items:center !important;justify-content:center !important}
.science-card .icon img{width:100% !important;height:100% !important;object-fit:contain !important;display:block !important}
@media (max-width:1050px){.header{padding:20px 5% 0}.header.scrolled{padding:10px 5%;background:rgba(6,28,53,.86);backdrop-filter:blur(18px)}.header-inner{gap:26px}.header.scrolled .header-inner{gap:10px 18px}.logo-wrap{min-width:260px}.logo-img{width:255px}.header.scrolled .logo-img{width:78px}.nav-side{gap:20px}.header.scrolled .nav-side{gap:12px}.hero{padding-top:285px}.hero-content{margin-top:34px}.hero-dna{width:38%;opacity:.72}.hero-tube{right:3%;width:20%;opacity:.9}.hero h1{font-size:42px}.hero-stats{grid-template-columns:repeat(4,1fr);gap:0}.stat:nth-child(2){border-right:1px solid rgba(255,255,255,.16)}.science-cards{grid-template-columns:repeat(3,1fr);gap:18px}.science-grid{grid-template-columns:1fr}.products-carousel-wrap{max-width:920px;padding-left:34px;padding-right:34px}.products-grid{grid-template-columns:1fr;gap:18px;padding-left:clamp(58px, 10vw, 92px);padding-right:clamp(58px, 10vw, 92px)}.product-card{flex-basis:clamp(168px, 25vw, 205px);min-width:168px;max-width:205px}.hero-stats .stat{gap:18px !important}.hero-stats .stat-icon{width:100px !important;height:100px !important;flex-basis:100px !important}.science-card .icon{width:150px !important;height:150px !important}}
.hero-content{max-width:930px;text-align:center;color:white;position:relative !important;z-index:3;margin-top:42px !important}
@media (max-width:430px){.header:not(.scrolled){padding:16px 3.5% 0 !important}.header:not(.scrolled) .header-inner{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr) !important}.header:not(.scrolled) .nav-side{gap:14px !important}.header:not(.scrolled) .nav-side a{font-size:18px !important;letter-spacing:-.035em !important}.hero-emblem{top:112px !important;width:238px !important;max-width:62vw !important}.hero-content{margin-top:78px !important}}
.hero-buttons-single{width:100% !important;display:flex !important;justify-content:center !important;align-items:center !important;margin:26px auto 26px !important;gap:0 !important}
.hero-buttons-single .btn-primary{margin:0 auto !important}
.product-image, .product-modal-image{background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, var(--safira-product-bg), var(--safira-product-bg-soft)) !important}
.product-image::after, .product-modal-image::after{background:linear-gradient(180deg, rgba(255,255,255,0), rgba(73,197,182,.06)) !important}
.product-card .product-image, .product-modal-image, .product-slide .product-image{background-color:var(--safira-product-panel) !important;background-image:linear-gradient(135deg, rgba(73,197,182,.20), rgba(79,163,217,.10)) !important;box-shadow:none !important}
.product-card .product-image::after, .product-modal-image::after, .product-slide .product-image::after{background:rgba(73,197,182,.035) !important}
.product-card .product-image img, .product-modal-image img, .product-slide .product-image img{object-fit:contain !important;background:transparent !important}
.hero-area-menu{width:min(820px,100%);margin:34px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.hero-area-card{--area-color:#49c5b6;position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:106px;padding:18px 18px;border-radius:24px;text-decoration:none !important;color:#ffffff !important;background:radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--area-color) 18%, transparent), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045));border:1px solid color-mix(in srgb, var(--area-color) 42%, rgba(255,255,255,.20));box-shadow:0 18px 44px rgba(3,16,31,.22);backdrop-filter:blur(12px) saturate(135%);-webkit-backdrop-filter:blur(12px) saturate(135%);overflow:hidden;transition:transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease}
.hero-area-card::before{content:"";position:absolute;inset:auto 18px 0 18px;height:3px;border-radius:999px 999px 0 0;background:linear-gradient(90deg, transparent, var(--area-color), transparent);opacity:.85}
.hero-area-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--area-color) 72%, rgba(255,255,255,.28));box-shadow:0 24px 58px rgba(3,16,31,.30);background:radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--area-color) 24%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06))}
.hero-area-gastro{--area-color:#49c5b6}
.hero-area-cardio{--area-color:#e85d73}
.hero-area-neuro{--area-color:#8c74ff}
.hero-area-energia{--area-color:#f4b747}
.hero-area-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--area-color) 16%, rgba(255,255,255,.08));border:1px solid color-mix(in srgb, var(--area-color) 42%, rgba(255,255,255,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.16);flex:0 0 auto}
.hero-area-icon img{width:38px;height:38px;object-fit:contain;display:block;filter:drop-shadow(0 7px 14px color-mix(in srgb, var(--area-color) 35%, transparent)) brightness(1.10)}
.hero-area-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left}
.hero-area-text strong{display:block;font-family:'Manrope','Inter',sans-serif;font-size:clamp(18px,2.2vw,25px);line-height:1.05;letter-spacing:-.045em;color:#ffffff;text-decoration:none !important;text-shadow:0 8px 22px rgba(0,0,0,.22);white-space:normal}
.hero-area-text small{display:block;margin-top:8px;font-family:'Inter',sans-serif;font-size:13px;line-height:1.25;color:rgba(255,255,255,.78);text-decoration:none !important}
.hero-area-arrow{font-size:24px;line-height:1;color:var(--area-color);text-decoration:none !important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));transition:transform .28s ease}
.hero-area-card:hover .hero-area-arrow{transform:translateX(4px)}
@media (max-width:720px){.header{position:fixed;padding:16px 4% 0}.header-inner{grid-template-columns:1fr;grid-template-rows:auto;gap:12px}.logo-wrap{order:1;min-width:0;grid-column:auto;grid-row:auto;margin-top:0;margin-bottom:0}.logo-img{width:245px}.nav-left{order:2}.nav-right{order:3}.nav-side{justify-content:center;border-bottom:none;padding:0;gap:24px}.logo-text{font-size:38px;letter-spacing:6px}.logo-subtitle{letter-spacing:4px}.header.scrolled + .hero{padding-top:145px}.hero-dna,.hero-tube{display:none}.hero-buttons{flex-direction:column;align-items:center;margin-top:28px}.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:34px;max-width:520px;width:100%}.stat strong{font-size:19px;line-height:1}.stat span{font-size:10.5px;line-height:1.2;white-space:normal;max-width:105px}.section{padding:72px 6% 78px}.section-title{margin-bottom:34px}.section-title h2,.science-copy h2{font-size:24px;white-space:normal}.products-carousel-wrap::before,.products-carousel-wrap::after{display:none}.science{padding:76px 6%}.science-grid{gap:34px}.science-cards{gap:16px}.partner{padding:0 6% 74px}.product-card.active{transform:scale(1) translateY(-4px)}.product-card:hover, .product-card.active:hover{transform:scale(1) translateY(-4px)}.product-image{height:135px}.carousel-prev{left:8px}.carousel-next{right:8px}.carousel-arrow{width:46px;height:46px;font-size:28px}.carousel-dots{margin-top:2px}.partner-box{gap:24px;padding:36px 26px;flex-direction:column;text-align:center}.footer-grid{gap:28px;grid-template-columns:1fr}.hero p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.93)}.stat{border-right:none;padding:14px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);justify-content:flex-start;align-items:center;min-height:74px;box-shadow:0 12px 32px rgba(0,0,0,.12);background:rgba(3,16,31,.34);border-color:rgba(255,255,255,.18)}body{text-rendering:optimizeSpeed}.header, .header.scrolled, .hero-kicker, .stat, .search-modal, .product-badge, .carousel-arrow{backdrop-filter:none}.hero-dna, .hero-tube{display:none !important;animation:none !important}.logo-img, .hero-kicker, .hero h1, .hero p, .hero-buttons, .hero-stats, .btn-primary{animation:none !important}.product-card, .product-card.active, .product-card:hover, .product-card.active:hover{filter:none;will-change:auto}.product-image img{transition:none}.carousel-arrow, .search-float, .whatsapp{box-shadow:0 10px 24px rgba(0,0,0,.18)}.btn-primary{box-shadow:0 12px 28px rgba(46,196,182,.28)}.reveal-on-scroll{transition:opacity .45s ease, transform .45s ease}.header.scrolled .logo-img{width:72px !important;max-height:34px;object-fit:contain}.stat-icon{text-align:center;width:34px !important;height:34px !important}.hero h1{font-size:36px;line-height:1.08;text-shadow:0 12px 32px rgba(0,0,0,.55);letter-spacing:-.045em}.section-title h2, .science-copy h2{letter-spacing:-.035em}.header.scrolled .nav-side a:hover, .header.scrolled .nav-side a.active{background:rgba(255,255,255,.065) !important}.hero-kicker, .hero-badge{margin-top:-10px !important}.product-modal-close{top:12px;right:12px}.header:not(.scrolled) .logo-img{width:330px !important}.hero-kicker{font-size:10px;letter-spacing:1.8px;padding:8px 14px;margin-bottom:15px;margin-top:-6px !important}.product-modal-overlay{padding:12px;align-items:flex-end}.product-modal{grid-template-columns:1fr;border-radius:30px 30px 0 0;max-height:92vh;overflow:auto}.product-modal-image{min-height:230px;height:230px}.product-modal-content{padding:28px}.product-modal h3{font-size:36px}.product-modal-actions a{width:100%}.header:not(.scrolled) .logo-wrap{min-width:0 !important;margin-bottom:-42px !important;left:50% !important;transform:translateX(-50%) !important;top:74px !important}.header:not(.scrolled) .logo-wrap .logo-img, .header:not(.scrolled) .logo-img{width:305px !important;max-width:305px !important}.header.scrolled .nav-side{line-height:1;justify-content:center;min-width:0;width:auto;height:38px !important;min-height:38px !important;gap:8px !important;flex-wrap:nowrap !important}.header.scrolled{padding-top:6px;padding-bottom:6px;background:rgba(79,163,217,.16) !important;backdrop-filter:blur(10px) saturate(115%) !important;-webkit-backdrop-filter:blur(10px) saturate(115%) !important;box-shadow:0 6px 18px rgba(0,0,0,.05) !important;animation:stickyGlassFadeInMobile .76s cubic-bezier(.18,.85,.22,1) both;padding:6px 2.5% !important}.header.scrolled .header-inner{width:100% !important;max-width:100% !important;grid-template-columns:minmax(0,1fr) 148px minmax(0,1fr) !important;min-height:86px !important;height:86px !important;gap:4px !important;align-items:center !important;overflow:visible !important}.header.scrolled .logo-wrap{margin:0 auto;line-height:0;justify-self:center;display:flex;grid-column:2;max-height:none !important;width:148px !important;min-width:148px !important;height:62px !important;min-height:62px !important;transform:translateY(4px) !important;justify-content:center !important;align-items:center !important;overflow:visible !important}.header.scrolled .logo-wrap .logo-img, .header.scrolled .logo-img{transform:scale(1.10) !important;width:148px !important;max-width:148px !important;height:auto !important;max-height:none !important;object-fit:contain !important}.header.scrolled .nav-left, .header.scrolled .nav-right{min-width:0 !important;width:100% !important;gap:4px !important;flex-wrap:nowrap !important}.header.scrolled .nav-left{grid-column:1;justify-self:end;padding-right:6px;justify-content:flex-start !important}.header.scrolled .nav-right{grid-column:3;justify-self:start;padding-left:6px;justify-content:flex-end !important}.header.scrolled .nav-side a{background:rgba(255,255,255,.028) !important;font-size:10.8px !important;padding:6px 7px !important;border-radius:999px !important;white-space:nowrap !important;letter-spacing:-.02em !important}.hero{min-height:auto;padding:220px 6% 62px;padding-top:260px !important}.hero-signature{font-size:clamp(86px, 22vw, 124px) !important;line-height:.82 !important;margin-bottom:20px !important;max-width:96vw !important;animation-duration:1.25s !important}.header:not(.scrolled){padding:18px 4% 0 !important}.header:not(.scrolled) .header-inner{gap:0 8px !important;grid-template-columns:minmax(0,1fr) clamp(72px,16vw,96px) minmax(0,1fr) !important;width:100% !important;max-width:100% !important}.header:not(.scrolled) .nav-side{min-width:0 !important;gap:18px !important;width:100% !important;flex-wrap:nowrap !important}.header:not(.scrolled) .nav-left{padding-right:5px !important;justify-self:end !important;justify-content:flex-end !important}.header:not(.scrolled) .nav-right{padding-left:5px !important;justify-self:start !important;justify-content:flex-start !important}.header:not(.scrolled) .nav-side a{font-size:clamp(17px,4.15vw,22px) !important;padding:7px 0 !important;background:transparent !important;white-space:nowrap !important}.header.scrolled + .hero .hero-emblem{transform:translate3d(-50%,-28px,0) scale(.78) !important}.hero-main-title{gap:6px !important;margin-bottom:18px !important}.hero-title-small{font-size:clamp(21px,7vw,30px) !important;line-height:1.16 !important}.hero-title-big{font-size:clamp(43px,13.5vw,64px) !important;line-height:.95 !important;letter-spacing:.02em !important}.hero-main-description{max-width:94vw !important;font-size:14.8px !important;line-height:1.72 !important}.hero-emblem{animation-duration:7.2s !important;left:50% !important;width:255px !important;max-width:64vw !important;top:20px !important}.products-carousel-wrap{padding:0 18px;touch-action:pan-y pinch-zoom;padding-left:18px;padding-right:18px}.products-grid{padding:26px 22px 42px;display:flex;scroll-behavior:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom !important;overscroll-behavior-x:auto;gap:16px;padding-left:calc((100vw - 76vw) / 2);padding-right:calc((100vw - 76vw) / 2);scroll-padding-left:50%;scroll-padding-right:50%}.product-card{border-radius:26px;flex:0 0 76vw;min-width:220px;max-width:300px}.hero-stats .stat{gap:16px !important;min-height:112px !important}.hero-stats .stat-icon{width:78px !important;height:78px !important;flex-basis:78px !important}.science-card{padding:34px 22px !important}.science-card .icon{width:126px !important;height:126px !important;margin-bottom:24px !important}.hero-content{margin-top:86px !important}.hero-buttons-single{margin:22px auto 22px !important;flex-direction:row !important}.hero-area-menu{width:100%;margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hero-area-card{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:138px;padding:16px 10px 14px;gap:9px;border-radius:20px}.hero-area-icon{width:52px;height:52px;border-radius:16px}.hero-area-icon img{width:34px;height:34px}.hero-area-text{align-items:center;text-align:center}.hero-area-text strong{font-size:15.5px;line-height:1.08}.hero-area-text small{margin-top:6px;font-size:11px;line-height:1.25}.hero-area-arrow{font-size:18px}@keyframes stickySoftEnterMobile{
0%{
transform:translateY(-8px);
background:rgba(79,163,217,.035);
backdrop-filter:blur(1px) saturate(105%);
-webkit-backdrop-filter:blur(1px) saturate(105%);
}
60%{
transform:translateY(0);
background:rgba(79,163,217,.115);
backdrop-filter:blur(7px) saturate(112%);
-webkit-backdrop-filter:blur(7px) saturate(112%);
}
100%{
transform:translateY(0);
background:rgba(79,163,217,.16);
backdrop-filter:blur(10px) saturate(115%);
-webkit-backdrop-filter:blur(10px) saturate(115%);
}
}@keyframes stickyGlassFadeInMobile{
0%{
opacity:.70;
transform:translateY(-12px);
background:rgba(79,163,217,0);
backdrop-filter:blur(0px) saturate(100%);
-webkit-backdrop-filter:blur(0px) saturate(100%);
}
40%{
opacity:.84;
transform:translateY(-4px);
background:rgba(79,163,217,.055);
backdrop-filter:blur(4px) saturate(106%);
-webkit-backdrop-filter:blur(4px) saturate(106%);
}
75%{
opacity:.95;
transform:translateY(0);
background:rgba(79,163,217,.12);
backdrop-filter:blur(8px) saturate(112%);
-webkit-backdrop-filter:blur(8px) saturate(112%);
}
100%{
opacity:1;
transform:translateY(0);
background:rgba(79,163,217,.16);
backdrop-filter:blur(10px) saturate(115%);
-webkit-backdrop-filter:blur(10px) saturate(115%);
}
}@keyframes safiraEmblemFloatPremium{
    0%,100%{
      transform:translateX(-50%) translateY(0) scale(1);
    }
    50%{
      transform:translateX(-50%) translateY(-5px) scale(1.018);
    }
  }@keyframes safiraEmblemFloatCentered{
    0%,100%{transform:translate3d(-50%,0,0) scale(1)}
    50%{transform:translate3d(-50%,-5px,0) scale(1.014)}
  }}
@media (max-width:390px){.hero-stats{gap:10px}.stat-icon{width:22px;height:22px}.stat strong{font-size:15px}.stat span{font-size:10px;max-width:92px}.product-image{height:148px}.product-content{padding:16px}.product-content h3{font-size:16px}.product-content p{font-size:11.5px;min-height:52px}.carousel-arrow{width:42px;height:42px;font-size:25px}.header.scrolled .logo-img{width:64px !important;max-height:30px}.logo-img{width:205px}.hero h1{font-size:32px}.hero p{font-size:15px}.hero-kicker{font-size:9px;letter-spacing:1.4px}.hero-buttons .btn-primary,.hero-buttons .btn-secondary{min-width:0;width:100%;max-width:290px}.stat{padding:13px 10px;gap:8px;min-height:68px}.product-footer{gap:8px}.small-btn{font-size:8px;padding:7px 8px}.search-modal{padding:22px;border-radius:22px}.search-box{flex-direction:column}.search-box button{padding:14px 20px}.search-float,.whatsapp{width:52px;height:52px;font-size:23px}.header:not(.scrolled) .logo-img{width:300px !important}.header:not(.scrolled) .logo-wrap{margin-bottom:-36px !important;top:70px !important}.header:not(.scrolled) .logo-wrap .logo-img, .header:not(.scrolled) .logo-img{width:282px !important;max-width:282px !important}.header.scrolled{padding:6px 2% !important}.header.scrolled .header-inner{grid-template-columns:minmax(0,1fr) 132px minmax(0,1fr) !important;min-height:80px !important;height:80px !important;gap:3px !important}.header.scrolled .logo-wrap{max-height:34px !important;width:132px !important;min-width:132px !important;height:70px !important;min-height:70px !important;transform:translateY(4px) !important}.header.scrolled .logo-wrap .logo-img, .header.scrolled .logo-img{max-height:42px !important;transform:scale(1.08) !important;width:132px !important;max-width:132px !important}.header.scrolled .nav-side{height:36px !important;min-height:36px !important;gap:3px !important}.header.scrolled .nav-side a{font-size:10px !important;padding:5px 6px !important}.hero{padding-top:245px !important}.hero-signature{font-size:clamp(64px, 20vw, 84px) !important;margin-bottom:18px !important}.header:not(.scrolled) .header-inner{gap:0 4px !important;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) !important}.header:not(.scrolled) .nav-side{gap:11px !important}.header:not(.scrolled) .nav-side a{padding:6px 4px !important;font-size:16.5px !important}.hero-title-big{font-size:clamp(39px,12.8vw,52px) !important}.hero-main-description{font-size:14px !important;line-height:1.68 !important}.hero-emblem{width:220px !important;max-width:60vw !important;top:18px !important}.products-grid{padding-left:calc((100vw - 78vw) / 2);padding-right:calc((100vw - 78vw) / 2)}.product-card{flex-basis:78vw;min-width:210px;max-width:292px}.hero-stats .stat{gap:14px !important;min-height:104px !important}.hero-stats .stat-icon{width:66px !important;height:66px !important;flex-basis:66px !important}.science-card .icon{width:112px !important;height:112px !important}.hero-content{margin-top:72px !important}.hero-buttons-single{margin:20px auto 20px !important}.hero-area-menu{gap:8px}.hero-area-card{min-height:132px;padding:14px 8px 12px}.hero-area-text strong{font-size:14.5px}.hero-area-text small{font-size:10.5px}}


/* Modifica 7.1 - Benessere stesso stile di Safira Health */
.hero-title-big{
  font-family:'Qwigley',cursive !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  color:rgba(255,255,255,.98) !important;
  text-align:center !important;
  font-size:clamp(72px,9vw,128px) !important;
  line-height:.86 !important;
  text-shadow:none !important;
  background:transparent !important;
  -webkit-text-fill-color:rgba(255,255,255,.98) !important;
  -webkit-text-stroke:0 transparent !important;
  filter:none !important;
}

/* Tema hero chiaro: colori del testo e card. */
/* testo generale della hero in blu scuro */
.hero-content{color:#123a63 !important}
.hero .hero-title-small, .hero .hero-main-description{color:#123a63 !important}
/* eccezioni in verde acqua ottanio */
/* NB: 'Benessere' e la firma hanno anche -webkit-text-fill-color, che su Safari
   vince sul color: va impostato anch'esso, altrimenti restano bianchi. */
.hero-signature{color:#1f8fa3 !important;-webkit-text-fill-color:#1f8fa3 !important}
.hero-title-big{color:#1f8fa3 !important;-webkit-text-fill-color:#1f8fa3 !important}
/* niente ombre scure sul testo (servivano sul fondo scuro) */
.hero-signature, .hero-main-title, .hero-title-small, .hero-title-big, .hero-main-description{text-shadow:none !important}
/* card delle aree: testo che era bianco -> blu scuro */
.hero-area-card{color:#123a63 !important}
.hero-area-text strong{color:#123a63 !important}
.hero-area-text small{color:rgba(18,58,99,.80) !important}

/* ============================================================
   HERO V25 CONSOLIDATA
   - un solo sfondo fotografico
   - nessuna patina o pseudo-overlay
   - menu iniziale blu con voce attiva dorata
   - comportamento dedicato a desktop, tablet e orientamenti mobile
   ============================================================ */
.hero::after{content:none !important;display:none !important}

.hero{
  background-color:#eaf5f9 !important;
  background-image:url('../assets/img/hero-bg.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:cover !important;
}

.header:not(.scrolled) .nav-side a{
  color:#123a63 !important;
  text-shadow:none !important;
}
.header:not(.scrolled) .nav-side a.active,
.header:not(.scrolled) .nav-side a:hover,
.header:not(.scrolled) .nav-side a:focus-visible{
  color:var(--accent) !important;
}

@media (min-width:721px) and (max-width:1024px){
  .hero{
    background-size:100% auto !important;
    background-position:center top !important;
  }
}

@media (max-width:720px) and (orientation:portrait){
  .hero{
    background-size:100% auto !important;
    background-position:center top !important;
    padding-top:210px !important;
  }
  .hero-content{margin-top:40px !important}
}

@media (max-width:1024px) and (orientation:landscape){
  .hero{
    background-size:cover !important;
    background-position:center center !important;
  }
}

/* ============================================================
   HERO V26 — RIDUZIONE SPAZIO MENU / EMBLEMA
   L'emblema resta invariato: viene abbassato soltanto il menu
   iniziale sui dispositivi mobili in orientamento verticale.
   Il menu sticky dopo lo scroll non viene modificato.
   ============================================================ */
@media (max-width:720px) and (orientation:portrait){
  .header:not(.scrolled) .header-inner{
    transform:translateY(24px) !important;
  }
}

@media (max-width:390px) and (orientation:portrait){
  .header:not(.scrolled) .header-inner{
    transform:translateY(20px) !important;
  }
}

/* ============================================================
   HERO V27 — MENU + EMBLEMA COME BLOCCO UNICO
   Su smartphone verticale vengono alzati della stessa quantità:
   - menu principale iniziale
   - emblema
   Restano invariati Safira Health, titolo, pulsante e descrizione.
   Il menu sticky dopo lo scroll non viene modificato.
   ============================================================ */
@media (max-width:720px) and (orientation:portrait){
  .header:not(.scrolled) .header-inner{
    transform:translateY(-4px) !important;
  }

  .hero-emblem{
    top:-8px !important;
  }
}

@media (max-width:390px) and (orientation:portrait){
  .header:not(.scrolled) .header-inner{
    transform:translateY(-8px) !important;
  }

  .hero-emblem{
    top:-8px !important;
  }
}

/* ============================================================
   GERARCHIA HERO
   "Safira Health" e' la voce dominante; i testi attorno sono ridotti:
   - "La Scienza al servizio del" : -40%
   - "Benessere"                  : -25%
   ============================================================ */
.hero-title-small{font-size:clamp(16px, 4.2vw, 24px) !important}
.hero-title-big{font-size:clamp(48px, 13.8vw, 96px) !important; margin-top:0.22em !important}
@media (max-width:720px){
  .hero-title-small{font-size:clamp(16px, 4.2vw, 20px) !important}
  .hero-title-big{font-size:clamp(44px, 13.8vw, 54px) !important}
}
@media (max-width:390px){
  .hero-title-big{font-size:clamp(40px, 13.5vw, 50px) !important}
}

/* ============================================================
   V30 — ICONE MENU RAPIDO AREE TERAPEUTICHE
   Mantiene il layout compatto orizzontale:
   icona affiancata al testo, PNG trasparenti invariati.
   ============================================================ */
.hero-area-card{
  grid-template-columns:74px minmax(0,1fr) auto !important;
  gap:20px !important;
}

.hero-area-icon{
  width:74px !important;
  height:74px !important;
  flex:0 0 74px !important;
  border-radius:22px !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.hero-area-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
  filter:drop-shadow(0 10px 20px rgba(73,197,182,.22)) !important;
  transform:scale(1) !important;
  transition:transform .28s ease, filter .28s ease !important;
}

.hero-area-card:hover .hero-area-icon img{
  transform:scale(1.07) !important;
  filter:drop-shadow(0 14px 28px rgba(73,197,182,.34)) !important;
}

@media (max-width:720px){
  /* SU MOBILE: card in COLONNA (icona sopra, testo sotto, centrati).
     La card e' stretta (~180px): affiancando icona e testo, il titolo
     ("Gastrointestinale", "Cardiovascolare") non ha spazio e viene tagliato.
     In colonna il testo ha tutta la larghezza disponibile. */
  .hero-area-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    min-height:182px !important;
    padding:18px 10px 16px !important;
    gap:10px !important;
  }

  .hero-area-icon{
    width:62px !important;
    height:62px !important;
    flex:0 0 auto !important;
  }

  .hero-area-text{
    align-items:center !important;
    text-align:center !important;
    width:100% !important;
    min-width:0 !important;
  }
  .hero-area-text strong{
    width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  .hero-area-text small{width:100% !important}

  .hero-area-arrow{
    align-self:center !important;
    margin-top:2px !important;
  }
}

/* ============================================================
   MENU RAPIDO AREE — fascia BIANCA + menu centrato   [ex v32]
   Il menu sta dentro la hero (che ha la foto). Gli si crea una fascia
   bianca a tutta larghezza, in continuita' con la sezione bianca sotto.
   ============================================================ */
.hero{padding-bottom:0 !important}
.hero-area-menu{
  position:relative;
  background:#ffffff;
  width:100vw !important;
  max-width:100vw !important;
  left:50%;
  right:50%;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  padding:38px max(7%, calc((100vw - 820px) / 2)) 44px !important;
  margin-top:44px !important;
  margin-bottom:0 !important;
  box-sizing:border-box !important;
  justify-content:center !important;
  align-content:center !important;
}
@media (max-width:720px){
  .hero-area-menu{
    padding:30px 5% 34px !important;
    margin-top:34px !important;
    gap:12px !important;
  }
}
/* il body aveva un gradiente turchese che restava scoperto sotto la fascia:
   il sito sotto la hero e' bianco, quindi lo sfondo di base diventa bianco */
body{background:#ffffff !important}

/* ============================================================
   PARAGRAFO DESCRIZIONE HERO — allineato a SINISTRA   [ex v33]
   Prima centrato e largo fino ai bordi dell'immagine. Ora a sinistra e
   piu' stretto: righe piu' corte e piu' leggibili.
   I titoli sopra restano centrati.
   ============================================================ */
.hero-main-description{
  text-align:left !important;
  max-width:640px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-wrap:pretty;
}
@media (max-width:720px){
  .hero-main-description{
    max-width:86vw !important;
    text-align:left !important;
  }
}

/* ============================================================
   CARD "SCIENZA" — orizzontali su mobile   [ex v34]
   Erano su 3 colonne anche su telefono (~100px l'una): il testo andava a
   capo a ogni parola. Su mobile diventano card orizzontali impilate.
   Su desktop restano le 3 colonne.
   ============================================================ */
@media (max-width:720px){
  .science-cards{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .science-card{
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    column-gap:16px !important;
    row-gap:2px !important;
    text-align:left !important;
    padding:18px 18px !important;
  }
  .science-card .icon{grid-column:1 !important; grid-row:1 / span 2 !important;
    flex:0 0 64px !important; width:64px !important; height:64px !important; margin:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;}
  .science-card .icon img{width:100% !important; height:100% !important; object-fit:contain !important}
  .science-card h3{grid-column:2 !important; grid-row:1 !important;
    text-align:left !important; margin:0 0 4px 0 !important; font-size:17px !important; line-height:1.2 !important}
  .science-card p{grid-column:2 !important; grid-row:2 !important;
    text-align:left !important; margin:0 !important; font-size:14px !important; line-height:1.5 !important}
}

/* ============================================================
   CARD PRODOTTO — badge a destra + sfondo prodotto 3D   [ex v35]
   1) Il badge area ("Gastro...") copriva il nome sulla confezione:
      spostato in alto a DESTRA.
   2) Sfondo dietro al prodotto: non piu' verde acqua, ma lo stesso bianco
      sfumato della card, con ombra morbida -> effetto 3D.
   ============================================================ */
.product-badge{
  left:auto !important;
  right:16px !important;
}
.product-card .product-image,
.product-slide .product-image,
.product-image,
.product-modal-image{
  background-color:#ffffff !important;
  background-image:linear-gradient(180deg,#ffffff 0%,#f2f6f9 100%) !important;
}
.product-card .product-image::after,
.product-slide .product-image::after,
.product-modal-image::after,
.product-image::after{
  background:linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(6,28,53,.05) 100%) !important;
}
.product-image img,
.product-slide .product-image img,
.product-modal-image img{
  filter:drop-shadow(0 14px 22px rgba(6,28,53,.16)) !important;
}

/* ============================================================
   RACCORDO HERO -> MENU BIANCO
   La foto terminava di colpo, creando 3 fasce nette (foto scura, coda
   azzurrina, fascia bianca). Ora un gradiente bianco e' inserito COME
   PRIMO LIVELLO dello sfondo della hero: la foto sfuma verso il bianco
   nella parte bassa e il passaggio al menu e' continuo.
   ============================================================ */
.hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.72) 82%, #ffffff 100%),
    url('../assets/img/hero-bg.jpg') center center/cover no-repeat,
    #ffffff !important;
}
@media (max-width:720px){
  .hero{
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.72) 80%, #ffffff 100%),
      url('../assets/img/hero-bg.jpg') center center/cover no-repeat,
      #ffffff !important;
  }
}
/* il menu bianco si attacca alla hero senza stacco */
.hero-area-menu{margin-top:6px !important}
@media (max-width:720px){ .hero-area-menu{margin-top:4px !important} }

/* ============================================================
   ICONE HOME — raddoppiate
   Icone aree (menu rapido) e icone scienza. Logo ed emblema invariati.
   Le card crescono di conseguenza cosi' i testi restano leggibili.
   ============================================================ */

/* --- ICONE AREE (menu rapido): 76px -> 150px --- */
.hero-area-icon{
  width:150px !important;
  height:150px !important;
  border-radius:34px !important;
}
.hero-area-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
@media (max-width:720px){
  .hero-area-icon{
    width:140px !important;
    height:140px !important;
    border-radius:32px !important;
  }
  .hero-area-card{min-height:260px !important; padding:20px 10px 18px !important}
}
@media (max-width:390px){
  .hero-area-icon{width:128px !important; height:128px !important}
  .hero-area-card{min-height:244px !important}
}

/* --- ICONE SCIENZA --- */
/* desktop: 190px -> 300px (e 150 -> 240 al breakpoint intermedio) */
.science-card .icon{
  width:300px !important;
  height:300px !important;
}
@media (max-width:1050px){
  .science-card .icon{width:240px !important; height:240px !important}
}
/* mobile: erano 64px affiancate al testo -> 128px */
@media (max-width:720px){
  .science-card{
    grid-template-columns:128px minmax(0,1fr) !important;
    column-gap:18px !important;
    padding:18px 16px !important;
  }
  .science-card .icon{
    width:128px !important;
    height:128px !important;
    margin:0 !important;
  }
}
@media (max-width:390px){
  .science-card{grid-template-columns:112px minmax(0,1fr) !important; column-gap:14px !important}
  .science-card .icon{width:112px !important; height:112px !important}
}

/* ============================================================
   SFONDO HERO — niente piu' zoom su smartphone
   Il problema: lo sfondo veniva calcolato su TUTTA l'altezza della hero,
   inclusa la fascia bianca del menu (che con le icone raddoppiate e'
   cresciuta di ~140px). Con 'cover' la foto veniva ingrandita per coprire
   anche quella zona, dove pero' non si vede: risultato, foto zoomata e
   tagliata ai lati senza alcun vantaggio.
   Soluzione: la foto viene dimensionata sulla LARGHEZZA (100% auto) e
   ancorata in alto, cosi' mantiene le sue proporzioni naturali e si vede
   in verticale come deve.
   ============================================================ */
.hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.72) 80%, #ffffff 100%),
    url('../assets/img/hero-bg.jpg') center top / 100% auto no-repeat,
    #ffffff !important;
}
@media (max-width:720px){
  .hero{
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.75) 82%, #ffffff 100%),
      url('../assets/img/hero-bg.jpg') center top / 100% auto no-repeat,
      #ffffff !important;
  }
}

/* ============================================================
   MENU RAPIDO AREE — box compatte, icone proporzionate
   Problemi risolti:
   1) le box erano molto piu' grandi delle icone (spazio vuoto sprecato);
   2) in orizzontale (landscape / tablet) l'icona finiva SOPRA il testo,
      perche' la colonna dell'icona era rimasta a 74px mentre l'icona era
      diventata 150px.
   Ora: icone ridimensionate al giusto e colonna icona sempre coerente.
   ============================================================ */

/* --- DESKTOP / LANDSCAPE (layout affiancato: icona | testo | freccia) --- */
.hero-area-card{
  grid-template-columns:96px minmax(0,1fr) auto !important;  /* colonna = icona */
  gap:18px !important;
  min-height:0 !important;
  padding:20px 20px !important;
  align-items:center !important;
}
.hero-area-icon{
  width:96px !important;
  height:96px !important;
  flex:0 0 96px !important;
  border-radius:24px !important;
}
.hero-area-icon img{width:100% !important; height:100% !important; object-fit:contain !important}

/* --- MOBILE VERTICALE (layout in colonna: icona sopra, testo sotto) --- */
@media (max-width:720px){
  .hero-area-card{
    min-height:0 !important;      /* niente altezza forzata: la box si adatta */
    padding:18px 12px 16px !important;
    gap:8px !important;
  }
  .hero-area-icon{
    width:96px !important;
    height:96px !important;
    border-radius:24px !important;
  }
}
@media (max-width:390px){
  .hero-area-icon{width:88px !important; height:88px !important}
  .hero-area-card{padding:16px 10px 14px !important}
}

/* ============================================================
   HERO — blocco compatto
   "Benessere" + tasto + paragrafo formano un blocco unico, e quel blocco
   si stringe a "La Scienza al servizio del".
   Nota: il gap principale veniva dal margine inferiore di .hero-main-title
   (il contenitore dei due titoli), non dai singoli elementi.
   ============================================================ */
.hero-main-title{
  margin-bottom:6px !important;   /* era 18px: staccava il tasto dal titolo */
}
.hero-title-big{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.hero-buttons{
  margin-top:6px !important;
  margin-bottom:0 !important;     /* era 22px: staccava il testo dal tasto */
}
.hero-main-description{
  margin-top:12px !important;
}
@media (max-width:720px){
  .hero-main-title{margin-bottom:4px !important}
  .hero-buttons{margin-top:4px !important; margin-bottom:0 !important}
  .hero-main-description{margin-top:10px !important}
}
/* ============================================================
   SAFIRA — LOADER SCHERMATA INIZIALE
   Emblema che pulsa + anello ottanio rotante + firma in dissolvenza.
   Palette: ottanio #1f8fa3, blu scuro #123a63, verde acqua #49c5b6.
   ============================================================ */

#safira-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  background:linear-gradient(180deg,#ffffff 0%,#eef6f9 60%,#e6f1f6 100%);
  /* uscita morbida */
  opacity:1;
  visibility:visible;
  transition:opacity .7s ease, visibility 0s linear .7s;
}

/* stato "caricato": il loader svanisce e smette di intercettare i click */
#safira-loader.safira-loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* --- EMBLEMA + ANELLO (CLICCABILE) --- */
.safira-loader-mark{
  position:relative;
  width:150px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;              /* si capisce che si clicca */
  background:none;
  border:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;   /* niente zoom da doppio-tap su iPhone */
  transition:transform .28s ease;
}
.safira-loader-mark:hover{transform:scale(1.05)}
.safira-loader-mark:active{transform:scale(.97)}
/* contorno visibile per chi naviga da tastiera */
.safira-loader-mark:focus-visible{
  outline:3px solid #1f8fa3;
  outline-offset:10px;
  border-radius:50%;
}

/* anello che ruota attorno all'emblema */
.safira-loader-mark::before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:50%;
  border:5px solid rgba(31,143,163,.12);
  border-top-color:#1f8fa3;
  border-right-color:#49c5b6;
  animation:safiraSpin 1.5s cubic-bezier(.6,.2,.4,.8) infinite;
}

/* alone morbido che respira dietro l'emblema */
.safira-loader-mark::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(73,197,182,.28), rgba(73,197,182,0) 70%);
  animation:safiraGlow 2s ease-in-out infinite;
  z-index:0;
}

/* l'emblema pulsa */
.safira-loader-mark img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  animation:safiraPulse 2s ease-in-out infinite;
  filter:drop-shadow(0 12px 26px rgba(6,28,53,.18));
}

/* --- FIRMA --- */
.safira-loader-name{
  font-family:'Qwigley', cursive;
  font-size:clamp(46px, 12vw, 68px);
  line-height:1;
  color:#1f8fa3;
  -webkit-text-fill-color:#1f8fa3;   /* Safari: vince sul color */
  opacity:0;
  animation:safiraSignature 1s cubic-bezier(.2,.7,.3,1) .2s forwards;
  white-space:nowrap;
}

.safira-loader-sub{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:600;
  color:#123a63;
  opacity:0;
  animation:safiraFadeUp .7s ease .45s forwards;
}

/* --- ANIMAZIONI --- */
@keyframes safiraSpin{
  to{transform:rotate(360deg)}
}
@keyframes safiraPulse{
  0%,100%{transform:scale(1); filter:drop-shadow(0 12px 26px rgba(6,28,53,.18))}
  50%{transform:scale(1.14); filter:drop-shadow(0 18px 34px rgba(31,143,163,.34))}
}
@keyframes safiraGlow{
  0%,100%{opacity:.45; transform:scale(.95)}
  50%{opacity:.9; transform:scale(1.06)}
}
@keyframes safiraFadeUp{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:translateY(0)}
}

/* --- MOBILE --- */
@media (max-width:720px){
  #safira-loader{gap:20px}
  .safira-loader-mark{width:120px; height:120px}
  .safira-loader-mark::before{inset:-13px}
}

/* --- ACCESSIBILITA': niente animazioni se l'utente le ha disattivate --- */


/* --- INVITO "CLICCA QUI" --- */
.safira-loader-cta{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#1f8fa3;
  background:rgba(255,255,255,.85);
  border:1.5px solid rgba(31,143,163,.35);
  border-radius:999px;
  padding:15px 30px;   /* area di tocco >= 44px, come da linee guida mobile */
  cursor:pointer;
  opacity:0;
  animation:safiraFadeUp .7s ease .55s forwards;
  will-change:box-shadow;
  box-shadow:0 10px 26px rgba(6,28,53,.10);
  touch-action:manipulation;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.safira-loader-cta:hover{
  background:#1f8fa3;
  color:#ffffff;
  transform:translateY(-2px);
}
/* NB: l'animazione NON muove il pulsante (niente transform), altrimenti il
   bersaglio si sposta e il tocco puo' mancare. Pulsa solo il bagliore. */
@keyframes safiraBreathe{
  0%,100%{box-shadow:0 10px 26px rgba(6,28,53,.10)}
  50%{box-shadow:0 14px 34px rgba(31,143,163,.30)}
}


/* Firma "Safira Health": apparizione piu' marcata (sale, cresce e sfuma in vista) */
@keyframes safiraSignature{
  0%{opacity:0; transform:translateY(26px) scale(.9); letter-spacing:.06em}
  60%{opacity:1}
  100%{opacity:1; transform:translateY(0) scale(1); letter-spacing:0}
}

/* ============================================================
   LOADER — animazioni sempre attive
   Il sito ha una regola globale che spegne tutte le animazioni quando
   e' attivo "Riduci movimento" (iPhone: Impostazioni > Accessibilita' >
   Movimento): era questo a lasciare il loader fermo.
   Qui le animazioni del LOADER vengono forzate comunque. Il resto del
   sito continua a rispettare la preferenza dell'utente.
   Il tasto "Entra" NON pulsa: appare e resta fermo (bersaglio stabile).
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .safira-loader-mark img{
    animation:safiraPulse 2s ease-in-out infinite !important;
    animation-duration:2s !important;
    animation-iteration-count:infinite !important;
  }
  .safira-loader-mark::before{
    animation:safiraSpin 1.5s cubic-bezier(.6,.2,.4,.8) infinite !important;
    animation-duration:1s !important;
    animation-iteration-count:infinite !important;
  }
  .safira-loader-mark::after{
    animation:safiraGlow 2s ease-in-out infinite !important;
    animation-duration:2s !important;
    animation-iteration-count:infinite !important;
  }
  .safira-loader-name{
    animation:safiraSignature 1s cubic-bezier(.2,.7,.3,1) .2s forwards !important;
    animation-duration:1s !important;
    animation-iteration-count:1 !important;
  }
  .safira-loader-sub{
    animation:safiraFadeUp .7s ease .45s forwards !important;
    animation-duration:.7s !important;
    animation-iteration-count:1 !important;
  }
  .safira-loader-cta{
    animation:safiraFadeUp .7s ease .55s forwards !important;
    animation-duration:.7s !important;
    animation-iteration-count:1 !important;
  }
  #safira-loader{transition-duration:.7s !important}
}

/* ============================================================
   MENU RAPIDO — bianco ghiaccio -> bianco puro
   Parte da un bianco appena velato di azzurro (non celeste pieno)
   e sfuma dolcemente fino al bianco, senza patina grigia.
   ============================================================ */
.hero-area-menu{
  background:linear-gradient(180deg,
    rgb(230,242,247) 0%,     /* bianco ghiaccio: appena azzurrato */
    rgb(238,247,250) 30%,
    rgb(246,251,253) 60%,
    rgb(252,254,254) 82%,
    #ffffff 100%             /* bianco puro */
  ) !important;
  box-shadow:none !important;
  margin-top:0 !important;
}
@media (max-width:720px){ .hero-area-menu{margin-top:0 !important} }

/* La FOTO si schiarisce verso il basso fino al bianco ghiaccio, cosi' arriva
   al menu gia' dello stesso colore e il passaggio non ha stacchi.
   (Senza questo, la foto resterebbe azzurra scura e si vedrebbe una riga netta.) */
.hero{
  background:
    linear-gradient(180deg,
      rgba(230,242,247,0) 34%,
      rgba(230,242,247,.55) 47%,
      rgba(230,242,247,.92) 55%,
      rgb(230,242,247) 60%),
    url('../assets/img/hero-bg.jpg') center top / 100% auto no-repeat,
    rgb(230,242,247) !important;
}
@media (max-width:720px){
  .hero{
    background:
      linear-gradient(180deg,
        rgba(230,242,247,0) 30%,
        rgba(230,242,247,.55) 44%,
        rgba(230,242,247,.92) 53%,
        rgb(230,242,247) 58%),
      url('../assets/img/hero-bg.jpg') center top / 100% auto no-repeat,
      rgb(230,242,247) !important;
  }
}

/* --- niente ombreggiature --- */
.hero-area-card{box-shadow:none !important; filter:none !important}
.hero-area-icon{box-shadow:none !important; filter:none !important}

/* ============================================================
   MENU LATERALE FLOTTANTE — carrello, ricerca, WhatsApp
   Icone PNG su sfondo trasparente, allineate in colonna verticale.
   NB: il sito carica cart.css DOPO style.css, quindi il carrello veniva
   ridisegnato da quel file (da cui il "doppio carrello"). Qui si usano
   selettori ad alta specificita' + !important per avere la precedenza.
   Vale su tutte le pagine: home, prodotti, ricerca, contatti.
   ============================================================ */

/* --- base comune (alta specificita' per battere cart.css) --- */
body button.cart-float,
body a.cart-float,
body button.search-float,
body a.search-float,
body a.whatsapp,
body button.whatsapp,
body .cart-float,
body .search-float,
body .whatsapp{
  position:fixed !important;
  right:16px !important;
  width:62px !important;      /* piu' grandi: erano 58px */
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  max-width:62px !important;
  max-height:62px !important;
  /* Cerchio bianco di base: il pulsante resta VISIBILE anche se la sua icona
     PNG non venisse trovata (altrimenti sparirebbe del tutto). */
  border-radius:0 !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:900 !important;
  overflow:visible !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .22s ease, filter .22s ease;
  filter:drop-shadow(0 6px 14px rgba(6,28,53,.20));
  /* nasconde COMPLETAMENTE l'emoji vecchia (🛒 🔎 💬) */
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  text-shadow:none !important;
}

/* --- COLONNA VERTICALE allineata (86px tra un'icona e l'altra) --- */
body .cart-float   { bottom:180px !important; }
body .search-float { bottom:102px !important; }
body .whatsapp     { bottom: 24px !important; }

/* --- le immagini --- */
body .cart-float::before,
body .search-float::before,
body .whatsapp::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  font-size:0 !important;
}
body .cart-float::before  { background-image:url('../assets/img/icon-carrello-v2.png') !important; }
body .search-float::before{ background-image:url('../assets/img/icon-ricerca-v2.png') !important; }
body .whatsapp::before    { background-image:url('../assets/img/icon-whatsapp-v2.png') !important; }

/* --- elimina qualunque icona/pseudo-elemento disegnato da cart.css --- */
body .cart-float::after,
body .search-float::after,
body .whatsapp::after{
  content:none !important;
  display:none !important;
}
/* eventuali icone interne (svg/i/img) del vecchio carrello */
body .cart-float > svg,
body .cart-float > i,
body .cart-float > img,
body .search-float > svg,
body .search-float > i,
body .whatsapp > svg,
body .whatsapp > i{
  display:none !important;
}

/* --- contatore del carrello (deve restare visibile) --- */
body .cart-float .cart-count,
body .cart-float [data-cart-count]{
  position:absolute !important;
  top:-2px !important;
  right:-2px !important;
  min-width:24px !important;
  height:24px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:#123a63 !important;
  color:#ffffff !important;
  font-family:'Inter', sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 2px 6px rgba(6,28,53,.30) !important;
  z-index:3 !important;
  text-shadow:none !important;
}

body .cart-float:hover,
body .search-float:hover,
body .whatsapp:hover{
  transform:translateY(-3px) scale(1.06) !important;
  filter:drop-shadow(0 10px 20px rgba(31,143,163,.32));
}
body .cart-float:active,
body .search-float:active,
body .whatsapp:active{transform:scale(.95) !important}

@media (max-width:390px){
  body .cart-float, body .search-float, body .whatsapp{
    width:56px !important; height:56px !important;
    min-width:56px !important; min-height:56px !important;
    max-width:56px !important; max-height:56px !important;
    right:12px !important;
  }
  body .cart-float   { bottom:180px !important; }
  body .search-float { bottom:102px !important; }
  body .whatsapp     { bottom: 24px !important; }
}

/* ============================================================
   LOADER — anti-lampo
   Se l'utente e' gia' entrato in questa visita, la schermata d'ingresso
   non deve nemmeno comparire per un istante mentre si carica la pagina.
   La classe viene messa da uno script nel <head>, prima del disegno.
   ============================================================ */
html.safira-gia-entrato #safira-loader{
  display:none !important;
}

/* ============================================================
   ICONE AREE — piu' grandi SENZA ingrandire le card
   Il contenitore dell'icona resta della stessa dimensione (quindi la card
   non cresce), ma l'IMMAGINE al suo interno viene ingrandita e lasciata
   "traboccare" oltre i bordi del contenitore.
   Solo su MOBILE (card in colonna, c'e' spazio verticale). Su desktop la
   card e' affiancata e bassa: l'icona resta invariata per non coprire il testo.
   ============================================================ */
@media (max-width:720px){
  .hero-area-icon{
    overflow:visible !important;
    position:relative !important;
  }
  .hero-area-icon img{
    width:124% !important;
    height:124% !important;
    max-width:none !important;
    object-fit:contain !important;
    position:absolute !important;
    top:44% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}
/* schermi molto stretti: ingrandimento piu' contenuto, l'icona non deve
   uscire dai bordi della card */
@media (max-width:380px){
  .hero-area-icon img{
    width:112% !important;
    height:112% !important;
  }
}

/* ============================================================
   TESTO HERO — centrato
   (era allineato a sinistra: ora torna centrato)
   ============================================================ */
.hero-main-description{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:680px !important;
}

/* ============================================================
   FRASE DI CHIUSURA — tra il menu rapido e "I nostri prodotti"
   Spostata qui dal paragrafo principale, per snellirlo.
   ============================================================ */
.safira-claim{
  padding:34px 6% 6px;
  background:#ffffff;
  text-align:center;
}
.safira-claim p{
  max-width:760px;
  margin:0 auto;
  font-family:'Inter', sans-serif;
  font-size:clamp(15px, 2.2vw, 18px);
  line-height:1.75;
  color:#3d5a75;
  text-align:center;
}
@media (max-width:720px){
  .safira-claim{padding:26px 7% 2px}
  .safira-claim p{font-size:15px; line-height:1.7}
}

/* ============================================================
   VISUALIZZATORE SCHEDA PRODOTTO (immagine con zoom)
   Sostituisce il vecchio lettore PDF.
   ============================================================ */
.leaflet-viewer{
  position:relative !important;
  overflow:hidden !important;          /* l'immagine ingrandita non esce dal riquadro */
  background:#f4f8fb !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52vh;
  max-height:64vh;
  touch-action:none;                    /* i gesti li gestiamo noi (pizzico/trascina) */
  cursor:zoom-in;
  -webkit-user-select:none;
  user-select:none;
}
.leaflet-viewer img{
  display:block !important;
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform-origin:center center;
  transition:transform .18s ease-out;
  will-change:transform;
  -webkit-user-drag:none;
}
/* quando e' ingrandita: si puo' trascinare */
.leaflet-viewer.is-zoomed{cursor:grab}
.leaflet-viewer.in-trascinamento{cursor:grabbing}
.leaflet-viewer.in-trascinamento img{transition:none}   /* trascinamento fluido */

/* messaggio se l'immagine non c'e' */
.leaflet-mancante{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  color:#6a8399;
  font-size:14px;
}
.leaflet-viewer.immagine-mancante img{display:none !important}
.leaflet-viewer.immagine-mancante .leaflet-mancante{display:flex}

/* --- COMANDI DI ZOOM --- */
.leaflet-zoom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px 4px;
}
.leaflet-zoom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:46px;
  padding:0 16px;
  border:none;
  border-radius:999px;                  /* a pillola, come gli altri tasti */
  background:#eef7fb;
  color:#082f52;
  font-family:Manrope, sans-serif;
  font-size:19px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(8,36,58,.08);
  transition:transform .2s ease, background .2s ease;
  touch-action:manipulation;
}
.leaflet-zoom-btn:hover{transform:translateY(-2px); background:#e2f1f8}
.leaflet-zoom-btn:active{transform:scale(.96)}
.leaflet-zoom-reset{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#03263f;
}

@media (max-width:720px){
  .leaflet-viewer{min-height:46vh; max-height:56vh}
  .leaflet-zoom{padding:12px 16px 2px; gap:8px}
  .leaflet-zoom-btn{min-width:44px; height:44px}
}

/* ============================================================
   TASTO "APRI SCHEDA" — allineato al design degli altri tasti
   In alcuni punti risultava rettangolare: qui viene forzato a pillola,
   con la stessa altezza e lo stesso carattere degli altri pulsanti.
   ============================================================ */
.single-product-more,
button.single-product-more,
#singleProductMore,
.product-modal-whatsapp,
button.product-modal-whatsapp,
#modalOpenLeaflet{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px 24px !important;   /* area di tocco >= 44px */
  min-height:46px !important;
  border:none !important;
  border-radius:999px !important;                       /* PILLOLA, non rettangolo */
  background:linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color:#03263f !important;
  font-family:Manrope, sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:0 10px 24px rgba(73,197,182,.20) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
  touch-action:manipulation;
  -webkit-appearance:none;
  appearance:none;
}
.single-product-more:hover,
.product-modal-whatsapp:hover,
#modalOpenLeaflet:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 32px rgba(73,197,182,.28) !important;
}

/* ============================================================
   HOME — stili base del modale scheda prodotto
   (necessari perche' la home non carica prodotti.css)
   ============================================================ */
.leaflet-overlay{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:22px;
background:rgba(3,16,31,.72);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
z-index:4200;
}
.leaflet-overlay{
padding:10px;
align-items:flex-start;
}
.leaflet-overlay.active{
display:flex;
}
.leaflet-modal{
width:min(980px,100%);
max-height:92vh;
background:#ffffff;
border-radius:30px;
box-shadow:0 34px 90px rgba(0,0,0,.32);
position:relative;
overflow:hidden;
display:grid;
grid-template-rows:auto 1fr auto;
border:1px solid rgba(255,255,255,.42);
}
.leaflet-modal{
border-radius:22px;
max-height:94vh;
margin-top:10px;
}
.leaflet-close{
position:absolute;
top:18px;
right:18px;
width:42px;
height:42px;
border:none;
border-radius:50%;
background:#eef7fb;
color:var(--dark);
font-size:26px;
cursor:pointer;
z-index:3;
box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.leaflet-close{
top:14px;
right:14px;
width:38px;
height:38px;
font-size:24px;
}
.leaflet-header{
padding:28px 34px 18px;
border-bottom:1px solid rgba(8,47,82,.08);
padding-right:76px;
}
.leaflet-header{
padding:22px 22px 14px;
padding-right:68px;
}
.leaflet-header span{
display:inline-flex;
padding:8px 12px;
border-radius:999px;
background:rgba(73,197,182,.10);
color:#0b8d83;
font-family:Manrope,sans-serif;
font-size:10px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:10px;
}
.leaflet-header h3{
font-family:Manrope,sans-serif;
font-size:clamp(24px,3vw,34px);
line-height:1.08;
letter-spacing:-.045em;
color:var(--dark);
}
.leaflet-note{
padding:14px 24px 20px;
font-size:12px;
line-height:1.55;
color:#526d86;
text-align:center;
background:#fff;
}
.leaflet-note{
font-size:11px;
padding:12px 16px 16px;
}

/* ============================================================
   HOME — RESPIRO tra gli elementi della hero
   Prima gli spazi erano minimi (4px, 10px, 0px) e tutto risultava
   compresso; il menu rapido spuntava gia' all'apertura della pagina.
   Ora ogni elemento ha aria attorno e il menu resta sotto la piega:
   si scopre scorrendo, come deve essere.
   ============================================================ */
.hero{
  /* NON tocco il padding-top: serve a staccare il contenuto
     dall'intestazione fissa (era 260-300px). */
  padding-bottom:30px !important;
}

/* firma "Safira Health" */
.hero-signature{
  margin-bottom:30px !important;
}

/* "La Scienza al servizio del Benessere" */
.hero-main-title{
  margin-bottom:52px !important;   /* era 4px: tutto attaccato */
}

/* pulsante "Scopri i prodotti" */
.hero-cta,
.hero-main-title + a,
.hero-btn{
  margin-bottom:8px !important;
}

/* paragrafo introduttivo */
.hero-main-description{
  margin-top:54px !important;      /* era 10px: attaccato al bottone */
  margin-bottom:26px !important;
}

/* menu rapido: staccato dal testo e spinto sotto la piega */
.hero-area-menu{
  margin-top:34px !important;      /* riavvicinato al testo sopra */
}

@media (max-width:720px){
  .hero{
    padding-bottom:26px !important;
  }
  .hero-signature{margin-bottom:26px !important}
  .hero-main-title{margin-bottom:46px !important}
  .hero-main-description{
    margin-top:48px !important;
    margin-bottom:22px !important;
  }
  .hero-area-menu{margin-top:28px !important}
}

/* ============================================================
   MENU RAPIDO — 5 AREE, disposizione 3 + 2 centrate
   Tre card sulla prima riga, due centrate sotto.
   Le card sono piu' compatte per far stare 3 colonne senza stringere
   troppo i titoli lunghi ("Energia e Ricostituenti", "Uroginecologica").
   ============================================================ */
/* FLEXBOX invece di griglia: con flex-wrap + justify-content:center,
   l'ultima riga incompleta (le 2 card) si centra DA SOLA. */


/* card piu' compatte: devono stare in 3 per riga */
.hero-area-card{
  padding:16px 12px 14px !important;
  border-radius:22px !important;
}
.hero-area-text strong{
  font-size:15px !important;
  line-height:1.25 !important;
  hyphens:auto;                    /* i titoli lunghi vanno a capo bene */
}
.hero-area-text small{
  font-size:11.5px !important;
  line-height:1.35 !important;
}
.hero-area-icon{
  width:74px !important;
  height:74px !important;
}
.hero-area-icon img{
  width:118% !important;
  height:118% !important;
}

/* --- TELEFONI: 3 colonne sarebbero troppo strette per questi titoli.
       Restano 2 colonne, con la quinta card a tutta larghezza in fondo. --- */
@media (max-width:720px){
  /* Telefono: 3 card per riga anche qui (poi 2 centrate sotto).
     Le card si stringono, quindi icona e testo si riducono di conseguenza. */
  .hero-area-menu{
    gap:8px !important;
  }
  /* le ultime due restano centrate: ci pensa justify-content:center del flex */
  .hero-area-text strong{
    font-size:12.5px !important;
    line-height:1.2 !important;
    word-break:break-word;
  }
  .hero-area-text small{font-size:9.5px !important; line-height:1.3 !important}
  .hero-area-icon{width:50px !important; height:50px !important}
  .hero-area-icon img{width:112% !important; height:112% !important}
  /* la freccia toglierebbe spazio al testo */
  .hero-area-arrow{display:none !important}
}

/* ============================================================
   MENU RAPIDO — 5 aree in disposizione 3 + 2 centrate
   Prima riga: 3 card. Seconda riga: le 2 rimanenti, centrate sotto.
   Le card sono piu' compatte per stare in 3 su una riga.

   Come funziona il centraggio: la griglia ha 6 colonne; ogni card ne
   occupa 2 (quindi 3 per riga). Le ultime due partono dalla colonna 2
   e dalla 4, risultando centrate.
   ============================================================ */
.hero-area-menu{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  gap:14px !important;
  /* NON tocco la larghezza: il menu e' una fascia bianca a tutta pagina.
     Allargo pero' l'area interna: il padding la centrava su 820px,
     troppo stretta per 3 card affiancate. */
  padding-left:max(5%, calc((100vw - 1060px) / 2)) !important;
  padding-right:max(5%, calc((100vw - 1060px) / 2)) !important;
}
.hero-area-card{
  grid-column:span 2 !important;   /* 3 card per riga */
}
/* le ultime due: centrate sotto */
.hero-area-card:nth-child(4){
  grid-column:2 / span 2 !important;
}
.hero-area-card:nth-child(5){
  grid-column:4 / span 2 !important;
}

/* card piu' compatte: devono entrare in 3 per riga */
.hero-area-card{
  padding:16px 12px !important;
  border-radius:22px !important;
}
.hero-area-text strong{
  font-size:14.5px !important;
  line-height:1.25 !important;
}
.hero-area-text small{
  font-size:11.5px !important;
}
.hero-area-icon{
  width:66px !important;
  height:66px !important;
  margin-bottom:8px !important;
}
.hero-area-icon img{
  width:118% !important;
  height:118% !important;
}




/* Tutte le card della stessa altezza, anche se un titolo va a capo
   (es. "Energia e Ricostituenti" occupa due righe). */
.hero-area-menu .hero-area-card{
  min-height:132px !important;
}


/* ============================================================
   MENU RAPIDO — CARD VERTICALI E COMPATTE
   PROBLEMA: la card aveva un layout interno a 3 colonne
   (96px icona | testo | 24px freccia). Con 3 card per riga, al testo
   restavano ~69px e i titoli si spezzavano lettera per lettera
   ("Ga-stroin-testi-nale"). Inoltre la colonna icona era 96px ma
   l'icona solo 66px: 30px sprecati.

   SOLUZIONE: layout VERTICALE (icona sopra, testo sotto, tutto
   centrato). Cosi' l'intera larghezza della card va al testo, non
   c'e' spazio sprecato e le box possono essere piu' piccole.
   ============================================================ */
.hero-area-menu .hero-area-card{
  display:grid !important;
  grid-template-columns:1fr !important;   /* una sola colonna: verticale */
  grid-template-rows:auto auto !important;
  justify-items:center !important;
  align-content:center !important;
  text-align:center !important;
  gap:10px !important;
  padding:18px 12px !important;
  min-height:0 !important;
  border-radius:20px !important;
}

/* la freccia non serve piu': occupava una colonna e toglieva spazio */
.hero-area-menu .hero-area-arrow{
  display:none !important;
}

/* icona: il contenitore ha ESATTAMENTE la misura dell'icona,
   niente spazio morto attorno */
.hero-area-menu .hero-area-icon{
  width:64px !important;
  height:64px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  position:relative !important;
}
.hero-area-menu .hero-area-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  position:static !important;
  transform:none !important;
}

/* testo: usa tutta la larghezza della card */
.hero-area-menu .hero-area-text{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}
.hero-area-menu .hero-area-text strong{
  display:block !important;
  font-size:14px !important;
  line-height:1.3 !important;
  margin-bottom:3px !important;
  hyphens:none !important;          /* niente sillabazione forzata */
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.hero-area-menu .hero-area-text small{
  display:block !important;
  font-size:11px !important;
  line-height:1.35 !important;
}


/* ============================================================
   TELEFONO IN VERTICALE — 3 + 2 anche qui
   Le card si stringono ulteriormente per far stare 3 colonne
   anche su schermo stretto, mantenendo i titoli su una riga.
   ============================================================ */
@media (max-width:620px){
  .hero-area-menu{
    gap:9px !important;
    /* NIENTE width qui: la fascia deve restare a tutta pagina (100vw).
       Un width:100% la restringeva e spostava le card a sinistra. */
  }
  .hero-area-menu .hero-area-card{
    padding:14px 6px !important;
    border-radius:16px !important;
    gap:7px !important;
  }
  .hero-area-menu .hero-area-icon{
    width:48px !important;
    height:48px !important;
  }
  .hero-area-menu .hero-area-text strong{
    font-size:11px !important;
    line-height:1.22 !important;
    letter-spacing:-.01em !important;
  }
  .hero-area-menu .hero-area-text small{
    font-size:9px !important;
    line-height:1.3 !important;
  }
}


/* Su telefono un titolo lungo ("Energia e Ricostituenti") va a capo e
   alza la sua riga. Un'altezza minima uniforma tutte le card. */
@media (max-width:620px){
  .hero-area-menu .hero-area-card{
    min-height:141px !important;
  }
}

/* ============================================================
   MENU RAPIDO — la fascia bianca si congiunge con la sezione sotto
   Prima restava una striscia azzurra di ~54px tra la fine della fascia
   e la sezione bianca successiva. Qui il bianco diventa continuo.
   ============================================================ */
.hero-area-menu{
  background:#ffffff !important;
  margin-bottom:0 !important;
  padding-bottom:44px !important;
}

/* la hero non deve lasciare coda azzurra sotto la fascia */
.hero{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* la sezione successiva parte attaccata, senza stacco */
.safira-claim{
  margin-top:0 !important;
  padding-top:34px !important;
  background:#ffffff !important;
}

@media (max-width:720px){
  .hero-area-menu{padding-bottom:36px !important}
  .safira-claim{padding-top:28px !important}
}

/* ============================================================
   HERO — dimensioni dei testi
   1) "Benessere" ingrandito del 25%
      (era 54px su telefono / 96px su desktop -> ora 67.5 / 120)
   2) "Benessere" abbassato: piu' stacco dalla riga sopra.
      Uso 0.15em = 15% della sua dimensione, cosi' lo stacco
      cresce insieme al font su ogni schermo.
   3) Testo descrittivo portato alla STESSA dimensione di
      "La Scienza al servizio del" (era piu' piccolo).
   ============================================================ */
.hero-title-big{
  font-size:clamp(67.5px, 17.1vw, 120px) !important;
  margin-top:0.15em !important;      /* abbassato del 15% */
}

.hero-main-description{
  font-size:clamp(16px, 4.2vw, 24px) !important;   /* = .hero-title-small */
  line-height:1.62 !important;
}

/* ============================================================
   SFUMATURA azzurro -> bianco sopra il menu rapido
   La fascia parte TRASPARENTE (lascia vedere l'azzurro della hero)
   e diventa bianco pieno appena prima delle card: niente piu' taglio
   netto tra le due zone.
   ============================================================ */
.hero-area-menu{
  margin-top:0 !important;
  padding-top:62px !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,.55) 32px,
    rgba(255,255,255,1) 58px
  ) !important;
}
@media (max-width:720px){
  .hero-area-menu{
    margin-top:0 !important;
    padding-top:56px !important;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,.55) 28px,
      rgba(255,255,255,1) 52px
    ) !important;
  }
}

/* ============================================================
   TESTO "Ogni formulazione..." spostato dentro la sezione prodotti
   Ora sta DOPO il kicker e il titolo, subito PRIMA del carosello.
   Non e' piu' una <section> ma un <p>: qui gli stili adeguati.
   ============================================================ */
p.safira-claim{
  max-width:760px;
  margin:0 auto 34px !important;
  padding:0 6% !important;
  background:none !important;
  text-align:center;
  font-size:16px;
  line-height:1.75;
  color:#526d86;
}
@media (max-width:720px){
  p.safira-claim{
    margin-bottom:26px !important;
    font-size:15px;
    line-height:1.7;
  }
}

/* la sezione prodotti ora segue direttamente la fascia bianca del menu:
   deve restare bianca in cima, per non ricreare uno stacco di colore */
#prodotti{
  margin-top:0 !important;
}

/* ============================================================
   MODALE PRODOTTO (home) — immagine piu' piccola
   Prima l'immagine aveva min-height:480px e occupava quasi tutto lo
   schermo: i tasti finivano fuori. Ridotta cosi' l'intera scheda
   (immagine + testo + prezzo + tasti) entra in una schermata.
   ============================================================ */
.product-modal-image{
  min-height:0 !important;
  height:200px !important;              /* era 480px */
}
.product-modal-image img{
  object-fit:contain !important;        /* la confezione si vede intera */
  padding:14px !important;
}

/* un filo piu' compatto il contenuto, per far stare tutto */
.product-modal-content{
  padding:20px 22px 22px !important;
}

@media (max-width:720px){
  .product-modal-image{height:180px !important}
  .product-modal-content{padding:18px 20px 20px !important}
}
@media (max-height:740px){
  .product-modal-image{height:150px !important}
}

/* ============================================================
   HOME — VISUALIZZATORE PDF (PDF.js)
   Le pagine del PDF vengono disegnate qui, una sotto l'altra,
   scorrevoli. Stesso aspetto della pagina Prodotti.
   ============================================================ */
#leafletViewer{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
  background:#eef3f7 !important;
  padding:14px !important;
  min-height:56vh;
  max-height:66vh;
}
#leafletViewer .pdf-pagina{
  display:block;
  margin:0 auto 14px;
  max-width:100%;
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(8,36,58,.14);
}
#leafletViewer .pdf-pagina:last-child{margin-bottom:0}
#leafletViewer .pdf-attesa,
#leafletViewer .pdf-messaggio{
  text-align:center; padding:40px 24px; color:#5b7a93; font-size:14px;
}
#leafletViewer .pdf-messaggio a{color:#1f8fa3; font-weight:700; text-decoration:underline}
@media (max-width:720px){
  #leafletViewer{min-height:50vh; max-height:60vh; padding:10px !important}
}


/* ============================================================
   SCHEDA PRODOTTO (modale home) — immagine piu' piccola
   Cosi' l'intera scheda (immagine + testo + prezzo + tasti) entra in
   una sola schermata su telefono, senza dover scorrere.
   ============================================================ */
.product-modal-image{
  min-height:150px !important;
  max-height:150px !important;
  padding:14px !important;
}
.product-modal-image img{
  max-height:130px !important;
  width:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
}
/* un po' meno imbottitura nel corpo, per guadagnare spazio */
.product-modal-content{
  padding:20px 22px 22px !important;
}
@media (max-height:740px){
  .product-modal-image{min-height:120px !important; max-height:120px !important}
  .product-modal-image img{max-height:104px !important}
}


/* Su schermi molto bassi (iPhone SE): il modale non deve superare
   l'altezza dello schermo; se serve, il contenuto scorre internamente
   cosi' i tasti restano sempre raggiungibili. */
.product-modal{
  max-height:94vh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}
@media (max-height:700px){
  .product-modal-image{min-height:104px !important; max-height:104px !important}
  .product-modal-image img{max-height:90px !important}
  .product-modal-content{padding:16px 20px 18px !important}
}


/* Modale prodotto: recuperato lo spazio del badge rimosso.
   Su schermi bassi (iPhone SE) i margini si stringono ancora un po'
   cosi' l'ultimo tasto 'Vedi catalogo completo' resta visibile. */
@media (max-height:700px){
  .product-modal-content{padding:14px 20px 16px !important}
  .product-modal-content h3{margin-bottom:6px !important}
  .product-modal-content > p{margin-bottom:12px !important}
  .product-modal-image{min-height:96px !important; max-height:96px !important}
  .product-modal-image img{max-height:82px !important}
}

/* ============================================================
   HOME — visualizzatore PDF (correzione)
   La home aveva ancora gli stili del vecchio visualizzatore a IMMAGINI
   (.leaflet-viewer con display:flex e overflow:hidden). Con le pagine
   PDF questo le affiancava e impediva lo scorrimento. Qui il riquadro
   torna a impilare le pagine e a scorrere.
   ============================================================ */
#leafletModal .leaflet-viewer,
.leaflet-overlay .leaflet-viewer{
  touch-action:pan-y !important;
  overscroll-behavior:contain !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  position:relative !important;
}
#leafletViewer.pdf-zoomato{
  touch-action:none !important;
  overflow:hidden !important;
}
#leafletViewer .pdf-pagina{
  display:block !important;
  margin:0 auto 14px !important;
  max-width:100% !important;
  width:auto !important;
  height:auto !important;
  background:#ffffff;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(8,36,58,.14);
}
#leafletViewer .pdf-pagina:last-child{margin-bottom:0}
.pdf-attesa, .pdf-messaggio{text-align:center; padding:40px 24px; color:#5b7a93; font-size:14px}
.pdf-messaggio a{color:#1f8fa3; font-weight:700; text-decoration:underline}

/* ============================================================
   MENU RAPIDO HOME — icone aree ingrandite del 125%
   Erano 48px (mobile) / 64px (desktop). +125% = x2,25:
   -> 108px (mobile) / 144px (desktop).
   Regola finale: vince sulle molte definizioni precedenti.
   ============================================================ */
.hero-area-menu .hero-area-icon{
  width:144px !important;
  height:144px !important;
}
.hero-area-menu .hero-area-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
@media (max-width:720px){
  .hero-area-menu .hero-area-icon{
    width:92px !important;    /* card stretta ~112px: lascio un margine ai lati */
    height:92px !important;
  }
}

/* ============================================================
   HOME — visualizzatore PDF: zoom stabile via CSS transform
   Stesso sistema della pagina Prodotti. touch-action:none blocca
   lo zoom nativo di Safari che chiudeva il modale.
   ============================================================ */
#leafletModal .leaflet-viewer,
.leaflet-overlay .leaflet-viewer{
  touch-action:none !important;
  overscroll-behavior:contain !important;
  overflow:hidden !important;
  position:relative !important;
}
#leafletViewer .pdf-contenuto{
  transform-origin:center top;
  display:block;
  width:100%;
}
#leafletViewer.pdf-zoomato .pdf-contenuto{ transition:none; cursor:grab; }
#leafletViewer .pdf-pagina{
  display:block !important;
  margin:0 auto 12px !important;
  max-width:100% !important;
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(8,36,58,.14);
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
#leafletViewer .pdf-pagina:last-child{margin-bottom:0}


/* --- ZOOM ATTIVO --- */
#leafletViewer.pdf-zoomato .pdf-contenuto{
  transition:transform .12s ease-out;
  will-change:transform;
}

/* doppio prezzo (barrato + scontato) nella home */
.prezzo-old{font-size:0.62em;font-weight:600;color:#9aa8b4;text-decoration:line-through;margin-right:8px;vertical-align:middle;}
.prezzo-nuovo{font-weight:800;color:#078f86;vertical-align:middle;}
.product-card .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}


/* ============================================================
   V76 — CORREZIONI SOLO DESKTOP (PC)
   Tutte le regole di questo blocco sono dentro @media (min-width:721px):
   il telefono NON viene toccato in alcun modo.

   1) Carosello home: il prezzo andava a capo tra il simbolo "€" e la
      cifra, e il tasto "Acquista" usciva dal bordo della card.
      Causa: la card su PC e' larga max 214px e nel piede c'erano
      3 elementi affiancati (prezzo + "Scopri di piu'" + "Acquista").
      Soluzione: il prezzo prende una riga sua, i due tasti quella sotto.

   2) Modale prodotto: l'immagine era bloccata a 150px di altezza.
      Quella regola era nata per far entrare i tasti sullo schermo del
      telefono, ma era scritta senza media query e valeva anche su PC,
      dove la colonna e' alta ~500px: da qui l'immagine minuscola.
   ============================================================ */

@media (min-width:721px){

  /* ---------- 1) PIEDE DELLA CARD NEL CAROSELLO ---------- */
  .product-card .product-footer{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px 8px !important;
    margin-top:14px !important;
  }

  /* il prezzo occupa una riga intera: "€ 19,00" non si spezza piu' */
  .product-card .price{
    flex:0 0 100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:8px !important;
    text-align:center !important;
  }
  .product-card .prezzo-old,
  .product-card .prezzo-nuovo{
    white-space:nowrap !important;
  }

  /* i due tasti sulla riga sotto, interi e centrati */
  .product-card .small-btn,
  .product-card .cart-add-btn{
    flex:0 0 auto !important;
    max-width:100% !important;
    white-space:nowrap !important;
  }
  .product-card .small-btn{
    font-size:9.5px !important;
    padding:8px 11px !important;
  }
  .product-card .cart-add-btn{
    font-size:11px !important;
    padding:9px 13px !important;
  }

  /* ---------- 2) IMMAGINE DELLA MODALE PRODOTTO ---------- */
  .product-modal-image{
    min-height:360px !important;
    max-height:none !important;
    height:auto !important;
    align-self:stretch !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:30px !important;
  }
  .product-modal-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;   /* confezione intera, mai tagliata */
    padding:0 !important;
    margin:0 auto !important;
  }
}

/* PC con schermo basso (portatili 1280x800 e simili): immagine un po'
   piu' contenuta, cosi' testo e tasti restano comunque in vista. */
@media (min-width:721px) and (max-height:760px){
  .product-modal-image{
    min-height:280px !important;
    padding:20px !important;
  }
}


/* ============================================================
   V77 — DUE MODIFICHE, SOLO DESKTOP (PC)
   Entrambe dentro @media (min-width:721px): il telefono resta identico.

   1) Le 3 card "Ricerca Avanzata / Qualita' Certificata / Innovazione
      Continua" avevano titolo 15px e testo 12px: piccolissimi rispetto
      alla card (che e' alta ~700px per via delle icone da 300px).
      Curiosita': su telefono erano gia' piu' grandi (17px / 14px).

   2) Logo dentro il menu sticky (quello che compare quando l'emblema
      della hero scorre via): era largo 210px, ridotto a 150px.
   ============================================================ */

@media (min-width:721px){

  /* ---------- 1) TESTI DELLE 3 CARD ---------- */
  .science-card h3{
    font-size:22px !important;
    line-height:1.18 !important;
    margin-bottom:12px !important;
  }
  .science-card p{
    font-size:15.5px !important;
    line-height:1.65 !important;
  }

  /* ---------- 2) LOGO DEL MENU STICKY ---------- */
  .header.scrolled .header-inner{
    min-height:96px !important;
    height:96px !important;
  }
  .header.scrolled .logo-wrap{
    width:150px !important;
    min-width:150px !important;
    height:78px !important;
    min-height:78px !important;
    transform:translateY(5px) !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    width:150px !important;
    max-width:150px !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}

/* Schermi intermedi (tablet orizzontale / finestre strette):
   testi un filo piu' contenuti, cosi' non vanno a capo male. */
@media (min-width:721px) and (max-width:1050px){
  .science-card h3{font-size:20px !important}
  .science-card p{font-size:14.5px !important}
}


/* ============================================================
   V78 — TESTI DELLE BOX "AREE BENESSERE" IN HOME
   Erano titolo 14px e sottotitolo 11px: piccoli rispetto alla card.
   Portati a 20px / 14px. Solo desktop: su telefono le card sono
   3+2 su schermo stretto e ingrandire il testo le romperebbe.
   ============================================================ */
@media (min-width:721px){
  .hero-area-menu .hero-area-text strong{
    font-size:20px !important;
    line-height:1.22 !important;
    margin-bottom:5px !important;
  }
  .hero-area-menu .hero-area-text small{
    font-size:14px !important;
    line-height:1.4 !important;
  }
  /* un filo piu' di respiro, cosi' il testo piu' grande non tocca i bordi */
  .hero-area-menu .hero-area-card{
    padding:20px 14px !important;
    gap:11px !important;
  }
}

/* Finestre strette / tablet: un gradino sotto, per non mandare a capo
   il titolo piu' lungo ("Energia e Ricostituenti"). */
@media (min-width:721px) and (max-width:1050px){
  .hero-area-menu .hero-area-text strong{font-size:18px !important}
  .hero-area-menu .hero-area-text small{font-size:13px !important}
}


/* ============================================================
   V79 — LOGO DEL MENU STICKY: RIDOTTO ANCHE SU SMARTPHONE
   Sostituisce il blocco della v77 (che agiva solo su desktop).

   NOTA TECNICA: prima il logo veniva dimensionato solo in LARGHEZZA
   (width:210px, height:auto). Se il file logo-safira.png e' piu' alto
   che largo, l'altezza risultante superava quella della barra e il
   logo sbordava sopra e sotto. Qui viene limitato in ENTRAMBE le
   direzioni (max-width + max-height): resta sempre dentro la barra,
   qualunque sia la forma del file immagine.
   ============================================================ */

/* ---------- DESKTOP ---------- */
@media (min-width:721px){
  .header.scrolled .header-inner{
    min-height:96px !important;
    height:96px !important;
  }
  .header.scrolled .logo-wrap{
    width:150px !important;
    min-width:150px !important;
    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;
    transform:translateY(4px) !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    width:auto !important;
    max-width:150px !important;
    height:auto !important;
    max-height:74px !important;
    transform:none !important;
    object-fit:contain !important;
  }
}

/* ---------- SMARTPHONE ---------- */
@media (max-width:720px){
  .header.scrolled .header-inner{
    grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr) !important;
    min-height:72px !important;
    height:72px !important;
  }
  .header.scrolled .logo-wrap{
    width:104px !important;
    min-width:104px !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    transform:translateY(2px) !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    width:auto !important;
    max-width:104px !important;
    height:auto !important;
    max-height:58px !important;
    transform:none !important;      /* annulla il vecchio scale(1.10) */
    object-fit:contain !important;
  }
}

/* ---------- SMARTPHONE PICCOLI ---------- */
@media (max-width:390px){
  .header.scrolled .header-inner{
    grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr) !important;
    min-height:66px !important;
    height:66px !important;
  }
  .header.scrolled .logo-wrap{
    width:96px !important;
    min-width:96px !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    max-width:96px !important;
    max-height:52px !important;
    transform:none !important;      /* annulla il vecchio scale(1.08) */
  }
}


/* ============================================================
   V80 — LOGO MENU STICKY: MISURE CERTE
   Sostituisce il blocco della v79, che lo aveva reso troppo piccolo.

   PERCHE' LA V79 SBAGLIAVA: usava "width:auto + max-height", cioe'
   un LIMITE. Il risultato dipendeva dalle dimensioni reali del file
   logo-safira.png, sconosciute: e' venuto fuori minuscolo.

   COME FUNZIONA ORA: si impone un'ALTEZZA ESATTA al logo e la
   larghezza si adatta da sola mantenendo le proporzioni. Il
   contenitore si stringe attorno al logo (width:auto) e la barra
   e' sempre piu' alta del logo, cosi' resta aria sopra e sotto.

   Rapporto logo/barra: circa 79% su desktop, 77% su telefono.
   Per cambiare la dimensione basta toccare "height" del logo.
   ============================================================ */

/* ---------- DESKTOP: barra 116px, logo 92px ---------- */
@media (min-width:721px){
  .header.scrolled .header-inner{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    min-height:116px !important;
    height:116px !important;
  }
  .header.scrolled .logo-wrap{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    transform:none !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    height:92px !important;        /* <-- la misura da toccare */
    width:auto !important;
    max-width:200px !important;
    max-height:none !important;
    transform:none !important;
    object-fit:contain !important;
  }
}

/* ---------- SMARTPHONE: barra 88px, logo 68px ---------- */
@media (max-width:720px){
  .header.scrolled .header-inner{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    min-height:88px !important;
    height:88px !important;
  }
  .header.scrolled .logo-wrap{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    transform:none !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    height:68px !important;        /* <-- la misura da toccare */
    width:auto !important;
    max-width:140px !important;
    max-height:none !important;
    transform:none !important;
    object-fit:contain !important;
  }
}

/* ---------- SMARTPHONE PICCOLI: barra 82px, logo 62px ---------- */
@media (max-width:390px){
  .header.scrolled .header-inner{
    min-height:82px !important;
    height:82px !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    height:62px !important;
    max-width:128px !important;
  }
}


/* ============================================================
   V81 — MENU STICKY: LOGO PIU' GRANDE + TASTI RIALLINEATI

   PROBLEMA 1 (tasti stretti attorno al logo): nella v80 avevo messo
   la colonna centrale su "auto", cosi' si stringeva attorno al logo
   e trascinava i tasti verso il centro. Ora il menu sticky usa
   ESATTAMENTE la stessa griglia e gli stessi spazi del menu normale
   (colonne clamp(112px,18vw,220px), nav-side min-width 255px,
   gap 34px): la posizione dei tasti non cambia piu' tra le due
   versioni del menu.

   PROBLEMA 2 (logo troppo piccolo): nella v79 usavo "max-height",
   cioe' un limite che dipendeva dalle proporzioni reali del PNG.
   Ora si impone un'ALTEZZA ESATTA, senza alcun max-width che possa
   rimpicciolirlo di rimbalzo.

   PROBLEMA 3 (bordi attorno al logo): contenitore e link attorno al
   logo azzerati (padding, margini, bordo, sfondo, raggio): resta
   solo il logo.

   Il logo occupa circa l'80% dell'altezza della barra: ben visibile,
   ma con aria sopra e sotto e senza uscire.
   PER RITOCCARE LA DIMENSIONE: cambia solo le righe "height" marcate.
   ============================================================ */

/* ---------- DESKTOP: barra 120px, logo 96px ---------- */
@media (min-width:721px){
  .header.scrolled .header-inner{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) clamp(112px,18vw,220px) minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    justify-items:center !important;
    gap:0 !important;
    max-width:1120px !important;
    margin:0 auto !important;
    min-height:120px !important;
    height:120px !important;
  }
  /* stessi spazi del menu non sticky */
  .header.scrolled .nav-side{
    min-width:255px !important;
    gap:34px !important;
  }
  .header.scrolled .nav-side a{
    font-size:15px !important;
    padding:9px 12px !important;
  }
  .header.scrolled .logo-wrap{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    transform:none !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    height:96px !important;        /* <<< DIMENSIONE LOGO DESKTOP */
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    object-fit:contain !important;
  }
}

/* ---------- SMARTPHONE: barra e logo proporzionali allo schermo ---------- */
@media (max-width:720px){
  .header.scrolled{
    padding:6px 2% !important;
  }
  .header.scrolled .header-inner{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) clamp(64px,19vw,86px) minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    justify-items:center !important;
    gap:0 4px !important;
    min-height:clamp(78px,23vw,96px) !important;
    height:clamp(78px,23vw,96px) !important;
  }
  /* tasti alla stessa misura del menu normale, con un filo di
     adattamento per non far uscire "Contatti" sugli schermi stretti */
  .header.scrolled .nav-side{
    width:100% !important;
    min-width:0 !important;
    gap:clamp(7px,2.6vw,11px) !important;
  }
  .header.scrolled .nav-side a{
    font-size:clamp(13px,4.1vw,16.5px) !important;
    padding:6px 4px !important;
  }
  .header.scrolled .logo-wrap{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    transform:none !important;
  }
  .header.scrolled .logo-wrap .logo-img,
  .header.scrolled .logo-img{
    height:clamp(58px,17.6vw,74px) !important;   /* <<< DIMENSIONE LOGO MOBILE */
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    object-fit:contain !important;
  }
}

/* ---------- NIENTE BORDI/SFONDI ATTORNO AL LOGO ---------- */
.header.scrolled .logo-wrap,
.header.scrolled .logo-wrap a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  line-height:0 !important;
  text-decoration:none !important;
  overflow:visible !important;
}