/* ==========================================================================
   Vita Serena Colf Badanti — foglio di stile
   Direzione creativa A, concept "La linea dell'orizzonte".

   ⚠️ REGOLA FERREA: nessun colore scritto in chiaro fuori dal blocco :root.
      Tutto passa dai token. Cambiare palette deve costare sei righe, non
      un rifacimento.
   ========================================================================== */


/* ==========================================================================
   1. FONT AUTOOSPITATI
   Nessuna connessione a Google: i file stanno in /font, sottoinsieme
   latin + latin-ext, formato variabile woff2.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../font/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../font/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../font/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../font/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. TOKEN — l'unico posto dove esistono i colori
   Valori campionati dai file di logo consegnati dal cliente il 02/09/2026.
   I rapporti di contrasto in nota sono calcolati, non stimati.
   ========================================================================== */

:root {
  /* --- colori --- */
  --carta:         #FAF7F2;  /* fondo pagina */
  --inchiostro:    #000000;  /* testo principale — 19,65:1 su carta */
  --grigio-testo:  #4A4A46;  /* testo secondario — 8,33:1 su carta */

  --sole:          #F04800;  /* colore del marchio. Testo sopra: SEMPRE NERO (5,63:1) */
  --sole-premuto:  #DC4200;  /* stato premuto/hover del pulsante arancione — nero 4,82:1 */
  /* Correzione rispetto alla direzione creativa: il #C43C00 del piano regge su
     carta (4,92:1) ma NON sulle sezioni alternate (--acqua-chiara: 4,44:1) né
     dentro i riquadri --sole-tenue (4,43:1), e lì ci finiscono link e segnaposto.
     Scurito di un soffio: ora 5,31 su carta, 4,79 su acqua-chiara, 4,78 su
     sole-tenue. Stessa famiglia, differenza invisibile a occhio. */
  --sole-profondo: #BB3900;  /* link e testo arancione su fondo chiaro */
  --sole-tenue:    #FFE7D8;  /* richiami, pop-up, pulsanti sulla fascia scura */

  --acqua:         #84CCCC;  /* SOLO decorativo — 1,71:1 su carta, non regge nulla */
  --acqua-fonda:   #6C9CB4;  /* fondo del marchio. Solo decorativo — 2,79:1 su carta */
  --acqua-chiara:  #DEEFF1;  /* fondo delle sezioni alternate */
  --petrolio:      #1B4B54;  /* fascia scura, footer, filetti — carta sopra 9,01:1 */
  --petrolio-premuto: #17434C;  /* hover della porta scura. Carta sopra: 10,11:1 */
  /* Sta al petrolio come --sole-premuto sta al sole: stessa famiglia, un gradino
     più cupo. La luminanza scende del 20% contro il 17,6% della coppia arancione:
     un filo di più, perché su un colore già scuro lo stesso salto si vedrebbe meno.
     Prima qui il hover andava a nero pieno, e il riquadro cambiava colore invece di
     scurirsi. Segnalato dal titolare il 07/09 guardando la pagina. */

  /* ombre: nere trasparenti, non colori — ma stanno qui lo stesso, così
     nel resto del foglio non compare nessun valore di colore in chiaro */
  --ombra:         rgba(0, 0, 0, .22);
  --ombra-tenue:   rgba(0, 0, 0, .12);

  /* --- ruoli derivati (nessun colore nuovo) --- */
  --fondo:         var(--carta);
  --testo:         var(--inchiostro);
  --filetto:       var(--petrolio);
  --fuoco:         var(--inchiostro);

  /* --- misure --- */
  --barra-h:       84px;   /* altezza barra fissa in alto, desktop */
  --pad-sez:       72px;   /* padding verticale delle sezioni */
  --gutter:        24px;
  --largh:         1160px;
  --raggio:        14px;
  --tocco:         44px;   /* area minima cliccabile */

  --titolo:  'Archivo', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --corpo:   'Source Sans 3', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 19px;          /* desktop — mai sotto 18px, il pubblico ha 60-75 anni */
  line-height: 1.65;
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  font-family: var(--titolo);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; }
h3 { font-size: clamp(20px, 2.2vw, 23px); font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--sole-profondo); }
a:hover { color: var(--inchiostro); }

.svg-nascosto { position: absolute; width: 0; height: 0; overflow: hidden; }

