/* Check-King — sito pubblico.
   Il sistema visivo e' quello di Boo-King (Booking_microservice/apps/www): stessi
   token, stessi nomi di colore, stessi caratteri. Check-King e Boo-King sono una
   suite: le due pagine non devono divergere col tempo. */

@font-face {
  font-family: Montserrat;
  src: url("/sito/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url("/sito/fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif";
  src: url("/sito/fonts/notoserif-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --inchiostro: #17233F;
  --oro: #E0A32E;
  /* L'oro del marchio su carta chiara da' 2.11:1: per il testo si usa questa
     versione scurita, 5.47:1. */
  --oro-testo: #8A5D08;
  --oro-forte: #6E4A06;
  /* Velatura d'oro per evidenziare un valore (documento letto, valore che vola). */
  --oro-velo: #F6E6C2;
  --carta: #FBF9F5;
  --carta-alt: #F3EFE7;
  --superficie: #FFFFFF;
  --bordo: #E2DCD0;
  --bordo-forte: #CFC6B5;
  --testo: #17233F;
  --testo-tenue: #5A667F;
  --errore: #9A2A1D;

  --font-titoli: "Montserrat", system-ui, sans-serif;
  --font-testo: "Noto Serif", Georgia, serif;

  --raggio: 4px;
  --filetto: 1px;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --durata: 180ms;

  --pagina: 74rem;
  --misura-lettura: 34rem;
  --margine-pagina: clamp(1rem, 5vw, 3.5rem);
  --ritmo-sezione: clamp(3.5rem, 1.5rem + 6vw, 7.5rem);

  --ombra-rilievo: 0 1px 2px rgba(23, 35, 63, 0.06), 0 12px 28px -18px rgba(23, 35, 63, 0.45);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --inchiostro: #E8EDF6;
    --oro: #F0B841;
    --oro-testo: #F0B841;
    --oro-forte: #F6CD73;
    --oro-velo: rgba(240, 184, 65, 0.2);
    --carta: #0E1526;
    --carta-alt: #141D33;
    --superficie: #182240;
    --bordo: #24304A;
    --bordo-forte: #34425F;
    --testo: #E8EDF6;
    --testo-tenue: #A9B4C8;
    --errore: #E88A6E;
    --ombra-rilievo: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 32px -18px rgba(0, 0, 0, 0.8);
  }
}

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

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.68;
  caret-color: var(--oro);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--oro); color: #17233F; }
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}
* { scrollbar-color: var(--bordo) transparent; scrollbar-width: thin; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: from-font; text-decoration-color: var(--oro); }
a:hover { color: var(--testo-tenue); }

h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

p, dl, dd, ol, ul { margin: 0; }

[id] { scroll-margin-top: 6rem; }

/* «Check-King» e «Check-in» non si spezzano sul trattino: Montserrat non ha il
   trattino non separabile (U+2011), quindi si tiene unita la parola intera. */
.unito { white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: var(--pagina);
  margin-inline: auto;
  padding-inline: var(--margine-pagina);
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--inchiostro);
  color: var(--carta);
  font-family: var(--font-titoli);
  font-size: 0.875rem;
}
.salta:focus { left: 0; }

/* Etichetta in maiuscoletto: ruoli, didascalie, voci di menu. Una sola voce tipografica. */
.etichetta,
.request__label,
.faq__index-title,
.flow__tag,
.places__item figcaption {
  font-family: var(--font-titoli);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- testata ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--carta) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--filetto) solid var(--bordo);
}

.bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  min-height: 4.5rem;
}

