/* La vetrina della piattaforma: le basi comuni.
   Stile Apple come il gestionale (docs/STILE_APPLE_PIANO.md sul ramo funzione/stile-apple):
   fondo grigio iOS, schede bianche tonde, un solo accento indaco, carattere di sistema.
   Ogni sezione e ogni modulo della demo hanno il loro file CSS: qui solo token e mattoni. */

:root {
  --sfondo: #f2f2f7;
  --superficie: #ffffff;
  --superficie-alta: #ebebf0;
  --inchiostro: #1c1c1e;
  --tenue: #636366;
  --bordo: #d1d1d6;
  --bordo-campo: #8a8a8e;
  --accento: #4b44d6;
  --accento-scuro: #3a33b0;
  --accento-chiaro: #ecebfc;
  --positivo: #1d7a3a;
  --positivo-chiaro: #e3f4e8;
  --negativo: #c4281c;
  --negativo-chiaro: #fdeceb;
  --attenzione: #8a5a00;
  --attenzione-chiaro: #fff3d6;
  --notte: #111114;
  --notte-testo: #f2f2f7;
  --notte-tenue: #aeaeb2;

  --raggio-sm: 0.625rem;
  --raggio-md: 0.875rem;
  --raggio-lg: 1.375rem;
  --raggio-xl: 2rem;
  --ombra: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --carattere:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --larghezza: 72rem;
  --margine: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font-family: var(--carattere);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accento);
}

:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 2px;
  border-radius: 6px;
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
}
.salta:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--superficie);
  padding: 0.75rem 1rem;
  border-radius: var(--raggio-md);
}

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 var(--margine);
}

.sezione {
  padding: 4.5rem 0;
}
@media (min-width: 48rem) {
  :root {
    --margine: 1.5rem;
  }
  .sezione {
    padding: 6.5rem 0;
  }
}

.occhiello {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0 0 0.5rem;
}

.titolo-grande {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}

.titolo-medio {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.sottotitolo {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  color: var(--tenue);
  max-width: 40rem;
  margin: 0 0 1.5rem;
}

.scheda {
  background: var(--superficie);
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra);
  padding: 1.25rem;
}

/* Bottoni: capsula da 44 px, grande da 52 px (regola dei bersagli del gestionale). */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--accento);
  color: #ffffff;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}
.bottone:hover {
  background: var(--accento-scuro);
}
.bottone.secondario {
  background: var(--superficie-alta);
  color: var(--inchiostro);
}
.bottone.secondario:hover {
  background: var(--bordo);
}
.bottone.grande {
  min-height: 3.25rem;
  border-radius: 18px;
  padding: 0 1.5rem;
  font-size: 1.0625rem;
}
@media (prefers-reduced-motion: no-preference) {
  .bottone:active {
    transform: scale(0.97);
  }
}

.pastiglia {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--accento-chiaro);
  color: var(--accento-scuro);
}
.pastiglia.positivo {
  background: var(--positivo-chiaro);
  color: var(--positivo);
}
.pastiglia.attenzione {
  background: var(--attenzione-chiaro);
  color: var(--attenzione);
}
.pastiglia.negativo {
  background: var(--negativo-chiaro);
  color: var(--negativo);
}

.visivamente-nascosto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Entrata delle sezioni: una volta sola, solo se si accettano i movimenti. */
@media (prefers-reduced-motion: no-preference) {
  .entra {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }
  .entra.visto {
    opacity: 1;
    transform: none;
  }
}