/* ==========================================================================
   ottica.ablavoro.com — SECTIONS.CSS · FILE GENERATO, NON MODIFICARLO A MANO

   E' la concatenazione, nell'ordine della pagina, dei file sorgente che stanno
   in css/parts/. Ogni modifica va fatta LI' e poi riportata qui rigenerando il
   file: una correzione scritta direttamente in questo file andrebbe persa alla
   prima rigenerazione, e soprattutto il tema WordPress nascera' dai sorgenti,
   non da questo concatenato.

   Ordine (lo stesso in cui le sezioni compaiono in index.html):
     01-nav · 02-hero · 03-intro · 04-opportunita · 05-lorem · 06-progettiamo
     07-lavoro-giusto · 08-cta-scura · 09-newsletter · 10-carriera
     11-accordion · 12-chi-siamo · 13-recensioni · 14-contatto-footer
     99-assemblaggio  ← non e' una sezione: e' cio' che js/main.js mette in
                       pagina (errori dei form, avviso demo, ancoraggi sotto
                       la barra fissa). Va per ultimo di proposito.

   L'ordine conta: piu' file dichiarano regole a pari specificita' e l'ultimo
   vince. Va caricato DOPO css/tokens.css e css/base.css.
   ========================================================================== */


/* ==========================================================================
   01 — Barra di navigazione
   Dipende da tokens.css e base.css (caricati prima).
   Geometria Figma (frame 1440): barra 1440x100 bianca, logo 211x60 a x=60,
   pulsante 256x52 con il bordo destro a x=1380 (60px dal margine).
   ========================================================================== */

.s01-barra {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  background: var(--bianco);
  box-shadow: var(--ombra-barra);
  /* Misurato sul render: solo i due angoli inferiori sono stondati, raggio 8px.
     Non e' --raggio-campo: e' un valore proprio della barra, ci sta scritto
     perche' il raggio non e' un colore (regola R1 riguarda i colori). */
  border-radius: 0 0 8px 8px;
}

/* La barra e' ancorata ai bordi (logo a 60px dal bordo sinistro, non alla
   colonna da 1080 delle altre sezioni). Oltre i 1440 il contenuto si ferma e
   resta centrato, altrimenti su schermi larghi logo e pulsante scapperebbero
   agli angoli mentre il resto della pagina resta in colonna. */
.s01-barra__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 100px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 60px;
}

.s01-barra__logo {
  display: flex;
  flex: 0 0 auto;
}

/* Larghezza dal Figma (211px). L'altezza resta automatica: il rapporto vero del
   file (640x183) da' 60,3px contro i 60 del Figma, cioe' 3 decimi di pixel, e
   cosi' il logo non viene stirato. */
.s01-barra__logo img {
  width: 211px;
  height: auto;
}

/* Il pulsante e' il .btn condiviso: qui si dichiara solo che non si comprime. */
.s01-barra__cta {
  flex: 0 1 auto;
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 1100px
   La barra si abbassa a 80px e i margini laterali scendono da 60 a 32.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s01-barra__interno {
    min-height: 80px;
    padding-inline: var(--sp-7);
  }

  .s01-barra__logo img { width: 178px; }
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 700px
   Barra a 64px, margini uguali a quelli del resto della pagina (--gutter),
   logo a 124px e CTA rimpicciolita: l'etichetta e' lunga (23 caratteri) e a
   18px w800 da sola supererebbe la larghezza di un telefono.
   L'etichetta puo' andare a capo: sotto i ~330px di viewport la CTA occupa due
   righe e la barra si alza, invece di sfondare lateralmente.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s01-barra__interno {
    min-height: 64px;
    gap: var(--sp-3);
    padding-inline: var(--gutter);
  }

  .s01-barra__logo img { width: 124px; }

  .s01-barra__cta {
    min-height: 44px;
    padding-inline: var(--sp-4);
    font-size: var(--fs-14);
    line-height: var(--lh-14-corto);
  }
}


/* ==========================================================================
   02 — Hero: banda fotografica + card bianca del form CV
   Dipende da tokens.css e base.css (caricati prima).

   Misure Figma (frame 1440), riportate all'origine della sezione (y=100,
   cioe' il bordo inferiore della barra):
     banda ......... 1440x638   (nel Figma y 100→738)
     h1 ............ y 155, 507x171  (3 righe da 57)
     sottotitolo ... y 346, 394x80   (2 righe da 40), 20px sotto l'h1
     card .......... x 552 (dentro .wrap), 528x658, parte a y 0 e sporge di
                     20px sotto la banda
   ========================================================================== */

.s02-hero {
  position: relative;
  /* La card sporge sotto la banda: la sezione va sollevata di un piano,
     altrimenti la sezione successiva (piu' avanti nel DOM) le passa sopra. */
  z-index: var(--z-contenuto);
  isolation: isolate;
  min-height: 638px;
}

/* --------------------------------------------------------------------------
   1. SCENA — fotografia + velo blu
   -------------------------------------------------------------------------- */
.s02-hero__scena {
  position: absolute;
  inset: 0;
  z-index: var(--z-sfondo);
  overflow: hidden;
}

/* LA FOTO DEL FIGMA E' SPECCHIATA. Non e' un'ipotesi: nel render la filigrana
   «Unsplash+» si legge rovesciata, e la ricerca del ritaglio sul file originale
   fallisce (correlazione 0,80) mentre sul file specchiato combacia (0,999).
   Della foto specchiata il Figma mostra la porzione x[38,2066] y[26,924] delle
   2200x1467 disponibili: su una scatola 1440x638 e' un cover ingrandito
   dell'8,48%, agganciato quasi in alto.
   Il ribaltamento e lo zoom stanno in una sola trasformazione: l'origine al
   51,14% e' il punto che, ribaltando e ingrandendo insieme, riporta il ritaglio
   dove lo mette il Figma (tutti i valori sono relativi, quindi il ritaglio non
   cambia al variare della larghezza). */
.s02-hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 5.26%;
  transform: scaleX(-1) scale(1.0848);
  transform-origin: 51.14% 0;
}

/* DEVIAZIONE DICHIARATA DAL FIGMA, ed e' l'unica della sezione.
   Il Figma dichiara il velo #244861 al 45%. A quel valore il testo bianco
   scende sotto la soglia dei testi grandi (3:1) dove la fotografia e' chiara,
   e non solo su mobile: misurando la luminanza del fondo REALE sotto i glifi
   (cattura col testo meno cattura senza testo, per isolare la maschera dei
   glifi) il 45% da' il 19% dei pixel dell'h1 sotto 3:1 a 1440 (minimo 2,49) e
   il 24% a 1200; fra 701 e 1100, dove l'impianto si impila e il cover porta
   sotto il testo la finestra bianca della foto, il testo e' fuori norma
   quasi per intero (h1 mediana 2,74 · sottotitolo mediana 2,60 · fino al 100%
   dei pixel sotto soglia).
   Il valore e' stato scelto per misura e non a occhio, provando 0,45 · 0,50 ·
   0,52 · 0,55 · 0,58 · 0,62 a 1440, 1200, 1101, 1000, 900, 800, 760 e 701:
   0,52 lascia ancora il 4,8% dei pixel sotto soglia a 1440, 0,55 e' il PRIMO
   valore che porta a zero i pixel fuori norma su tutta la scala (peggiore
   5% fra 3,15 e 3,44 · minimo 3,09). E' anche il piu' vicino al Figma fra
   quelli che passano, quindi la deviazione e' la minima possibile.
   Un solo numero per tutte le larghezze: prima ne servivano due, perche' il
   .58 stava chiuso dentro @media (max-width: 700px) e la fascia 701-1100
   restava scoperta. */
.s02-hero__velo {
  position: absolute;
  inset: 0;
  background: var(--blu);
  opacity: .55;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. IMPIANTO — testo a sinistra, card incollata a destra
   -------------------------------------------------------------------------- */
.s02-hero__griglia {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 528px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   3. TESTO SULLA FOTOGRAFIA
   -------------------------------------------------------------------------- */
.s02-hero__testo {
  padding-top: 155px; /* Figma: h1 a y=255, banda visibile che parte a y=100 */
  padding-right: var(--sp-6);
}

/* Larghezza del box Figma. Gli a capo veri li impongono i <br> nel markup: la
   sola max-width non basta perche' dipende dalle metriche del carattere. */
.s02-hero__titolo {
  max-width: 507px;
  color: var(--bianco);
  font-size: var(--fs-hero);
  font-weight: var(--w-forte);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}

.s02-hero__sottotitolo {
  max-width: 394px; /* box Figma; l'a capo vero lo impone il <br> nel markup */
  margin-top: var(--sp-5);
  color: var(--bianco);
  font-size: var(--fs-hero-sub);
  font-weight: var(--w-normale);
  line-height: var(--lh-hero-sub);
}

/* --------------------------------------------------------------------------
   4. CARD DEL FORM
   Altezza 658 = 60 (padding) + 72 intro + 28 + 240 campi + 16 + 18 consenso
   + 40 + 52 pulsante + 40 + 1 filetto + 11 + 48 mailing + 32 (padding).
   -------------------------------------------------------------------------- */
.s02-hero__card {
  /* La card e' alta 658 ma la banda 638: sporge sotto, senza far crescere la
     sezione (il margine negativo toglie la sporgenza dal calcolo della riga). */
  margin-bottom: -20px;
  padding: 60px 40px 32px;
  /* Misurato sul render: e' stondato SOLO l'angolo basso-destro, raggio 34px.
     Vedi la nota nel frammento HTML: probabile svista del Figma, riprodotta. */
  border-radius: 0 0 34px 0;
  background: var(--bianco);
  box-shadow: var(--ombra-card);
}

.s02-hero__intro {
  color: var(--nero);
  font-size: var(--fs-18);
  font-weight: var(--w-forte);
  line-height: var(--lh-18-titolo); /* 24/18 */
}

.s02-hero__campi {
  display: grid;
  gap: var(--sp-6); /* 24px fra un gruppo campo e l'altro */
  margin-top: 28px;
}

/* Nome* e Cognome*: 218 + 12 + 218 = 448 */
.s02-hero__coppia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
}

/* Campo file: l'input vero e' trasparente e copre la scatola, quindi il clic
   e il focus da tastiera arrivano a un controllo reale. */
.s02-hero__file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px; /* misurato: icona fino a x=816, testo da x=826 */
}

.s02-hero__file-icona {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--blu);
}

.s02-hero__file-nome {
  overflow: hidden;
  color: var(--testo-placeholder);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quando il JS scrive il nome del file scelto, il testo smette di essere un
   segnaposto e passa al colore dei valori. */
.s02-hero__file.e-scelto .s02-hero__file-nome { color: var(--nero); }

.s02-hero__file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* L'anello di focus non puo' stare sull'input (e' trasparente: lo sarebbe
   anche il suo contorno), quindi lo disegna la scatola. */
.s02-hero__file:has(.s02-hero__file-input:focus-visible) {
  border-color: var(--blu);
  outline: 3px solid var(--focus-colore);
  outline-offset: 1px;
}

.s02-hero__consenso { margin-top: var(--sp-4); }

.s02-hero__azioni {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-8);
}

/* Il frame del Figma dichiara un bordo su tutti i lati, ma sul render si vede
   solo il filetto superiore. */