.bar__logo { display: block; flex: none; line-height: 0; }
.bar__logo img { display: block; height: 1.5rem; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-inline-start: auto;
  font-family: var(--font-titoli);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav a {
  padding-block: 0.35rem;
  color: var(--testo-tenue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--durata) var(--curva), border-color var(--durata) var(--curva);
}
.nav a:hover { color: var(--testo); border-bottom-color: var(--oro); }
.nav a[aria-current="page"] { color: var(--testo); border-bottom-color: var(--oro); }

/* Il pulsante della testata: filettato, come «Parliamone» su Boo-King. */
.nav a.nav__cta {
  padding: 0.65rem 1.1rem;
  color: var(--testo);
  border: var(--filetto) solid var(--bordo);
  border-radius: var(--raggio);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.875rem;
}
.nav a.nav__cta:hover { border-color: var(--inchiostro); }

.bar { transition: background-color var(--durata) var(--curva), border-color var(--durata) var(--curva); }
.bar__logo-foto { display: none; }

.bar--over {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bar--over .bar__logo-carta { display: none; }
.bar--over .bar__logo-foto { display: block; }
.bar--over .nav a { color: rgba(251, 249, 245, 0.88); }
.bar--over .nav a:hover { color: #FBF9F5; }
.bar--over .nav a.nav__cta { color: #FBF9F5; border-color: rgba(251, 249, 245, 0.5); }
.bar--over .nav a.nav__cta:hover { border-color: #FBF9F5; }
.bar--over :focus-visible { outline-color: #FBF9F5; }

@media (min-width: 62rem) {
  .nav { font-size: 0.8125rem; }
  .bar__logo img { height: 1.75rem; }
}

@media (max-width: 39.99rem) {
  .nav a.nav__cta { display: none; }
}

/* ---------- azioni ---------- */

.button,
.request__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  font-family: var(--font-titoli);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--carta);
  background: var(--inchiostro);
  border: var(--filetto) solid transparent;
  border-radius: var(--raggio);
  box-shadow: var(--ombra-rilievo);
  cursor: pointer;
  transition: transform var(--durata) var(--curva), background-color var(--durata) var(--curva),
              color var(--durata) var(--curva), opacity var(--durata) var(--curva);
}
.button:hover,
.request__button:hover:not(:disabled) { color: var(--carta); transform: translateY(-2px); }

.link-nudo {
  font-family: var(--font-titoli);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--testo);
  text-decoration: none;
  padding: 0.35rem 0.25rem;
  border-bottom: 2px solid var(--oro);
}
.link-nudo:hover { color: var(--testo-tenue); }

@media (prefers-reduced-motion: reduce) {
  .button, .request__button, .nav a { transition: none; }
  .button:hover, .request__button:hover:not(:disabled) { transform: none; }
}

/* ---------- titoli ---------- */

.titolo-sezione {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  margin-bottom: clamp(2rem, 1.25rem + 2vw, 3.5rem);
  padding-bottom: 0.9rem;
  border-bottom: var(--filetto) solid var(--bordo);
}

.section-intro {
  max-width: var(--misura-lettura);
  color: var(--testo-tenue);
}
.section-intro + .section-intro { margin-top: 1rem; }

/* ---------- apertura della home: la foto a tutta pagina, come sul sito OKINN ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  /* La testata e' appiccicata in alto: la foto le passa sotto (4.5rem + il filetto). */
  margin-top: calc(-4.5rem - 1px);
  overflow: hidden;
  color: #FBF9F5;
  background: #17233F;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media { z-index: -2; }
.hero__media img { object-fit: cover; object-position: 50% 50%; }

/* Velatura d'inchiostro: piena in alto per la testata e soprattutto in basso, dove sta il testo. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(14, 21, 38, 0.6) 0%,
    rgba(14, 21, 38, 0.12) 26%,
    rgba(14, 21, 38, 0.5) 50%,
    rgba(14, 21, 38, 0.86) 68%,
    rgba(14, 21, 38, 0.94) 100%
  );
}

/* In verticale sotto il titolo passano il montante bianco del letto e la lampada: velatura piu' piena. */
@media (orientation: portrait) {
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgba(14, 21, 38, 0.55) 0%,
      rgba(14, 21, 38, 0.14) 22%,
      rgba(14, 21, 38, 0.5) 36%,
      rgba(14, 21, 38, 0.72) 46%,
      rgba(14, 21, 38, 0.84) 60%,
      rgba(14, 21, 38, 0.94) 100%
    );
  }
}

.hero__content { padding-block: 8rem clamp(2.5rem, 7vh, 4.5rem); }

.hero h1 {
  font-size: clamp(2.125rem, 1.1rem + 4.2vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 13em;
}
.hero h1 > span { display: block; }
.hero h1 > span:last-child { color: rgba(251, 249, 245, 0.8); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.button--oro,
.button--oro:hover { color: #17233F; background: #E0A32E; }

.hero .link-nudo { color: #FBF9F5; border-bottom-color: #E0A32E; }
.hero .link-nudo:hover { color: rgba(251, 249, 245, 0.78); }

.hero__guest {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding-top: 1rem;
  max-width: var(--misura-lettura);
  border-top: var(--filetto) solid rgba(251, 249, 245, 0.25);
  font-size: 0.9375rem;
  color: rgba(251, 249, 245, 0.88);
}

.hero :focus-visible { outline-color: #FBF9F5; }

/* All'apertura la foto si assesta con un leggero rientro. */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: hero-settle 1800ms var(--curva) both; }
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* Un solo momento animato, all'ingresso: le righe si posano. */
.riga-viva { animation: posa 700ms var(--curva) both; }
.riga-viva--due { animation-delay: 90ms; }
.riga-viva--tre { animation-delay: 190ms; }
.riga-viva--quattro { animation-delay: 290ms; }

@keyframes posa {
  from { opacity: 0; transform: translateY(0.6rem); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .riga-viva { animation: none; }
}

/* ---------- intestazione delle pagine interne ---------- */

.intro {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: var(--filetto) solid var(--bordo);
}

.intro h1 {
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.intro__lead {
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  max-width: var(--misura-lettura);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--testo-tenue);
}

/* ---------- sezioni ---------- */

.ask,
.places,
.kit,
.legal { padding-block: var(--ritmo-sezione); }

.ask,
.places,
.kit { border-bottom: var(--filetto) solid var(--bordo); }

/* Richiesta di proposta, subito sotto l'apertura */

.ask__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 56rem) {
  .ask__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 5.5rem);
    align-items: end;
  }
  .ask__grid .titolo-sezione { margin-bottom: 1.5rem; }
}

.ask__lead {
  max-width: var(--misura-lettura);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--testo-tenue);
}

/* Al mare, in collina, in citta': una foto alta e due impilate */

.places .section-intro { margin-top: -1rem; }

.places__grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.places__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Fondo scuro di riserva: se la foto non arriva, la didascalia chiara resta leggibile. */
  background: #17233F;
  border-radius: var(--raggio);
  box-shadow: var(--ombra-rilievo);
}

.places__item picture,
.places__item img { display: block; width: 100%; height: 100%; }

.places__item img {
  object-fit: cover;
  transition: transform 700ms var(--curva);
}
.places__item:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .places__item img { transition: none; }
  .places__item:hover img { transform: none; }
}

