/* ==========================================================================
   BlancOne® — Landing Consapevolezza Pazienti
   Stessa identità delle landing BlancOne (palette, Outfit, semicerchio
   "sorriso", stella, marker e bottoni a "D"), con un mood pop e luminoso da
   beauty routine. Mobile-first. Animazioni in js/main.js (GSAP + ScrollTrigger):
   questo foglio descrive sempre lo STATO FINALE, così senza JS o con
   movimento ridotto tutto è visibile e leggibile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONT (Brand Manual 4.3 — Outfit per il web)
   -------------------------------------------------------------------------- */
@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;
}

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colori istituzionali (man. 2.2) + tinte delle landing BlancOne */
  --cyan: #009fe3;
  --sky: #83d0f5;
  --ice: #eaf6fc;
  --ink: #0a2a52;
  --navy: #14427e;
  --ink-soft: #3f5a78;
  --line: #c9dfee;
  --white: #fff;
  --on-dark: rgba(255, 255, 255, .86);

  /* Tipografia */
  --font: "Outfit", Arial, sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-lead: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  --fs-h3: clamp(1.625rem, 1.2rem + 1.7vw, 2.625rem);
  --fs-h2: clamp(2.125rem, 1.4rem + 3vw, 4.25rem);
  --fs-statement: clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem);
  --fs-display: clamp(3rem, 1.6rem + 6.2vw, 6rem);
  --lh-title: .98;
  --lh-sub: 1.15;
  --lh-text: 1.4;

  /* Spazi e forme */
  --gutter: clamp(1rem, .6rem + 2vw, 2.5rem);
  --section: clamp(4.5rem, 3rem + 5vw, 8rem);
  --max: 1200px;
  --header-h: clamp(4.5rem, 3.8rem + 2vw, 6rem);
  --radius: 28px;
  --radius-lg: 48px;
  --d-shape: 8px 999px 999px 8px;                                /* marker fig. 5 */
  --smile-shape: 28px 28px 999px 999px / 28px 28px 50% 50%;       /* cornice "sorriso" */

  /* Maschere SVG inline (data URI: funzionano anche aprendo il file in locale) */
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 495.74 495.74'%3E%3Cpath d='M247.87,0c0,144.15-103.72,247.87-247.87,247.87,144.15,0,247.87,103.72,247.87,247.87,0-144.15,103.72-247.87,247.87-247.87-144.15,0-247.87-103.72-247.87-247.87Z'/%3E%3C/svg%3E");
  --smile-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 634.24 317.12'%3E%3Cpath d='M317.12,317.12c-42.78,0-84.32-8.39-123.46-24.95-37.77-15.98-71.68-38.83-100.78-67.93-29.1-29.1-51.96-63.01-67.93-100.78C8.39,84.32,0,42.78,0,0h132.7c0,101.69,82.73,184.42,184.42,184.42S501.54,101.69,501.54,0h132.7c0,42.78-8.39,84.32-24.95,123.46-15.98,37.77-38.83,71.68-67.93,100.78-29.1,29.1-63.01,51.96-100.78,67.93-39.14,16.55-80.68,24.95-123.46,24.95Z'/%3E%3C/svg%3E");

  /* Livelli (z-index) */
  --z-raised: 2;
  --z-band: 4;
  --z-footer: 5;
  --z-header: 10;
  --z-float: 50;
  --z-consent: 60;
  --z-skip: 100;

  /* Ombre e motion */
  --shadow-btn: 0 8px 18px -10px rgba(10, 42, 82, .4);
  --shadow-card: 0 24px 48px -28px rgba(10, 42, 82, .45);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color: var(--ink); }
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; }
button { font: inherit; color: inherit; cursor: pointer; }
sup { font-size: .55em; line-height: 0; vertical-align: .72em; margin-left: .03em; }

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;
}
/* "clip" non crea un contenitore di scroll: lo sticky della sezione smalto continua a funzionare */
@supports (overflow: clip) {
  body,
  main { overflow-x: clip; }
}

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

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.enamel :focus-visible,
.site-footer :focus-visible,
.video-modal :focus-visible { outline-color: var(--cyan); }

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

.skip-link {
  position: absolute;
  z-index: var(--z-skip);
  left: 1rem;
  top: -4rem;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--d-shape);
  text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   COMPONENTI COMUNI
   -------------------------------------------------------------------------- */
