/* ==========================================================================
   BlancOne® — Landing Centri "White Xmas 2026"
   Brand: Brand_Manual_BLANCONE.pdf (Concept & Visual 2026)
   Direzione: notte di Natale BlancOne — cielo stellato, neve di stelle (fig. 3),
   luci calde; forme del brand come accento, pattern solo come "ghirlanda".
   Nessun nero: l'inchiostro è il blu notte ricavato dal navy dei pattern ufficiali.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONT (man. 4.3 — Outfit per web e digitale)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Istituzionale (man. 2.2) */
  --cyan: #009fe3;            /* Process Cyan RGB 0/159/227 */
  --white: #fff;
  /* Navy dei pattern/applicazioni ufficiali (man. 6.0 / 8.x) */
  --navy: #14427e;
  /* Inchiostro: stessa tinta del navy, più profonda (4,8:1 su cyan · 14,6:1 su bianco) */
  --ink: #0a2a52;
  --ink-soft: #3f5a78;        /* 7,1:1 su bianco, 6,5:1 su ice */
  --ice: #eaf6fc;             /* tinta chiara del cyan */
  --sky: #83d0f5;             /* tinta chiara del cyan: accenti su fondi scuri (8:1 su ink) */
  --line: #c9dfee;
  --on-dark: rgba(255, 255, 255, .84);
  --night-veil: linear-gradient(180deg, rgba(10, 42, 82, .35) 0%, rgba(10, 42, 82, .72) 100%);

  /* Tipografia — scala modulare ~1.25 */
  --font: "Outfit", Arial, sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-lead: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-price: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  /* Interlinea: titoli 1 · sottotitoli 1.15 · testi 1.3 */
  --lh-title: 1;
  --lh-sub: 1.15;
  --lh-text: 1.3;
  --lh-tight: var(--lh-title);

  /* Spaziature / forme */
  --gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  --section: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --radius: 28px;
  --radius-sm: 16px;
  --d-shape: 8px 999px 999px 8px;                            /* fig. 5 */
  --smile-shape: 16px 16px 999px 999px / 16px 16px 50% 50%;   /* cornice "sorriso" */
  --max: 1200px;

  --ease-out: cubic-bezier(.25, 1, .5, 1);   /* ease-out-quart */
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color: var(--ink); }
svg { fill: currentColor; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
sup { font-size: .55em; line-height: 0; vertical-align: .75em; margin-left: .02em; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

strong { font-weight: 700; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible,
.gift :focus-visible,
.materials :focus-visible,
.smiles :focus-visible,
.visibility :focus-visible,
.closing :focus-visible { outline-color: var(--white); }

.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   COMPONENTI COMUNI
   -------------------------------------------------------------------------- */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* Bottoni — forma "D" (fig. 5) + stella (fig. 3) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px;
  padding: .9rem 2.2rem .9rem 1.6rem;
  border-radius: var(--d-shape);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  line-height: var(--lh-sub);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 24px -10px rgba(10, 42, 82, .55);
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn::after {
  content: "";
  flex: none;
  width: 1.1em;
  aspect-ratio: 1;
  background: url("../assets/graphics/stella-bianca.webp") center / contain no-repeat;
  transition: transform .5s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(10, 42, 82, .6); }
.btn:hover::after { transform: rotate(90deg) scale(1.2); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--cyan { background: var(--cyan); color: var(--ink); }
.btn--cyan:hover { background: var(--sky); }
.btn--lg { min-height: 64px; font-size: 1.125rem; padding-inline: 2rem 2.6rem; }
@media (max-width: 420px) {
  .btn { font-size: .9375rem; letter-spacing: .02em; padding-inline: 1.25rem 1.6rem; }
}

/* Stella (fig. 3) — accento puntuale */
.spark {
  position: absolute;
  display: block;
  width: 28px;
  aspect-ratio: 1;
  background: url("../assets/graphics/stella-bianca.webp") center / contain no-repeat;
  pointer-events: none;
}

.spark--c { background-image: url("../assets/graphics/stella-cyan.webp"); }

/* Neve: stelle ufficiali (fig. 3) che cadono lentamente, solo sulle scene notturne */
.snow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.snow span {
  position: absolute;
  left: 0;
  right: 0;
  top: -420px;
  height: calc(100% + 420px);
  background: url("../assets/graphics/neve-1.webp") 0 0 / 420px repeat;
  opacity: .5;
}
.snow span:nth-child(2) { top: -300px; height: calc(100% + 300px); background-image: url("../assets/graphics/neve-2.webp"); background-size: 300px; opacity: .3; }
.snow span:nth-child(3) { top: -560px; height: calc(100% + 560px); background-image: url("../assets/graphics/neve-3.webp"); background-size: 560px; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .snow span { animation: snow-1 34s linear infinite; }
  .snow span:nth-child(2) { animation: snow-2 22s linear infinite; }
  .snow span:nth-child(3) { animation: snow-3 48s linear infinite; }
  @keyframes snow-1 { to { transform: translate3d(-40px, 420px, 0); } }
  @keyframes snow-2 { to { transform: translate3d(30px, 300px, 0); } }
  @keyframes snow-3 { to { transform: translate3d(-20px, 560px, 0); } }
}

/* Icone ufficiali (man. 7.0) */
.icon {
  display: inline-block;
  flex: none;
  width: 44px;
  height: 44px;
  background: center / contain no-repeat;
}
.icon--chair { background-image: url("../assets/icons/icona-poltrona-studio-bianca.webp"); }
.icon--hand  { background-image: url("../assets/icons/icona-mano-dente.webp"); }
.icon--talk  { background-image: url("../assets/icons/icona-dialogo-dente.webp"); }

/* Marker parola chiave "D" (fig. 5, editabile)
   Stessa grammatica dei pulsanti: [margine] PAROLA [spazio] ★ [margine curvo].
   - margine sinistro = spazio parola→stella = .22em
   - stella .55em (≈ 3/4 dell'altezza delle maiuscole)
   - il centro della stella coincide con il centro della calotta (raggio = h/2)
   - maiuscolo: padding verticale asimmetrico per centrare la cap-height */
.hl-d {
  display: inline-flex;
  align-items: center;
  gap: .205em;                      /* = margine sinistro, al netto dello spazio laterale del glifo */
  line-height: 1;
  text-transform: uppercase;
  padding: .088em .50em .112em .22em;
  margin: 0 .04em;
  background: var(--white);
  color: var(--ink);
  border-radius: .1em 999px 999px .1em;
}
.hl-d::after {
  content: "";
  flex: none;
  width: .55em;
  aspect-ratio: 1;
  transform: translateY(-.012em);
  background: url("../assets/graphics/stella-cyan.webp") center / contain no-repeat;
}

/* Prezzi (pacchetti Centri) */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 2px dashed var(--line);
}
.price__now {
  font-size: var(--fs-price);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.price__old {
  font-size: 1.125rem;
  color: var(--ink-soft);
  text-decoration-thickness: 2px;
}
/* Sconto come "cartellino regalo": forma D con occhiello */
.price__off {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-left: auto;
  padding: .32rem 1.1rem .36rem .55rem;
  background: var(--cyan);
  border-radius: var(--d-shape);
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  transform: rotate(-4deg);
}
.price__off::before {
  content: "";
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: inset 0 0 0 2px rgba(10, 42, 82, .25);
}

/* Scelta HOME+ FAST / NIGHT / EVER */
.choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
}
.choice__chips { display: flex; flex: none; gap: 4px; }
.choice__chips img { width: 30px; height: 30px; border-radius: 0; }
.choice__text { font-size: var(--fs-small); color: var(--ink-soft); }
.choice--sm .choice__chips img { width: 24px; height: 24px; }

/* Entrata: contenuto sempre visibile; animazione legata allo scroll dove supportata */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* --------------------------------------------------------------------------
   HEADER — logo sulla notte stellata
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
}
.site-header__inner { padding-block: clamp(1rem, .6rem + 1.5vw, 1.75rem); }
.site-header__logo {
  width: auto;
  height: clamp(52px, 44px + 1vw, 64px);
}

/* --------------------------------------------------------------------------
   1. HERO — notte di Natale: cielo stellato (foto), neve di stelle, bordo a "sorriso"
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  color: var(--white);
  background: var(--night-veil), url("../assets/img/bg-notte-stellata.webp") center top / cover no-repeat, var(--ink);
  padding-block: clamp(6.5rem, 5rem + 4vw, 8.5rem) clamp(6rem, 4rem + 6vw, 9rem);
  clip-path: ellipse(160% 100% at 50% 0%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.hero__title {
  max-width: 17ch;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero__title-sub { display: block; margin-top: .06em; color: var(--sky); }
.hero__copy {
  display: grid;
  gap: .9rem;
  max-width: 34rem;
  margin: 1.5rem 0 2.25rem;
  color: var(--on-dark);
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-sub);
  color: var(--white);
}
.hero__copy strong { color: var(--white); }

.hero__visual {
  position: relative;
  width: min(100%, 480px);
  margin-inline: auto;
}
/* Luce dietro la foto, come una lanterna */
.hero__visual::before {
  content: "";
  position: absolute;
  inset: -12% -14% -6%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(131, 208, 245, .55), rgba(131, 208, 245, 0));
}
.hero__photo {
  position: relative;
  aspect-ratio: 1 / 1.12;
  border-radius: var(--smile-shape);
  overflow: hidden;
  background: #88c9ec;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .95), 0 30px 60px -20px rgba(0, 20, 50, .6);
}
.hero__photo > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Coppia di semicerchi (fig. 2): focus sul sorriso */
.hero__target {
  position: absolute;
  left: 50%;
  top: 54.4%;
  width: 46%;
  height: auto;
  transform: translate(-50%, -50%);
}
.hero__spark--1 { top: 2%;  left: -9%; width: 40px; }
.hero__spark--2 { top: 42%; right: -8%; width: 26px; }
.hero__spark--3 { top: -6%; right: 18%; width: 18px; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; }
  .hero__visual { margin: 0; justify-self: end; }
}