.places__item figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 3rem 1.1rem 1rem;
  color: #FBF9F5;
  /* Velatura d'inchiostro dietro la didascalia: sotto 0.8 il chiaro non tiene 4.5:1
     sul calcare della scogliera o sul fogliame in controluce. */
  background: linear-gradient(
    to top,
    rgba(23, 35, 63, 0.9) 0%,
    rgba(23, 35, 63, 0.86) 45%,
    rgba(23, 35, 63, 0.4) 72%,
    rgba(23, 35, 63, 0) 100%
  );
}

@media (min-width: 48rem) {
  .places__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(32rem, 60vw, 44rem);
  }
  .places__item { aspect-ratio: auto; }
  .places__item--tall { grid-row: span 2; }
}

/* Su telefono il riquadro 4:3 della foto verticale: la villa resta nell'inquadratura. */
@media (max-width: 47.99rem) {
  .places__item--tall img { object-position: 50% 38%; }
}

/* Due colonne: titolo a sinistra (fermo mentre si scorre), contenuto a destra */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 2.75rem);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }
  .split__side { position: sticky; top: 7rem; }
}

.split__side .titolo-sezione { margin-bottom: 1.5rem; }

/* Modulo domotico: fascia breve in home, sezione piu' distesa su «Come funziona» */

.kit__list {
  display: grid;
  margin: 0;
}

@media (min-width: 48rem) {
  .kit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
}

.kit__item {
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: var(--filetto) solid var(--bordo);
}

.kit__item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.kit__item p {
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--testo-tenue);
}

.kit__link { display: inline-block; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem); }

/* ---------- perche' Check-King: i pregi di Boo-King ---------- */

.pairs {
  padding-block: var(--ritmo-sezione);
  background: var(--carta-alt);
  border-block: var(--filetto) solid var(--bordo);
}

.pairs__list { display: grid; margin: 0; }

@media (min-width: 52rem) {
  .pairs__list { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 6vw, 5rem); }
}

.pairs__item {
  padding-block: clamp(1.5rem, 1rem + 1vw, 2rem);
  border-top: var(--filetto) solid var(--bordo);
}

.pairs__item dt {
  margin-bottom: 0.5rem;
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.pairs__item dd {
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--testo-tenue);
}

/* ---------- pagine legali: prosa continua alla misura di lettura ---------- */

.legal__group { max-width: 40rem; }
.legal__group + .legal__group { margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.legal__group h2 {
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  border-bottom: var(--filetto) solid var(--bordo);
}

.legal__group p,
.legal__group ul { margin: 0 0 0.9rem; }
.legal__group ul { padding-left: 1.15rem; }
.legal__group li { margin-bottom: 0.5rem; }
.legal__group li::marker { color: var(--oro-testo); }
.legal__group code { font-size: 0.9em; word-break: break-all; }

.legal__updated {
  max-width: 40rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1rem;
  border-top: var(--filetto) solid var(--bordo);
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

/* ---------- modulo richiesta ---------- */

.request {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  scroll-margin-top: 6rem;
}

.request__label { color: var(--testo-tenue); }

.request__row { display: grid; gap: 0.75rem; }

@media (min-width: 40rem) {
  .request__row { grid-template-columns: minmax(0, 1fr) auto; }
}

.request__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  color: var(--testo);
  background: var(--superficie);
  border: var(--filetto) solid var(--bordo-forte);
  border-radius: var(--raggio);
  transition: border-color var(--durata) var(--curva), box-shadow var(--durata) var(--curva);
}
.request__input::placeholder { color: var(--testo-tenue); opacity: 0.85; }
.request__input:hover { border-color: var(--testo-tenue); }
.request__input:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; border-color: var(--oro); }
.request__input[aria-invalid="true"] { border-color: var(--errore); }