.contenitore {
  width: 100%;
  max-width: var(--largh);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contenitore-stretto { max-width: 820px; }

.sottotitolo {
  font-size: 1.06em;
  color: var(--grigio-testo);
  max-width: 62ch;
  margin-bottom: 2rem;
}
.testo-grande { font-size: 1.12em; }
.firma { font-weight: 600; color: var(--grigio-testo); }

/* --- segnaposto: deve saltare all'occhio finché non è sostituito --- */
.segnaposto {
  display: inline-block;
  font-family: var(--titolo);
  font-weight: 700;
  font-size: 15px;          /* mai sotto 15px, nemmeno i segnaposto */
  letter-spacing: .04em;
  color: var(--sole-profondo);
  background: var(--sole-tenue);
  border: 2px dashed var(--sole-profondo);
  border-radius: 6px;
  padding: 2px 8px;
}
.riquadro-segnaposto {
  border: 2px dashed var(--sole-profondo);
  background: var(--sole-tenue);
  border-radius: var(--raggio);
  padding: 24px;
  margin-bottom: 1.5rem;
}
.riquadro-segnaposto p:last-child { margin-bottom: 0; }
.fascia-scura .segnaposto { color: var(--petrolio); }

/* Segnaposto dentro una colonna stretta (es. la riga "Orari" dei contatti): deve
   andare a capo da solo invece di allargare la colonna e mandare a capo il dato
   vero che gli sta accanto. */
.segnaposto-riga {
  display: block;
  width: fit-content;
  margin-top: 6px;
}

/* Elenco dei comuni serviti. Va letto a colpo d'occhio da chi cerca il proprio
   paese, non riga per riga: colonne che si adattano, mai una lista lunghissima
   in colonna singola. Il pallino è arancione perché è decorazione — il testo
   resta inchiostro, come vuole la regola sull'acqua e sull'arancione. */
.comuni {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 28px;
}
.comuni li {
  position: relative;
  padding-left: 18px;
}
.comuni li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sole);
}


/* ==========================================================================
   4. ACCESSIBILITÀ: fuoco da tastiera e salto al contenuto
   ========================================================================== */

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--fuoco);
  outline-offset: 3px;
  border-radius: 4px;
}
.fascia-scura { --fuoco: var(--sole-tenue); }
.pie { --fuoco: var(--carta); }

.salta {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--sole);
  color: var(--inchiostro);
  font-family: var(--titolo);
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .15s;
}
.salta:focus { top: 0; }


/* ==========================================================================
   5. PULSANTI — area di tocco 44px, testo nero sull'arancione
   ========================================================================== */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tocco);
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-family: var(--titolo);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.bottone-grande { min-height: 58px; padding: 15px 30px; font-size: 19px; }

/* primario: arancione con scritta NERA. Mai bianca: 3,73:1, sotto soglia. */
.bottone-sole {
  background: var(--sole);
  color: var(--inchiostro);
  border-color: var(--inchiostro);
}
.bottone-sole:hover { background: var(--sole-premuto); color: var(--inchiostro); }

/* secondario su fondo chiaro */
.bottone-contorno {
  background: transparent;
  color: var(--inchiostro);
  border-color: var(--inchiostro);
}
.bottone-contorno:hover { background: var(--inchiostro); color: var(--carta); }

/* sulla fascia petrolio l'arancione sparisce (2,58:1): si usa sole-tenue */
.bottone-chiaro {
  background: var(--sole-tenue);
  color: var(--petrolio);
  border-color: var(--sole-tenue);
}
.bottone-chiaro:hover { background: var(--carta); color: var(--petrolio); }

.icona-tel { display: inline-flex; }


/* ==========================================================================
   6. BARRA FISSA IN ALTO
   Il marchio è largo poco più che alto: gli si dà altezza generosa, e la
   barra si dimensiona di conseguenza.
   ========================================================================== */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--barra-h);
  background: var(--carta);
  border-bottom: 1px solid var(--filetto);
}
.barra-interno {
  height: 100%;
  max-width: var(--largh);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
}
.marchio { display: flex; align-items: center; flex: 0 0 auto; }
.marchio img { height: 60px; width: auto; }

.menu { margin-left: auto; }
.menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.menu a {
  display: flex;
  align-items: center;
  min-height: var(--tocco);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--titolo);
  font-weight: 700;
  font-size: 17px;
  color: var(--inchiostro);
  text-decoration: none;
  border: 2px solid transparent;
}
.menu a:hover { background: var(--acqua-chiara); color: var(--inchiostro); }
/* "Lavora con noi" parla a un'altra persona: contorno, non pieno */
.menu a.menu-lavoro { border-color: var(--petrolio); color: var(--petrolio); }
.menu a.menu-lavoro:hover { background: var(--petrolio); color: var(--carta); }