.s02-hero__mailing {
  margin-top: var(--sp-8);
  padding-top: 11px;
  border-top: 1px solid var(--bordo-tenue);
  color: var(--nero);
  font-size: var(--fs-16);
  font-weight: var(--w-normale);
  line-height: var(--lh-16);
}

.s02-hero__mailing-link { color: var(--blu); }

/* --------------------------------------------------------------------------
   5. ADATTAMENTO — 1100px
   Sotto i 1100 le due colonne non ci stanno piu' (servono 507 + 528 + aria):
   testo e card si impilano, restano larghi 528 e allineati fra loro, e la
   fotografia passa a fare da fondo a tutta la sezione.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s02-hero {
    min-height: 0;
    padding-block: var(--pad-banda);
  }

  .s02-hero__griglia {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-9);
  }

  .s02-hero__testo,
  .s02-hero__card {
    width: 100%;
    max-width: 528px;
    margin-inline: auto;
  }

  .s02-hero__testo {
    padding-top: 0;
    padding-right: 0;
  }

  .s02-hero__card { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   6. ADATTAMENTO — 700px
   · la card respira meno ai lati (40 → 20) per lasciare larghezza ai campi;
   · Nome e Cognome si impilano: affiancati resterebbero 109px di testo utile;
   · il pulsante diventa a tutta larghezza senza toccare .btn: basta che il
     contenitore passi da flex a grid e l'unico figlio si stira;
   · la fotografia perde lo zoom (con la sezione alta e stretta il ritaglio
     stringerebbe troppo) e resta un cover spostato sul viso.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Sotto i 700 il titolo torna ad andare a capo da solo: gli a capo del Figma
     sono tarati su una colonna da 507px. */
  .s02-hero__acapo { display: none; }

  /* Il ritaglio del Figma e' tarato su una scatola larga e bassa: con la
     sezione alta e stretta lo zoom stringerebbe troppo. Resta il ribaltamento
     (e' la foto come l'ha impaginata il designer) e un cover centrato sul viso. */
  .s02-hero__foto {
    /* 66% = la colonna in cui sta il viso nella foto non specchiata: con la
       sezione stretta si vede solo una fetta verticale, e deve essere quella. */
    object-position: 66% 50%;
    transform: scaleX(-1);
    transform-origin: 50% 0;
  }

  /* Il velo NON si ritocca piu' qui: e' 0,55 per tutte le larghezze (vedi la
     nota sopra .s02-hero__velo). Con il ritaglio mobile e quel velo il testo
     bianco sta a 3,43 di mediana e 3,21 di minimo (misurato a 700, 500 e 390),
     cioe' sopra soglia senza bisogno di scurire ancora. */

  .s02-hero__card { padding: 32px var(--sp-5) 24px; }

  .s02-hero__coppia { grid-template-columns: minmax(0, 1fr); }

  /* grid + una sola colonna piena: l'unico figlio si stira senza che il
     pulsante condiviso venga ridichiarato. */
  .s02-hero__azioni {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   03 — Intro «Trova lavoro o fai carriera…»
   Misure dalla scheda geometria (frame 1440) e verificate a scala 1 sul render
   materiali/figma-ref/03-intro.png.

   Riferimenti verticali assoluti del Figma:
     banda            738 → 1500   (la hero chiude a 737: misurato sul render)
       titolo         876 →  972   (2 righe da 48)
       filetto       1002 → 1003   (2px pieni, misurati: la scheda dice 1px)
       elenco        1044 → 1204   (5 righe da 32)
       prosa         1224 → 1420   (3 + 4 righe da 28, senza stacco fra i due)

   Orizzontali: tutto dentro .wrap--stretto (896, x 272→1168).
     testo e titolo a x=272 · punto elenco a x=283 (+11) · riga a x=300 (+28)

   NOTA DI CONFINE: il padding alto (138px) presuppone che la hero chiuda a
   737, come nel render. Se la 02 dovesse chiudere altrove, e' questo numero
   a doversi muovere, non il resto della sezione.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANDA
   Respiro asimmetrico: 138 sopra (738→876) e 80 sotto, cosi' la 04 puo'
   aprire a 1583 con i suoi 83px di respiro (80 + 83 = i 163px del Figma).
   -------------------------------------------------------------------------- */
.s03-intro {
  padding-block: 138px 80px;
}

/* --------------------------------------------------------------------------
   2. TITOLO
   Qui il filetto e' staccato di 30px e non dei 18 standard: il frame che
   chiude il blocco e' alto 128 (96 di testo + 30 di respiro + 2 di riga).
   `text-wrap: wrap` neutralizza il `balance` di .titolo-sezione: il Figma
   riempie la prima riga fino a «settore in» e riequilibrare le due righe
   sposterebbe il punto di a capo rispetto all'oracolo.
   -------------------------------------------------------------------------- */
.s03-titolo {
  --filetto-gap: 30px;
  text-wrap: wrap;
}

/* --------------------------------------------------------------------------
   3. ELENCO DELLE DOMANDE
   18/32 (--lh-18-largo), stesso grigio della prosa. Il punto elenco e' un
   disco di 5px disegnato con ::before invece che con ::marker: serve poterlo
   mettere a 11px esatti dal bordo della colonna, e ::marker non si posiziona.

   I selettori sono doppi (.s03-intro .s03-domande) per una ragione precisa:
   il reset di base.css azzera i margini con `ul[class]`, che pesa piu' di una
   classe sola. Con `.s03-domande` da solo il margine alto sparisce in
   silenzio e tutta la pagina sotto sale di 40px — successo davvero, trovato
   confrontando il render con l'oracolo.
   -------------------------------------------------------------------------- */
.s03-intro .s03-domande {
  margin-top: 40px; /* filetto chiude a 1004, elenco apre a 1044 */
  color: var(--ink-corpo);
  font-size: var(--fs-18);
  font-weight: var(--w-normale);
  line-height: var(--lh-18-largo);
}

.s03-intro .s03-domande > li {
  position: relative;
  padding-left: 28px;
}

.s03-intro .s03-domande > li::before {
  content: "";
  position: absolute;
  /* centrato nella prima riga: (32 - 5) / 2 = 13,5 dal bordo alto della riga */
  top: calc((var(--lh-18-largo) * 1em - 5px) / 2);
  left: 11px;
  width: 5px;
  height: 5px;
  border-radius: var(--raggio-tondo);
  background: currentColor;
}

.s03-intro .s03-domande strong {
  font-weight: var(--w-forte);
}

/* --------------------------------------------------------------------------
   4. PROSA
   -------------------------------------------------------------------------- */
.s03-prosa {
  margin-top: 20px; /* elenco chiude a 1204, prosa apre a 1224 */
}

/* --------------------------------------------------------------------------
   5. ADATTAMENTO — 1100px
   base.css porta --filetto-gap a 16px su :root, ma qui il valore vive
   sull'elemento e vincerebbe comunque: va riscalato a mano.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s03-intro {
    padding-block: 96px 64px;
  }

  .s03-titolo {
    --filetto-gap: 26px;
  }

  .s03-intro .s03-domande {
    margin-top: 32px;
  }
}

/* --------------------------------------------------------------------------
   6. ADATTAMENTO — 700px
   Nel Figma ogni domanda sta su una riga sola e sono i 32px di interlinea a
   separarle. Su telefono le righe vanno a capo e quell'interlinea non basta
   piu' a far vedere dove finisce una domanda: si stringe l'interlinea a 26 e
   si mette lo stacco fra gli elementi (26 + 12 ≈ i 38 di ritmo del Figma).
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s03-intro {
    padding-block: 64px 48px;
  }

  .s03-titolo {
    --filetto-gap: 20px;
  }

  .s03-intro .s03-domande {
    margin-top: 28px;
    line-height: var(--lh-18-corto);
  }

  .s03-intro .s03-domande > li::before {
    top: calc((var(--lh-18-corto) * 1em - 5px) / 2);
  }

  .s03-intro .s03-domande > li + li {
    margin-top: var(--sp-3);
  }

  .s03-prosa {
    margin-top: 24px;
  }
}


/* ==========================================================================
   04 — «Le opportunità di lavoro per i professionisti della visione»
   Misure dalla scheda geometria (frame 1440) e verificate a scala 1 sul render
   materiali/figma-ref/04-opportunita.png.

   Riferimenti verticali assoluti del Figma:
     banda            1500 → 2090
       colonna dx     1583 → 2029  (e' la piu' alta: detta l'altezza della riga)
         titolo       1583 → 1659  (2 righe da 38)
         filetto      1677 → 1678  (2px pieni, misurati sul render)
         prosa        1721 → 2029  (11 righe da 28: 7 + 4, senza stacco)
       colonna sx     1619 → 2029
         immagine     1619 → 2003  (412x384)
         rettangolo   1771 → 2029  (334x258, sfalsato +102 a destra, +152 giu')

   Orizzontali dentro .wrap (1080): immagine x 181→593 (412), corridoio 138,
   testo x 730→1260 (530). 412 + 138 + 530 = 1080 esatti.
   Il rettangolo blu chiude a x=617, quindi resta dentro il corridoio.

   Raggi misurati sul render (la scheda non li riporta, in Figma sono
   per-angolo e l'estrattore li salta): immagine 3px sui tre angoli e 32px
   in basso a destra; rettangolo 4px sui tre angoli e 44px in basso a destra.
   Nessuna ombra: il bianco attorno alla foto e' bianco pieno, verificato.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANDA
   80 (coda della 03) + 83 = i 163px fra 1420 e 1583. Sotto, 61 + 78 (testa
   della 05) = i 139px fra 2029 e 2168.
   -------------------------------------------------------------------------- */
.s04-opportunita {
  padding-block: 83px 61px;
}

/* --------------------------------------------------------------------------
   2. GRIGLIA
   Colonne in percentuale e non in pixel: fra 1101 e 1128 il contenitore si
   stringe sotto i 1080 e tracce fisse sfonderebbero.
     412/1080 = 38,1481%   138/1080 = 12,7778%   530/1080 = 49,0741%
   `align-items: start` e non `end`: la figura e' alta 384 (solo l'immagine,
   il rettangolo sconfina in assoluto) e va agganciata alla sua quota, 36px
   sotto la partenza del testo.
   -------------------------------------------------------------------------- */
.s04-griglia {
  display: grid;
  grid-template-columns: 38.1481% 49.0741%;
  column-gap: 12.7778%;
  align-items: start;
}

/* --------------------------------------------------------------------------
   3. FIGURA
   Il box e' l'immagine (412x384). Il rettangolo blu e' un figlio assoluto in
   percentuale del box, cosi' sconfina di 24px a destra e 26px in basso
   restando agganciato alla foto anche quando la colonna si stringe:
     sinistra 102/412 = 24,7573%   alto  152/384 = 39,5833%
     larghezza 334/412 = 81,0680%  altezza 258/384 = 67,1875%
   Sta prima della foto nel markup: due elementi posizionati senza z-index si
   dipingono nell'ordine del DOM, quindi la foto resta sopra da sola.
   -------------------------------------------------------------------------- */
.s04-figura {
  position: relative;
  width: 100%;
  margin-top: 36px; /* il testo apre a 1583, l'immagine a 1619 */
  aspect-ratio: 412 / 384;
}

.s04-figura__fondo {
  position: absolute;
  top: 39.5833%;
  left: 24.7573%;
  width: 81.0680%;
  height: 67.1875%;
  border-radius: 4px 4px 44px 4px;
  background: var(--blu);
}

/* height: 100% batte l'`height: auto` del reset (classe contro elemento).
   object-position 84,15%: la foto sorgente e' 824x549, in un box 412x384
   `cover` la porta a 576x384 e il render mostra la finestra che comincia a
   138px dei 164 di eccedenza — misurato per correlazione, non a occhio. */
.s04-figura__foto {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3px 3px 32px 3px;
  object-fit: cover;
  object-position: 84.15% center;
}

/* --------------------------------------------------------------------------
   4. TESTO
   `text-wrap: wrap` neutralizza il `balance` di .titolo-sezione: il Figma va
   a capo dopo «per i» e riequilibrare le righe cambierebbe l'oracolo.
   -------------------------------------------------------------------------- */
.s04-titolo {
  text-wrap: wrap;
}

.s04-prosa {
  margin-top: 42px; /* filetto chiude a 1679, prosa apre a 1721 */
}

/* --------------------------------------------------------------------------
   5. ADATTAMENTO — 1100px
   Le due colonne restano affiancate: a 1100 il testo vale ancora ~516px.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s04-opportunita {
    padding-block: 64px 56px;
  }

  .s04-figura {
    margin-top: 24px;
  }

  .s04-prosa {
    margin-top: 32px;
  }
}

/* --------------------------------------------------------------------------
   6. ADATTAMENTO — 700px
   Si impila: prima la figura, poi il testo, come si legge da sinistra a
   destra nel Figma. La figura scende a 94,495% della colonna perche' il
   rettangolo blu sconfina del 5,8% della sua larghezza: cosi' il bordo blu
   arriva esattamente a filo del contenitore e non produce scorrimento
   laterale. Il margine sotto lascia posto ai 26px di sconfinamento verticale.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s04-opportunita {
    padding-block: 48px 48px;
  }

  .s04-griglia {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .s04-figura {
    width: 94.495%;
    margin-top: 0;
    /* i 26px di sconfinamento verticale valgono il 6,7188% dell'ALTEZZA della
       figura; un margine in percentuale si misura invece sulla larghezza del
       contenitore, quindi il valore equivalente e' 5,92% (0,94495 x 384/412
       x 0,067188). Arrotondato a 6%, piu' i 40px di stacco dal testo. */
    margin-bottom: calc(6% + var(--sp-8));
  }

  .s04-prosa {
    margin-top: 24px;
  }
}