.request__button:disabled { opacity: 0.55; cursor: progress; transform: none; }

.request__note { font-size: 0.875rem; line-height: 1.55; color: var(--testo-tenue); }

/* L'esito non e' una decorazione: il filetto a sinistra lo distingue anche per chi
   non distingue i colori, e il testo dice cosa e' successo. */
.request__status {
  padding: 0.85rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  border: var(--filetto) solid var(--bordo);
  border-left-width: 3px;
  border-radius: var(--raggio);
}
.request__status:empty { display: none; }
.request__status[data-tone="error"] { color: var(--errore); border-color: var(--errore); }
.request__status[data-tone="ok"] { border-left-color: var(--oro); }

.request__aux {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.request.is-sent .request__label,
.request.is-sent .request__row,
.request.is-sent > .request__input,
.request.is-sent > .request__button,
.request.is-sent .request__note { display: none; }

/* ---------- home: una prenotazione che va avanti da sola ----------
   Di base (senza JS, con riduci animazioni, su schermi bassi) e' una sezione ferma
   con tutti i passaggi e la scheda compilata; con .flow--live la scena resta ferma
   sullo schermo e lo scorrimento fa avanzare la prenotazione (sito/landing.js). */

.flow {
  --scan: 1;
  border-bottom: var(--filetto) solid var(--bordo);
}

.flow__stage {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
  padding-block: var(--ritmo-sezione);
}

.flow__stage > *,
.flow__docrow > *,
.flow__fields > * { min-width: 0; }

@media (min-width: 56rem) {
  .flow__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 6vw, 5.5rem);
  }
}

.flow h2 {
  max-width: 18ch;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  padding-bottom: 0.9rem;
  border-bottom: var(--filetto) solid var(--bordo);
}

.flow__steps {
  position: relative;
  list-style: none;
  padding: 0;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* Fascia chiara che scorre sotto il passaggio corrente (solo con la scena attiva, da 56rem). */
.flow__marker { display: none; }

.flow__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.5rem;
  padding-block: 0.4rem;
}

/* Numeri fissi per posizione: su telefono si vede un passaggio alla volta e un contatore ripartirebbe da 1. */
.flow__step::before {
  grid-row: span 2;
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--oro-testo);
  transition: color 240ms var(--curva);
}

.flow__step:nth-child(1)::before { content: "1"; }
.flow__step:nth-child(2)::before { content: "2"; }
.flow__step:nth-child(3)::before { content: "3"; }
.flow__step:nth-child(4)::before { content: "4"; }
.flow__step:nth-child(5)::before { content: "5"; }
.flow__step:nth-child(6)::before { content: "6"; }
.flow__step:nth-child(7)::before { content: "7"; }
.flow__step:nth-child(8)::before { content: "8"; }
.flow__step:nth-child(9)::before { content: "9"; }
.flow__step:nth-child(10)::before { content: "10"; }

.flow__step-title {
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
  transition: color 240ms var(--curva);
}

.flow__step-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--testo-tenue);
}

.flow__more { margin-top: 1.5rem; }

.flow__progress { display: none; }

/* La scheda: le etichette ci sono sempre, i valori arrivano passaggio dopo passaggio. */

.flow__card {
  display: grid;
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-titoli);
  background: var(--superficie);
  border: var(--filetto) solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-rilievo);
  transition: opacity 500ms var(--curva), transform 600ms var(--curva);
}

.flow__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.75rem;
}

.flow__title { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }

.flow__sub { font-size: 0.8125rem; font-weight: 600; color: var(--testo-tenue); }

.flow__tag {
  flex: none;
  padding: 0.2rem 0.55rem;
  font-size: 0.625rem;
  color: var(--oro-testo);
  border: var(--filetto) solid var(--bordo);
  border-radius: var(--raggio);
}

.flow__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2.6rem;
  padding-block: 0.5rem;
  border-top: var(--filetto) solid var(--bordo);
  font-size: 0.875rem;
}

.flow__label { font-weight: 600; color: var(--testo-tenue); }

