/*
 * Leggibilità: scala tipografica e misura di riga.
 * Pagine aste (/opportunita/) e consulenza (/consulenza-aste-alberghiere/ + i 4 cluster).
 *
 * IL PROBLEMA, MISURATO.
 *
 * Sulla pagina consulenza convivevano 25 dimensioni di carattere. Non 25 livelli di gerarchia:
 * 25 taglie, molte separate da frazioni di pixel (16,96 / 16,80 / 16,32 / 16,00 / 15,68 / 15,20).
 * Una differenza di 0,3 px non e' percepibile, quindi non comunica niente -- ma impedisce a
 * qualunque cosa di cadere su una scala, ed e' quello che fa sembrare una pagina "non finita"
 * senza che si riesca a dire perche'.
 *
 * Peggio: il TESTO DI LETTURA era diviso su tre taglie (16 / 14,7 / 13,6) usate a caso fra le
 * sezioni. Il lettore, senza accorgersene, ricalibra a ogni blocco.
 *
 * E la misura di riga arrivava a 121 caratteri di mediana, 192 al massimo. La lettura
 * confortevole sta fra i 60 e i 75: oltre, l'occhio sbaglia il ritorno a capo e rilegge la riga
 * appena letta. E' la prima causa di fatica su queste pagine, prima ancora dei font.
 *
 * LA SCALA. Otto gradini, ognuno con un mestiere. Nessun gradino esiste "perche' serviva un
 * carattere un po' piu' piccolo": se due cose hanno la stessa importanza, hanno la stessa taglia.
 */