/* --------------------------------------------------------------------------
   2. PACCHETTI — il regalo per il Centro
   -------------------------------------------------------------------------- */
.packs { padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--section); }

.packs__intro {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-lead);
  line-height: var(--lh-sub);
}
.packs__xmas-logo { width: clamp(180px, 22vw, 240px); }

.packs__title {
  max-width: 18ch;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
}

.packs__grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 700px) and (max-width: 1023px) {
  .packs__grid { grid-template-columns: 1fr 1fr; }
  .packs__grid .pack:last-child { grid-column: 1 / -1; max-width: calc(50% - 1rem); justify-self: center; width: 100%; }
}
@media (min-width: 1024px) {
  .packs__grid { grid-template-columns: repeat(3, 1fr); }
}

.pack {
  display: flex;
  flex-direction: column;
  background: var(--ice);
  border-radius: var(--radius);
  transition: transform .4s var(--ease-out);
}
.pack:hover { transform: translateY(-4px); }
/* Blocco colore prodotto che termina a "sorriso", con luce e neve */
.pack__stage {
  position: relative;
  height: 210px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%),
    url("../assets/graphics/neve-2.webp") 0 0 / 220px repeat,
    var(--prod);
  border-radius: var(--radius) var(--radius) 50% 50% / var(--radius) var(--radius) 38% 38%;
}
.pack__lockup {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 60px;
  height: 60px;
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--white);
}
.pack__product {
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 86%;
  max-width: 340px;
  transform: translateX(-46%) rotate(-4deg);
  filter: drop-shadow(0 16px 18px rgba(10, 42, 82, .25));
  transition: transform .5s var(--ease-out);
}
.pack:hover .pack__product { transform: translateX(-46%) translateY(-8px) rotate(-1deg); }