.container {
  position: relative;
  z-index: 2;
  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-title);
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* Parole per i reveal a maschera (create da main.js) */
.wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .06em .04em .14em;
  margin: -.06em -.04em -.14em;
  white-space: nowrap;
}
.wm__i { display: inline-block; }
.ww { display: inline; }

/* Stella (Graphic Elements fig. 3) */
.spark {
  position: absolute;
  width: 28px;
  height: 28px;
  fill: var(--white);
  pointer-events: none;
}

/* Marker parola chiave a "D" con stella (fig. 5, editabile).
   Il riempimento è una variabile (--fill) che GSAP fa scorrere da 0 a 100%. */
.mark {
  --mark-bg: var(--white);
  --mark-star: var(--cyan);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .16em;
  padding: .04em .42em .1em .16em;
  margin: 0 .02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  border-radius: .1em 999px 999px .1em;
  background: linear-gradient(90deg, var(--mark-bg) var(--fill, 100%), transparent var(--fill, 100%));
}
.mark::after {
  content: "";
  flex: none;
  width: .48em;
  aspect-ratio: 1;
  background: var(--mark-star);
  -webkit-mask: var(--star-mask) center / contain no-repeat;
  mask: var(--star-mask) center / contain no-repeat;
  transition: transform .7s var(--ease-out), opacity .4s var(--ease-out);
}
.mark--cyan { --mark-bg: var(--cyan); --mark-star: var(--white); }
.motion .mark:not(.is-on)::after { opacity: 0; transform: scale(.3) rotate(-120deg); }

/* Bottoni — forma "D" + stella; riempimento al passaggio; magnetici via JS */
.btn {
  --btn-bg: var(--cyan);
  --btn-fg: var(--ink);
  --btn-fill: var(--sky);
  --btn-star: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 56px;
  padding: .9rem 2.1rem .9rem 1.5rem;
  border-radius: var(--d-shape);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  line-height: var(--lh-sub);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-btn);
  transition: box-shadow .3s var(--ease-out), scale .2s var(--ease-out), color .35s var(--ease-out);
}
.btn::before {                        /* riempimento che entra da sinistra */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  border-radius: inherit;
  transform: translateX(-101%);
  transition: transform .55s var(--ease-out);
}
.btn::after {                         /* stella */
  content: "";
  flex: none;
  width: 1.05em;
  aspect-ratio: 1;
  background: var(--btn-star);
  -webkit-mask: var(--star-mask) center / contain no-repeat;
  mask: var(--star-mask) center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}
.btn__label { display: block; text-wrap: balance; }
.btn:hover { box-shadow: 0 18px 30px -14px rgba(10, 42, 82, .65); }
.btn:hover::before { transform: translateX(0); }
.btn:hover::after { transform: rotate(90deg) scale(1.2); }
.btn:active { scale: .97; }
.btn--white { --btn-bg: var(--white); --btn-fill: var(--ink); --btn-star: var(--cyan); }
.btn--white:hover { --btn-fg: var(--white); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-fill: var(--navy); --btn-star: var(--cyan); }
.btn--lg { min-height: 64px; font-size: 1.0625rem; padding-inline: 1.75rem 2.4rem; }
@media (max-width: 420px) {
  .btn { font-size: .9375rem; letter-spacing: .02em; padding-inline: 1.2rem 1.5rem; }
  .btn--lg { font-size: 1rem; }
}

/* Foto con forme del brand */
.smile-frame { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--smile-shape); }
.smile-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Hero nascosta solo finché GSAP non imposta gli stati iniziali (evita il lampo) */
.motion .hero__grid { visibility: hidden; }

/* Pagina bloccata mentre la modale video è aperta */
html.modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  z-index: var(--z-header);
  top: 0;
  left: 0;
  right: 0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
}
.site-header__logo { width: auto; height: clamp(52px, 44px + 1.4vw, 68px); }   /* logo con payoff (versione negativa) */

/* --------------------------------------------------------------------------
   1a. HERO — campo cyan pieno, titolo gigante, ritratto scontornato
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 1rem) 0 0;   /* il ritratto poggia sul bordo inferiore (sotto la fascia marquee) */
  background: var(--cyan);
  color: var(--ink);
}
.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 1.5rem + 3vw, 3rem);
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero__title .mark { margin-top: .08em; }
.hero__lead {
  max-width: 30ch;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-size: var(--fs-lead);
  line-height: 1.35;
}
/* Ritratto scontornato appoggiato al bordo inferiore della hero (l'unico punto
   in cui la foto è tagliata finisce sotto la fascia marquee), disco bianco
   dietro il volto: la "O" del logo. */