/* ==========================================================================
   05 — Blocco speculare alla 04 (titolo ancora Lorem ipsum)
   Misure dalla scheda geometria (frame 1440) e verificate a scala 1 sul render
   materiali/figma-ref/05-lorem.png.

   Riferimenti verticali assoluti del Figma:
     banda            2090 → 2689
       freccia        2090 → 2214  (tratto dipinto: bbox misurato sul render)
       colonna sx     2168 → 2614
         titolo       2168 → 2244  (2 righe da 38)
         filetto      2262 → 2263  (2px pieni, misurati sul render)
         prosa        2306 → 2614  (11 righe da 28)
       colonna dx     2305 → 2689
         immagine     2305 → 2689  (413x384) — chiude dove apre la banda 06
         rettangolo   2458 → 2716  (334x258): sconfina 27px SOTTO la sezione

   Orizzontali dentro .wrap (1080): testo x 178→708 (530), corridoio 112,
   immagine x 822→1235 (413). Il rettangolo blu chiude a x=1259, cioe' quasi a
   filo dei 1080 della colonna: la griglia lascia apposta il 2,3% a destra.

   La colonna di sinistra nel Figma parte a x=178 e non a 180 come .wrap: due
   pixel di sciatteria del file, gia' messi in conto dal CONTRATTO. Qui vince
   il contenitore condiviso.

   Raggi misurati sul render (la scheda non li riporta): immagine 3px sui tre
   angoli e 32px in basso a destra; rettangolo 4px e 44px. Nessuna ombra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANDA
   Coda a zero: la sezione chiude esattamente dove chiude l'immagine (2689),
   che e' dove la 06 fa partire la sua banda chiara (2688). Vale finche' la
   colonna della figura resta la piu' alta, cioe' sopra i 1128px: sotto, il
   respiro basso torna (vedi §6).
   z-index dichiarato per una ragione sola: il rettangolo blu esce 27px sotto
   e la banda chiara della 06, essendo dopo nel documento, lo coprirebbe.
   -------------------------------------------------------------------------- */
.s05-lorem {
  z-index: var(--z-contenuto);
  padding-block: 78px 0;
}

/* --------------------------------------------------------------------------
   2. FRECCIA DECORATIVA (Vector 4)
   Tracciata sul render: nel Figma il nodo dichiara un box 160x162 a x=720
   y=2069, ma il tratto dipinto sta in 136x125 a partire da x=728 y=2090.
   Il viewBox e' allargato di 3px per lato per non tagliare il tratto (3,16px
   con estremita' tonde). Il colore arriva da `color` via currentColor: cosi'
   resta dentro i token e non c'e' un hex dentro l'SVG.
   La posizione e' ancorata alla mezzeria e non a una percentuale: il blocco
   contenitore di un elemento assoluto e' il box di PADDING di .wrap (1128 con
   le grondaie), non i 1080 di contenuto, quindi una percentuale letta sul
   contenuto cadrebbe fuori posto. Il centro di .wrap coincide col centro del
   viewport, e sul frame 1440 il tratto comincia a x=728: 728 - 3 - 720 = 5.
   In verticale: 78px di respiro della banda piu' i 3px di margine del viewBox.
   -------------------------------------------------------------------------- */
.s05-wrap {
  position: relative;
}

.s05-freccia {
  position: absolute;
  top: -81px;
  left: calc(50% + 5px);
  width: 142px;
  height: 131px;
  color: var(--azzurro-tratto);
}

/* --------------------------------------------------------------------------
   3. GRIGLIA
   530/1080 = 49,0741%   112/1080 = 10,3704%   413/1080 = 38,2407%
   Somma 97,6852%: il resto e' il gioco in cui sconfina il rettangolo blu.
   -------------------------------------------------------------------------- */
.s05-griglia {
  display: grid;
  grid-template-columns: 49.0741% 38.2407%;
  column-gap: 10.3704%;
  align-items: start;
}

/* --------------------------------------------------------------------------
   4. TESTO
   `text-wrap: wrap` neutralizza il `balance` di .titolo-sezione, che
   sposterebbe il punto di a capo rispetto all'oracolo.
   -------------------------------------------------------------------------- */
.s05-titolo {
  text-wrap: wrap;
}

.s05-prosa {
  margin-top: 42px; /* filetto chiude a 2264, prosa apre a 2306 */
}

/* --------------------------------------------------------------------------
   5. FIGURA
   Stessa costruzione della 04, con i rapporti di questo blocco:
     sinistra 103/413 = 24,9394%   alto  153/384 = 39,8438%
     larghezza 334/413 = 80,8717%  altezza 258/384 = 67,1875%
   -------------------------------------------------------------------------- */
.s05-figura {
  position: relative;
  width: 100%;
  margin-top: 137px; /* il testo apre a 2168, l'immagine a 2305 */
  aspect-ratio: 413 / 384;
}

.s05-figura__fondo {
  position: absolute;
  top: 39.8438%;
  left: 24.9394%;
  width: 80.8717%;
  height: 67.1875%;
  border-radius: 4px 4px 44px 4px;
  background: var(--blu);
}

/* Qui la finestra di `cover` e' centrata: verificato per correlazione
   sull'825x550 di partenza (eccedenza 163px, offset 81 = esattamente meta'). */
.s05-figura__foto {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3px 3px 32px 3px;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   6. ADATTAMENTO — 1100px
   La freccia sparisce: sotto questa soglia il corridoio fra le due colonne si
   stringe e il tratto finirebbe addosso all'immagine. E' decorativa, la
   pagina non perde nulla.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s05-freccia {
    display: none;
  }

  /* La coda torna a zero solo sopra i 1128px, dove il contenitore vale i suoi
     1080 e la colonna della figura e' la piu' alta: e' li' che l'immagine
     chiude a filo della banda chiara della 06, come nell'oracolo. Sotto,
     comanda la colonna di testo e senza respiro il paragrafo finirebbe
     incollato al bordo della banda successiva. */
  .s05-lorem {
    padding-block: 64px 56px;
  }

  .s05-prosa {
    margin-top: 32px;
  }

  .s05-figura {
    margin-top: 56px;
  }
}

/* --------------------------------------------------------------------------
   7. ADATTAMENTO — 700px
   Si impila: prima il testo, poi la figura, come nel Figma. La figura scende
   a 94,508% della colonna perche' il rettangolo blu sconfina del 5,81% della
   sua larghezza: cosi' il blu arriva a filo del contenitore e non produce
   scorrimento laterale. Lo sconfinamento verticale resta ma finisce dentro il
   respiro basso della banda, non piu' sopra la sezione successiva.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s05-lorem {
    padding-block: 48px 48px;
  }

  .s05-griglia {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .s05-prosa {
    margin-top: 24px;
  }

  /* Resta agganciata a sinistra anche se nel Figma sta a destra: il
     rettangolo blu esce dal suo bordo destro, e allineandola a destra quel
     5,8% finirebbe fuori dal contenitore, cioe' scorrimento orizzontale. */
  .s05-figura {
    width: 94.508%;
    margin-top: var(--sp-8);
  }
}


/* ==========================================================================
   06 — Progettiamo insieme il tuo futuro professionale
   Misure dalla scheda geometria (frame 1440) e verificate a scala 1 sul render
   materiali/figma-ref/06-progettiamo.png.

   Riferimenti verticali assoluti del Figma:
     banda            2688 → 3436  (748px, fill #F4F7F9)
       colonna sx     2831 → 3288
         occhiello    2831 → 2851  (16/20)
         titolo       2871 → 2967  (2 righe da 48)
         filetto      2985 → 2987  (2px pieni, misurati sul render)
         paragrafo    3008 → 3176  (6 righe da 28)
         pulsante     3236 → 3288  (256x52)
       colonna dx     2892 → 3288
         punto 1      2892 → 2944  (2 righe da 26)
         punto 2      2972 → 3076  (4 righe)
         punto 3      3104 → 3208  (4 righe)
         punto 4      3236 → 3288  (2 righe)

   Orizzontali: colonna sx x 177→706 (Frame 22661, 529; il solo frame del
   titolo e' 530), colonna dx x 780→1234 (454), quindi 74px di corridoio.
   529 + 74 + 454 = 1057 dentro i 1080 di .wrap: i 23px di gioco restano a
   destra, com'e' nel Figma (il blocco parte da 177 e chiude a 1234, non e'
   centrato sulla colonna). .wrap apre a 180, quindi tutta la sezione cade 3px
   piu' a destra dell'oracolo: e' la conseguenza dichiarata del contenitore
   condiviso (CONTRATTO §2), non uno scostamento di questa sezione.
   Dentro la colonna destra: disco 52, corridoio 31, testo 371.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANDA
   -------------------------------------------------------------------------- */