.pack__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1.25rem;
  padding: 84px 1.5rem 1.5rem;
}
.pack__items {
  display: grid;
  gap: .4rem;
  font-size: 1rem;
  line-height: var(--lh-text);
}
.pack__items li:first-child { font-size: 1.1875rem; font-weight: 700; line-height: var(--lh-sub); }

/* Smile Box RITUALS — il cofanetto come regalo */
.rituals {
  position: relative;
  display: grid;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}
.rituals__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.rituals__content {
  position: relative;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rituals__lockup { width: 64px; height: 64px; border-radius: 0; margin-bottom: 1.25rem; }
.rituals__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: -.015em;
  max-width: 20ch;
  text-wrap: balance;
}
.rituals__sub {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .9rem;
  font-size: 1.0625rem;
  color: var(--sky);
}
.rituals__sub .icon { width: 34px; height: 34px; }
.rituals__intro { margin: 1.5rem 0 .9rem; color: var(--on-dark); }
.rituals__list { display: grid; gap: .55rem; }
.rituals__list li {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: 1.0625rem;
}
.rituals__list img { width: 38px; height: 38px; border-radius: 0; }
.rituals__spark { top: 24px; right: 28px; width: 30px; }
@media (min-width: 860px) {
  .rituals { grid-template-columns: 1fr 1fr; }
}