.hero__visual {
  position: relative;
  justify-self: center;
  height: clamp(360px, 104vw, 540px);
  aspect-ratio: 1030 / 1600;  /* riquadro della figura: disco e testa si misurano su questo */
  min-width: 0;               /* la foto (più larga per la spalla) non deve allargare il riquadro */
}
.hero__disc {
  position: absolute;
  left: -10.5%;
  top: 6.5%;                /* la testa esce dal cerchio di ~6%: intersezione netta, mai tangente */
  width: 115%;
  max-width: none;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
}
.hero__portrait {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;              /* larghezza dalle proporzioni della foto: la spalla esce a destra del riquadro */
  max-width: none;
  height: 100%;
}
.spark--a { z-index: 2; width: 44px; height: 44px; left: -16%; top: 12%; }

/* --------------------------------------------------------------------------
   MARQUEE "beauty routine" (decorativo)
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  z-index: var(--z-band);
  width: 106%;
  margin-left: -3%;
  overflow: hidden;
  padding: .85rem 0 .95rem;
  background: var(--ink);
  color: var(--white);
  rotate: -2.2deg;
}
.marquee--ink { margin-block: -2.3rem -1.2rem; }
.marquee__track { display: flex; width: max-content; }
.motion .marquee__track { animation: marquee 30s linear infinite; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-right: 1.2rem;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.marquee__group svg { width: .8em; height: .4em; margin-top: .12em; fill: var(--cyan); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   1b. BEAUTY ROUTINE + SOLUZIONE + CTA
   -------------------------------------------------------------------------- */