.s06-progettiamo {
  --pad-banda: 143px;   /* 2831 - 2688 */
  padding-bottom: 148px; /* 3436 - 3288 */
}

/* Flex e non grid: con `flex: 0 1 <base>` le due colonne valgono esattamente
   530 e 454 finche' c'e' spazio e si stringono da sole nei ~4px di viewport
   fra 1101 e 1104, dove tracce di griglia fisse sfonderebbero il contenitore. */
.s06-griglia {
  display: flex;
  align-items: flex-start;
  gap: 74px;
}

/* --------------------------------------------------------------------------
   2. COLONNA DI SINISTRA
   In colonna flex cosi' il pulsante (inline-flex) non si porta dietro lo
   spazio di riga del layout inline e le distanze restano quelle misurate.
   -------------------------------------------------------------------------- */
/* 529px e non 530 (larghezza del frame del titolo): a 530 la terza riga del
   paragrafo misura 529,9px e ci entra anche «nella», che nell'oracolo va a
   capo. E' l'unica misura della sezione in cui un pixel cambia il testo a
   schermo, quindi vince il frame della colonna (Frame 22661, 529). */
.s06-testo {
  display: flex;
  flex-direction: column;
  flex: 0 1 529px;
  min-width: 0;
}

/* Il Figma spezza il titolo dopo «tuo» riempiendo la riga (517px di inchiostro
   su 529 di colonna): `balance` di .titolo-sezione riequilibrerebbe le due
   righe e cambierebbe il punto di a capo rispetto all'oracolo. */
.s06-titolo {
  margin-top: 20px; /* occhiello chiude a 2851, titolo apre a 2871 */
  text-wrap: wrap;
}

.s06-prosa {
  margin-top: 21px; /* filetto chiude a 2987, paragrafo apre a 3008 */
}

/* align-self: in colonna il pulsante si stirerebbe a 529px, mentre nel Figma
   e' largo quanto il suo contenuto (256px = 24 + 208 + 24; Chrome misura
   l'etichetta 255,4 — 0,6px di scarto che NON si corregge con una larghezza
   fissa, o il pulsante si romperebbe al primo cambio di testo in WordPress). */
.s06-cta {
  align-self: flex-start;
  margin-top: 60px; /* paragrafo chiude a 3176, pulsante apre a 3236 */
}

/* --------------------------------------------------------------------------
   3. COLONNA DI DESTRA — i quattro punti
   -------------------------------------------------------------------------- */
/* Selettore discendente e non `.s06-elenco` nudo: base.css azzera i margini
   con `ul[class]` (specificita' 0,1,1), che batterebbe una classe sola e
   mangerebbe il margin-top. Vale anche nelle media query piu' sotto. */
.s06-griglia .s06-elenco {
  display: flex;
  flex-direction: column;
  flex: 0 1 454px;
  gap: 28px;        /* 2944→2972, 3076→3104, 3208→3236 */
  min-width: 0;
  margin-top: 61px; /* la colonna destra parte a 2892, la sinistra a 2831 */
}

.s06-punto {
  display: flex;
  align-items: flex-start; /* disco e testo condividono la quota di partenza */
  gap: 31px;               /* disco chiude a 832, testo apre a 863 */
}

.s06-punto__icona {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: var(--raggio-pastiglia); /* Figma radius 40 su 52 = cerchio */
  background: var(--bianco);
  box-shadow: var(--ombra-morbida);
  color: var(--blu); /* le icone disegnano in currentColor */
}

/* 18/26: interlinea piu' corta della prosa corrente (che e' 18/28). */
.s06-punto__testo {
  margin: 0;
  color: var(--ink-corpo);
  font-size: var(--fs-18);
  font-weight: var(--w-normale);
  line-height: var(--lh-18-corto);
}

.s06-punto__testo strong {
  font-weight: var(--w-forte);
}

/* --------------------------------------------------------------------------
   4. ADATTAMENTO — 1100px
   Le due colonne restano affiancate ma diventano proporzionali (530:454) e il
   corridoio si stringe: sotto i 1100 le larghezze fisse non ci starebbero.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s06-progettiamo {
    --pad-banda: 96px;
    padding-bottom: 100px;
  }

  .s06-griglia { gap: 48px; }

  .s06-testo { flex: 529 1 0; }
  .s06-griglia .s06-elenco { flex: 454 1 0; margin-top: 48px; }

  .s06-punto { gap: var(--sp-5); } /* 20px */
}

/* --------------------------------------------------------------------------
   5. ADATTAMENTO — 700px
   Colonne impilate: prima il discorso, poi i quattro punti.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s06-progettiamo {
    --pad-banda: 56px;
    padding-bottom: 56px;
  }

  .s06-griglia {
    flex-direction: column;
    gap: var(--sp-8); /* 40px */
  }

  .s06-testo,
  .s06-griglia .s06-elenco {
    flex: 0 1 auto;
    width: 100%;
  }

  .s06-griglia .s06-elenco { margin-top: 0; }

  .s06-titolo { margin-top: var(--sp-4); }

  .s06-cta {
    margin-top: var(--sp-7); /* 32px: 60px sarebbero un buco su schermo corto */
  }

  /* Il disco scende a 44px come nella sez. 07: a 390px un cerchio da 52
     mangerebbe un settimo della riga. */
  .s06-punto__icona {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
}


/* ==========================================================================
   07 — Il lavoro giusto alla persona giusta
   Misure dalla scheda geometria (frame 1440) e verificate a scala 1 sul render
   materiali/figma-ref/07-lavoro-giusto.png.

   Riferimenti verticali assoluti del Figma:
     occhiello        3576 → 3596  (16/20)
     titolo           3616 → 3664  (1 riga da 48)
     filetto          3682 → 3684  (2px pieni, misurati sul render)
     paragrafo        3713 → 3853  (5 righe da 28)
     elenco           3893 → 4143  (3 righe da 84, sovrapposte di 1px)
       riga: 20px di respiro, disco 44, 19px di respiro, filetto 1px
       disco  x 272→316 · titolo x 336→1168 (832)
       il titolo sta 8px sotto il bordo alto del disco (3921 contro 3913)

   Confini verticali della sezione: la banda chiara della 06 chiude a 3436 e la
   sezione 08 apre a 4200, quindi tutto il bianco fra le due sta qui:
   140px sopra (3576 - 3436) e 57px sotto (4200 - 4143).

   ⚠️ Chi assembla index.html non deve aggiungere altro margine fra 06, 07 e 08:
   il respiro e' gia' tutto in queste due misure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SEZIONE
   -------------------------------------------------------------------------- */
.s07-lavoro-giusto {
  --pad-banda: 140px;   /* 3576 - 3436 (fondo della banda chiara della sez. 06) */
  padding-bottom: 57px; /* 4200 - 4143 (attacco della sez. 08) */
}

.s07-titolo {
  margin-top: 20px; /* occhiello chiude a 3596, titolo apre a 3616 */
}

.s07-prosa {
  margin-top: 29px; /* filetto chiude a 3684, paragrafo apre a 3713 */
}

/* --------------------------------------------------------------------------
   2. ELENCO NUMERATO
   Nel Figma le tre righe sono alte 84px e si sovrappongono di 1px, cosi' il
   filetto e' condiviso: qui ogni riga vale 20 + 44 + 19 + 1 = 84 e le righe si
   impilano, quindi l'elenco misura 252px contro i 250 dell'oracolo (2px su 250,
   sotto la soglia percettiva; il tratto e' identico riga per riga).
   -------------------------------------------------------------------------- */
/* Selettore discendente e non `.s07-elenco` nudo: base.css azzera i margini
   con `ol[class]` (specificita' 0,1,1), che batterebbe una classe sola e
   mangerebbe il margin-top. Vale anche nelle media query piu' sotto. */
.s07-lavoro-giusto .s07-elenco {
  margin-top: 40px; /* paragrafo chiude a 3853, elenco apre a 3893 */
}

.s07-riga {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5); /* 20px: disco chiude a 316, titolo apre a 336 */
  padding-block: var(--sp-5) 19px;
  border-bottom: 1px solid var(--bordo-riga);
}

/* Il filetto e' SOLO sotto: sul render non c'e' nessuna riga sopra la prima
   voce (verificato leggendo i pixel a y=3893: fondo pieno). */

.s07-riga__numero {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--raggio-pastiglia); /* Figma radius 40 su 44 = cerchio */
  background: var(--bianco);
  box-shadow: var(--ombra-morbida);
  color: var(--testo);
  font-size: var(--fs-20);
  font-weight: var(--w-forte);
  line-height: 1; /* Figma 20/20 */
}

/* padding-top e non align-items:center: nel Figma il testo sta 8px sotto il
   bordo alto del disco, e con una riga sola le due cose coincidono. La
   differenza si vede quando il titolo va a capo (sotto i 700px), dove il disco
   deve restare in alto e non centrarsi su due righe. */
.s07-riga__titolo {
  margin: 0;
  padding-top: 8px;
  color: var(--testo);
  font-size: var(--fs-20);
  font-weight: var(--w-forte);
  line-height: var(--lh-20); /* 28/20 */
}

/* --------------------------------------------------------------------------
   3. ADATTAMENTO — 1100px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s07-lavoro-giusto {
    --pad-banda: 96px;
    padding-bottom: 48px;
  }

  .s07-prosa { margin-top: var(--sp-6); }  /* 24px */
  .s07-lavoro-giusto .s07-elenco { margin-top: var(--sp-7); } /* 32px */
}

/* --------------------------------------------------------------------------
   4. ADATTAMENTO — 700px
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s07-lavoro-giusto {
    --pad-banda: 56px;
    padding-bottom: 40px;
  }

  .s07-titolo { margin-top: var(--sp-4); }

  .s07-riga {
    gap: var(--sp-4); /* 16px */
    padding-block: var(--sp-4) 15px;
  }

  /* Il titolo va a capo su piu' righe: il corpo scende quel tanto che basta a
     non spezzare le parole lunghe («duraturo», «integrare») a 390px. */
  .s07-riga__titolo {
    padding-top: 7px;
    font-size: var(--fs-18);
    line-height: var(--lh-18-corto); /* 26/18 */
  }

  .s07-riga__numero {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    font-size: var(--fs-18);
  }
}


/* ==========================================================================
   08 — CTA scura «Compila il form ed inviaci il tuo curriculum»
   Figma: sezione y 4200→4840, banda #244861 y 4283→4826 (1440×543).
   Colonne: foto x=182 482×608 · testo x=732 larghezza 491 (gap 68).
   Ritmo verticale della colonna testo (tutto misurato sulla scheda):
     occhiello 4406 (20) · +8 · titolo 4434 (96) · +8 · testo 4538 (84)
     · +40 · pulsante 4662 (52) → il blocco è alto 308.
   Dipende da tokens.css e base.css, caricati prima.
   ========================================================================== */