:root {
  /* Titoli: restano fluidi, erano gia' giusti. */
  --t-h3:      1.25rem;   /* 20px -- sottotitoli di sezione            */
  --t-lead:    1.125rem;  /* 18px -- l'attacco di una sezione          */
  --t-body:    1rem;      /* 16px -- il testo che si legge davvero     */
  --t-small:   0.875rem;  /* 14px -- note, meta, celle di tabella      */
  --t-caption: 0.75rem;   /* 12px -- didascalie, testo legale          */
  --t-eyebrow: 0.6875rem; /* 11px -- etichette maiuscole               */

  /* La misura. In `ch` perche' e' la larghezza di uno zero: cambia col carattere, come deve. */
  --misura:      66ch;
  --misura-lead: 60ch;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. LA MISURA DI RIGA. E' il singolo cambiamento che si sente di piu'.
   ───────────────────────────────────────────────────────────────────────── */

.kw-lead,
.kw-sec p,
.kw-wrap > p,
.vs-faq > div,
.kw-sec li {
  max-width: var(--misura);
}

.kw-lead {
  max-width: var(--misura-lead);   /* un lead e' piu' grande: si accorcia prima */
}

/* Le colonne strette hanno gia' la loro misura: il cap le strozzerebbe. */
.kw-grid .kw-lead,
.kw-card p,
aside p,
td p,
li p {
  max-width: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. LA SCALA. Le taglie che non stanno su un gradino vengono ricondotte.
   ───────────────────────────────────────────────────────────────────────── */

/* Il testo di lettura: una taglia sola, 16px. Era 13,6 in meta' pagina -- sotto la soglia in
   cui un adulto legge senza sforzo un testo lungo. */
.kw-sec p,
.kw-sec li,
.kw-wrap > p {
  font-size: var(--t-body);
  line-height: 1.72;
}

.kw-lead {
  font-size: var(--t-lead);
  line-height: 1.68;
}

/* I componenti della pagina hanno regole piu' specifiche delle mie (`.kw-step .body p` a
   0,92rem batte `.kw-sec p`). Si nominano, invece di alzare la specificita' a colpi di
   !important: cosi' resta leggibile quale regola vince, e perche'. */
.kw-sec .kw-step .body p,
.kw-sec .kw-step p,
.kw-sec .kw-card p {
  font-size: var(--t-body);
  line-height: 1.72;
}

.kw-sec .kw-step .sh,
.kw-sec .sh {
  font-size: var(--t-lead);
  line-height: 1.45;
}

.kw-sec h3 {
  font-size: var(--t-h3);
  line-height: 1.3;
}

.vs-faq summary {
  font-size: var(--t-body);
  line-height: 1.5;
}

.vs-faq > div {
  font-size: var(--t-small);
  line-height: 1.7;
}

/* Le etichette maiuscole: una taglia sola. Erano 10 / 10,24 / 10,56 / 10,88 -- quattro taglie
   per fare la stessa identica cosa. A 10px, per giunta, una maiuscola spaziata si legge male. */
.kw-eye,
.kw-proof .l,
.st, .vt, .pay, .z1, .z2 {
  font-size: var(--t-eyebrow);
  letter-spacing: .18em;
  line-height: 1.5;
}

/* I bottoni e i link d'azione. */
.kw-btn-solid,
.kw-line-link {
  font-size: var(--t-caption);
  letter-spacing: .12em;
}

/* Le tabelle di confronto: erano a 14,72 px, cioe' su nessun gradino. Una cella e' testo di
   servizio, non prosa: sta a 14. */
.kw-sec table td,
.kw-sec table th,
.kw-sec .sp,
.kw-sec .sh {
  font-size: var(--t-small);
  line-height: 1.6;
}

/* Le cifre di prova (la fila "10% / dal 75% / -25% / 0"): il numero e' il dato, l'etichetta lo
   spiega. Due ruoli, due taglie -- non quattro come prima (10 / 10,24 / 10,56 / 10,88). */
.kw-proof .n { line-height: 1; }
.kw-proof .l,
.kw-sec .st,
.kw-sec .vt,
.kw-sec .pay {
  font-size: var(--t-eyebrow);
  line-height: 1.55;
  letter-spacing: .1em;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. RITMO. Un testo lungo ha bisogno d'aria fra i paragrafi, non solo dentro.
   ───────────────────────────────────────────────────────────────────────── */

.kw-sec p + p {
  margin-top: 1.15em;
}

.kw-sec h2 + p,
.kw-sec h2 + .kw-lead {
  margin-top: .9rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. IL MODULO. E' il punto in cui la pagina chiede qualcosa: deve essere il
      posto piu' facile, non il piu' faticoso.
   ───────────────────────────────────────────────────────────────────────── */

/* I <select> e gli <input> non ereditano il carattere: senza questa riga il modulo di una
   pagina in Playfair/DM Sans veniva servito in Arial di sistema. Si vedeva, e stonava. */
#c-form-wrap input,
#c-form-wrap select,
#c-form-wrap textarea,
#c-form-wrap button {
  font-family: inherit;
  font-size: 16px;   /* 16px esatti: sotto, iOS ingrandisce la pagina al focus */
}

/* Un'etichetta che sta solo nel placeholder sparisce appena si scrive, e chi torna sul modulo
   non sa piu' cosa aveva compilato. La teniamo sempre visibile. */
#c-form-wrap label {
  font-size: var(--t-caption);
  letter-spacing: .04em;
}

#c-submit {
  min-height: 52px;
  letter-spacing: .12em;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Mobile: la misura la da' gia' lo schermo, e i cap non servono.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .kw-lead,
  .kw-sec p,
  .kw-sec li,
  .kw-wrap > p {
    max-width: none;
  }
  .kw-lead { font-size: var(--t-body); }
}

/* ─────────────────────────────────────────────────────────────────────────
   6. BERSAGLI TATTILI. 44px e' il minimo per un dito (WCAG 2.5.5).
      Lo switch di lingua era alto 22px, la chiusura del menu 30: si mancano.
      Il riquadro cresce, il testo no -- si aggiunge area cliccabile, non ingombro.
   ───────────────────────────────────────────────────────────────────────── */

#close-btn,
.mobile-nav-link,
.kw-btn-solid,
.kw-line-link,
.btn-cookie,
.kw-lang button,
button[class*="text-["] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Lo switch di lingua fa eccezione: e' l'unico elemento che esiste identico su
   tutte le 500 pagine. Alzarlo a 44px qui lo rendeva alto il doppio (44 contro 22)
   rispetto a homepage e resto del sito, perche' questo foglio lo caricano solo
   queste 5 pagine. L'area tattile serve dove c'e' un dito: la si da' al puntatore
   grosso e si lascia al desktop la stessa forma di sempre. */
@media (pointer: coarse) {
  #btn-it, #btn-en {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. LA BARRA D'AZIONE.
      La pagina consulenza e' alta 7.800 px: chi arriva da una ricerca doveva scorrere
      11 sezioni e 16 titoli prima di poter chiedere qualcosa. La barra non accorcia la
      pagina -- il testo lungo e' cio' che la posiziona su Google -- ma toglie il muro fra
      l'intenzione e l'azione.
      Sparisce quando il modulo e' a video: li' sarebbe un doppione che copre il contenuto.
   ───────────────────────────────────────────────────────────────────────── */

.kw-barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 24px;
  background: rgba(17,17,17,.97);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transform: translateY(-100%);
  transition: transform .28s ease;
}
.kw-barra.is-visible { transform: translateY(0); }

.kw-barra-t {
  font-size: var(--t-caption);
  letter-spacing: .06em;
  color: #cfcbc6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kw-barra-cta {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  background: #B40101;
  color: #fff;
  text-decoration: none;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s;
}
.kw-barra-cta:hover { background: #8B0000; }

/* Sul telefono il titolo non ci sta e non serve: l'azione si', e prende tutta la riga. */
@media (max-width: 640px) {
  .kw-barra-t { display: none; }
  .kw-barra { padding: 8px 12px; }
  .kw-barra-cta { flex: 1 1 auto; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. IL MODULO IN TRE CAMPI.
      Chiedeva 10 campi a chi non aveva ancora deciso se scrivere. Ogni campo in piu' fa
      cadere una quota di persone, e le qualifiche (tipo, fase, budget) servono a NOI, non
      a chi scrive: si chiedono dopo, a chi e' gia' dentro.
   ───────────────────────────────────────────────────────────────────────── */

.c-piu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
  color: #cfcbc6;
  font-size: var(--t-caption);
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.c-piu:hover { color: #fff; border-bottom-color: #B40101; }
.c-piu[hidden] { display: none; }

.c-extra-nota {
  font-size: var(--t-caption);
  color: #8f8b86;
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

/* Chi ha chiesto meno movimento non lo riceve. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}