.barra-telefono { flex: 0 0 auto; padding: 10px 18px; }
.burger { display: none; }


/* ==========================================================================
   7. SEZIONI, FILETTO D'ORIZZONTE E ARCO DI SOLE
   Il filetto attraversa la pagina; l'arco vi si appoggia sopra.
   ========================================================================== */

.sezione {
  padding: var(--pad-sez) 0;
  border-top: 1px solid var(--filetto);
}
.sezione-alternata { background: var(--acqua-chiara); }

.arco {
  display: block;
  width: 46px;
  height: 27px;
  /* tira l'arco su finché la sua base non poggia esattamente sul filetto */
  margin: calc(-1 * (var(--pad-sez) + 27px)) 0 30px;
}

/* Eccezione: la sezione che segue la fascia petrolio. Lì l'arco, appeso
   sopra il filetto, finirebbe sopra il fondo scuro — arancione su petrolio,
   2,58:1, proprio quello che la direzione creativa vieta. In quel solo caso
   l'arco scende sotto la linea e resta sulla carta. */
.fascia-scura + .sezione .arco {
  margin-top: 6px;
  margin-bottom: 22px;
}


/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  padding: calc(var(--barra-h) + 56px) 0 64px;
  background:
    linear-gradient(180deg, var(--acqua-chiara) 0%, var(--carta) 62%);
}
.hero-interno {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { max-width: 15ch; }
.occhiello {
  font-size: clamp(19px, 2.1vw, 22px);
  color: var(--grigio-testo);
  max-width: 40ch;
}
.hero-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 22px;
}
.hero-nota { font-size: 17px; color: var(--grigio-testo); }

/* L'indirizzo dell'ufficio: inchiostro invece di grigio e un corpo in più
   della nota, perché per un'attività locale conta quanto il telefono. */
.hero-indirizzo { font-size: 18px; color: var(--inchiostro); margin: 6px 0 0; }
.hero-indirizzo strong { font-weight: 600; }

/* 420px pesavano quanto il titolo (562px) e se lo contendevano: la pagina si
   apriva con l'adesivo invece che col messaggio. Un quarto in meno. */
.hero-marchio img { width: 100%; max-width: 320px; margin-left: auto; }


/* ==========================================================================
   9. LE DUE PORTE
   ========================================================================== */

.porte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.porta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 28px 26px;
  border: 2px solid var(--inchiostro);
  border-radius: var(--raggio);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.porta:hover { transform: translateY(-3px); box-shadow: 0 8px 0 -2px var(--inchiostro); }