.routine {
  position: relative;
  padding-block: calc(var(--section) + 1rem) var(--section);
  background: var(--white);
}
.routine__statement {
  font-size: var(--fs-statement);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.routine__statement .mark,
.routine__title .mark { padding-block: .06em .12em; }
/* Beauty routine: i testi usano tutta la larghezza disponibile (a capo solo a riga piena) */
.routine__statement,
.routine__title,
.routine__text,
.routine__gift { width: 100%; max-width: none; text-wrap: wrap; }

/* La risposta: stesso stile, allineamento e larghezza della frase iniziale
   ("beauty routine" → "BlancOne®:"), dentro la stessa sezione */
.routine__grid { display: grid; margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.routine__title {
  font-size: var(--fs-statement);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.routine__text {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.routine__gift { margin-top: 1rem; color: var(--ink-soft); }
.routine__cta { margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }

/* --------------------------------------------------------------------------
   2. UNA SOLUZIONE SU MISURA PER TE
   -------------------------------------------------------------------------- */
.custom {
  position: relative;
  overflow: hidden;
  padding-block: var(--section);
  background: var(--ice);
}
.custom__head { max-width: 46rem; margin-inline: auto; text-align: center; }
.custom__intro { max-width: 36em; margin: 1.25rem auto 0; font-size: var(--fs-lead); }
.custom__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.benefits {
  display: grid;
  gap: .9rem;
  justify-items: start;
}
.benefit {
  --b-bg: var(--white);
  --b-fg: var(--ink);
  --b-icon-bg: var(--ice);
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem 1.5rem .55rem .55rem;
  border-radius: 999px;
  background: var(--b-bg);
  color: var(--b-fg);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  box-shadow: var(--shadow-card);
}
.benefit--heart { rotate: -2deg; }
.benefit--shield { --b-bg: var(--cyan); --b-icon-bg: var(--white); rotate: 1.5deg; margin-left: clamp(.75rem, 4vw, 2.5rem); }
.benefit--bolt { --b-bg: var(--ink); --b-fg: var(--white); --b-icon-bg: var(--white); rotate: -1deg; margin-left: clamp(.25rem, 2vw, 1rem); }
.benefit__icon {
  position: relative;
  flex: none;
  width: clamp(2.75rem, 2.4rem + 1vw, 3.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--b-icon-bg);
}
.benefit__icon img { width: 100%; height: 100%; padding: 20%; object-fit: contain; }

.custom__access { max-width: 34em; font-size: var(--fs-lead); }
.sweep {                             /* evidenziatore che si stende (anche su più righe) */
  background-image: linear-gradient(var(--sky), var(--sky));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: var(--sweep, 100%) .42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.custom__photo {
  width: min(78%, 380px);
  aspect-ratio: 4 / 5;
  justify-self: center;
  background: var(--white);
  box-shadow: 0 40px 70px -44px rgba(10, 42, 82, .55);
}
.custom__photo img { scale: 1.12; }

/* --------------------------------------------------------------------------
   3. SMALTO — scena pin/scrub (desktop) · visual sticky (mobile)
   -------------------------------------------------------------------------- */
.enamel {
  position: relative;
  background: var(--ink);
  color: var(--white);
}
.enamel__stage { position: relative; }
.enamel__grid { padding-block: 0 var(--section); }
.enamel__visual {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;                     /* flex: l'altezza % del dente si risolve sul riquadro */
  align-items: center;
  justify-content: center;
  height: min(44svh, 400px);
  margin-inline: calc(-1 * var(--gutter));
  padding: 1rem var(--gutter) .75rem;
  background: var(--ink);
}
.enamel__visual::after {             /* dissolvenza sotto il riquadro: il testo scorre "dentro" la scena */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 2.5rem;
  background: linear-gradient(180deg, var(--ink), rgba(10, 42, 82, 0));
  pointer-events: none;
}
.tooth { flex: none; width: auto; height: 100%; max-width: 100%; overflow: visible; }
.enamel__copy { position: relative; z-index: 1; padding-top: 1rem; }
.enamel__title { color: var(--white); }
.enamel__p {
  max-width: 32em;
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--on-dark);
}
.enamel__p strong { color: var(--sky); font-weight: 700; }

/* Dente — stato finale (riparato e bianco) */
.tooth__halo { opacity: 1; }
.tooth__target { fill: var(--sky); opacity: .32; }
.tooth__outline { stroke: rgba(255, 255, 255, .9); stroke-width: 3; }
.crack { stroke: #9a8762; stroke-width: 3.2; opacity: 0; }
.seal { stroke: var(--white); stroke-width: 4.5; opacity: 0; }
.tooth__spark { fill: var(--white); }
.tooth__particles circle { fill: var(--sky); }

/* --------------------------------------------------------------------------
   4. SORRISI CHE PARLANO DA SOLI — galleria social
   -------------------------------------------------------------------------- */
.smiles {
  position: relative;
  overflow: hidden;
  padding-block: var(--section) calc(var(--section) - 1rem);
  background: var(--white);
}
.smiles__deco {
  position: absolute;
  width: 170vw;
  max-width: 1700px;
  aspect-ratio: 2 / 1;
  left: 50%;
  bottom: 0;
  translate: -50% 41.85%;
  fill: var(--cyan);
  pointer-events: none;
}
.smiles__title {
  font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.25rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.04em;
}

.reels { position: relative; z-index: 2; margin-top: clamp(4rem, 3rem + 4vw, 7.5rem); }
.reels__track {
  display: flex;
  gap: clamp(.875rem, .6rem + 1vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 1rem var(--gutter) 2.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reels__track::-webkit-scrollbar { display: none; }
.reels__item { flex: 0 0 min(66vw, 280px); scroll-snap-align: start; }

.reel {
  position: relative;
  display: block;
  color: var(--white);
  text-decoration: none;
  transition: transform .5s var(--ease-out);
}
/* Copertina ufficiale del post: niente velature, il testo impresso resta leggibile */
.reel__media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 26px;
  background: var(--ink);
  box-shadow: 0 26px 40px -24px rgba(10, 42, 82, .6);
  isolation: isolate;
  transition: box-shadow .5s var(--ease-out);
}
.reel__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.reel__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--cyan);
  box-shadow: 0 12px 26px -10px rgba(10, 42, 82, .6);
  transition: transform .5s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.reel__play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.reel:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 26px; }
@media (hover: hover) and (pointer: fine) {
  .reel:hover { transform: translateY(-10px) rotate(-1.2deg); }
  .reel:hover .reel__media { box-shadow: 0 40px 50px -26px rgba(10, 42, 82, .7); }
  .reels__item:nth-child(even) .reel:hover { transform: translateY(-10px) rotate(1.2deg); }
  .reel:hover .reel__img { transform: scale(1.07); }
  .reel:hover .reel__play { background: var(--cyan); color: var(--white); }
}

.reels__nav {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: -.5rem;
}
.reels__nav[hidden] { display: none; }
.reels__btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-btn);
  transition: background-color .3s var(--ease-out), opacity .3s var(--ease-out);
}
.reels__btn svg { width: 22px; height: 22px; }
.reels__btn--prev svg { rotate: 180deg; }
.reels__btn:hover { background: var(--navy); }
.reels__btn:disabled { opacity: .35; cursor: default; }

/* --------------------------------------------------------------------------
   5. CHIUSURA — "Il prossimo sorriso WOW può essere il tuo."
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  overflow: hidden;
  padding: var(--section) 0 0;   /* il ritratto poggia sul bordo inferiore */
  background: var(--cyan);
  color: var(--ink);
}
.closing__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 3.5rem); }
.closing__copy { position: relative; }
.closing__title {
  max-width: 13ch;
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.closing__text { max-width: 30em; margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.4; }
.closing__claim {
  max-width: 18ch;
  margin-top: 1.75rem;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.closing__cta { margin-top: 2.25rem; }

.closing__visual {
  position: relative;
  justify-self: center;
  height: clamp(400px, 112vw, 600px);
  aspect-ratio: 895 / 1600;
}
/* disco e "sorriso" hanno lo stesso asse verticale (centro al 50% del ritratto) */
.closing__disc {
  position: absolute;
  z-index: 0;
  left: -14%;
  top: -5.8%;
  width: 128%;
  max-width: none;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
}
.closing__smile {
  position: absolute;
  z-index: 1;
  left: -6%;
  top: 58.2%;
  width: 112%;
  max-width: none;                  /* il reset (max-width: 100%) lo accorciava e lo spostava a sinistra */
  overflow: visible;
}
.closing__smile-path { fill: none; stroke: var(--ink); stroke-width: 132.7; stroke-dasharray: 1; stroke-dashoffset: 0; }
.closing__portrait {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: var(--z-footer);
  padding-block: 2.75rem calc(2.5rem + 84px);   /* spazio per la CTA flottante su mobile */
  background: var(--ink);
  color: var(--on-dark);
}
.site-footer__inner { display: grid; gap: 1.25rem; justify-items: start; }
.site-footer__logo { width: 190px; }
.site-footer__info { display: flex; flex-wrap: wrap; gap: .15rem 1.5rem; font-size: .8125rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.site-footer__info a { color: var(--white); }
.site-footer__link { padding: 0; border: 0; background: none; color: var(--white); font: inherit; text-decoration: underline; cursor: pointer; }
html:not(.js) .site-footer__prefs { display: none; }   /* senza JS il banner non si può riaprire */

/* --------------------------------------------------------------------------
   CTA FLOTTANTE
   -------------------------------------------------------------------------- */
.float-cta {
  position: fixed;
  z-index: var(--z-float);
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}
.js .float-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(140%);
  transition: transform .55s var(--ease-out), opacity .35s var(--ease-out), visibility 0s linear .55s;
}
.js .float-cta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: transform .55s var(--ease-out), opacity .35s var(--ease-out), visibility 0s;
}
.btn--float:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
.btn--float {
  width: 100%;
  max-width: 520px;
  min-height: 52px;
  padding: .7rem 1.4rem .7rem 1.1rem;
  font-size: .8125rem;
  letter-spacing: .03em;
  box-shadow: 0 16px 34px -14px rgba(10, 42, 82, .75), 0 0 0 2px rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------------------
   BANNER COOKIE (js/consent.js) — sopra la CTA flottante; su desktop in basso
   a sinistra, lontano dalla CTA. Rifiuta e Accetta identici: stesso peso.
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  z-index: var(--z-consent);
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  max-height: calc(100svh - 24px);
  overflow: auto;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: 0 24px 60px -20px rgba(10, 42, 82, .7), 0 0 0 2px rgba(255, 255, 255, .85);
  transition: opacity .35s var(--ease-out), translate .45s var(--ease-out);
}
.cookie-banner[hidden] { display: none; }
@starting-style {
  .cookie-banner { opacity: 0; translate: 0 16px; }
}
.cookie-banner :focus-visible { outline-color: var(--cyan); }
.cookie-banner__title { margin: 0 2.75rem .5rem 0; color: var(--white); font-weight: 800; font-size: 1.0625rem; line-height: var(--lh-sub); }
.cookie-banner__text { margin: 0; font-size: var(--fs-small); line-height: 1.5; }
.cookie-banner__text a { color: var(--white); font-weight: 700; }
.cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-top: 1rem; }
.cookie-banner__btn {
  min-height: 48px;
  padding: .7rem 1rem;
  border: 0;
  border-radius: var(--d-shape);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), scale .2s var(--ease-out);
}
.cookie-banner__btn:hover { background: var(--sky); }
.cookie-banner__btn:active { scale: .97; }
.cookie-banner__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.cookie-banner__close:hover { background: rgba(255, 255, 255, .12); }
.cookie-banner__close svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .cookie-banner { left: 20px; right: auto; bottom: 20px; width: 420px; padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   MODALE VIDEO (embed ufficiale Instagram)
   -------------------------------------------------------------------------- */
.video-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 12px;
  border: 0;
  background: transparent;
}
.video-modal[open] { display: grid; place-items: center; }
.video-modal::backdrop { background: rgba(10, 42, 82, .84); transition: background-color .25s var(--ease-out); }
.video-modal[open] .video-modal__panel { transition: opacity .25s var(--ease-out), translate .35s var(--ease-out); }
@starting-style {
  .video-modal[open] .video-modal__panel { opacity: 0; translate: 0 14px; }
  .video-modal[open]::backdrop { background-color: rgba(10, 42, 82, 0); }
}
.video-modal__panel {
  width: min(100%, 460px);
  max-height: calc(100svh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: .75rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.video-modal__head {
  position: sticky;
  top: -.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -.75rem -.75rem .5rem;
  padding: .75rem;
  background: var(--white);
}
.video-modal__label {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .4em .95em .45em .6em;
  border-radius: var(--d-shape);
  background: var(--cyan);
  font-weight: 800;
  line-height: 1.1;
}
.video-modal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
}
.video-modal__close svg { width: 20px; height: 20px; }
.video-modal__embed { position: relative; min-height: 420px; }
.video-modal__embed:empty::before,
.video-modal__embed.is-loading::before {   /* attesa: sorriso che ruota */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 28px;
  margin: -14px 0 0 -28px;
  background: var(--cyan);
  -webkit-mask: var(--smile-mask) center / contain no-repeat;
  mask: var(--smile-mask) center / contain no-repeat;
  animation: spin 1.1s linear infinite;
  transform-origin: 50% 0;
}
@keyframes spin { to { rotate: 360deg; } }
.video-modal__embed .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.video-modal__embed:has(.video-modal__cover) { min-height: 0; }
.video-modal__cover { width: 100%; max-height: 62svh; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; }
.video-modal__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px;
  margin-top: .75rem;
  padding: .9rem 1.4rem;
  border-radius: var(--d-shape);
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}
.video-modal__fallback[hidden] { display: none; }
.video-modal__fallback svg { width: 22px; height: 22px; fill: currentColor; }

