/* =============================================================================================
   YumaFLY — il foglio.
   =============================================================================================

   ⚠️ NON È UN SITO CON DENTRO UN DISEGNO: È UN DISEGNO. L'impaginazione viene dalla tavola
   tecnica — crocini agli angoli, linee sottili, il cartiglio con i dati in basso, le misure
   quotate. È il mondo di chi ci guarda (MARCHIO.md), e nessun concorrente può prenderselo senza
   sembrare noi.

   ⚠️ IL GIALLO PORTA L'OCCHIO, QUINDI SI USA POCO. Sta sulle quote e sull'azione principale.
   Se colora anche i fondali smette di indicare qualcosa, e resta solo un colore acceso.

   ⚠️ LE MISURE SI SCRIVONO IN MONO, SEMPRE. Un numero in mono si legge come un dato rilevato;
   lo stesso numero nel carattere del testo si legge come una promessa.
   ============================================================================================= */

:root {
  --carta:    #FBFAF7;
  --carta-2:  #F3F1EA;
  --grafite:  #1B1B19;
  --grafite-2:#33332E;
  --giallo:   #FFC300;
  --blu:      #12508C;
  --mina:     #6B6B66;
  --rosso:    #C2381F;
  --linea:    #DDD9CE;

  --display: 'Archivo', system-ui, sans-serif;
  --testo: 'IBM Plex Sans', system-ui, sans-serif;
  --dato: 'IBM Plex Mono', ui-monospace, monospace;

  --foglio: 1180px;
  --margine: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  /* Rete di sicurezza: nessuna pagina deve poter scorrere in orizzontale. Non sostituisce il
     `min-width: 0` sulle griglie — nasconde il sintomo, non la causa — ma evita che un difetto
     futuro si presenti come una pagina storta. */
  overflow-x: hidden;
  background: var(--carta);
  color: var(--grafite);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* --- il foglio e i suoi crocini --------------------------------------------------------------
   ⚠️ I CROCINI SONO IL DETTAGLIO CHE FA IL MESTIERE. Su una tavola servono a registrare la
   stampa; qui dicono, senza una parola, che stai guardando un disegno. Sono minuscoli di
   proposito: un dettaglio che si nota alla seconda occhiata vale più di un ornamento che urla. */
.dentro {
  max-width: var(--foglio);
  margin: 0 auto;
  padding-inline: var(--margine);
}

.tavola { position: relative; }
.tavola::before, .tavola::after {
  content: '';
  position: absolute; top: 0;
  width: 9px; height: 9px;
  border-top: 1px solid var(--linea);
  pointer-events: none;
}
.tavola::before { left: 0;  border-left: 1px solid var(--linea); }
.tavola::after  { right: 0; border-right: 1px solid var(--linea); }

/* --- tipografia ------------------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.022em; margin: 0; }

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 em { font-style: normal; display: block; color: var(--mina); font-weight: 700; }
/* Il sommario respira: attaccato al titolo sembrava una didascalia, non una promessa. */
.apertura h1 { margin-bottom: 22px; }

h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; text-wrap: balance; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
a { color: var(--blu); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.occhiello {
  font-family: var(--dato);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mina);
  margin-bottom: 18px;
}
.occhiello::before {
  content: ''; display: inline-block;
  width: 22px; height: 1px; background: var(--grafite);
  vertical-align: middle; margin-right: 10px;
}

.sommario { font-size: clamp(1.05rem, 1.7vw, 1.26rem); color: var(--grafite-2); max-width: 33em; }
.intro-sezione { color: var(--mina); max-width: 40em; font-size: 1.05rem; }

/* --- la quota: il segno del marchio ----------------------------------------------------------
   Linea orizzontale, due barrette agli estremi, il numero in mezzo. Come su un progetto. */
.quotato { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; }
.quotato .cifra { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.quotato .riga {
  position: relative; height: 9px;
  border-left: 1px solid var(--giallo);
  border-right: 1px solid var(--giallo);
}
.quotato .riga::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--giallo);
}
.quotato .didascalia { font-family: var(--dato); font-size: .78rem; color: var(--mina); }