/* HOME+ */
.pack-home {
  display: grid;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--ice);
  border-radius: var(--radius);
  overflow: hidden;
}
.pack-home__media { position: relative; background: var(--prod); }
.pack-home__media > img:first-child {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.pack-home__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
/* Lockup HOME+ con, alla sua destra, il contenuto del pacchetto */
.pack-home__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.pack-home__lockup { flex: none; width: 64px; height: 64px; border-radius: 0; }
@media (min-width: 1024px) { .pack-home__lockup { width: 80px; height: 80px; } }
.pack-home .price { margin-top: 0; }

/* Nota kit: nessun contenitore, immagine in cornice "sorriso" + lista */
.kit-note {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  align-items: start;
  font-size: var(--fs-small);
}
.pack-home .kit-note { padding-top: 1.25rem; border-top: 2px dashed var(--line); }
.kit-note__img { width: 96px; height: 110px; object-fit: cover; border-radius: var(--smile-shape); }
.kit-note__title { margin-bottom: .5rem; }
.kit-note__list li { position: relative; padding-left: 1.1rem; }
.kit-note__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}
.kit-note--plain { grid-template-columns: 1fr; }
/* DELUXE Patient Kit nella card HOME+: foto protagonista accanto alla lista */
.kit-note--deluxe {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  font-size: 1rem;
}
.kit-note--deluxe .kit-note__img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 18px 32px -20px rgba(10, 42, 82, .45);
}
.kit-note--deluxe .kit-note__title { font-size: 1.125rem; line-height: var(--lh-sub); margin-bottom: .75rem; }
.kit-note--deluxe .kit-note__list { display: grid; gap: .35rem; }
@media (max-width: 479px) {
  .kit-note, .kit-note--deluxe { grid-template-columns: 1fr; }
  .kit-note--deluxe .kit-note__img { max-width: 320px; }
}
@media (min-width: 900px) {
  .pack-home { grid-template-columns: 5fr 7fr; }
  .pack-home__media > img:first-child { aspect-ratio: auto; min-height: 100%; }
}

/* --------------------------------------------------------------------------
   3. OMAGGIO — azzurro BlancOne con neve di stelle
   -------------------------------------------------------------------------- */
/* Azzurro BlancOne: dal blu profondo (dietro al testo, per il contrasto)
   al Process Cyan, con luce bianca e neve di stelle */
.gift {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(60% 90% at 78% 50%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%),
    linear-gradient(100deg, #0a5fae 0%, #0077c8 38%, var(--cyan) 72%, #33b3ea 100%);
  overflow: hidden;
}
.gift__inner {
  display: grid;
  align-items: center;
  gap: 2rem;
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
}
.gift__text {
  max-width: 28ch;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  line-height: var(--lh-sub);
  letter-spacing: -.01em;
}
.gift__text strong { font-weight: 800; }
/* "24 trattamenti": stesso stile, sempre sulla stessa riga */
.gift__num {
  display: inline-block;
  font-size: 2.1em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--white);
}
@media (max-width: 420px) {
  .gift__num { font-size: 1.75em; }
}
.gift__art { position: relative; }
.gift__art::before {                     /* alone di luce dietro le borracce */
  content: "";
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
}
.gift__img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 30px rgba(0, 40, 90, .45));
}
.gift__spark--1 { right: 6%; top: -6%; width: 42px; }
.gift__spark--2 { left: 4%; bottom: 2%; width: 24px; }
@media (min-width: 900px) {
  .gift__inner { grid-template-columns: 1fr 1.15fr; gap: 3rem; }
}

/* --------------------------------------------------------------------------
   4. MATERIALI PROMOZIONALI — notte di luci a fiocco di neve (foto Unsplash),
      icone dei 4 materiali + foto dei materiali
   -------------------------------------------------------------------------- */