.porta-etichetta {
  font-family: var(--titolo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.porta-titolo { font-family: var(--titolo); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; }
.porta-testo { font-size: 18px; }
.porta-freccia { font-size: 26px; line-height: 1; margin-top: 6px; }

/* la porta delle famiglie: arancione con testo nero (5,63:1) */
.porta-famiglie { background: var(--sole); color: var(--inchiostro); }
.porta-famiglie:hover { background: var(--sole-premuto); color: var(--inchiostro); }
/* la porta del lavoro: petrolio con testo carta (9,01:1) */
.porta-lavoro { background: var(--petrolio); color: var(--carta); border-color: var(--petrolio); --fuoco: var(--inchiostro); }
/* ⚠️ `color: var(--carta)` QUI DENTRO È OBBLIGATORIO, non una ripetizione.
   Non è ereditarietà, è una gara di specificità che si perde: in cima al foglio
   c'è `a:hover { color: var(--inchiostro) }`, che pesa (0,1,1) e batte
   `.porta-lavoro` che pesa (0,1,0). Togliendolo, al passaggio del mouse il testo
   diventa NERO su petrolio: 1,94:1, illeggibile. Provato e visto il 07/09.
   È la terza volta che questo foglio inciampa nella stessa cosa: vedi
   `.fascia-scura a:not(.bottone)` e `.fascia-scura .modulo a`.
   ⚠️ Le due porte devono poi scurirsi allo STESSO MODO: restano nel proprio
   colore e scendono di un gradino. Il nero pieno faceva sembrare che il riquadro
   scuro cambiasse identità mentre quello arancione si limitava ad accendersi. */
.porta-lavoro:hover { background: var(--petrolio-premuto); color: var(--carta); border-color: var(--petrolio-premuto); }


/* ==========================================================================
   10. CHI C'È DIETRO
   ========================================================================== */

.chi-griglia {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
}
/* Il ritratto di Cristiano, entrato il 09/09/2026 al posto del riquadro
   tratteggiato. Riempie la colonna da 320px e tiene lo stesso 4:5 che aveva il
   segnaposto, così la griglia non si sposta di un pixel.
   ⚠️ Niente angoli arrotondati, ed è voluto: la tessera di Silvia non ne ha. Il
   segnaposto ce li aveva perché era un riquadro di servizio, non una foto. */
.foto-ritratto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ⚠️ Regola ancora viva anche se in pagina non c'è più nessun riquadro foto:
   mancano le tre immagini dello schema servizi, perse il 03/09. Se arrivano e
   servisse un segnaposto, è già qui. */
.foto-segnaposto {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--sole-profondo);
  border-radius: var(--raggio);
  background: var(--sole-tenue);
  padding: 16px;
}

/* --- Sotto-blocco "In ufficio trovi Silvia" (§ 11.2 della direzione creativa,
       07/09/2026). Subordinato, non pari: stesse rotaie e stesso asse del testo,
       immagine cinque volte più piccola.
       ⚠️ Il corpo del testo resta 19px come sopra, e 18px su telefono. La
       gerarchia la portano la dimensione dell'immagine, il livello del titolo e
       la lunghezza del testo, mai la dimensione del corpo. --- */

/* Il filetto che separa i due sotto-blocchi. È largo quanto il contenitore e
   non quanto la finestra: è l'unica cosa che lo distingue dal bordo che apre una
   sezione (.sezione { border-top }), insieme al fatto che sopra non c'è l'arco.
   Se in browser il blocco sotto sembrasse comunque una sezione nuova, il rimedio
   previsto dalla direzione creativa è togliere la linea e tenere solo lo spazio
   bianco. */
.filetto-sotto {
  border: 0;
  border-top: 1px solid var(--filetto);
  margin: 44px 0 32px;
}

.chi-sotto-titolo { margin-bottom: 18px; }

/* La tessera di Silvia. Quadrata contro il ritratto 4:5 di Cristiano: formato
   diverso vuol dire oggetto diverso, non "stessa cosa in piccolo". Non riempie
   la colonna, resta ancorata in alto — è lì che si legge la gerarchia, mentre
   il testo accanto parte esattamente dallo stesso asse di quello di Cristiano. */
/* ⚠️ AGGIUNTO IL 09/09/2026, stessa sessione di collaudo della barra in basso.
   L'email `info@vitaserenacolfbadanti.com` è la stringa più lunga del sito e
   non ha spazi dentro. A 320px di schermo occupa 281px in una colonna di 284:
   passa per tre pixel. Col testo al 160% arriva a 368px e faceva scorrere
   TUTTA la pagina di lato.
   Il <wbr> nell'HTML dopo la chiocciola resta ed è il punto di rottura
   preferito — il browser prova sempre quello per primo, e infatti a
   dimensione normale l'email sta ancora su una riga sola, intatta.
   Questa regola è la rete sotto: quando nemmeno spezzando alla chiocciola ci
   sta, invece di sfondare va a capo dove capita.
   ⚠️ Da sola era stata SCARTATA il 07/09 perché spezzava l'email in
   `...badanti.c / om` anche quando non serviva. Funziona solo INSIEME al
   <wbr>, non al posto suo: se qualcuno toglie il <wbr> dall'HTML, quel
   difetto torna. */
.contatto-valore { overflow-wrap: anywhere; }

.foto-tessera {
  width: 160px;
  aspect-ratio: 1 / 1;
  padding: 0;
  /* object-fit serve perché qui adesso c'è una <img> e non più un riquadro vuoto:
     senza, un'immagine non perfettamente quadrata verrebbe schiacciata. La foto
     caricata è già 480x480, ma la regola protegge chi la sostituirà. */
  object-fit: cover;
}

/* ⚠️ Qui stava `.etichetta-segnaposto`, tolta il 07/09 quando è entrata la foto vera.
   Se un domani il riquadro segnaposto torna, la regola era `margin: 10px 0 0` e serviva
   a tenere l'etichetta SOTTO il quadrato: dentro 160px, tolti padding e bordo, restano
   ~124px utili, e a 132px su telefono non ci sta proprio. */


/* ==========================================================================
   11. SERVIZI
   ========================================================================== */

.schede {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.scheda {
  background: var(--carta);
  border: 1px solid var(--grigio-testo);
  border-radius: var(--raggio);
  padding: 26px 24px;
  border-top: 5px solid var(--sole);
}
.scheda h3 { margin-bottom: .35em; }
.scheda p { margin: 0; font-size: 18px; }


/* ==========================================================================
   12. COME FUNZIONA
   ========================================================================== */

.passi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: passo;
}
.passo { position: relative; padding-top: 8px; }
.passo-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border: 2px solid var(--inchiostro);
  border-radius: 50%;
  background: var(--sole);
  color: var(--inchiostro);
  font-family: var(--titolo);
  font-weight: 800;
  font-size: 24px;
}
.passo p { margin: 0; font-size: 18px; }