/* ==========================================================================
   BREAKPOINT
   ========================================================================== */
@media (min-width: 600px) {
  .benefits { gap: 1rem; }
  .reels__item { flex-basis: 260px; }
  .float-cta { left: auto; right: 20px; bottom: 20px; }
  .btn--float { width: auto; font-size: .875rem; }
  .site-footer { padding-bottom: 2.75rem; }
  .site-footer__inner { grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }
}

@media (min-width: 900px) {
  /* Hero a due colonne, a tutto schermo */
  .hero {
    display: flex;
    min-height: max(660px, 100svh);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-self: stretch;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .hero__copy { align-self: center; max-width: 44rem; padding-bottom: clamp(3rem, 5vh, 5rem); }
  .hero__title { font-size: min(var(--fs-display), 7.6vw); }   /* il marker "più bianco" resta nella colonna */
  .hero__lead { max-width: 28ch; }
  /* ritratto al centro della colonna destra (non più a filo del bordo pagina), appoggiato in basso */
  /* altezza limitata dallo spazio verticale e dalla larghezza della colonna (il disco non tocca il testo) */
  .hero__visual { align-self: end; height: max(480px, min(calc(100svh - var(--header-h) - 1rem), 760px, calc((min(100vw, var(--max) + 2 * var(--gutter)) - 2 * var(--gutter)) * .62))); }

  /* Collage: gli sticker si posano sul bordo della foto, il testo chiude a destra */
  .custom__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 3.5vw, 3.5rem);
  }
  .benefits {
    position: relative;
    z-index: var(--z-raised);
    justify-items: end;
    margin-right: calc(-1 * clamp(3rem, 7vw, 7rem));
  }
  .benefit--shield { margin-left: 0; margin-right: clamp(1.5rem, 4vw, 4rem); }
  .benefit--bolt { margin-left: 0; margin-right: clamp(.5rem, 1.5vw, 1.5rem); }
  .custom__photo { width: 100%; max-width: none; }
  .custom__access { align-self: center; }

  /* Smalto: due colonne; il pin lo gestisce JS (matchMedia) */
  .enamel__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
    padding-block: var(--section);
  }
  .enamel__visual {
    position: sticky;
    top: 8vh;
    align-self: start;
    height: min(76vh, 600px);
    margin: 0;
    padding: 0;
    background: none;
  }
  .enamel__visual::after { display: none; }
  .enamel__copy { padding: 0; }
  .motion .enamel__stage.is-pinnable { display: flex; align-items: center; min-height: 100vh; }
  .motion .enamel__stage.is-pinnable .enamel__grid { padding-block: 3rem; }
  .motion .enamel__stage.is-pinnable .enamel__visual { position: relative; top: auto; align-self: center; }

  .smiles__deco { width: 110vw; }
}