.materials {
  position: relative;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(10, 42, 82, .92) 0%, rgba(10, 42, 82, .78) 40%, rgba(10, 42, 82, .25) 75%, rgba(10, 42, 82, .45) 100%),
    url("../assets/img/bg-fiocchi-luci.webp") center / cover no-repeat,
    var(--ink);
  padding-block: var(--section);
  overflow: hidden;
}
.materials .container {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  align-items: center;
}
.materials__statement {
  max-width: 32ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-sub);
  color: var(--on-dark);
}
.materials__statement::before {
  content: "";
  display: block;
  width: 64px;
  aspect-ratio: 2;
  margin-bottom: 1.1rem;
  background: url("../assets/graphics/sorriso.svg") center / contain no-repeat;
}
.materials__title {
  max-width: 26ch;
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  line-height: var(--lh-title);
}

/* Icone dei materiali: tessere "vetro ghiacciato" con illustrazione + nome */
.materials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
}
@media (min-width: 600px) {
  .materials__grid { grid-template-columns: repeat(4, 1fr); }
}
.mat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1rem .75rem 1.1rem;
  text-align: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  transition: transform .4s var(--ease-out), background-color .4s var(--ease-out);
}
.mat:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .14); }
.mat__art { width: 100%; max-width: 110px; height: auto; aspect-ratio: 5 / 4; }
.mat__art .c-cyan { fill: var(--cyan); }
.mat__art .c-cyan-2 { fill: var(--sky); }
.mat__art .c-white { fill: var(--white); }
.mat__art .c-cyan-fill { fill: var(--cyan); }
.mat__name {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 700;
  line-height: var(--lh-sub);
}
.materials__cta { margin-top: 2rem; }

.materials__media img {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 28px 40px rgba(0, 12, 40, .6));
}
@media (min-width: 960px) {
  .materials .container { grid-template-columns: 1.15fr 1fr; column-gap: clamp(2rem, 4vw, 4.5rem); }
}
@media (max-width: 959px) {
  .materials {
    background:
      linear-gradient(180deg, rgba(10, 42, 82, .86) 0%, rgba(10, 42, 82, .78) 55%, rgba(10, 42, 82, .4) 100%),
      url("../assets/img/bg-fiocchi-luci.webp") 30% center / cover no-repeat,
      var(--ink);
  }
}

/* --------------------------------------------------------------------------
   5. PROMO PACK PAZIENTI — listino con cartellino prezzo a "D"
   -------------------------------------------------------------------------- */