/* ==========================================================================
   13. FASCIA SCURA "LAVORA CON NOI"
   Qui dentro l'arancione non entra mai: 2,58:1 sul petrolio.
   ========================================================================== */

.fascia-scura {
  background: var(--petrolio);
  color: var(--carta);
  border-top-color: var(--petrolio);
}
.fascia-scura .sottotitolo { color: var(--acqua-chiara); }
/* :not(.bottone) è obbligatorio, non pignoleria: senza, questa regola vince
   per specificità su .bottone-chiaro e i pulsanti della fascia diventano
   testo sole-tenue su fondo sole-tenue, cioè invisibili. Visto in browser. */
.fascia-scura a:not(.bottone) { color: var(--sole-tenue); }
.fascia-scura a:not(.bottone):hover { color: var(--carta); }

.lavoro-griglia {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 32px;
  align-items: start;
}

.modulo {
  background: var(--carta);
  color: var(--inchiostro);
  border-radius: var(--raggio);
  padding: 30px 28px;
  --fuoco: var(--inchiostro);
}
/* Il modulo è un'isola chiara dentro la fascia scura: i suoi link tornano
   arancione scuro su carta (4,92:1). Il selettore deve pesare almeno quanto
   `.fascia-scura a:not(.bottone)`, altrimenti il link della privacy resta
   color sole-tenue su fondo carta e sparisce. Visto in browser. */
.fascia-scura .modulo a { color: var(--sole-profondo); }
.fascia-scura .modulo a:hover { color: var(--inchiostro); }
.modulo-titolo { margin-bottom: 1rem; }

.campo { margin-bottom: 20px; }
.campo > label,
.campo-gruppo legend {
  display: block;
  font-family: var(--titolo);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 6px;
  padding: 0;
}
.aiuto { font-size: 16px; color: var(--grigio-testo); margin: 0 0 8px; }

input[type="text"],
input[type="tel"],
select {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  font-family: var(--corpo);
  font-size: 19px;
  color: var(--inchiostro);
  background: var(--carta);
  border: 2px solid var(--grigio-testo);   /* mai acqua: 1,71:1 */
  border-radius: 8px;
}
input:hover, select:hover { border-color: var(--inchiostro); }
select { appearance: none; background-image: none; }

.campo-gruppo { border: 0; margin: 0 0 20px; padding: 0; }
.scelta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tocco);
  padding: 8px 0;
  font-size: 18px;
  cursor: pointer;
}
.scelta input[type="checkbox"] {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 2px 0 0;
  accent-color: var(--sole-profondo);
}
.scelta-consenso { align-items: flex-start; }

.errore {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--sole-profondo);
}
.campo-errato input,
.campo-errato select { border-color: var(--sole-profondo); }

.modulo-invia { width: 100%; margin-top: 6px; background: var(--sole); color: var(--inchiostro); border-color: var(--inchiostro); }
/* ⚠️ Anche qui `color` è obbligatorio, per la stessa ragione della porta scura.
   Il bottone porta anche la classe .bottone-chiaro, e
   `.bottone-chiaro:hover { color: var(--petrolio) }` pesa quanto questa regola:
   senza ripetere il colore, al passaggio del mouse il testo diventava petrolio
   sull'arancione premuto, 2,21:1. Provato col mouse sopra il 07/09, non dedotto.
   È il pulsante che manda la candidatura: se sparisce, sparisce il lavoro. */