.s08 {
  --s08-pad-t: 123px;      /* bordo alto banda 4283 → occhiello 4406 */
  --s08-pad-b: 112px;      /* fondo pulsante 4714 → bordo basso banda 4826 */
  --s08-foto-w: 482px;     /* Figma: rettangolo foto 482×608 */
  --s08-foto-rapporto: 482 / 608; /* serve solo sotto i 700, dove la foto è nel flusso */
  --s08-foto-x: 2px;       /* la foto parte da x=182, il contenitore da 180 */
  --s08-sborda: 65px;      /* quanto la foto esce sopra la banda (4283 − 4218) */
  --s08-col-gap: 68px;     /* fine foto 664 → inizio testo 732 */
  --s08-testo-w: 491px;

  padding-block: var(--s08-pad-t) var(--s08-pad-b);
  /* La sezione nel Figma va da 4200 a 4840: sopra la banda restano 83px di
     bianco — è lo spazio in cui sborda la foto — e sotto 14px. Sono margini
     e non padding perché il fondo della banda deve fermarsi al suo bordo. */
  margin-block: 83px 14px;
}

.s08-griglia {
  display: grid;
  /* la colonna della foto tiene dentro anche i 2px di scostamento, così la
     colonna di testo cade esattamente a x=732 come nel Figma */
  grid-template-columns: calc(var(--s08-foto-x) + var(--s08-foto-w)) minmax(0, var(--s08-testo-w));
  column-gap: var(--s08-col-gap);
}

/* --------------------------------------------------------------------------
   Foto + freccia
   La colonna di sinistra non ha altezza propria: la foto è fuori flusso e si
   aggancia al bordo INFERIORE della banda (bottom = −padding basso), da cui
   risale per 608px sfondando il bordo superiore. Se restasse nel flusso,
   la riga della griglia si alzerebbe a 608px e la banda crescerebbe con lei.
   -------------------------------------------------------------------------- */
.s08-figura { position: relative; }

.s08-figura__scatola {
  position: absolute;
  bottom: calc(-1 * var(--s08-pad-b));
  left: var(--s08-foto-x);
  width: calc(100% - var(--s08-foto-x));
  /* L'altezza si costruisce da quella del blocco di testo (100% della cella)
     più i due respiri della banda e lo sconfinamento: a 1440 fa esattamente
     608px come nel Figma, e a qualunque altra larghezza la foto continua a
     uscire di --s08-sborda e non di più, quindi non entra mai nella sezione
     che sta sopra. Con altezza e larghezza definite il rapporto d'aspetto non
     serve: ci pensa object-fit a ritagliare. */
  height: calc(100% + var(--s08-pad-t) + var(--s08-sborda) + var(--s08-pad-b));
}

.s08-foto {
  position: relative;
  z-index: var(--z-contenuto);
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Nel Figma la foto è SPECCHIATA: il pollice punta a destra, verso la
     freccia, mentre nel file originale punta a sinistra. Il ritaglio è stato
     misurato confrontando le sagome sul render — la percentuale è tarata per
     massimo accordo (IoU 0,977 contro l'oracolo) e vale sull'immagine
     specchiata, quindi va letta insieme a scaleX(-1). Sposta di ~4,3px ogni
     punto percentuale: non arrotondarla. */
  object-position: 47.4% center;
  transform: scaleX(-1);
}

/* Freccia decorativa: sta SOTTO la foto (nel render il pollice la copre).
   Misure in percentuale della scatola, così segue la foto quando rimpicciolisce.
   Il colore arriva da currentColor: nessun hex dentro l'SVG. */
.s08-freccia {
  position: absolute;
  z-index: var(--z-sfondo);
  top: 28.95%;    /* Figma y=4396 sul bordo alto foto 4218 → 178/608 */
  left: 51.66%;   /* Figma x=431 sul bordo sinistro foto 182 → 249/482 */
  width: 53.53%;  /* 258/482, viewBox allargato di 2px per non tagliare il tratto */
  height: 15.63%; /* 95/608 */
  color: var(--azzurro-tratto);
}

/* --------------------------------------------------------------------------
   Colonna di testo
   -------------------------------------------------------------------------- */
.s08-titolo {
  margin-top: var(--sp-2); /* 8px: occhiello 4426 → titolo 4434 */
  /* Il Figma spezza «Compila il form ed / inviaci il tuo curriculum»: è la
     divisione naturale del testo nei 491px. text-wrap: balance (ereditato da
     .titolo-sezione) pareggerebbe le due righe cambiando il punto di a capo. */
  text-wrap: initial;
}

/* Il paragrafo della CTA è 20/28 e non 18/28 come .prosa (Figma 185:1540):
   qui cambiano solo corpo e interlinea, colore e peso restano quelli di .prosa.
   Se altre sezioni useranno lo stesso corpo, diventerà .prosa--20 in base.css. */
.s08-testo {
  margin-top: var(--sp-2); /* 8px: titolo 4530 → testo 4538 */
  font-size: var(--fs-20);
  line-height: var(--lh-20);
}

/* L'angolo basso-destra a 16px NON sta più qui: era la firma di TUTTI i
   pulsanti del Figma tappata nel perimetro di questa sezione, e teneva cinque
   pulsanti su sette a spigolo vivo. Ora è --raggio-btn-br in tokens.css,
   applicato da .btn in base.css. */
.s08-cta {
  margin-top: var(--sp-8); /* 40px: testo 4622 → pulsante 4662 */
}

/* --------------------------------------------------------------------------
   Adattamento — 1100px
   Le due colonne diventano proporzionali: la foto si stringe con la sua
   colonna, resta agganciata al fondo della banda e continua a sbordare
   sopra di 65px (object-fit ritaglia il di più).
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s08 {
    --s08-pad-t: 96px;
    --s08-pad-b: 88px;
    --s08-col-gap: 40px;
    --s08-foto-x: 0px; /* sotto i 1100 le colonne sono proporzionali: niente scostamento */
    /* il margine alto resta più grande dello sconfinamento della foto (65px),
       altrimenti la testa finirebbe dentro la sezione precedente */
    margin-block: 72px 12px;
  }

  .s08-griglia {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  }
}

/* --------------------------------------------------------------------------
   Adattamento — 700px
   Una colonna sola. Il testo passa PRIMA della foto: così la foto resta
   tagliata dal bordo inferiore della banda, che è il suo trattamento nel
   Figma, invece di finire mozzata in mezzo alla pagina.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s08 {
    --s08-pad-t: 48px;
    --s08-pad-b: 48px;
    margin-block: 40px 14px;
  }

  .s08-griglia { grid-template-columns: minmax(0, 1fr); }

  .s08-colonna { order: 1; }

  .s08-figura {
    order: 2;
    position: static;
    margin-top: var(--sp-7);
  }

  .s08-figura__scatola {
    /* relative e non static: la freccia è absolute dentro la scatola e senza
       un antenato posizionato si aggancerebbe alla banda (.banda è relative),
       calcolando le sue percentuali sui 390px del viewport invece che sui
       266 della foto → sfondava di 20px a destra. Trovato misurando. */
    position: relative;
    bottom: auto;
    left: auto;
    width: min(300px, 76%);
    /* qui la foto è nel flusso: l'altezza torna a seguire il rapporto d'aspetto
       del Figma invece che quella del blocco di testo */
    height: auto;
    aspect-ratio: var(--s08-foto-rapporto);
    /* il margine negativo pareggia il padding basso della banda: la foto
       arriva esattamente a filo del bordo inferiore, come nel Figma */
    margin: 0 auto calc(-1 * var(--s08-pad-b));
  }
}


/* ==========================================================================
   09 — Newsletter «Vuoi tenere d’occhio il mercato?»
   Figma: sezione y 4940→5480, fondo bianco.
   Colonne: testo x=180 largo 434 · form x=732 largo 528 (gap 118 = 1080).
   Ritmo verticale (scheda geometria):
     occhiello 4980 (20) · +20 · titolo 5020 (114) · filetto 18+2 a 5152
     · +21 · prosa 5175 (224)
     form: titolo 5038 (24) · +28 · righe campi 5090 / 5174 / 5258 (64 l'una,
     20 di stacco) · +20 consenso 5342 (18) · +40 pulsante 5400 (52) → 5452.
   Dipende da tokens.css e base.css, caricati prima.
   ========================================================================== */

.s09 {
  --s09-col-testo: 434px;
  --s09-col-form: 528px;
  --s09-col-gap: 118px;
  --s09-form-offset: 58px;  /* il form parte 58px sotto l'occhiello (4980 → 5038) */

  /* Sopra: la banda scura della sez. 08 finisce a 4826 e l'occhiello è a 4980
     (154px, di cui 14 già dati dal margine basso della sez. 08 → 140 qui).
     Sotto: pulsante a 5452, fine sezione 5480. */
  padding-block: 140px 28px;
}

.s09-griglia {
  display: grid;
  /* 434 + 118 + 528 = 1080, cioè tutta la colonna larga. La seconda traccia è
     minmax così fra 1101 e 1127px — dove il contenitore è già più stretto di
     1080 ma il layout è ancora quello da tavolo — il form si stringe invece di
     sfondare a destra. Verificato per misura a 1101px. */
  grid-template-columns: var(--s09-col-testo) minmax(0, var(--s09-col-form));
  column-gap: var(--s09-col-gap);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Colonna di sinistra
   -------------------------------------------------------------------------- */
.s09-titolo {
  margin-top: var(--sp-5); /* 20px: occhiello 5000 → titolo 5020 */
  /* Il Figma manda a capo per riempimento — «Vuoi tenere d’occhio il /
     mercato? Iscriviti alla nostra / mailing list» (righe 318, 411, 154px):
     text-wrap: balance, ereditato da .titolo-sezione, le pareggiava a
     299/276/316 spostando le parole. Misurato sul render. */
  text-wrap: initial;
}

.s09-testo {
  margin-top: 21px; /* Figma: filetto chiuso a 5154 → prosa a 5175 */
}

/* --------------------------------------------------------------------------
   Colonna di destra: il form
   -------------------------------------------------------------------------- */
.s09-form {
  padding-top: var(--s09-form-offset);
}

/* «Inserisci i tuoi dati»: 20/24 w700 blu (Figma 185:1866). Non è un titolo
   di sezione, quindi non usa .titolo-sezione. */
.s09-form__titolo {
  /* Il Figma stacca il titolo dal primo campo di 28px, che non è uno dei passi
     della scala (24 o 32): lo scrivo esatto invece di arrotondare. */
  margin-bottom: 28px;
  color: var(--blu);
  font-size: var(--fs-20);
  font-weight: var(--w-forte);
  line-height: var(--lh-20-corto);
}

.s09-campi {
  display: grid;
  gap: var(--sp-5); /* 20px fra le righe di campi */
}

/* Il rientro di 8px dell'etichetta è passato alle fondazioni
   (.campo__etichetta in base.css): nel Figma vale per entrambi i form, e
   tenerlo qui lasciava il form della hero senza. */

.s09-riga-doppia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3); /* 12px: 258 + 12 + 258 = 528 */
}

.s09-consenso {
  margin-top: var(--sp-5); /* 20px: fine select 5322 → consenso 5342 */
}

/* Il pulsante è allineato al bordo destro della colonna (Figma x=1008,
   largo 252, fine a 1260 = margine destro del contenitore). */
.s09-azioni {
  display: flex;
  justify-content: flex-end;
  /* Il Figma stacca 40px dal fondo della casella (5360 → 5400). La riga di
     consenso qui è alta 20 e non 18 — è l'interlinea del testo 12/20, più
     alta del quadretto — quindi 38 riporta il pulsante a 5400 esatti. */
  margin-top: 38px;
}

