/* LE PAGINE INTERNE nella veste nuova (serbatoio, voce 6).
   Un foglio solo per tutte: chi siamo, sede, lavora con noi, partner. I colori,
   i caratteri e i bottoni vengono da v2.css — qui c'e' soltanto l'impaginato
   di una pagina di contenuto, che la home non ha. */

.interna { max-width: 1120px; margin: 0 auto; padding: 18px var(--gutter, 16px) 72px }
.interna .briciole { font-family: var(--mono); font-size: 12px; margin: 0 0 14px }
/* IL BERSAGLIO E' PIU' GRANDE DELLA PAROLA. La briciola e' scritta in 12px
   e il suo rettangolo era 43x14: sotto il minimo di 24x24 che si chiede a un
   comando che si tocca con un dito. Il testo NON cambia misura — cresce
   l'area che risponde, con un margine negativo uguale al riempimento perche'
   la riga resti esattamente dov'era (misurato: il testo parte da (18, 61)
   prima e dopo). */
.interna .briciole a { color: var(--blu); text-decoration: none; display: inline-block; padding: 6px 4px; margin: -6px -4px }
.interna .briciole a:hover, .interna .briciole a:focus-visible { text-decoration: underline }

.interna-hero { border-radius: var(--r); padding: 28px 20px 26px; display: grid; gap: 12px }
.interna-hero.notte { background: var(--notte); color: #fff }
.interna-hero .occhiello { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); margin: 0 }
.interna-hero h1 { font-family: var(--display); font-size: clamp(28px, 7vw, 46px); line-height: 1.06; letter-spacing: -.03em; margin: 0 }
.interna-hero h1 span { color: var(--ciano) }
.interna-hero .sommario { margin: 0; color: rgba(255, 255, 255, .84); max-width: 62ch }
.interna .azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0 }

.tre-punti { display: grid; gap: 14px; margin-top: 22px }
@media (min-width: 860px) { .tre-punti { grid-template-columns: repeat(3, 1fr) } }
.tre-punti article { background: #fff; color: var(--inchiostro); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px 16px; display: grid; gap: 8px; align-content: start }
.tre-punti h2 { font-family: var(--display); font-size: 19px; letter-spacing: -.02em; margin: 0 }
.tre-punti p { margin: 0; font-size: 14.5px }

/* La nota della fonte dice DA DOVE viene un numero: e' scritta piccola
   perche' non e' il messaggio, e' la sua garanzia. */
.tre-punti .fonte { font-size: 12.5px; color: var(--testo-2) }

.come-funziona-interna { margin-top: 26px }
/* NOME NUOVO, non la classe condivisa. `.passi` esiste gia' in v2.css con
   quattro colonne fisse: riusandola, a 390 i quattro passi sbordavano fuori
   dallo schermo. Un foglio condiviso non si ridefinisce — gli si sta
   accanto con un nome proprio. */
.come-funziona-interna h2 { font-family: var(--display); font-size: clamp(20px, 4.5vw, 28px); letter-spacing: -.02em; margin: 0 0 14px }
.passi-interna { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 10px }
@media (min-width: 860px) { .passi-interna { grid-template-columns: repeat(2, 1fr) } }
.passi-interna li { counter-increment: p; background: #fff; color: var(--inchiostro); border: 1px solid var(--linea); border-radius: calc(var(--r) - 6px); padding: 14px 16px 14px 52px; position: relative; display: grid; gap: 3px }
.passi-interna li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 12px; color: var(--blu) }
.passi-interna b { font-family: var(--display); font-size: 16px; letter-spacing: -.01em }
.passi-interna span { font-size: 14px; color: var(--testo-2) }

.candidati { margin-top: 26px; border-radius: var(--r); padding: 24px 20px; display: grid; gap: 10px; justify-items: start }
.candidati.notte { background: var(--notte); color: #fff }
.candidati h2 { font-family: var(--display); font-size: clamp(20px, 4.5vw, 28px); letter-spacing: -.02em; margin: 0 }
.candidati p { margin: 0; color: rgba(255, 255, 255, .84); max-width: 62ch }

/* «IN ARRIVO» SI DICE, NON SI FINGE. Finche' le riprese della sede non ci
   sono, qui non entrano immagini di repertorio ne' rendering: un riquadro
   che dichiara l'attesa e' piu' onesto di una foto presa altrove — ed e' la
   stessa regola delle card senza canone. */
.in-arrivo { margin-top: 26px; background: #fff; color: var(--inchiostro); border: 1px solid var(--linea); border-radius: var(--r); padding: 20px 18px; display: grid; gap: 10px }
.in-arrivo h2 { font-family: var(--display); font-size: clamp(20px, 4.5vw, 28px); letter-spacing: -.02em; margin: 0 }
.in-arrivo p { margin: 0; max-width: 68ch }
.in-arrivo .segnaposto { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--linea); border-radius: calc(var(--r) - 6px); background: var(--carta); font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--testo-3) }

/* I SEI RITRATTI. La griglia si adatta da sola con `auto-fit`, e l'ultima
   riga resta allineata a sinistra: la pagina viva aveva provato a CENTRARE
   le ultime due carte con `nth-last-child`, e il giorno che i profili sono
   passati da cinque a sei la griglia si e' sfalsata in produzione. Una
   griglia che si riempie non ha bisogno di sapere quante carte ci sono. */
.persone { margin-top: 26px }
.persone > h2 { font-family: var(--display); font-size: clamp(20px, 4.5vw, 28px); letter-spacing: -.02em; margin: 0 }
.persone > .sotto { margin: 4px 0 16px; color: var(--testo-2) }
/* 300 e non 260: con la colonna piu' stretta a 1440 ne entravano QUATTRO e
   i sei profili si spezzavano in 4+2. A 300 ne entrano tre, e sei persone
   fanno due file piene — senza dover sapere che sono sei. */
.griglia-persone { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) }
.persona { background: #fff; color: var(--inchiostro); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; display: grid; align-content: start }
.persona .ritratto { position: relative; background: var(--carta) }
/* `aspect-ratio` sul contenitore piu' `object-fit` sulla foto: i sei ritratti
   arrivano con proporzioni diverse (946x1178, 1080x1080, 720x821) e senza
   una gabbia le carte della stessa riga verrebbero alte in modo diverso. */
/* LA CORNICE DEVE TAGLIARE. Tre dei sei ritratti portano una `scale()`
   presa dal foglio vivo, e una foto ingrandita esce dal suo riquadro: senza
   `overflow: hidden` qui, a 390 due immagini finivano oltre il bordo dello
   schermo (misurate: -34…424 su 390). Il foglio vivo taglia allo stesso
   modo, su `.team-photo-frame`. */
.persona .ritratto picture { display: block; aspect-ratio: 1; overflow: hidden }
/* Il fondo del taglio e' quello della pagina viva (`50% 52%`); i sei
   scostamenti per persona li scrive l'attrezzo, letti da `webcar-team.css`. */
.persona .ritratto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52% }
.persona .chip-ruolo { position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; background: var(--notte); color: #fff; border-radius: 999px; padding: 5px 10px }
.persona .corpo { padding: 14px 16px 18px; display: grid; gap: 4px }
.persona .reparto { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--blu) }
.persona h3 { font-family: var(--display); font-size: 19px; letter-spacing: -.02em; margin: 2px 0 0 }
.persona .mestiere { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--testo-2) }
.persona .bio { margin: 6px 0 0; font-size: 14px; line-height: 1.5 }