.flow__value {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

/* Linee disegnate: frecce, spunte e timbro si tracciano quando il passaggio arriva. */
.flow svg {
  flex: none;
  fill: none;
  stroke: var(--oro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow svg path,
.flow svg circle { stroke-dasharray: 1; stroke-dashoffset: 0; }

.flow svg .flow__stamp-ghost { stroke: var(--bordo); stroke-dasharray: none; }

.flow__arrow { width: 1.5rem; height: 0.75rem; }
.flow__tick { width: 1rem; height: 1rem; }

/* Documento e campi letti */

.flow__docrow {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: var(--filetto) solid var(--bordo);
}

.flow__doc {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-auto-rows: min-content;
  column-gap: 0.55rem;
  row-gap: 0.15rem;
  align-content: center;
  padding: 0.5rem 0.6rem;
  aspect-ratio: 85 / 54;
  overflow: hidden;
  background: var(--carta-alt);
  border: var(--filetto) solid var(--bordo-forte);
  border-radius: var(--raggio);
  transition: filter 500ms var(--curva), opacity 500ms var(--curva);
}

/* La parte gia' scandita resta velata d'oro (scaleY: niente ricalcolo del layout a ogni fotogramma). */
.flow__doc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oro-velo);
  opacity: 0.6;
  transform: scaleY(var(--scan));
  transform-origin: top;
  pointer-events: none;
  transition: opacity 400ms var(--curva);
}

.flow__doc-photo {
  grid-row: 1 / span 4;
  align-self: center;
  height: 3.2rem;
  background: var(--bordo-forte);
  border-radius: 2px;
}

.flow__doc-entry {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  white-space: nowrap;
}

.flow__doc-key {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.flow__doc-val {
  padding-inline: 0.15rem;
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
  transition: background-color 240ms var(--curva);
}

.flow__doc-val.is-read { background: var(--oro-velo); }

.flow__scan {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--scan) * 100%);
  z-index: 2;
  height: 2px;
  background: var(--oro);
  opacity: 0;
  transition: opacity 200ms var(--curva);
}

.flow__scan::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 1.1rem;
  background: linear-gradient(to top, rgba(224, 163, 46, 0.3), rgba(224, 163, 46, 0));
}

.flow__ai {
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oro-testo);
  transition: opacity 400ms var(--curva);
}

/* Il valore che vola dal documento al suo campo. */
.flow__chip {
  position: absolute;
  z-index: 3;
  padding: 0 0.3rem;
  border-radius: 2px;
  font-family: var(--font-titoli);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--oro-forte);
  background: var(--oro-velo);
  pointer-events: none;
}

.flow__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  align-content: start;
}

.flow__field dt { font-size: 0.6875rem; font-weight: 600; color: var(--testo-tenue); }

.flow__field dd {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.flow__fill { position: relative; display: inline-block; }

/* Cancellazione: barre di carta coprono i dati dell'ospite. */
.flow__fill::after {
  content: "";
  position: absolute;
  inset: 0.2em -0.1em;
  background: var(--bordo);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--curva);
}

.flow__field:nth-child(2) .flow__fill::after { transition-delay: 60ms; }
.flow__field:nth-child(3) .flow__fill::after { transition-delay: 120ms; }
.flow__field:nth-child(4) .flow__fill::after { transition-delay: 180ms; }

/* Approvazione e codice */

.flow__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: 0.75rem;
  border-top: var(--filetto) solid var(--bordo);
}

.flow__approved { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; }

.flow__stamp { width: 2.25rem; height: 2.25rem; }

/* I due testi occupano la stessa cella: si scambiano senza spostare nulla. */
.flow__approved-text { display: grid; }

.flow__approved-wait,
.flow__approved-done {
  grid-area: 1 / 1;
  transition: opacity 300ms var(--curva);
}

.flow__approved-wait { font-weight: 600; color: var(--testo-tenue); }
.flow__approved-done { font-weight: 800; }

.flow__code { display: grid; justify-items: end; gap: 0.1rem; font-size: 0.8125rem; }

.flow__digits {
  display: flex;
  gap: 0.2rem;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.flow__digit { display: inline-block; height: 1.25em; overflow: hidden; }

.flow__digit i {
  display: block;
  font-style: normal;
  transition: transform 520ms var(--curva);
}

.flow__digit:nth-child(2) i { transition-delay: 70ms; }
.flow__digit:nth-child(3) i { transition-delay: 140ms; }
.flow__digit:nth-child(4) i { transition-delay: 210ms; }

.flow__erased {
  padding-top: 0.6rem;
  border-top: var(--filetto) solid var(--bordo);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oro-testo);
}

.flow__visual { position: relative; }

/* Stati */

[data-show] { transition: opacity 400ms var(--curva), transform 500ms var(--curva); }

.flow__value--later { transition-delay: 150ms; }

[data-row] { transition: opacity 400ms var(--curva); }