.modulo-invia:hover { background: var(--sole-premuto); color: var(--inchiostro); }
.modulo-stato { margin: 14px 0 0; font-weight: 600; font-size: 18px; }
.modulo-stato:empty { margin: 0; }

/* Il modulo è alto 933px, questa colonna 412: senza appiccicarla restavano
   521px di fascia scura vuota, e chi si stufa a metà modulo non aveva più
   WhatsApp sotto gli occhi. Lo sticky funziona perché .lavoro-griglia ha
   align-items: start: l'area di griglia resta alta quanto il modulo, e la
   colonna ci scorre dentro. Se un domani si toglie quell'align-items, questo
   smette di funzionare in silenzio. */
.lavoro-lato {
  position: sticky;
  top: calc(var(--barra-h) + 24px);
}
.lavoro-lato h3 { color: var(--carta); }
.lavoro-lato .bottone { width: 100%; }
.filo-chiaro { border: 0; border-top: 1px solid var(--acqua); margin: 28px 0; }


/* ==========================================================================
   14. FAQ
   ========================================================================== */

/* 772px è esattamente la larghezza che le risposte avevano dentro
   .contenitore-stretto (820 meno i due gutter da 24). Cambia il posto, non
   la misura: si legge come prima, ma titolo e arco restano in riga. */
.faq { max-width: 772px; }

.faq details {
  border-bottom: 1px solid var(--filetto);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 4px;
  font-family: var(--titolo);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 20px);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--inchiostro);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; background: var(--sole); }
.faq summary:hover { color: var(--sole-profondo); }
.faq-corpo { padding: 0 4px 20px; }
.faq-corpo p:last-child { margin-bottom: 0; }


/* ==========================================================================
   15. CONTATTI
   ========================================================================== */

.contatti {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.contatto {
  border-top: 3px solid var(--sole);
  padding-top: 14px;
}
.contatto-etichetta {
  display: block;
  font-family: var(--titolo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grigio-testo);
  margin-bottom: 6px;
}
.contatto-valore {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  font-size: 20px;
  font-weight: 600;
  color: var(--inchiostro);
  text-decoration: none;
}
a.contatto-valore { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
a.contatto-valore:hover { color: var(--sole-profondo); }
.contatti-azioni { margin-top: 0; }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.pie {
  background: var(--petrolio);
  color: var(--carta);
  padding: 56px 0 0;
}
.pie a:not(.bottone) { color: var(--sole-tenue); }   /* stessa trappola della fascia scura */
.pie a:not(.bottone):hover { color: var(--carta); }
.pie-interno {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 36px;
  align-items: start;
}
.pie-marchio img { width: 190px; }
.pie-dati p { font-size: 18px; }
/* I dati fiscali sono un obbligo, non un messaggio: stanno sotto, più piccoli e in
   acqua-chiara invece che carta. Su petrolio l'acqua-chiara resta ben oltre soglia
   (il bianco carta è 9,01:1, questo poco sotto). ⚠️ Mai --sole qui: arancione su
   petrolio è 2,58:1, vietato dalla regola del cantiere.
   ⚠️ Il selettore è `.pie-dati .pie-fiscali` e non `.pie-fiscali` da solo: sopra c'è
   `.pie-dati p { font-size: 18px }`, che pesa di più e vinceva sul corpo del testo.
   Visto in browser: il colore passava, la dimensione no. */
.pie-dati .pie-fiscali {
  font-size: 15px;
  line-height: 1.5;
  color: var(--acqua-chiara);
}
.pie-link ul { list-style: none; margin: 0; padding: 0; }
.pie-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  font-weight: 600;
}
.pie-riga {
  margin: 40px 0 0;
  padding: 18px var(--gutter);
  border-top: 1px solid var(--acqua);
  text-align: center;
  font-size: 16px;
  max-width: none;
}


/* ==========================================================================
   17. BARRA FISSA IN BASSO (mobile) — il pezzo che porta le telefonate
   ========================================================================== */

.barra-basso {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--carta);
  border-top: 2px solid var(--inchiostro);
}
/* ⚠️ CORRETTO IL 09/09/2026, collaudando il sito con il testo ingrandito.
   Prima c'era `flex: 0 0 34%` sul pulsante WhatsApp: quello zero in mezzo è
   flex-shrink, e gli vietava di restringersi. Con il cursore "dimensione
   testo" di Chrome su Android al 130% — cosa normalissima per il pubblico di
   questo sito, che ha fra i 60 e i 75 anni — il pulsante sfondava di 31px e
   la scritta veniva tagliata.
   `min-width: 0` è la parte che conta davvero: senza, un elemento flex non
   scende MAI sotto la larghezza del proprio contenuto, e nessun flex-shrink
   riesce a stringerlo. È la trappola classica dei flexbox.
   Collaudato: al 100% non cambia niente, al 130% e al 160% la barra resta
   dentro lo schermo. */