.patients {
  position: relative;
  background: var(--ice);
  padding-block: var(--section);
}
.patients__head {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.patients__lead {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-sub);
}
.patients__lead .icon { width: 52px; height: 52px; }
.patients__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 60% center;
  border-radius: var(--radius) var(--radius) var(--radius) 999px / var(--radius) var(--radius) var(--radius) 60%;
}
@media (min-width: 900px) {
  .patients__head { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.ppacks { display: grid; gap: 1rem; }
.ppack {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.ppack:hover { transform: translateX(4px); box-shadow: 0 14px 30px -18px rgba(10, 42, 82, .35); }
.ppack__brand { display: flex; flex-direction: column; gap: 6px; align-self: center; }
.ppack__brand img { width: 64px; height: 64px; border-radius: 0; }
/* Logo C&W (Clean&White) in tessera quadrata, stessa misura dei lockup prodotto */
.ppack__brand .ppack__cw { width: 64px; height: 64px; padding: 6px; background: var(--ice); object-fit: contain; }
.ppack__items {
  display: grid;
  gap: .3rem;
  font-size: 1rem;
  line-height: var(--lh-text);
}
.ppack__items li:first-child { font-size: 1.1875rem; font-weight: 700; line-height: var(--lh-sub); }
.ppack__price {
  grid-column: 1 / -1;
  padding: 1rem 1.75rem 1.1rem 1.1rem;
  background: color-mix(in srgb, var(--prod) 12%, var(--white));
  border-radius: 10px 999px 999px 10px;
}
.ppack__label { font-size: var(--fs-small); color: var(--ink-soft); }
.ppack__amount {
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.5rem);
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: -.03em;
}
.ppack__variant {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.ppack--home .ppack__amount + .ppack__amount { margin-top: .35rem; }
.ppack__note { margin-top: .35rem; font-size: .875rem; color: var(--ink-soft); }

@media (min-width: 960px) {
  .ppack {
    grid-template-columns: 80px 1fr minmax(290px, 340px);
    padding: 1rem 1rem 1rem 1.5rem;
  }
  .ppack__brand img { width: 80px; height: 80px; }
  .ppack__brand .ppack__cw { width: 80px; height: 80px; padding: 8px; }
  .ppack__price {
    grid-column: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.patients__foot {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
.disclaimer {
  display: grid;
  gap: .4rem;
  max-width: 72ch;
  font-size: .875rem;
  line-height: var(--lh-text);
  color: var(--ink-soft);
}
/* DELUXE Patient Kit nella sezione pazienti: foto + lista, su superficie bianca */
.kit-note--patients {
  padding: 1.25rem;
  background: var(--white);
  border-radius: var(--radius);
}
.kit-note--patients .kit-note__img { box-shadow: none; }
@media (min-width: 900px) {
  .patients__foot { grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
}

/* --------------------------------------------------------------------------
   6. SORRISI — luci di Natale (foto bokeh) + neve
   -------------------------------------------------------------------------- */
.smiles {
  position: relative;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(10, 42, 82, .62), rgba(20, 66, 126, .38) 55%, rgba(20, 66, 126, .9)),
    url("../assets/img/bg-luci-magiche.webp") center / cover no-repeat,
    var(--navy);
  padding-block: var(--section);
  overflow: hidden;
}
.smiles__head {
  display: grid;
  justify-items: center;
  gap: .9rem;
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
/* Icona in cerchio: pittogramma al 50% del diametro (la diagonale del quadrato
   resta entro ~70% del cerchio) e correzione ottica: il baricentro visivo
   dell'icona è al 45,5% in altezza, quindi si abbassa di ~1,5 px */
.smiles__head .icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--white);
  background-size: 36px;
  background-position: calc(50% + .5px) calc(50% + 1.5px);
}
.smiles__lead { font-size: var(--fs-lead); line-height: var(--lh-sub); color: var(--white); }

/* Testimonianze video Instagram — stessa impostazione della landing WhiteSummer */
.reels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 1000px;
  margin: clamp(3.5rem, 3rem + 3vw, 5rem) auto 0;
}
@media (min-width: 700px) { .reels { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.reel {
  position: relative;
  display: block;
  aspect-ratio: 9 / 14;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(0, 20, 50, .5);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.reel:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 22px 40px -16px rgba(0, 20, 50, .6); }
.reel:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.reel__thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(rgba(10, 42, 82, 0) 35%, rgba(10, 42, 82, .85) 100%);
  pointer-events: none;
}
.reel__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 22px rgba(10, 42, 82, .4);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out);
}
.reel:hover .reel__play { transform: translate(-50%, -50%) scale(1.08); background: var(--white); }
.reel__play svg { width: 22px; height: 22px; margin-left: 3px; color: var(--ink); }
.reel__caption {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  line-height: var(--lh-sub);
}
.reel__caption svg { flex: none; width: 14px; height: 14px; fill: none; }

/* --------------------------------------------------------------------------
   7. VISIBILITÀ — la mappa come un cielo: i Centri aderenti si accendono
   -------------------------------------------------------------------------- */
.visibility {
  position: relative;
  overflow-x: clip;         /* alone e iPhone ruotato del mockup non devono creare scroll orizzontale */
  background: var(--navy);
  color: var(--white);
  padding-block: var(--section) calc(var(--section) + 4rem);
}
.visibility__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.visibility__text { display: grid; gap: 1.1rem; max-width: 34rem; line-height: var(--lh-text); }
.visibility__text p { color: var(--on-dark); }
.visibility__text p:first-of-type { font-size: var(--fs-lead); line-height: var(--lh-sub); color: var(--white); }

/* Mockup dispositivi reali (MacBook Pro 16" + iPhone 14 Pro) che fluttuano nella notte */
.devices {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 4% 0 10%;
}
/* alone di luce azzurra dietro la composizione */
.devices::before {
  content: "";
  position: absolute;
  inset: 0 -10% 0 -10%;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(0, 159, 227, .45), rgba(0, 159, 227, 0));
  pointer-events: none;
}
.devices__mac,
.devices__phone {
  position: relative;
  z-index: 1;
  height: auto;
  will-change: transform;
}
.devices__mac {
  width: 90%;
  filter: drop-shadow(0 40px 40px rgba(0, 10, 35, .55));
}
.devices__phone {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 25%;
  transform: rotate(6deg);
  filter: drop-shadow(-12px 34px 30px rgba(0, 10, 35, .6));
}
.devices__spark { z-index: 3; }
.devices__spark--1 { top: 0; right: 14%; width: 30px; }
.devices__spark--2 { bottom: 16%; left: -2%; width: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .devices__mac { animation: float-mac 7s ease-in-out infinite; }
  .devices__phone { animation: float-phone 6s ease-in-out infinite; }
  @keyframes float-mac { 50% { transform: translateY(-10px); } }
  @keyframes float-phone {
    0%, 100% { transform: translateY(0) rotate(6deg); }
    50% { transform: translateY(-16px) rotate(4deg); }
  }
}
@media (min-width: 900px) {
  .visibility__grid { grid-template-columns: .9fr 1.1fr; gap: 4rem; }
}

/* --------------------------------------------------------------------------
   8. CHIUSURA — si torna alla notte di Natale, bordo superiore a "sorriso"
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  z-index: 1;
  margin-top: -4rem;
  color: var(--white);
  background: var(--night-veil), url("../assets/img/bg-notte-stellata.webp") center / cover no-repeat, var(--ink);
  padding-block: calc(var(--section) + 2rem) var(--section);
  clip-path: ellipse(160% 100% at 50% 100%);
  overflow: hidden;
  text-align: center;
}
.closing__inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}
.closing__title {
  max-width: 18ch;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.closing__date {
  display: block;
  margin-top: .1em;
  font-size: 1.4em;
  line-height: var(--lh-title);
  letter-spacing: -.03em;
  color: var(--sky);
}
/* Sorriso (fig. 1) come sottolineatura della data (rif. Story man. 8.6) */
.closing__smile {
  width: clamp(88px, 10vw, 128px);
  aspect-ratio: 2;
  margin-top: -.35rem;
  fill: var(--white);
}
.closing__lead { font-size: var(--fs-lead); line-height: var(--lh-sub); }
.closing__spark--1 { top: 12%; left: 8%; width: 36px; }
.closing__spark--2 { top: 16%; right: 10%; width: 22px; }
@media (min-width: 900px) {
  .closing__spark--1 { top: 26%; left: 12%; width: 46px; }
  .closing__spark--2 { top: 36%; right: 13%; width: 28px; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  padding-block: 44px;
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.site-footer__logo { width: auto; height: 60px; }
.site-footer__info {
  max-width: 70ch;
  font-size: .875rem;
  line-height: var(--lh-text);
  color: var(--on-dark);
}
.site-footer__info a { color: var(--white); text-underline-offset: 3px; }
.site-footer__info a:hover { color: var(--sky); }
.site-footer :focus-visible { outline-color: var(--white); }

/* --------------------------------------------------------------------------
   MOTION — scintillio discreto delle stelle
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: twinkle 4.5s ease-in-out infinite; }
  .hero__spark--2, .gift__spark--2, .closing__spark--2 { animation-delay: 1.4s; }
  .hero__spark--3 { animation-delay: 2.6s; }
  @keyframes twinkle {
    0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    50% { transform: scale(.72) rotate(12deg); opacity: .75; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   RIFINITURE MOBILE (check finale)
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  /* HOME+ Centri: lockup sopra le voci, così il testo non si stringe */
  .pack-home__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 479px) {
  /* HOME+ pazienti: "senza/con mascherine" sempre sotto il rispettivo prezzo */
  .ppack__variant { display: block; margin-top: .15rem; }
  /* Chiusura: "31 dicembre 2026." su una riga */
  .closing__date { font-size: 1.15em; }
  /* Video: didascalia su una riga nelle card a 2 colonne */
  .reel__caption { left: 10px; right: 10px; bottom: 12px; gap: 6px; font-size: .6875rem; }
  .reel__caption svg { width: 12px; height: 12px; }
}