.flow--live:not(.r1) [data-row="1"],
.flow--live:not(.r2) [data-row="2"],
.flow--live:not(.r3) [data-row="3"],
.flow--live:not(.r4) [data-row="4"],
.flow--live:not(.r5) [data-row="5"],
.flow--live:not(.r6) [data-row="6"],
.flow--live:not(.r7) [data-row="7"],
.flow--live:not(.r8) [data-row="8"] { opacity: 0.45; }

.flow:not(.r0) .flow__card { opacity: 0; transform: translateY(1rem); }

.flow:not(.r1) [data-show="1"],
.flow:not(.r5) [data-show="5"],
.flow:not(.r6) [data-show="6"],
.flow:not(.r7) [data-show="7"],
.flow:not(.r8) [data-show="8"],
.flow:not(.r9) [data-show="9"] { opacity: 0; transform: translateX(-0.4rem); }

.flow:not(.r1) .flow__arrow path,
.flow:not(.r3) .flow__stamp circle:not(.flow__stamp-ghost),
.flow:not(.r3) .flow__stamp path,
.flow:not(.r6) .flow__tick path { stroke-dashoffset: 1; }

.flow__arrow path,
.flow__stamp circle,
.flow__tick path { transition: stroke-dashoffset 600ms var(--curva) 150ms; }

.flow__stamp path { transition: stroke-dashoffset 450ms var(--curva) 550ms; }

.flow:not(.r3) .flow__approved-done,
.flow.r3 .flow__approved-wait { opacity: 0; }

.flow:not(.r3) .flow__ai { opacity: 0; }

/* Finche' la tassa non e' pagata la dicitura resta fuori dal flusso: l'importo sta allineato a destra. */
/* right: 0, o dalla sua posizione statica sporgerebbe oltre il bordo dello schermo su telefono. */
.flow:not(.r7) .flow__paid { position: absolute; right: 0; }

.flow:not(.r4) .flow__digit i { transform: translateY(110%); }

.flow--live.r2:not(.r3) .flow__scan { opacity: 1; }

.flow.r9 .flow__fill::after { transform: scaleX(1); }

.flow.r9 .flow__doc { filter: blur(2px); opacity: 0.25; }

.flow.r9 .flow__doc::after,
.flow.r9 .flow__ai { opacity: 0; }

/* Scena ferma sullo schermo mentre si scorre. La testata e' appiccicata in alto:
   la scena parte sotto di lei, altrimenti il titolo ci finirebbe dietro. */

.flow--live .flow__track {
  height: calc(100vh + 270vh);
  height: calc(100svh + 270svh);
}

.flow--live .flow__stage {
  position: sticky;
  top: 4.5rem;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
  padding-block: clamp(1.25rem, 4vh, 3rem);
}

/* Con la scena ferma sullo schermo i dieci passaggi e la scheda devono entrare in un'altezza
   sola: spaziature piu' strette, e il link alla pagina «Come funziona» resta nella versione ferma. */
.flow--live .flow__steps { margin-top: 1rem; }
.flow--live .flow__step { padding-block: 0.2rem; }
.flow--live .flow__step-text { font-size: 0.875rem; line-height: 1.45; }
.flow--live .flow__more { display: none; }
.flow--live .flow__row { min-height: 2.25rem; padding-block: 0.35rem; }
.flow--live .flow__docrow { padding-block: 0.65rem; }
.flow--live .flow__pair { padding-block: 0.55rem; }

.flow--live .flow__step:not([aria-current]) .flow__step-title,
.flow--live .flow__step:not([aria-current])::before { color: var(--testo-tenue); }

@media (min-width: 56rem) {
  .flow--live .flow__marker {
    display: block;
    position: absolute;
    inset-inline: -0.75rem 0;
    top: 0;
    z-index: 0;
    background: var(--carta-alt);
    border-left: 2px solid var(--oro);
    border-radius: 0 var(--raggio) var(--raggio) 0;
    /* Si anima solo la posizione: l'altezza cambia di colpo, senza ricalcolare il layout a ogni fotogramma. */
    transition: transform 380ms var(--curva);
  }
}

@media (max-width: 55.99rem) {
  .flow--live .flow__stage { align-content: center; gap: 1rem; padding-block: 0.75rem; }

  /* Nascosti alla vista ma non ai lettori di schermo: l'elenco resta completo. */
  .flow--live .flow__step:not([aria-current]) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Altezza fissa della didascalia: la scheda sotto non sobbalza tra un passaggio e l'altro. */
  .flow--live .flow__step { min-height: 5rem; align-content: start; }

  .flow--live .flow__more { display: none; }

  .flow--live .flow__progress {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
  }

  .flow__progress span {
    height: 3px;
    background: var(--bordo);
    border-radius: 2px;
    transition: background-color 240ms var(--curva);
  }

  .flow.r0 .flow__progress span:nth-child(1),
  .flow.r1 .flow__progress span:nth-child(2),
  .flow.r2 .flow__progress span:nth-child(3),
  .flow.r3 .flow__progress span:nth-child(4),
  .flow.r4 .flow__progress span:nth-child(5),
  .flow.r5 .flow__progress span:nth-child(6),
  .flow.r6 .flow__progress span:nth-child(7),
  .flow.r7 .flow__progress span:nth-child(8),
  .flow.r8 .flow__progress span:nth-child(9),
  .flow.r9 .flow__progress span:nth-child(10) { background: var(--oro); }
}