@media (min-width: 1280px) {
  /* Il CTA del PDF è lungo: su desktop resta su una riga (sotto: due righe bilanciate) */
  .btn { letter-spacing: .02em; }
  .btn__label { white-space: nowrap; text-wrap: nowrap; }
  .btn--lg { font-size: 1rem; }
}

@media (min-width: 1200px) {
  /* Galleria: 5 card in griglia con ritmo sfalsato */
  .reels__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin-inline: auto;
    overflow: visible;
    padding-bottom: 4rem;
  }
  .reels__item:nth-child(even) { margin-top: 3.5rem; }
  .reels__nav { display: none; }
}

/* --------------------------------------------------------------------------
   MOVIMENTO RIDOTTO — niente animazioni, contenuti sempre visibili
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reel:hover { transform: none; }
}

/* ==========================================================================
   FOTOGRAFIA GRANDE — foto protagoniste e sfondi di sezione
   ========================================================================== */
/* Beauty routine: trittico igiene | sbiancamento | risultato */
.routine__gallery {
  display: flex;
  gap: .75rem;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.routine__gallery::-webkit-scrollbar { display: none; }
.routine__shot {
  position: relative;
  flex: 0 0 72%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--ice);
  scroll-snap-align: start;
}
.routine__shot img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; }


/* Indicazione sotto il dente: solo con animazione attiva, sparisce quando il dente è bianco */
.enamel__hint { display: none; }
.motion .enamel__hint {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  color: var(--sky);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
}
.enamel__hint svg { width: 1.1em; height: 1.1em; rotate: 90deg; }