.barra-basso .bottone { flex: 1 1 auto; min-height: 54px; min-width: 0; }
.barra-basso .bottone-contorno { flex: 0 1 34%; }


/* ==========================================================================
   18. POP-UP AVVISI
   Acceso/spento e contenuto: blocco AVVISO in cima a js/script.js
   ========================================================================== */

.avviso {
  position: fixed;
  z-index: 160;
  right: 24px;
  bottom: 24px;
  width: min(400px, calc(100vw - 48px));
  background: var(--sole-tenue);
  color: var(--inchiostro);
  border: 2px solid var(--sole);
  border-left-width: 8px;
  border-radius: var(--raggio);
  padding: 24px 24px 22px;
  box-shadow: 0 12px 34px var(--ombra);
}
.avviso-titolo { font-size: 22px; margin: 0 44px .4em 0; }
.avviso-testo { font-size: 18px; margin-bottom: 18px; }
.avviso-bottone { width: 100%; }
.avviso-chiudi {
  position: absolute;
  top: 10px;
  right: 10px;
  width: var(--tocco);
  height: var(--tocco);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--inchiostro);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
/* Solo dove il passaggio del mouse esiste davvero: su schermo touch il :hover
   resta "appiccicato" dopo un tocco e lascerebbe il bordo acceso per sempre. */
@media (hover: hover) {
  .avviso-chiudi:hover { border-color: var(--inchiostro); }
}


/* ==========================================================================
   18-bis. PAGINE LEGALI (privacy.html, cookie.html)
   Sono segnaposto: i testi li prepara l'agenzia, non sono ancora scritti.
   ========================================================================== */

.pagina-semplice { padding-top: calc(var(--barra-h) + 48px); border-top: 0; }
.pagina-semplice h2 { margin-top: 2rem; }
.pagina-semplice .indietro {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  font-family: var(--titolo);
  font-weight: 700;
}


/* ==========================================================================
   19. DISSOLVENZA LEGGERA ALLO SCORRIMENTO
   È l'unica animazione del sito. Si applica solo se il JS è attivo.
   ========================================================================== */

.js .rivela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .rivela.visibile { opacity: 1; transform: none; }