/* L'angolo basso-destra a 16px è passato alle fondazioni: --raggio-btn-br in
   tokens.css, applicato da .btn in base.css a tutti e sette i pulsanti. */

/* --------------------------------------------------------------------------
   Adattamento — 1100px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s09 {
    --s09-form-offset: 40px;
    padding-block: 96px 24px;
  }

  .s09-griglia {
    grid-template-columns: minmax(0, 42fr) minmax(0, 51fr);
    column-gap: var(--sp-10); /* 56px */
  }
}

/* --------------------------------------------------------------------------
   Adattamento — 700px
   Una colonna sola: prima il testo, poi il form. Nome e Cognome si impilano
   (a 258px affiancati diventerebbero due campi da ~150px) e il pulsante
   occupa tutta la larghezza, che è il gesto giusto in fondo a un form.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s09 {
    --s09-form-offset: 40px;
    padding-block: 64px 8px;
  }

  .s09-griglia {
    grid-template-columns: minmax(0, 1fr);
  }

  .s09-riga-doppia {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .s09-cta { width: 100%; }
}


/* ==========================================================================
   10 — Carriera
   Figma: Frame 22721, y 5602→6364 (banda alta 762px, fill #F4F7F9).
     fotografia   x 0→528   (528 = 36,6667% di 1440), alta quanto la banda
     colonna testo x 639→1261 (622px), y 5704→6262, respiro 102px sopra/sotto
   Misure verificate sul render 10-carriera.png (scala 1):
     titolo   righe di glifi 109-135 e 147-174   (box y=102, 2 righe da 38)
     filetto  righe 196-197                      (2px pieni, non 1)
     paragrafo box y=219 (2 righe da 28)         → 21px sotto il filetto
     elenco   box y=296 (13 righe da 28)         → 21px sotto il paragrafo
     pallino  5x5 a x=11 dal bordo, testo a x=27
   Dipende da tokens.css + base.css.
   ========================================================================== */

/* La banda non mette respiro proprio: lo mette la colonna di testo, che e'
   anche cio' che determina l'altezza della banda (102 + 558 + 102 = 762).
   Cosi' la fotografia in posizione assoluta tocca davvero il bordo alto e
   quello basso. */
.s10-carriera {
  --pad-banda: 0;
}

/* --------------------------------------------------------------------------
   FOTOGRAFIA
   36,6667% = 528/1440. La percentuale si risolve sul <section>, che e' largo
   quanto l'area visibile: niente 100vw, quindi nessuno scarto dovuto alla
   barra di scorrimento su Windows/Linux.
   -------------------------------------------------------------------------- */
.s10-figura {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: var(--z-sfondo);
  width: 36.6667%;
  margin: 0;
  overflow: hidden;
}

/* L'originale e' 1100x733 (orizzontale) e va in una finestra verticale:
   il ritaglio centrato riproduce quello del Figma (verificato per confronto
   di pixel: object-position 50% e' il minimo assoluto di differenza). */
.s10-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   COLONNA DI TESTO
   -------------------------------------------------------------------------- */
.s10-wrap {
  position: relative;
  z-index: var(--z-contenuto);
  padding-block: 102px;
}

/* 42,4074% = 458/1080: la colonna e' larga esattamente i 622px sui quali il
   Figma ha calcolato gli a-capo, e il suo bordo destro cade a filo di quello
   di .wrap. Lo scarto di 1px sul bordo sinistro (638 invece di 639) e' il
   prezzo di quella scelta: nel Figma il box del testo sborda di 1px dalla
   colonna, e far tornare la larghezza conta piu' del bordo sinistro. */
.s10-testo {
  margin-left: 42.4074%;
}

/* Il Figma manda a capo dopo «Con» (a-capo avido, prima riga piena), mentre
   .titolo-sezione usa text-wrap: balance, che spezzerebbe dopo «costruire?».
   Qui si torna al comportamento normale per non allontanarsi dall'oracolo. */
.s10-titolo {
  text-wrap: wrap;
}

.s10-intro {
  margin-top: 21px;
}

/* Il selettore porta il tipo perche' il reset di base.css e' `ul[class]`
   (specificita' 0-1-1): un `.s10-elenco` nudo (0-1-0) perderebbe e il
   margine resterebbe a zero. Verificato sul render: senza il tipo l'elenco
   saliva di 21px e la banda finiva alta 741 invece di 762. */
ul.s10-elenco {
  margin-top: 21px;
}

/* Le sei voci scorrono come righe continue: nel Figma sono un unico blocco di
   testo alto 364px = 13 righe da 28, quindi nessun margine fra le voci. */
.s10-elenco li {
  position: relative;
  padding-left: 27px;
}

/* Pallino misurato sul render: 5x5, a 11px dal bordo, centrato sulla prima
   riga (righe 307-311 dentro la riga 296-324). currentColor lo tiene in
   accordo con .prosa (--ink-corpo). */
.s10-elenco li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  width: 5px;
  height: 5px;
  border-radius: var(--raggio-tondo);
  background: currentColor;
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 1100px
   La fotografia e la colonna restano affiancate, ma l'immagine cede un po' di
   spazio al testo: alle proporzioni del Figma, sotto i 900px la colonna
   scenderebbe a ~490px e la prosa a 18px diventerebbe una strisciolina.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s10-figura { width: 32%; }
  .s10-wrap   { padding-block: 72px; }
  .s10-testo  { margin-left: 38%; }
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 700px
   Si impila: la fotografia diventa una fascia orizzontale a piena larghezza
   (4:3, cosi' su un telefono da 390px occupa 292px e non i 563 che le
   spetterebbero mantenendo il verticale del Figma), il testo sotto.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s10-figura {
    position: static;
    width: 100%;
  }

  .s10-figura img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .s10-wrap {
    padding-block: 48px;
  }

  .s10-testo {
    margin-left: 0;
  }
}


/* ==========================================================================
   11 — Tutto sulla professione di ottico (accordion)
   Figma: Frame 22664, x=272 w=896 (.wrap--stretto), y 6514→7131.
   Misure verificate sul render 11-accordion.png (scala 1):
     occhiello  box y=44  (16/20)          titolo box y=84 (32/38)
     filetto    righe 140-141              → 2px pieni, 18px sotto il titolo
     paragrafo  box y=171, 3 righe da 28   → 29px sotto il filetto
     righe      filetti #E4EBF0 a 295, 386, 477, 568 → passo 91px + 1px di
                bordo finale = i 274px del Figma (i bordi delle istanze si
                sovrappongono di 1px, quindi qui: bordo sopra a ogni riga,
                bordo sotto una volta sola, sul contenitore)
     contenuto  della riga: 44px alto, 23px di respiro sopra e sotto
     pulsante   256x52 a filo del bordo destro, 40px sotto l'ultimo filetto
   Dipende da tokens.css + base.css.
   ========================================================================== */

/* Respiro della banda: 150px sopra e sotto (6364→6514 e 7131→7281, cioe' la
   distanza dalle bande colorate delle sez. 10 e 12). Va ridichiarato nelle
   media query: essendo scritto sulla sezione, l'adattamento di :root in
   base.css non lo raggiunge. */
.s11-approfondimenti {
  --pad-banda: 150px;
}

/* --------------------------------------------------------------------------
   TESTATA E INTRODUZIONE
   -------------------------------------------------------------------------- */
.s11-titolo {
  margin-top: var(--sp-5); /* 20px fra occhiello e titolo (64 → 84) */
}

.s11-intro {
  margin-top: 29px;
}

/* --------------------------------------------------------------------------
   ELENCO
   -------------------------------------------------------------------------- */
.s11-elenco {
  margin-top: var(--sp-8); /* 40px */
  border-bottom: 1px solid var(--bordo-tenue);
}

.s11-riga {
  border-top: 1px solid var(--bordo-tenue);
}

/* Testa della riga: 23 + 44 + 23 = 90px di contenuto, piu' 1px di bordo
   sopra = il passo di 91px misurato sul render.
   list-style/::-webkit-details-marker: via il triangolino nativo, il segno
   di apertura e' il «+» del Figma. */
.s11-testa {
  display: flex;
  align-items: center;
  padding-block: 23px;
  list-style: none;
  cursor: pointer;
}

.s11-testa::-webkit-details-marker { display: none; }

/* Disco bianco 44x44 con ombra: sul fondo bianco della banda si vede solo
   grazie all'ombra (--ombra-morbida e' il token dei dischi icona).
   Numero: Archivo 700 20/20, #333333. */
.s11-numero {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: var(--sp-5); /* 20px */
  border-radius: var(--raggio-pastiglia);
  background: var(--bianco);
  box-shadow: var(--ombra-morbida);
  color: var(--testo);
  font-size: var(--fs-20);
  font-weight: var(--w-forte);
  line-height: 1;
}

/* Titolo di riga: Archivo 700 22/32, #333333.
   Il margine destro riproduce i 40px che nel Figma separano il contenitore
   del titolo dall'icona (44 + 20 + 760 + 40 + 32 = 896). */
.s11-titolo-riga {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: var(--sp-8);
  color: var(--testo);
  font-size: var(--fs-22);
  font-weight: var(--w-forte);
  line-height: var(--lh-22);
}

/* Icona: riquadro 32x32 con dentro il segno da 26x26, tratto 2px, --blu.
   Misurato sul render: cerchio 1138→1163, bracci del piu' 1145→1158. */
.s11-piu {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--blu);
}

.s11-piu svg {
  width: 26px;
  height: 26px;
}

/* Aperta: sparisce la barra verticale e il «+» diventa un «−».
   Il Figma mostra solo lo stato chiuso: questa e' la controparte necessaria
   perche' l'accordion funzioni davvero. */
.s11-riga[open] .s11-piu__barra {
  opacity: 0;
}

/* Affordance al passaggio del mouse: il Figma non dichiara stati, quindi si
   resta dentro la palette (blu istituzionale, 9,66:1 su bianco). */
.s11-testa:hover .s11-titolo-riga {
  color: var(--blu);
}

/* --------------------------------------------------------------------------
   PANNELLO
   Allineato al titolo (64px = disco 44 + 20 di stacco) e chiuso a 72px dal
   bordo destro, come il testo nascosto della riga 2 nel Figma.
   -------------------------------------------------------------------------- */
.s11-pannello {
  padding: var(--sp-1) 72px var(--sp-6) 64px;
  color: var(--ink-corpo);
  font-size: var(--fs-16);
  font-weight: var(--w-normale);
  line-height: var(--lh-16);
}

.s11-pannello p { margin: 0; }

/* --------------------------------------------------------------------------
   PULSANTE
   -------------------------------------------------------------------------- */
.s11-azione {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-8); /* 40px */
}