@media (max-width: 39.99rem) {
  .flow__card { padding: 0.9rem; }

  .flow__docrow { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }

  /* Su telefono il documento e' piccolo: le voci diventano barre, e da li' partono comunque i valori. */
  .flow__doc { padding: 0.35rem 0.4rem; grid-template-columns: 1.3rem minmax(0, 1fr); row-gap: 0.3rem; }
  .flow__doc-photo { height: 1.8rem; }
  .flow__doc-key { display: none; }
  .flow__doc-val {
    display: block;
    height: 0.35rem;
    overflow: hidden;
    color: transparent;
    background: var(--bordo-forte);
  }
  .flow__doc-val.is-read { background: var(--oro); }

  .flow__fields { gap: 0.35rem 0.75rem; }
  .flow__field dd { font-size: 0.8125rem; }
  .flow__row { min-height: 2.3rem; padding-block: 0.4rem; font-size: 0.8125rem; }
  .flow__approved { font-size: 0.8125rem; }
  .flow__digits { font-size: 1.25rem; }
}

@media (max-width: 24rem) {
  /* Scheda strettissima: il valore scende sotto l'etichetta invece di spezzarsi, approvazione e codice si impilano. */
  .flow__row { flex-wrap: wrap; row-gap: 0.1rem; }
  .flow__row .flow__value { margin-left: auto; }
  .flow__pair { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .flow__code { justify-items: start; }
  .flow__docrow { grid-template-columns: minmax(0, 1fr); }
  .flow__docwrap { max-width: 8rem; }
}

/* ---------- giornata (pagina Come funziona) ---------- */

.day { padding-block: var(--ritmo-sezione); border-bottom: var(--filetto) solid var(--bordo); }

.register {
  --hour-col: 5.25rem;
  --gap: 2.5rem;
  --rail-x: calc(var(--hour-col) + var(--gap) / 2);
  --dot-top: 1.6rem;
  position: relative;
  view-timeline: --day block;
}

.register__rail {
  position: absolute;
  top: var(--dot-top);
  bottom: 1.6rem;
  left: var(--rail-x);
  width: 2px;
  margin-left: -1px;
  background: var(--bordo);
  overflow: hidden;
}

.register__fill {
  position: absolute;
  inset: 0;
  background: var(--oro);
  transform-origin: top;
}

.register__list { list-style: none; padding: 0; }

.register__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--hour-col) minmax(0, 1fr);
  column-gap: var(--gap);
  padding-block: 1.1rem 1.6rem;
}

.register__row:first-child { padding-top: 0.6rem; --dot-top: 1.1rem; }

.register__row::before {
  content: "";
  position: absolute;
  top: var(--dot-top);
  left: calc(var(--rail-x) - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--carta);
  border: 2px solid var(--oro);
}

.register__row[aria-current="time"]::before {
  background: var(--oro);
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.register__hour {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-titoli);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--oro-testo);
}

.register__now {
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-testo);
}

.register__entry { max-width: 62ch; }

.register__entry h3 { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.35; }

.register__entry p { margin-top: 0.4rem; color: var(--testo-tenue); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .register__fill {
      animation: rail-fill linear both;
      animation-timeline: --day;
      animation-range: entry 10% cover 60%;
    }
  }
}

@keyframes rail-fill {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Su telefono l'ora sale sopra il titolo e la linea va sul bordo: il testo tiene tutta la larghezza. */
@media (max-width: 39.99rem) {
  .register { --rail-x: 0.3125rem; --dot-top: 1.45rem; }
  .register__row { grid-template-columns: minmax(0, 1fr); padding-left: 1.75rem; padding-block: 1rem 1.25rem; }
  .register__row:first-child { --dot-top: 0.95rem; }
  .register__hour { flex-direction: row; align-items: baseline; gap: 0.625rem; font-size: 1.0625rem; }
  .register__now { margin-top: 0; }
  .register__entry h3 { margin-top: 0.15rem; }
}

/* ---------- domande frequenti ---------- */

.faq { padding-block: var(--ritmo-sezione); }

.faq__index-title { color: var(--oro-testo); }

.faq__index ul {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
}

.faq__index li { border-top: var(--filetto) solid var(--bordo); }
.faq__index li:last-child { border-bottom: var(--filetto) solid var(--bordo); }

.faq__index a {
  display: block;
  padding-block: 0.6rem;
  font-family: var(--font-titoli);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--testo-tenue);
  text-decoration: none;
}
.faq__index a:hover { color: var(--testo); }