/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .schede { grid-template-columns: repeat(2, 1fr); }
  .passi { grid-template-columns: repeat(2, 1fr); }
  .lavoro-griglia { grid-template-columns: 1fr; }
  /* una colonna sola: l'area di griglia è alta quanto la colonna e lo sticky
     non avrebbe dove scorrere. Spento invece che lasciato a caso. */
  .lavoro-lato { position: static; }
  .chi-griglia { grid-template-columns: 260px 1fr; gap: 28px; }
  /* la tessera si stringe con la colonna. Qui il rapporto d'area fra le due
     immagini cala da 5,0:1 a 4,3:1: è la larghezza in cui la gerarchia è più
     debole. Se risultasse ambigua si scende a 130px e non si tocca altro. */
  .foto-tessera { width: 140px; }
  .pie-interno { grid-template-columns: 180px 1fr; }
  .pie-link { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --barra-h: 68px; --pad-sez: 54px; --gutter: 18px; }

  body { font-size: 18px; line-height: 1.6; }
  /* spazio per la barra fissa in basso: solo dove la barra c'è davvero
     (index.html), non sulle pagine legali */
  body.con-barra-basso { padding-bottom: 92px; }

  .marchio img { height: 46px; }

  /* menu a pannello: chiuso di default, aperto dal pulsante Menu */
  .menu {
    display: none;
    position: fixed;
    inset: var(--barra-h) 0 auto 0;
    margin: 0;
    background: var(--carta);
    border-bottom: 2px solid var(--inchiostro);
    box-shadow: 0 12px 24px var(--ombra-tenue);
    max-height: calc(100vh - var(--barra-h));
    overflow-y: auto;
  }
  .menu.aperto { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 18px; }
  .menu li { border-bottom: 1px solid var(--acqua-chiara); }
  .menu li:last-child { border-bottom: 0; }
  .menu a { min-height: 56px; font-size: 19px; border-radius: 0; }
  .menu a.menu-lavoro { margin-top: 12px; border-radius: 8px; justify-content: center; }

  .burger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    min-height: var(--tocco);
    padding: 8px 14px;
    background: transparent;
    color: var(--inchiostro);
    border: 2px solid var(--inchiostro);
    border-radius: 10px;
    font-family: var(--titolo);
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
  }
  .burger-righe { display: grid; gap: 4px; }
  .burger-righe span { display: block; width: 22px; height: 3px; background: currentColor; border-radius: 2px; }

  .barra-telefono { display: none; }   /* su mobile il telefono sta nella barra in basso */
  .barra-basso { display: flex; }

  .hero { padding: calc(var(--barra-h) + 36px) 0 44px; }
  .hero-interno { grid-template-columns: 1fr; gap: 30px; }
  .hero-marchio { order: -1; }
  .hero-marchio img { max-width: 260px; margin: 0; }
  .hero h1 { max-width: none; }

  .porte { grid-template-columns: 1fr; }
  .chi-griglia { grid-template-columns: 1fr; }
  .foto-segnaposto { max-width: 300px; aspect-ratio: 1 / 1; }
  /* ⚠️ AGGIUNTO L'11/09/2026 dalla checklist di pre-pubblicazione. Il 09/09 la foto
     vera di Cristiano è entrata con una classe nuova, .foto-ritratto, e la regola
     qui sopra — scritta per il riquadro vuoto — non la toccava più. Risultato: su
     tablet la foto usciva larga 716px da un file di 640, cioè ingrandita e
     sgranata, e riempiva lo schermo intero.
     Si torna a quello che dice il commento qui sotto, cioè alla direzione
     creativa: impilata, la foto diventa quadrata e larga al massimo 300px.
     `object-position` in alto perché il ritaglio quadrato deve togliere il
     torace e lasciare intatta la testa con la sua aria sopra. Centrato, le
     taglierebbe i capelli. */
  .foto-ritratto { max-width: 300px; aspect-ratio: 1 / 1; object-position: center top; }
  /* Impilato, anche la foto di Cristiano diventa quadrata e il confronto
     quadrato-contro-ritratto sparisce. Restano la dimensione, 300 contro 132,
     e la lunghezza del testo. Il sotto-titolo qui si appoggia al filetto e allo
     spazio bianco, non alla propria dimensione. */
  .foto-tessera { width: 132px; }
  .filetto-sotto { margin: 32px 0 24px; }
  .pie-interno { grid-template-columns: 1fr; gap: 24px; }

  /* Il pop-up sta sopra la barra in basso e resta un cartellino, non un pannello.
     Su telefono deve stare sotto un quinto dello schermo: più di così e la gente
     lo chiude per riuscire a leggere il sito — verificato sul campo il 03/09/2026.
     Il testo del messaggio (in js/script.js) va tenuto su due righe scarse: è
     quello che decide l'altezza. `max-height` è solo la rete di sicurezza per il
     giorno in cui qualcuno scriverà un messaggio lungo. */
  .avviso {
    right: 12px;
    left: 12px;
    bottom: calc(92px + 12px);
    width: auto;
    padding: 15px 15px 12px;
    max-height: 30vh;
    overflow-y: auto;
  }

  .avviso-titolo { font-size: 19px; margin: 0 44px .25em 0; }
  .avviso-testo  { line-height: 1.4; margin-bottom: 11px; }
  .avviso-chiudi { top: 4px; right: 4px; }
  /* più compatto, ma mai sotto i 44px di area toccabile */
  .avviso .avviso-bottone { padding-top: 9px; padding-bottom: 9px; min-height: var(--tocco); }
}

@media (max-width: 560px) {
  .schede { grid-template-columns: 1fr; }
  .passi { grid-template-columns: 1fr; }
  .hero-azioni .bottone { width: 100%; }
  .contatti-azioni .bottone { width: 100%; }
}


/* ==========================================================================
   21. PREFERENZE DELL'UTENTE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .rivela { opacity: 1; transform: none; }
  .porta:hover { transform: none; }
}

@media print {
  .barra, .barra-basso, .avviso, .avviso-sfondo, .salta { display: none !important; }
  body { padding-bottom: 0; font-size: 12pt; }
}