/* --- bottoni --------------------------------------------------------------------------------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  font-family: var(--testo); font-size: .97rem; font-weight: 600;
  border-radius: 3px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.bottone:active { transform: translateY(1px); }
.bottone.giallo { background: var(--giallo); color: var(--grafite); border-color: #E5AF00; }
.bottone.giallo:hover { background: #FFD03A; }
.bottone.scuro { background: var(--grafite); color: var(--carta); }
.bottone.scuro:hover { background: var(--grafite-2); }
.bottone.vuoto { background: transparent; color: var(--grafite); border-color: var(--linea); }
.bottone.vuoto:hover { border-color: var(--grafite); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--blu); outline-offset: 2px;
}

/* --- testata --------------------------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251,250,247,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
header .dentro { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 18px; }
.marchio {
  font-family: var(--display); font-weight: 800; font-size: 1.28rem;
  letter-spacing: -.03em; color: var(--grafite); text-decoration: none;
}
.marchio span { color: var(--mina); }
header nav { display: flex; align-items: center; gap: 24px; }
header nav a:not(.bottone) { color: var(--grafite-2); text-decoration: none; font-size: .95rem; }
header nav a:not(.bottone):hover { color: var(--grafite); text-decoration: underline; }
@media (max-width: 780px) {
  header nav a:not(.bottone) { display: none; }
}

/* --- apertura -------------------------------------------------------------------------------- */
.apertura { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.apertura .dentro { display: grid; grid-template-columns: 1fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
/* ⚠️ SENZA QUESTO LA GRIGLIA SI ALLARGA OLTRE LO SCHERMO. Una colonna di griglia, per difetto, non
   si restringe sotto la dimensione del suo contenuto: la fotografia teneva la sua larghezza
   naturale, spingeva fuori il foglio e mandava i bottoni della testata oltre il bordo destro.
   Visto il 22/08/2026 su una finestra da 1210 pixel. */
.apertura .dentro > * { min-width: 0; }
@media (max-width: 940px) { .apertura .dentro { grid-template-columns: 1fr; } }

.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sotto-azioni { font-family: var(--dato); font-size: .8rem; color: var(--mina); margin-top: 14px; }

.disegno { width: 100%; height: auto; }
.disegno .terra { fill: var(--carta-2); }
.disegno .falda { fill: #E4E0D5; stroke: var(--grafite); stroke-width: 1.5; }
.disegno .falda-2 { fill: #EEEBE1; stroke: var(--grafite); stroke-width: 1.5; }
.disegno .pannello rect { fill: var(--grafite); opacity: .82; }
.disegno .quota { stroke: var(--giallo); stroke-width: 1.5; }
.disegno .quota-testo { font-family: var(--dato); font-size: 13px; font-weight: 500; fill: var(--grafite); }
.disegno .etichetta { font-family: var(--dato); font-size: 11px; fill: var(--mina); }

/* --- sezioni --------------------------------------------------------------------------------- */
section { padding: clamp(52px, 7vw, 92px) 0; border-top: 1px solid var(--linea); scroll-margin-top: 74px; }
section > .dentro > h2 + .intro-sezione { margin-top: 14px; }

.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); margin-top: 40px; border: 1px solid var(--linea); }
.passo { background: var(--carta); padding: 28px 26px 30px; }
@media (max-width: 820px) { .passi { grid-template-columns: 1fr; } }
/* ⚠️ I NUMERI CI STANNO PERCHÉ È DAVVERO UNA SEQUENZA: prima disegni, poi vola, poi arriva il
   modello. Se fossero tre vantaggi qualsiasi, numerarli sarebbe decorazione. */
.passo .numero { font-family: var(--dato); font-size: .8rem; color: var(--giallo); font-weight: 600; margin-bottom: 14px; }
.passo h3 { margin-bottom: 8px; }
.passo p { color: var(--mina); font-size: .97rem; margin: 0; }

.risposte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
@media (max-width: 820px) { .risposte { grid-template-columns: 1fr; gap: 22px; } }
.risposta { border-top: 2px solid var(--grafite); padding-top: 16px; }
.risposta .valore { display: block; font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.03em; }
.risposta .chi { display: block; color: var(--mina); font-size: .95rem; margin-top: 4px; }

/* --- prezzi ---------------------------------------------------------------------------------- */
.prezzi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; align-items: start; }
@media (max-width: 900px) { .prezzi { grid-template-columns: 1fr; } }
.piano { border: 1px solid var(--linea); background: var(--carta); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.piano.scelto { border-color: var(--grafite); box-shadow: 6px 6px 0 var(--giallo); }
.piano .nome { font-family: var(--dato); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mina); }
.piano .cifra { font-family: var(--display); font-weight: 800; font-size: 2.3rem; letter-spacing: -.03em; line-height: 1; }
.piano .cifra small { font-family: var(--dato); font-size: .82rem; font-weight: 400; color: var(--mina); letter-spacing: 0; }
.piano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.piano li { font-size: .95rem; color: var(--grafite-2); padding-left: 20px; position: relative; }
.piano li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: var(--giallo); }
.piano .bottone { margin-top: auto; }
.nota-prezzi { font-family: var(--dato); font-size: .82rem; color: var(--mina); margin-top: 26px; }