/* LE SETTE POSIZIONI. La carta e' la stessa dei tre punti — stesso bordo,
   stesso raggio, stesso bianco — perche' e' la stessa pagina: quello che
   cambia e' cosa c'e' dentro, non come e' fatto il contenitore. */
.posizioni { margin-top: 30px }
.posizioni .occhiello.scuro { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blu); margin: 0 0 6px }
.posizioni > h2 { font-family: var(--display); font-size: clamp(20px, 4.5vw, 30px); letter-spacing: -.02em; margin: 0 }
.posizioni > .sotto { margin: 6px 0 14px; color: var(--testo-2); max-width: 64ch }
.barra-posizioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 10px 14px; background: #fff; color: var(--inchiostro); border: 1px solid var(--linea); border-radius: 999px; font-size: 13px }
/* Il pallino verde e' l'unico segnale di stato della pagina: gli si sta
   accanto una parola, perche' un colore da solo non lo legge chi non lo
   distingue. */
.barra-posizioni .viva { display: inline-flex; align-items: center; gap: 7px; font-weight: 600 }
.barra-posizioni .viva::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16A34A }
.barra-posizioni b { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em }
.barra-posizioni small { color: var(--testo-2) }
.griglia-ruoli { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) }
.ruolo { background: #fff; color: var(--inchiostro); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px 16px; display: grid; gap: 8px; align-content: start }
/* L'evidenza e' un bordo, non un fondo colorato: la carta resta leggibile
   e non diventa un richiamo pubblicitario in mezzo a sei pari sue. */
.ruolo.in-evidenza { border-color: var(--blu); box-shadow: 0 0 0 1px var(--blu) inset }
.ruolo .testata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 }
.ruolo .reparto { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--testo-2) }
.ruolo .etichetta { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; background: var(--blu); color: #fff; border-radius: 999px; padding: 3px 9px }
.ruolo h3 { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; margin: 0 }
.ruolo .testo { margin: 0; font-size: 14px; line-height: 1.5 }
.ruolo .requisiti { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px }
.ruolo .requisiti li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--testo-2) }
.ruolo .requisiti li::before { content: "·"; position: absolute; left: 4px; color: var(--blu); font-weight: 700 }
.ruolo .azione { margin: 8px 0 0 }

/* LA SEDE LEGALE nella pagina della sede: la stessa carta dei tre punti,
   su una riga sola — e' un dato da documento, non un racconto. */
.sede-legale { margin-top: 22px; background: #fff; color: var(--inchiostro); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px 16px; display: grid; gap: 6px }
.sede-legale h2 { font-family: var(--display); font-size: 19px; letter-spacing: -.02em; margin: 0 }
.sede-legale p { margin: 0; font-size: 14.5px }
.sede-legale a { color: var(--blu) }
.sede-legale .fonte { font-size: 12.5px; color: var(--testo-2) }