/* Le due pagine pubbliche di Viaggi: l'ingresso e l'invito. */
@font-face {
  font-family: "Overpass";
  src: url("/font/Overpass-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --verde: #006B3F;
  --giallo: #FFD100;
  --fondo: #F2F5F7; --testo: #24282C; --testo-2: #58616A;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #1D2023; --testo: #F2F5F7; --testo-2: #AFB7BE; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: var(--fondo); color: var(--testo);
  font-family: "Overpass", "Bahnschrift", "DIN Alternate", "Roboto", system-ui, sans-serif;
  font-size: 17px; line-height: 1.45;
}
.porta { width: 100%; max-width: 360px; }
.insegna {
  display: inline-block; margin: 0 3px 22px;
  background: var(--verde); color: #fff;
  border: 2px solid #fff; border-radius: 12px; box-shadow: 0 0 0 3px var(--verde);
  padding: 12px 18px 9px; font-size: 34px; line-height: 1; font-weight: 800;
}
p { margin: 0 0 18px; }
.tasto {
  display: block; width: 100%; min-height: 56px; padding: 0 18px; border-radius: 10px;
  border: 2px solid var(--testo); background: var(--testo); color: var(--fondo);
  font: inherit; font-weight: 800; font-size: 18px; cursor: pointer;
}
.tasto:disabled { opacity: .55; cursor: default; }
.tasto:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
.esito {
  margin: 16px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--giallo); color: #000; font-weight: 700; font-size: 16px;
}
.esito[hidden] { display: none; }
.piccolo { margin: 18px 0 0; font-size: 15px; color: var(--testo-2); }