/* Layout condiviso delle pagine prodotto. Ogni pagina definisce il proprio tema con le variabili:
   --t (accento), --t2 (accento secondario), --tbg (sfondo), --tglow (alone) e l'immagine hero con `.sp-hero::before { background-image: url(...) }` nel <style> della pagina. Base: ../css/style.css */

body { background: var(--tbg); }
a { color: var(--t2); }
a:hover { color: var(--white); }

.sp-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; background: color-mix(in srgb, var(--tbg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--t) 30%, transparent); }
.sp-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.sp-nav img { height: 44px; width: auto; }
.sp-nav ul { display: flex; gap: 1.5rem; font-size: .85rem; font-weight: 600; }
.sp-nav ul a { color: var(--white-muted); }
.sp-nav ul a:hover { color: var(--t2); }
.sp-back { font-size: .85rem; font-weight: 600; white-space: nowrap; }

.sp-hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.sp-hero::before { content: ""; position: absolute; inset: 0; background-position: var(--hero-pos, center); background-size: cover; filter: brightness(.45) saturate(1.15); }
.sp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--tbg) 0%, transparent 55%); }
.sp-hero .container { position: relative; z-index: 1; }
.sp-eyebrow { font-family: var(--font-display); font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--t2); margin-bottom: 1rem; }
.sp-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.1; color: var(--white); text-shadow: 0 0 30px var(--tglow); }
.sp-title em { font-style: normal; color: var(--t2); display: block; }
.sp-sub { max-width: 600px; margin: 1.25rem 0 2rem; font-size: 1.15rem; color: var(--white-muted); }

.sp-btn { display: inline-block; padding: .9rem 2rem; border-radius: 999px; background: var(--t2); color: #111; font-weight: 700; box-shadow: 0 0 30px var(--tglow); transition: var(--transition); }
.sp-btn:hover { color: #111; transform: translateY(-2px); }
.sp-btn--ghost { background: transparent; color: var(--white); border: 1px solid var(--t); box-shadow: none; margin-left: .75rem; }
.sp-btn--ghost:hover { color: var(--white); background: color-mix(in srgb, var(--t) 25%, transparent); }

.sp-section { padding: 6rem 0; }
.sp-section--tint { background: color-mix(in srgb, var(--t) 6%, transparent); }
.sp-center { text-align: center; }
.sp-h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--white); margin-bottom: 1.5rem; }
.sp-h2 span { color: var(--t2); }
.sp-lead { max-width: 760px; margin: 0 auto 2.5rem; color: var(--gray); }
.sp-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.sp-split p, .sp-prose p { margin-bottom: 1rem; }
.sp-prose { max-width: 820px; margin-inline: auto; }
.sp-prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.sp-prose li { margin-bottom: .5rem; }

.sp-media { border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--t) 50%, transparent); box-shadow: 0 0 50px var(--tglow); max-width: 100%; margin-inline: auto; }
.sp-media--poster { max-width: 380px; }
.sp-video { position: relative; aspect-ratio: 16/9; max-width: 820px; margin: 0 auto 2rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid color-mix(in srgb, var(--t) 50%, transparent); box-shadow: 0 0 50px var(--tglow); }
.sp-video--tall { aspect-ratio: 9/16; max-width: 360px; }
.sp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.sp-fact { padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--t) 8%, transparent); }
.sp-fact strong { display: block; font-family: var(--font-display); color: var(--t2); font-size: 1.05rem; }

.sp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.sp-card { background: color-mix(in srgb, var(--tbg) 70%, #000); border: 1px solid color-mix(in srgb, var(--t) 25%, transparent); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); }
.sp-card:hover { border-color: var(--t2); box-shadow: 0 0 40px var(--tglow); transform: translateY(-4px); }
.sp-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; cursor: zoom-in; }
.sp-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.sp-card-body h3 { font-family: var(--font-display); font-size: .95rem; color: var(--white); margin-bottom: .5rem; }
.sp-card-body p { font-size: .92rem; color: var(--gray); }
.sp-card-num { display: inline-block; font-family: var(--font-display); font-weight: 900; color: var(--t2); margin-bottom: .4rem; }

.sp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.sp-gallery img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); cursor: zoom-in; transition: var(--transition); }
.sp-gallery img:hover { transform: scale(1.03); border-color: var(--t2); box-shadow: 0 0 30px var(--tglow); }

.sp-testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.sp-testi figure { padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--t) 25%, transparent); background: color-mix(in srgb, var(--t) 6%, transparent); }
.sp-testi blockquote { font-size: 1.05rem; color: var(--white); margin-bottom: 1rem; }
.sp-testi figcaption { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--gray); }
.sp-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: #111; font-weight: 800; flex: none; }

.sp-stores { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.sp-stores img { height: 56px; width: auto; }

.sp-cta { text-align: center; padding: 5rem 0; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 18%, transparent), color-mix(in srgb, var(--t2) 10%, transparent)); }
.sp-foot { text-align: center; padding: 2rem 0; font-size: .85rem; color: var(--gray); }

.sp-lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(0,0,0,.92); cursor: zoom-out; }
.sp-lightbox.open { display: grid; }
.sp-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: var(--radius); }

.sp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.sp-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sp-reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 900px) { .sp-nav ul { display: none; } }
@media (max-width: 800px) { .sp-split { grid-template-columns: 1fr; } .sp-btn--ghost { margin: .75rem 0 0; } .sp-section { padding: 4rem 0; } }