.s11-cta {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   MOVIMENTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .s11-titolo-riga,
  .s11-piu__barra {
    transition:
      color var(--dur) var(--ease),
      opacity var(--dur) var(--ease);
  }
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 1100px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s11-approfondimenti { --pad-banda: 96px; }

  .s11-intro { margin-top: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 700px
   A 390px il titolo a 22px lascerebbe alla riga ~238px di larghezza e quattro
   capoversi: scendono corpo del titolo, disco e distanze, cosi' la riga resta
   leggibile e il bersaglio da toccare non va sotto i 44px di altezza.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s11-approfondimenti { --pad-banda: 48px; }

  .s11-testa { padding-block: var(--sp-5); }

  .s11-numero {
    width: 36px;
    height: 36px;
    margin-right: var(--sp-4);
    font-size: var(--fs-16);
  }

  .s11-titolo-riga {
    margin-right: var(--sp-4);
    font-size: var(--fs-18);
    line-height: var(--lh-18-titolo);
  }

  .s11-piu {
    width: 26px;
    height: 26px;
  }

  .s11-pannello {
    padding: var(--sp-1) 0 var(--sp-5) 52px;
  }

  /* La CTA occupa la riga: e' l'unica azione del blocco. Si allarga con
     flex-grow, senza riscrivere le proprieta' di .btn. */
  .s11-cta { flex: 1 1 auto; }
}


/* ==========================================================================
   Sezione 12 — Chi siamo
   Oracolo: materiali/figma-ref/12-chi-siamo.png (scala 1, frame 1440)
   Geometria: materiali/figma-ref/geometria/12-chi-siamo.md

   Misure del Figma usate qui:
   banda 1440x762 fondo #F4F7F9 (y 7281→8043)
   contenuto testuale 7393→7930 (537) => respiro 112 sopra e 113 sotto
   colonna di testo x=180 larga 621
   titolo 32/38 in un frame alto 96 = 76 (2 righe) + 18 di gap + 2 di filetto
   prosa 18/28 a 21px sotto il filetto, tre paragrafi senza stacco
   fotografia x=912 larga 528 (36,6667% di 1440) alta 762 = tutta la banda
   ========================================================================== */

.s12 {
  /* 112 sopra e 113 sotto nel Figma: la differenza di 1px e' arrotondamento
     del frame, si tiene un solo valore. */
  --pad-banda: 112px;
  /* larghezza della colonna di testo (Figma 621px) */
  --s12-col: 621px;
  /* 528 / 1440: la foto resta agganciata al bordo destro a ogni larghezza */
  --s12-foto: 36.6667%;
  overflow: hidden; /* la foto e' assoluta dentro la banda: niente sfondamenti */
}

.s12-testo {
  width: 100%;
  max-width: var(--s12-col);
}

/* Il Figma manda a capo in modo goloso («…per la ricerca di / personale»),
   balance riequilibrerebbe le due righe. E' lo stesso neutralizzatore che
   hanno gia' le sezioni 03, 04, 05, 06, 08, 09, 10 e 13: qui mancava, ed era
   l'unico titolo multi-riga della pagina rimasto con l'ereditarieta' di
   .titolo-sezione. Misura sull'oracolo (full.png, y 7395-7429 e 7433-7467):
   righe da 579 e 144px; con balance venivano 355 e 375, con wrap 582 e 147. */
.s12-titolo { text-wrap: wrap; }

/* Figma: il box del testo parte 21px sotto il bordo inferiore del filetto. */
.s12-prosa { margin-top: 21px; }

/* --------------------------------------------------------------------------
   Fotografia: agganciata al bordo destro, alta quanto tutta la banda
   (nel Figma sfonda sopra e sotto il respiro verticale).
   Assoluta e in percentuale della SEZIONE: nessun 100vw, quindi la barra di
   scorrimento non sposta il ritaglio.
   -------------------------------------------------------------------------- */
.s12-figura {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: var(--s12-foto);
  margin: 0;
}

.s12-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sorgente 1100x733 dentro un ritaglio verticale: il taglio centrato
     riproduce l'inquadratura del render (l'uomo con gli occhiali cade nello
     stesso punto). */
  object-position: center;
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 1100px
   Sotto i 1100 le due colonne non convivono: con la foto ancorata a destra
   al testo resterebbero ~400px, cioe' righe da 40 caratteri. Si impila:
   prima il testo, poi la fotografia a tutta larghezza che chiude la banda
   (mantiene il "va a filo del bordo" dell'originale).
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s12 {
    --pad-banda: 80px;
    overflow: visible;
  }

  /* I 621px sono la misura del Figma, e nascono dal fatto che a destra c'e' la
     fotografia: uscita la fotografia dalla riga, il vincolo non ha piu' ragione
     d'essere e la colonna resterebbe stretta a sinistra con un vuoto di 431px
     a destra (il 41% della banda), sopra una foto che va da bordo a bordo.
     Non si rilascia del tutto — a 1100 la riga arriverebbe a 102 caratteri —
     ma si porta al --w-stretto che il progetto usa gia' come colonna di
     lettura piu' larga (896px, 87 caratteri: e' la misura delle sezioni 03,
     07 e 11 in questa stessa fascia). Sotto i 1000 il tetto non morde piu' e
     la colonna riempie il contenitore come nelle altre sezioni. */
  .s12-testo { max-width: var(--w-stretto); }

  .s12-figura {
    position: static;
    width: auto;
    /* la foto arriva a filo del bordo inferiore della banda, come nel Figma */
    margin-top: var(--sp-12);
    margin-bottom: calc(var(--pad-banda) * -1);
  }

  .s12-figura img { height: clamp(240px, 38vw, 420px); }
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 700px
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s12 { --pad-banda: 56px; }

  .s12-figura { margin-top: var(--sp-9); }

  .s12-figura img { height: clamp(200px, 52vw, 300px); }
}


/* ==========================================================================
   Sezione 13 — Recensioni
   Oracolo: materiali/figma-ref/13-recensioni.png (scala 1, frame 1440)
   Geometria: materiali/figma-ref/geometria/13-recensioni.md

   Misure del Figma usate qui:
   banda bianca y 8043→8730; contenuto 8193→8580 => 150 di respiro sopra e sotto
   occhiello 16/20 centrato sul frame (box x=669 largo 101, centro 720)
   schede: 3 x 320 a x=180 / 560 / 940 => gap 60, totale 1080
   titolo scheda 24/30 w600 centrato in un frame alto 80 = 60 + 18 di gap + 2 di filetto
   testo scheda 14/22 centrato, a 21px sotto il filetto
   comandi: frame 292 centrato (x=574), 40px sotto le schede
   frecce 32x32 con vettore 21x21 #244861; pallini 10px, passo 24, il primo pieno
   ========================================================================== */

.s13 {
  /* Figma: 150px sopra l'occhiello e sotto i comandi */
  --pad-banda: 150px;
  /* distanza fra le schede (Figma: 60px) */
  --s13-gap: 60px;
  /* schede visibili contemporaneamente nella traccia */
  --s13-visibili: 3;
}

.s13-occhiello { text-align: center; }

/* Figma: 40px fra il box dell'occhiello e la cima delle schede. */
.s13-carosello { margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   Traccia scorrevole
   A 1440 le tre schede riempiono esattamente la colonna da 1080, quindi non
   c'e' nulla da scorrere: sotto i 1100 (2 schede) e sotto i 700 (1 scheda)
   diventa un carosello vero. Il comportamento lo aggiunge il JS.
   Il respiro verticale con margine negativo serve a non far tagliare il
   contorno tratteggiato del segnaposto: overflow-x: auto rende «auto» anche
   overflow-y, quindi tutto cio' che esce in verticale verrebbe ritagliato.
   -------------------------------------------------------------------------- */
.s13-traccia {
  display: flex;
  gap: var(--s13-gap);
  padding-block: var(--sp-3);
  margin-block: calc(var(--sp-3) * -1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* la navigazione e' affidata a frecce e pallini */
}

.s13-traccia::-webkit-scrollbar { display: none; }

.s13-slide {
  flex: 0 0 calc((100% - var(--s13-gap) * (var(--s13-visibili) - 1)) / var(--s13-visibili));
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Scheda recensione
   -------------------------------------------------------------------------- */
.s13-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.s13-card__titolo {
  /* 2 righe da 30 + gap + filetto = i in tutto 80px del frame Figma: cosi'
     i tre filetti restano allineati anche se un titolo sta su una riga sola. */
  min-height: calc(var(--fs-24) * var(--lh-24) * 2 + var(--filetto-gap) + var(--filetto-spessore));
  color: var(--ink-titolo);
  font-size: var(--fs-24);
  font-weight: var(--w-semi);
  line-height: var(--lh-24);
  text-align: center;
  /* NIENTE text-wrap: balance. Figma manda a capo in modo goloso e con la
     bilanciatura i tre titoli si spezzano in un altro punto rispetto
     all'oracolo (verificato al render). */
  text-wrap: wrap;
}

.s13-card__testo {
  margin-top: 21px; /* Figma: 21px sotto il bordo inferiore del filetto */
  color: var(--ink-corpo);
  font-size: var(--fs-14);
  font-weight: var(--w-normale);
  line-height: var(--lh-14);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Comandi del carosello
   Frame Figma largo 292 e centrato: frecce agli estremi, pallini al centro.
   -------------------------------------------------------------------------- */
.s13-comandi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 292px;
  max-width: 100%;
  margin: var(--sp-8) auto 0; /* 40px sotto le schede */
}

.s13-freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio-btn);
  background: transparent;
  color: var(--blu);
  cursor: pointer;
}

.s13-freccia:hover { color: var(--blu-hover); }

.s13-freccia[disabled] {
  opacity: .35;
  cursor: default;
}

.s13-pallini {
  display: flex;
  align-items: center;
}

/* Il pallino del Figma e' 10px con passo 24: il bersaglio tattile e' pero'
   l'intero quadrato da 24, cosi' resta sopra il minimo di 24x24 senza
   cambiare di un pixel il disegno. */
.s13-pallino {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio-pastiglia);
  background: transparent;
  cursor: pointer;
}

.s13-pallino::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--raggio-pastiglia);
  /* Figma: pallino spento #F4F7F9, acceso #244861. Lo spento e' l'unico segno
     che dice «ci sono altre schede» e su bianco farebbe 1,08:1, cioe' non si
     vedrebbe: si usa il derivato --pallino-spento (3,11:1), vedi tokens.css. */
  background: var(--pallino-spento);
}

.s13-pallino[aria-current="true"]::before { background: var(--blu); }

/* Stesso trattamento della freccia: sopra i 1100 non c'e' niente da scorrere e
   il JS spegne entrambi i comandi, ma solo la freccia si attenuava — i pallini
   restavano a piena forza e sembravano attivi. Un comando disattivato e' fuori
   dal minimo di contrasto 1.4.11, quindi l'attenuazione e' legittima.
   Il pallino della posizione corrente resta pieno anche da spento: a 1440
   l'oracolo mostra il primo pallino in blu pieno, ed e' quello che dice quale
   scheda si sta guardando. */
.s13-pallino[disabled]:not([aria-current="true"]) {
  opacity: .35;
}

.s13-pallino[disabled] { cursor: default; }

.s13-pallino:hover::before { background: var(--chiaro-premuto); }

.s13-pallino[aria-current="true"]:hover::before { background: var(--blu-hover); }