.faq__group + .faq__group { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

.faq__group h2 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  letter-spacing: -0.02em;
}

.faq__item { border-top: var(--filetto) solid var(--bordo); }
.faq__item:last-child { border-bottom: var(--filetto) solid var(--bordo); }

.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: 1rem;
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
  transition: color var(--durata) var(--curva);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--oro-testo); }

/* Piu' e meno disegnati con due filetti d'oro: all'apertura il verticale si accorcia fino a sparire. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.4rem;
  background-image:
    linear-gradient(var(--oro-testo), var(--oro-testo)),
    linear-gradient(var(--oro-testo), var(--oro-testo));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px, 2px 100%;
  transition: background-size 220ms var(--curva);
}

.faq__item[open] summary::after { background-size: 100% 2px, 2px 0; }

/* Apertura della risposta: breve, dove il browser la sa animare; altrove si apre e basta. */
@media (prefers-reduced-motion: no-preference) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 240ms var(--curva), content-visibility 240ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

.faq__answer { max-width: 62ch; padding-bottom: 1.25rem; color: var(--testo-tenue); }
.faq__answer p + p { margin-top: 0.6rem; }

/* Su telefono l'indice sta sopra le domande. */
@media (max-width: 55.99rem) {
  .faq__index { padding-bottom: 0.5rem; }
}

/* ---------- chiusura: prezzo e seconda richiesta ---------- */

.close {
  padding-block: var(--ritmo-sezione);
  background: #17233F;
  color: #FBF9F5;
}
@media (prefers-color-scheme: dark) {
  .close { background: var(--carta-alt); color: var(--testo); border-top: var(--filetto) solid var(--bordo); }
}

.close__grid { display: grid; gap: 2rem; }

@media (min-width: 56rem) {
  .close__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 6vw, 5.5rem);
    align-items: end;
  }
}

.close h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); }

.close__text { margin-top: 1.25rem; max-width: var(--misura-lettura); opacity: 0.86; }

.close a:hover { color: inherit; opacity: 0.8; }

/* Sulla chiusura scura i colori sono fissi: in chiaro il fondo e' inchiostro,
   in scuro la chiusura torna ai token (blocco media qui sopra e qui sotto). */
.request--dark .request__label,
.request--dark .request__note { color: rgba(251, 249, 245, 0.78); }

.request--dark .request__input {
  color: #FBF9F5;
  background: rgba(251, 249, 245, 0.06);
  border-color: rgba(251, 249, 245, 0.28);
}
.request--dark .request__input::placeholder { color: rgba(251, 249, 245, 0.6); }
.request--dark .request__input:hover { border-color: rgba(251, 249, 245, 0.55); }
.request--dark .request__input[aria-invalid="true"] { border-color: #E88A6E; }

.request--dark .request__button { color: #17233F; background: #E0A32E; box-shadow: none; }
.request--dark .request__button:hover:not(:disabled) { color: #17233F; }

.request--dark .request__status { border-color: rgba(251, 249, 245, 0.28); border-left-color: #E0A32E; }
.request--dark .request__status[data-tone="error"] { color: #F2B4A2; border-color: #E88A6E; }

@media (prefers-color-scheme: dark) {
  .request--dark .request__label,
  .request--dark .request__note { color: var(--testo-tenue); }
  .request--dark .request__input { color: var(--testo); background: var(--superficie); border-color: var(--bordo-forte); }
  .request--dark .request__input::placeholder { color: var(--testo-tenue); }
  .request--dark .request__input:hover { border-color: var(--testo-tenue); }
  .request--dark .request__button { color: #17233F; background: var(--oro); }
  .request--dark .request__status { border-color: var(--bordo); border-left-color: var(--oro); }
  .request--dark .request__status[data-tone="error"] { color: var(--errore); border-color: var(--errore); }
}

.close ::selection { background: #E0A32E; color: #17233F; }

/* ---------- piede ---------- */

.foot {
  padding-block: 2.5rem;
  border-top: var(--filetto) solid var(--bordo);
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.foot__logo { display: block; line-height: 0; }
.foot__logo img { display: block; height: 1.25rem; width: auto; }

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-left: auto;
}

.foot a { color: var(--testo-tenue); }
.foot a:hover { color: var(--testo); }
.foot a[aria-current="page"] { color: var(--testo); }

@media (max-width: 39.99rem) {
  .foot__links { margin-left: 0; }
}