/* ============================================================
   STUDIO DENTISTICO VALMONTONE — Design system condiviso
   Mobile-first. Linguaggio: l'ARCO (porta / dente / sorriso).
   Colore come informazione:  azzurro = Sorriso (odontoiatria)
                              corallo = Viso (medicina estetica)
   ============================================================ */

/* ============ TOKEN ============ */
:root{
  /* Palette */
  --ink:#0e2a47;          /* testo, superfici scure */
  --ink-soft:#38526d;     /* testo secondario */
  --ink-mute:#5a7189;     /* testo terziario */
  --enamel:#f5f9fc;       /* sfondo pagina */
  --white:#ffffff;
  --mist:#e3f0f9;         /* sfondo sezioni "sorriso" */
  --mist-2:#cfe6f5;
  --sky:#38a3e8;          /* azzurro vivo (blocchi, mascotte) */
  --sky-deep:#0b6aa8;     /* azzurro leggibile su chiaro (link, focus) */
  --gum:#ff6b7a;          /* corallo gengiva: azioni principali, "viso" */
  --gum-soft:#fff0f2;
  --sun:#ffc83d;          /* giallo, un solo uso: l'adesivo */

  --line:rgba(14,42,71,.12);
  --line-strong:rgba(14,42,71,.22);

  /* Alias usati dalle pagine legali (privacy / cookie) */
  --bg:var(--enamel);
  --bg-alt:var(--white);
  --text-primary:var(--ink);
  --text-secondary:var(--ink-soft);
  --text-tertiary:var(--ink-mute);
  --primary:var(--sky-deep);
  --primary-ultra-light:var(--mist);
  --surface-border:var(--mist-2);
  --gradient:var(--ink);

  /* Tipografia */
  --heading:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --sans:'Figtree','Avenir Next','Segoe UI',system-ui,sans-serif;

  /* Forme */
  --r-arch:999px 999px 28px 28px;
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;

  --ease:cubic-bezier(.22,1,.36,1);
  --hh:64px;              /* altezza barra superiore */
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--enamel);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--heading);font-weight:700;line-height:1.08;letter-spacing:-.025em;color:var(--ink);}
p{line-height:1.65;}
::selection{background:var(--sky);color:var(--ink);}
:focus-visible{outline:3px solid var(--sky-deep);outline-offset:3px;border-radius:6px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============ PULSANTI ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:-.005em;
  transition:transform .25s var(--ease),background-color .25s,box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:20px;height:20px;flex-shrink:0;}
.btn:active{transform:scale(.97);}
.btn--gum{background:var(--gum);color:var(--ink);}
.btn--gum:hover{background:#ff8591;}
.btn--ink{background:var(--ink);color:#fff;}
.btn--ink:hover{background:#17406b;}
.btn--line{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);}
.btn--line:hover{background:rgba(14,42,71,.06);}
.btn--white{background:#fff;color:var(--ink);}
.btn--white:hover{background:var(--mist);}
.btn--sm{min-height:44px;padding:0 18px;font-size:.92rem;}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

/* ============ PRIMA / DOPO ============ */
.before-after{
  position:relative;
  width:min(100%,320px);
  aspect-ratio:4 / 5;
  margin:0 auto;
  overflow:hidden;
  border-radius:160px 160px 28px 28px;
  background:var(--mist-2);
  user-select:none;
  -webkit-user-select:none;
}
.before-after__base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
/* "Dopo": layer a tutta dimensione, rivelato con clip-path -> le due foto restano sempre allineate */
.before-after__clip{position:absolute;inset:0;z-index:2;clip-path:inset(0 50% 0 0);}
.before-after__reveal{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.before-after__line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:5;pointer-events:none;}
.before-after__handle{
  position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;box-shadow:0 6px 24px rgba(14,42,71,.28);
}
.before-after__tag{
  position:absolute;bottom:14px;z-index:6;pointer-events:none;
  background:rgba(14,42,71,.78);color:#fff;font-size:.8rem;font-weight:700;
  padding:5px 12px;border-radius:999px;
}
.before-after__tag--l{left:14px;}
.before-after__tag--r{right:14px;}
.before-after__input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;z-index:10;
  touch-action:pan-y;           /* lo scroll verticale della pagina resta libero */
}

/* ============ MOVIMENTO RIDOTTO ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}