/* --- l'onestà sulle misure ------------------------------------------------------------------- */
.onesta { background: var(--grafite); color: var(--carta); border-top: none; }
.onesta .dentro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); }
@media (max-width: 900px) { .onesta .dentro { grid-template-columns: 1fr; } }
.onesta h2 { color: var(--carta); }
.onesta .intro-sezione { color: #B9B7B0; }
.onesta strong { color: var(--giallo); font-weight: 600; }
.onesta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.onesta li { color: #DEDCD5; font-size: .97rem; padding-left: 20px; position: relative; }
.onesta li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: var(--giallo); }

.chiusura { text-align: center; }
.chiusura h2 { max-width: 16em; margin-inline: auto; }

/* --- cartiglio: il riquadro dei dati, come in fondo a ogni tavola -----------------------------
   ⚠️ PORTA DATI VERI, MAI NUMERI SCELTI PER FARE BELLA FIGURA. Sono le misure del rilievo del
   22 agosto 2026: se un giorno cambiano, si cambiano qui perché è cambiato il rilievo. */
.cartiglio {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--linea); margin-top: 44px;
  font-family: var(--dato); font-size: .8rem;
}
@media (max-width: 720px) { .cartiglio { grid-template-columns: repeat(2, 1fr); } }
.cartiglio div { padding: 12px 14px; border-right: 1px solid var(--linea); }
.cartiglio div:last-child { border-right: none; }
.cartiglio dt { color: var(--mina); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.cartiglio dd { margin: 0; font-weight: 500; }

/* --- piede ----------------------------------------------------------------------------------- */
footer { border-top: 1px solid var(--linea); padding: 26px 0 40px; }
footer .dentro { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
footer a { color: var(--mina); font-size: .9rem; text-decoration: none; }
footer a:hover { color: var(--grafite); text-decoration: underline; }
footer .fine { font-family: var(--dato); font-size: .8rem; color: var(--mina); margin-left: auto; }

/* =============================================================================================
   L'AREA DELLA PERSONA
   =============================================================================================

   ⚠️ IL SALDO STA IN TESTATA, NON DENTRO LA PAGINA. Chi sta per far volare un drone deve sapere
   se ha di che pagare il calcolo senza andarlo a cercare: un contatore che si vede da ogni
   pagina è la differenza fra un prodotto a crediti e un modulo da compilare.
   ============================================================================================= */

/* --- il contatore in testata ------------------------------------------------------------------ */
.tessera-crediti {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px 7px 12px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--carta);
  text-decoration: none; color: var(--grafite);
  transition: border-color .12s ease, background-color .12s ease;
}
.tessera-crediti:hover { border-color: var(--grafite); }
.tessera-crediti .n { font-family: var(--dato); font-weight: 600; font-size: 1.02rem; line-height: 1; }
.tessera-crediti .etichetta { font-size: .84rem; color: var(--mina); }
/* Quando restano pochi crediti il bordo si accende: è un avviso, non una decorazione. */
.tessera-crediti.agli-sgoccioli { border-color: var(--giallo); background: #FFF8E2; }
.tessera-crediti.vuota { border-color: var(--rosso); color: var(--rosso); }
.tessera-crediti.vuota .etichetta { color: var(--rosso); }
@media (max-width: 520px) { .tessera-crediti .etichetta { display: none; } }

.chi-sei { display: flex; align-items: center; gap: 10px; }
.ritratto {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; background: var(--carta-2);
  border: 1px solid var(--linea);
}
.ritratto.iniziali {
  display: grid; place-items: center;
  font-family: var(--dato); font-size: .82rem; font-weight: 600; color: var(--mina);
}
.chi-sei .nome { font-size: .93rem; color: var(--grafite-2); }
@media (max-width: 640px) { .chi-sei .nome { display: none; } }

/* --- corpo dell'area -------------------------------------------------------------------------- */
.area { padding: clamp(34px, 5vw, 60px) 0 0; }
.area-testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }

/* Il saldo scritto come una misura presa, non come un contatore di videogioco. */
.saldo-grande { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.saldo-grande .quotato .cifra { font-size: clamp(3.4rem, 9vw, 5.6rem); }
.saldo-grande .stato { font-family: var(--dato); font-size: .84rem; color: var(--mina); padding-bottom: 8px; max-width: 26em; }
.saldo-grande .stato b { color: var(--grafite); font-weight: 600; }

.avviso-scadenza {
  border-left: 2px solid var(--giallo); background: #FFFBEF;
  padding: 12px 16px; margin-top: 22px; font-size: .95rem; color: var(--grafite-2);
}

.blocco { padding: clamp(38px, 5vw, 58px) 0; border-top: 1px solid var(--linea); margin-top: clamp(38px, 5vw, 58px); }
.blocco:first-of-type { margin-top: clamp(30px, 4vw, 44px); }
.blocco > h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.blocco > p { color: var(--mina); max-width: 42em; margin-top: 10px; }

/* --- listino dei pacchetti -------------------------------------------------------------------- */
.listino { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
@media (max-width: 900px) { .listino { grid-template-columns: 1fr; } }
.voce-listino {
  border: 1px solid var(--linea); background: var(--carta);
  padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 18px;
}
.voce-listino .quanti { font-family: var(--dato); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mina); }
.voce-listino .unitario { font-family: var(--dato); font-size: .85rem; color: var(--mina); }
.voce-listino .bottone { margin-top: auto; }
.voce-listino.conveniente { border-color: var(--grafite); box-shadow: 6px 6px 0 var(--giallo); }
.voce-listino .bollino {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grafite); background: var(--giallo); padding: 3px 8px; align-self: flex-start;
}

/* --- profilo ---------------------------------------------------------------------------------- */
.scheda-profilo { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; margin-top: 28px; }
@media (max-width: 640px) { .scheda-profilo { grid-template-columns: 1fr; } }
.ritratto-grande { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--linea); background: var(--carta-2); }
.ritratto-grande.iniziali { display: grid; place-items: center; font-family: var(--dato); font-size: 1.6rem; color: var(--mina); }

.campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 620px; }
@media (max-width: 640px) { .campi { grid-template-columns: 1fr; } }
label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
label .facoltativo { font-weight: 400; color: var(--mina); }
input, select {
  width: 100%; min-height: 46px; padding: 0 13px;
  font-family: var(--testo); font-size: 1rem; color: var(--grafite);
  background: var(--carta); border: 1px solid var(--linea); border-radius: 3px;
}
input:disabled { background: var(--carta-2); color: var(--mina); }
input:focus, select:focus { border-color: var(--grafite); outline: none; }
.aiuto-campo { font-size: .84rem; color: var(--mina); margin-top: 6px; }

/* --- registro dei movimenti -------------------------------------------------------------------
   ⚠️ UNA TABELLA, NON UN ELENCO DI SCHEDE. Un movimento di conto si legge per colonne: quando,
   cosa, quanto, quanto resta. Le schede colorate fanno sembrare un estratto conto un feed. */
.registro { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: .94rem; }
.registro th {
  text-align: left; font-family: var(--dato); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mina); font-weight: 500;
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--linea);
}
.registro td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; }
.registro .quando { font-family: var(--dato); color: var(--mina); white-space: nowrap; }
.registro .quanti { font-family: var(--dato); font-weight: 600; text-align: right; white-space: nowrap; }
.registro .quanti.entra { color: #1F7A44; }
.registro .quanti.esce { color: var(--grafite); }
.registro .resta { font-family: var(--dato); color: var(--mina); text-align: right; }
@media (max-width: 620px) { .registro .resta, .registro th.resta { display: none; } }

/* --- messaggi e schermate senza contenuto -------------------------------------------------------
   ⚠️ UNA PAGINA VUOTA È UN INVITO, NON UN ERRORE. Dice cosa manca e cosa fare, non «nessun dato».
   ⚠️ SI CHIAMA `niente-ancora` E NON `vuoto`: `.vuoto` esisteva già come variante del bottone dal
   bordo sottile, e le due regole si sovrapponevano — il bottone «Accedi» in testata ereditava
   ventotto pixel di imbottitura e usciva dalla barra. Due cose diverse non possono avere lo
   stesso nome, nemmeno quando in italiano la parola torna comoda a entrambe. */
.niente-ancora { border: 1px dashed var(--linea); padding: 28px 24px; color: var(--mina); margin-top: 26px; }
.messaggio { padding: 12px 16px; border-radius: 3px; font-size: .95rem; margin-top: 18px; }
.messaggio.errore { background: #FCEEEB; color: var(--rosso); border-left: 2px solid var(--rosso); }
.messaggio.fatto { background: #EDF6F0; color: #1F7A44; border-left: 2px solid #1F7A44; }

/* --- accesso e registrazione ------------------------------------------------------------------- */
.pagina-accesso { display: grid; place-items: center; padding: clamp(36px, 6vw, 76px) 0; }
.modulo { width: 100%; max-width: 430px; }
.modulo h1 { font-size: clamp(2rem, 4.6vw, 2.7rem); }
.modulo .campi { grid-template-columns: 1fr; max-width: none; margin-top: 22px; }
.modulo .bottone { width: 100%; margin-top: 22px; }
.oppure { display: flex; align-items: center; gap: 14px; color: var(--mina); font-size: .84rem; margin: 24px 0; }
.oppure::before, .oppure::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.con-google { width: 100%; gap: 10px; }
.con-google img { width: 18px; height: 18px; }
.regalo {
  border-left: 2px solid var(--giallo); background: #FFFBEF;
  padding: 13px 16px; font-size: .95rem; color: var(--grafite-2); margin: 22px 0;
}
.regalo b { font-family: var(--dato); font-weight: 600; }
.sotto-modulo { font-size: .92rem; color: var(--mina); margin-top: 22px; text-align: center; }

/* =============================================================================================
   LA LANDING: fotografie quotate
   =============================================================================================

   ⚠️ È IL SEGNO DEL MARCHIO PORTATO SULLE FOTO. Una quota gialla disegnata sopra una fotografia
   dice in un colpo solo cosa facciamo — misuriamo cose vere — e non somiglia a nient'altro in
   giro. Sta sulle immagini che mostrano un edificio, mai su quelle di atmosfera: una quota che
   misura una scrivania è una decorazione, e le decorazioni fanno perdere credito ai numeri veri.
   ============================================================================================= */

/* ⚠️ IL MARGINE SI AZZERA QUI, NON NEL DOCUMENTO. Scritto a mano nell'HTML batteva le regole di
   sotto — le immagini dei tre passi restavano staccate dai bordi della cella. Uno stile scritto
   dentro il tag vince sempre, ed è per questo che non se ne scrivono. */
figure { margin: 0; }
.figura { position: relative; overflow: hidden; background: var(--carta-2); }
.figura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figura svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.figura .misura { stroke: var(--giallo); stroke-width: 2; fill: none; }
.figura .misura-testo {
  font-family: var(--dato); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  fill: var(--grafite); paint-order: stroke; stroke: var(--carta); stroke-width: 5px;
}

/* --- apertura con fotografia ------------------------------------------------------------------ */
.apertura .figura { aspect-ratio: 4 / 3; border: 1px solid var(--linea); }
@media (max-width: 940px) { .apertura .figura { aspect-ratio: 16 / 10; } }

/* --- i passi, ognuno con la sua immagine ------------------------------------------------------ */
.passo .figura { aspect-ratio: 3 / 2; margin: -28px -26px 22px; border-bottom: 1px solid var(--linea); }

/* --- i mestieri -------------------------------------------------------------------------------- */
.mestieri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 900px) { .mestieri { grid-template-columns: 1fr; } }
.mestiere .figura { aspect-ratio: 4 / 3; border: 1px solid var(--linea); }
.mestiere .valore {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.9rem; letter-spacing: -.03em; margin-top: 18px;
}
.mestiere .chi { display: block; color: var(--mina); font-size: .95rem; margin-top: 2px; }

/* --- la sezione scura con la fotografia -------------------------------------------------------- */
.onesta .figura { aspect-ratio: 3 / 2; border: 1px solid #3A3A34; margin-bottom: 26px; }
.onesta .figura .misura-testo { fill: var(--carta); stroke: var(--grafite); }

/* --- i dati dell'azienda, in fondo ------------------------------------------------------------- */
footer .azienda { border-top: 1px solid var(--linea); margin-top: 22px; padding-top: 18px; }
footer .azienda p { font-family: var(--dato); font-size: .76rem; color: var(--mina); margin: 0; line-height: 1.7; }

/* --- documenti lunghi: condizioni, privacy ------------------------------------------------------
   ⚠️ SI LEGGONO DAVVERO, QUINDI SI IMPAGINANO DAVVERO. Una colonna stretta, righe alte, titoli
   che si distinguono: un documento che sembra illeggibile viene saltato, e un documento saltato
   protegge meno di uno letto. */
.documento { padding: clamp(40px, 6vw, 72px) 0 0; }
.documento .dentro { max-width: 760px; }
.documento h1 { margin-bottom: 16px; }
.testo-lungo { margin-top: 34px; }
.testo-lungo h2 {
  font-size: 1.22rem; margin: 40px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.testo-lungo h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.testo-lungo p, .testo-lungo li { color: var(--grafite-2); font-size: 1rem; }
.testo-lungo ul { padding-left: 20px; display: grid; gap: 8px; margin: 0 0 1em; }
.testo-lungo strong { font-weight: 600; }

.in-breve { border: 1px solid var(--grafite); padding: 24px 26px 26px; margin-top: 34px; }
.in-breve h2 {
  font-size: .78rem; font-family: var(--dato); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mina); margin: 0 0 14px;
}
.in-breve ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.in-breve li { position: relative; padding-left: 22px; font-size: .98rem; }
.in-breve li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 12px; height: 2px; background: var(--giallo);
}
.nota-documento {
  font-family: var(--dato); font-size: .8rem; color: var(--mina);
  border-top: 1px solid var(--linea); margin-top: 44px; padding: 20px 0 44px;
}

/* La casella da spuntare alla registrazione: piccola nel disegno, decisiva nella sostanza. */
.consenso { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; font-size: .92rem; color: var(--grafite-2); }
.consenso input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--giallo); }
.consenso a { color: var(--blu); }
.riga-onesta { margin-top: 34px; font-size: .95rem; color: var(--mina); max-width: 54em; border-left: 2px solid var(--giallo); padding-left: 16px; }

/* --- la pagina di scarico ----------------------------------------------------------------------- */
.scarico { margin: 34px 0 6px; }
.bottone.grande { min-height: 58px; padding: 0 30px; font-size: 1.05rem; }
.bottone.spento { background: var(--carta-2); color: var(--mina); border-color: var(--linea); cursor: default; }
.dati-file { font-family: var(--dato); font-size: .84rem; color: var(--mina); margin-top: 12px; }

/* --- l'invito facoltativo a farsi avvisare ------------------------------------------------------ */
.avvisami { border-top: 1px solid var(--linea); margin-top: 34px; padding-top: 26px; }
.avvisami label { font-weight: 600; margin-bottom: 10px; }
.riga-avvisi { display: flex; gap: 10px; max-width: 460px; }
.riga-avvisi input { flex: 1; }
.riga-avvisi .bottone { flex: none; }
@media (max-width: 520px) { .riga-avvisi { flex-direction: column; } .riga-avvisi .bottone { width: 100%; } }