/* --------------------------------------------------------------------------
   MOVIMENTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .s13-traccia { scroll-behavior: smooth; }

  .s13-freccia,
  .s13-pallino::before {
    transition:
      background-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      opacity var(--dur) var(--ease);
  }
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 1100px
   Due schede per volta: sotto i 1100 tre colonne da 320 non ci stanno piu'.
   Da qui in giu' frecce e pallini servono davvero.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s13 {
    --pad-banda: 96px;
    --s13-gap: 40px;
    --s13-visibili: 2;
  }
}

/* --------------------------------------------------------------------------
   ADATTAMENTO — 700px
   Una scheda per volta.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s13 {
    --pad-banda: 64px;
    --s13-gap: 24px;
    --s13-visibili: 1;
  }
}


/* ==========================================================================
   14 — Contatto (banda blu) + Footer
   Misure prese dalla scheda geometria (frame 1440) e verificate sul render
   materiali/figma-ref/14-contatto-footer.png a scala 1.

   Riferimenti verticali assoluti del Figma:
     banda contatto   8730 → 9281   (551px)
       colonne          8830 → 9181 (350/351px)  → 100px di respiro sopra e sotto
       ritratto         8856 → 9106 (250×250, cerchio)
       occhiello        8830 → 8850
       titolo           8879 → 8955 (2 righe da 38)
       filetto          8973 → 8975 (2px pieni, misurati sul render)
       paragrafo        8996 → 9108 (4 righe da 28)
       pulsante         9129 → 9181 (228×52)
     footer           9281 → 9481   (200px, filetto #235486 sulla riga 9281)
       logo             9321 → 9381 (211×60)
       riga legale      9401 → 9441 (2 righe da 20)

   Orizzontali: ritratto x 326→576, colonna testo x 636→1114.
   Il blocco e' largo 788px ed e' centrato sul frame (centro 720), quindi vive
   dentro .wrap (1080) come riga centrata, non come griglia a tutta colonna.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANDA CONTATTO
   -------------------------------------------------------------------------- */
.s14-contatto {
  /* 8830 - 8730 = 100 sopra, 9281 - 9181 = 100 sotto */
  --pad-banda: 100px;
}

.s14-contatto__riga {
  display: flex;
  align-items: flex-start; /* le due colonne partono entrambe da y=8830 */
  justify-content: center; /* blocco di 788px centrato dentro .wrap */
  gap: 60px;               /* ritratto finisce a x=576, testo parte da x=636 */
}

.s14-contatto__ritratto {
  flex: 0 0 250px;
  margin-top: 26px; /* colonna a 8830, immagine a 8856 */
}

.s14-contatto__ritratto img {
  width: 250px;
  height: 250px;
  border-radius: var(--raggio-tondo); /* Figma radius 200 su 250 = cerchio */
  object-fit: cover;
}

/* Colonna di testo: impilata in flex column, cosi' il pulsante (inline-flex)
   non porta con se' lo spazio di riga dell'inline layout e le distanze
   verticali restano quelle misurate. */
.s14-contatto__testo {
  display: flex;
  flex-direction: column;
  flex: 0 1 478px; /* si stringe prima di impilarsi, non sfonda mai */
  min-width: 0;
}

.s14-contatto__titolo {
  margin-top: 29px; /* occhiello chiude a 8850, titolo apre a 8879 */
}

.s14-contatto__prosa {
  margin-top: 21px; /* filetto chiude a 8975, paragrafo apre a 8996 */
}

/* align-self perche' in colonna gli altri blocchi si stirano a 478px mentre
   il pulsante deve restare largo quanto il suo contenuto (228px nel Figma). */
.s14-contatto__cta {
  align-self: flex-start;
  margin-top: 21px; /* paragrafo chiude a 9108, pulsante apre a 9129 */
}

/* --------------------------------------------------------------------------
   2. FOOTER
   Riusa .banda .banda--scura per fondo e ribaltamento dei colori di contesto:
   qui si sovrascrive solo il respiro verticale e si aggiunge il filetto.
   -------------------------------------------------------------------------- */
.s14-footer {
  --pad-banda: 40px; /* 9321 - 9281 = 40 sopra, 9481 - 9441 = 40 sotto */
  /* Sul render il filetto e' la PRIMA riga dei 200px del footer: il bordo
     mangia 1px del respiro superiore, cosi' l'altezza totale resta 200. */
  padding-top: calc(var(--pad-banda) - 1px);
  border-top: 1px solid var(--bordo-footer);
  text-align: center;
}

.s14-footer__logo {
  /* Figma: frame 211×60 con l'immagine in STRETCH. L'altezza e' dichiarata
     perche' il reset di base.css impone height:auto a tutte le immagini. */
  width: 211px;
  height: 60px;
  margin-inline: auto;
}

.s14-footer__legale {
  margin-top: 20px; /* logo chiude a 9381, testo apre a 9401 */
  font-size: var(--fs-12);
  font-weight: var(--w-normale);
  line-height: var(--lh-12);
}

/* Le due righe sono un unico blocco di testo nel Figma (box alto 40 = 2×20):
   nessuno stacco fra i due paragrafi. */
.s14-footer__legale p { margin: 0; }
.s14-footer__legale strong { font-weight: var(--w-forte); }

/* --------------------------------------------------------------------------
   3. ADATTAMENTO — 1100px
   Il blocco resta a 788px centrati finche' c'e' spazio: sotto i ~836px di
   viewport e' la sola colonna di testo a stringersi (flex-basis).
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .s14-contatto { --pad-banda: 80px; }
}

/* --------------------------------------------------------------------------
   4. ADATTAMENTO — 700px
   Le due colonne si impilano: ritratto sopra e centrato, testo sotto e
   allineato a sinistra (il filetto e la lettura restano quelli del desktop).
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .s14-contatto { --pad-banda: 48px; }

  .s14-contatto__riga {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-7); /* 32px */
  }

  .s14-contatto__ritratto {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .s14-contatto__testo {
    flex: 0 1 auto;
    width: 100%;
  }
}


/* ==========================================================================
   99 — STRATO DI ASSEMBLAGGIO

   NON e' una sezione. Qui sta tutto e solo cio' che si vede quando le
   quattordici sezioni stanno una sotto l'altra e la pagina viene usata, cioe'
   cio' che nessun costruttore di sezione poteva vedere dal suo perimetro:

     · le CUCITURE fra una sezione e l'altra (§0)
     · gli ancoraggi, che non devono finire sotto la barra fissa (§1)
     · i messaggi di errore dei due form (§2)
     · l'avviso «questa e' una demo» al posto dell'invio (§3)
     · il toast dei collegamenti ancora da configurare (§4)

   Per questo qui — e SOLO qui — compaiono classi senza prefisso di sezione:
   sono componenti condivisi dai due form. Nel tema WordPress vanno spostate
   in base.css accanto a .campo e a .consenso; il toast e le due funzioni che
   lo governano si tolgono del tutto (il sito vero avra' i link veri).

   Nessun hex: il rosso arriva da --errore, aggiunto a tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CUCITURA FRA LA SEZIONE 09 E LA 10
   Fra la fine della newsletter (Figma 5480) e l'inizio della banda chiara
   della carriera (Figma 5602) ci sono 122px di bianco che NON li dava
   nessuno dei due: la 09 chiude sul suo frame a 28px dal pulsante, e la 10 ha
   --pad-banda: 0 di proposito, perche' la fotografia deve toccare il bordo
   alto e quello basso della banda. Senza questa riga la pagina e' 118px piu'
   corta dell'oracolo e la banda chiara parte incollata al form.
   Trovato in assemblaggio confrontando le quote di ogni sezione con full.png,
   non a occhio: era l'unica discontinuita' di tutta la pagina.
   Le misure ridotte seguono la stessa scala di --pad-banda in base.css.
   -------------------------------------------------------------------------- */
.s10-carriera {
  margin-top: 122px;
}

/* --------------------------------------------------------------------------
   1. ANCORAGGI SOTTO LA BARRA FISSA
   La barra della sez. 01 e' position:sticky e alta 100px (80 sotto i 1100,
   64 sotto i 700): senza questo, «Carica il tuo curriculum» porterebbe il
   form esattamente dietro la barra. Si dichiara sul contenitore di
   scorrimento, cosi' vale per tutti gli ancoraggi della pagina in una riga
   sola invece che con uno scroll-margin per bersaglio.
   -------------------------------------------------------------------------- */
html { scroll-padding-top: 116px; } /* 100 di barra + 16 di respiro */

/* --------------------------------------------------------------------------
   2. ERRORI DI COMPILAZIONE
   Il messaggio sta sotto il campo, dentro .campo (che e' gia' in colonna) o
   subito dopo la riga di consenso. Il campo in errore prende aria-invalid,
   quindi il bordo cambia senza bisogno di una classe in piu'.
   -------------------------------------------------------------------------- */
.campo__errore {
  display: block;
  margin-top: var(--sp-1);
  color: var(--errore);
  font-size: var(--fs-12);
  font-weight: var(--w-semi);
  line-height: var(--lh-12);
}

.campo__input[aria-invalid="true"],
.campo__input[aria-invalid="true"]:hover {
  border-color: var(--errore);
}

.consenso__box[aria-invalid="true"] {
  border-color: var(--errore);
}

/* --------------------------------------------------------------------------
   3. AVVISO «QUESTA E' UNA DEMO»
   Il nodo esiste sempre (e' una regione live: se lo si creasse al momento
   dell'invio, molte tecnologie assistive non lo annuncerebbero) e collassa
   finche' e' vuoto.
   -------------------------------------------------------------------------- */
.avviso-demo {
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raggio-campo);
  background: var(--blu);
  color: var(--bianco); /* 9,66:1 */
  font-size: var(--fs-14);
  font-weight: var(--w-normale);
  line-height: var(--lh-14);
}

.avviso-demo:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   4. TOAST DEI COLLEGAMENTI DA CONFIGURARE
   Compare solo se si tocca un link segnaposto (privacy policy, LinkedIn).
   Larghezza limitata al viewport meno i margini: a 390px non deve creare
   scorrimento laterale.
   -------------------------------------------------------------------------- */
.avviso-collegamento {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  z-index: var(--z-overlay);
  width: max-content;
  max-width: calc(100% - var(--gutter) * 2);
  padding: var(--sp-3) var(--sp-5);
  transform: translateX(-50%);
  border-radius: var(--raggio-campo);
  background: var(--blu);
  box-shadow: var(--ombra-card);
  color: var(--bianco); /* 9,66:1 */
  font-size: var(--fs-14);
  font-weight: var(--w-normale);
  line-height: var(--lh-14);
  text-align: center;
}

.avviso-collegamento[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   5. COMANDI INERTI DEL CAROSELLO
   Sopra i 1100px le tre schede sono tutte visibili e non c'e' nulla da far
   scorrere: il JS spegne frecce e pallini. Le frecce hanno gia' il loro stato
   in 13-recensioni.css; ai pallini serve solo che il cursore smetta di
   promettere un clic (il disegno resta identico all'oracolo).
   -------------------------------------------------------------------------- */
.s13-pallino[disabled] {
  cursor: default;
}

/* --------------------------------------------------------------------------
   6. MOVIMENTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .avviso-collegamento {
    transition: opacity var(--dur) var(--ease);
  }
}

/* --------------------------------------------------------------------------
   7. ADATTAMENTO
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  html { scroll-padding-top: 96px; } /* barra a 80px */

  .s10-carriera { margin-top: clamp(48px, 6vw, 80px); }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 80px; } /* barra a 64px */

  .s10-carriera { margin-top: 48px; }
}