/* Risultati reali: confronto prima/dopo con cursore */
.results { position: relative; z-index: var(--z-raised); display: grid; gap: clamp(1rem, .5rem + 2vw, 2rem); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ba {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1226 / 750;
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow-card);
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--white); pointer-events: none; }
.ba__handle svg {
  position: absolute; top: 50%; left: 50%;
  max-width: none;
  width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 12px;
  border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-btn);
}
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:has(.ba__range:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
.results__hint {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  margin-top: clamp(1rem, .8rem + .6vw, 1.5rem);
  color: var(--ink-soft);
  font-size: .9375rem;
  font-weight: 700;
}
.results__arrow { flex: none; width: 1.15em; height: 1.15em; color: var(--cyan); }
.results__arrow--left { rotate: 180deg; }

@media (min-width: 600px) {
  .routine__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); overflow: visible; }

}

@media (min-width: 900px) {


  .results { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }

  .closing { display: flex; min-height: max(680px, 92vh); }
  .closing__grid { grid-template-columns: minmax(0, 1fr) auto; align-self: stretch; gap: clamp(2.5rem, 5vw, 5rem); }
  .closing__copy { align-self: center; max-width: 44rem; padding-bottom: var(--section); }
  .closing__visual { align-self: end; height: max(520px, min(calc(92vh - var(--section)), 820px)); margin-right: clamp(0rem, 3vw, 3rem); }
}