/* ============================================================
   bess.caramellosrl.com
   Token derivati da Caramello Brand Guidelines (nov 2024)
   ============================================================ */

/* tono lime scurito per i testi piccoli su fondo chiaro: #B3BA1A dava 1,68
   di contrasto, sotto il minimo di 4,5. #5F6410 arriva a 5,06 sulla sabbia. */
:root{
  --verde:      #1C4538;
  --verde-mid:  #285144;
  --verde-dark: #1A342C;
  --lime:       #BCD530;
  --lime-dark:  #B3BA1A;
  --lime-testo: #5F6410;
  --sabbia:     #EAE5DF;
  --bianco:     #FFFFFF;

  --testo:      #1A342C;
  --testo-soft: #4d6b60;
  --rigo:       rgba(28,69,56,.16);
  --rigo-scuro: rgba(188,213,48,.22);

  --display: "Host Grotesk", system-ui, sans-serif;
  --body:    "Roboto", system-ui, sans-serif;

  --max: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --sez: clamp(64px, 9vw, 128px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bianco);
  color:var(--testo);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.12; margin:0; letter-spacing:-.015em; }
h1{ font-size:clamp(34px, 5.4vw, 62px); }
h2{ font-size:clamp(27px, 3.4vw, 40px); }
h3{ font-size:clamp(19px, 1.9vw, 23px); letter-spacing:-.005em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
strong{ font-weight:500; color:var(--verde); }
ul{ margin:0 0 1.1em; padding-left:1.15em; }
li{ margin-bottom:.4em; }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }

/* ---------- logo ufficiale, ritagliato via CSS senza alterare il file ---------- */
.logo{ --h:26px; display:block; height:var(--h); width:calc(var(--h)*6.593);
       position:relative; overflow:hidden; flex:none; }
.logo img{ position:absolute; width:calc(var(--h)*8.456); height:calc(var(--h)*4.228);
           left:calc(var(--h)*-0.932); top:calc(var(--h)*-1.4995); }
.simbolo{ --h:34px; display:block; height:var(--h); width:calc(var(--h)*1.6367);
          position:relative; overflow:hidden; flex:none; }
.simbolo img{ position:absolute; width:calc(var(--h)*2.3469); height:calc(var(--h)*2.3469);
              left:calc(var(--h)*-0.3551); top:calc(var(--h)*-0.6734); }

/* ---------- eyebrow / etichette ---------- */
.occhiello{
  font-family:var(--display); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lime-testo);
  margin:0 0 18px; display:block;
}
.scuro .occhiello, .hero .occhiello, .verde .occhiello, .banda-testo .occhiello{ color:var(--lime); }

/* ============================ HEADER ============================ */
.testa{
  position:sticky; top:0; z-index:50;
  background:var(--verde-dark);
  border-bottom:1px solid var(--rigo-scuro);
}
.testa .wrap{ display:flex; align-items:center; gap:20px; height:70px; }
.marchio{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.marchio .tag{
  font-family:var(--display); font-weight:500; font-size:12px; letter-spacing:.18em;
  color:var(--lime); padding:4px 8px; border:1px solid rgba(188,213,48,.45);
  border-radius:2px; line-height:1;
}
.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav a{
  font-family:var(--display); font-size:14.5px; font-weight:500; letter-spacing:.01em;
  color:rgba(234,229,223,.82); text-decoration:none; padding:6px 0;
  border-bottom:1.5px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover, .nav a:focus-visible{ color:var(--lime); border-bottom-color:var(--lime); }
.nav a[aria-current="page"]{ color:var(--lime); border-bottom-color:var(--lime); }
.nav .lingua{
  color:var(--verde-dark); background:var(--lime); border-radius:2px;
  padding:6px 11px; border-bottom:none; font-size:12.5px; letter-spacing:.1em;
}
.nav .lingua:hover{ background:var(--sabbia); color:var(--verde-dark); border-bottom-color:transparent; }
.menu-btn{ display:none; }

@media (max-width:1100px){
  .nav{ gap:14px; }
  .nav a:not(.lingua){ display:none; }
  .menu-btn{
    display:inline-flex; align-items:center; gap:8px; background:none; cursor:pointer;
    border:1px solid rgba(188,213,48,.45); color:var(--lime); border-radius:2px;
    font-family:var(--display); font-size:13px; letter-spacing:.1em; padding:7px 12px;
  }
  .testa.aperto .nav{ position:absolute; top:70px; left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:0; background:var(--verde-dark); padding:6px var(--gut) 22px;
    border-bottom:1px solid var(--rigo-scuro); }
  .testa.aperto .nav a:not(.lingua){ display:block; width:100%; padding:12px 0;
    border-bottom:1px solid rgba(188,213,48,.14); }
}

/* ============================ SEZIONI ============================ */
.sez{ padding-block:var(--sez); }
.sez.stretta{ padding-block:calc(var(--sez)*.62); }
.scuro{ background:var(--verde-dark); color:var(--sabbia); }
.scuro h1,.scuro h2,.scuro h3{ color:var(--bianco); }
.scuro strong{ color:var(--lime); }
.sabbia{ background:var(--sabbia); }
.verde{ background:var(--verde); color:var(--sabbia); }
.verde h2,.verde h3{ color:var(--bianco); }

.intro{ font-size:clamp(18px,1.45vw,20.5px); line-height:1.6; max-width:63ch; color:var(--testo-soft); }
/* su fondo scuro il verde attenuato non ha contrasto: 2.28 contro il minimo di 4.5 */
.hero .intro, .scuro .intro, .verde .intro{ color:rgba(234,229,223,.88); }
.hero p, .hero li{ color:rgba(234,229,223,.88); }

/* ============================ HERO ============================ */
.hero{ background:var(--verde-dark); color:var(--sabbia); padding-block:clamp(58px,8vw,104px) clamp(40px,5vw,64px); }
.hero h1{ max-width:19ch; }
.hero h1 em{ font-style:normal; color:var(--lime); }
.hero .intro{ margin-top:26px; max-width:56ch; }

/* ---- schema unifilare: elemento firma ---- */
.schema{ margin-top:clamp(40px,5vw,66px); }
.rail{ display:flex; align-items:stretch; gap:0; }
.nodo{
  flex:1 1 0; min-width:0; padding:20px 18px 18px; position:relative;
  border:1.5px solid var(--lime); background:rgba(188,213,48,.07);
}
.nodo + .nodo{ margin-left:26px; }
.nodo + .nodo::before{
  content:""; position:absolute; left:-27.5px; top:50%; width:27.5px;
  border-top:2px solid var(--lime);
}
.nodo.altri{ border:1.5px dashed rgba(234,229,223,.42); background:none; }
.nodo.altri::before, .nodo.altri + .nodo::before{ border-top:2px dashed rgba(234,229,223,.42); }
.nodo .voce{
  font-family:var(--display); font-weight:500; font-size:16.5px; color:var(--bianco);
  line-height:1.25; margin-bottom:7px;
}
.nodo .chi-nodo{
  font-family:var(--display); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--lime);
}
.nodo.altri .chi-nodo{ color:rgba(234,229,223,.55); }
.nodo .det{ font-size:14.5px; line-height:1.5; color:rgba(234,229,223,.72); margin-top:8px; }
@media (max-width:1180px){
  .rail{ flex-direction:column; }
  .nodo{ display:grid; grid-template-columns:minmax(150px,220px) 1fr;
         grid-template-rows:auto auto auto; gap:4px 28px;
         align-items:start; padding:22px 24px; }
  .nodo svg.ico{ grid-row:1; grid-column:1; margin-bottom:8px; }
  .nodo .voce{ grid-row:2; grid-column:1; margin-bottom:0; }
  .nodo .chi-nodo{ grid-row:3; grid-column:1; }
  .nodo .det{ grid-row:1 / span 3; grid-column:2; margin-top:2px; align-self:center; }
  .nodo + .nodo{ margin-left:0; margin-top:26px; }
  .nodo + .nodo::before{ left:50%; top:-27.5px; width:0; height:27.5px;
    border-top:none; border-left:2px solid var(--lime); }
  .nodo.altri + .nodo::before, .nodo.altri::before{ border-top:none; border-left:2px dashed rgba(234,229,223,.42); }
}
.schema-legenda{
  display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:26px;
  padding-top:20px; border-top:1px solid var(--rigo-scuro);
  font-size:14px; color:rgba(234,229,223,.8);
}
.schema-legenda span{ display:flex; align-items:center; gap:10px; }
.chiave{ width:26px; height:0; border-top:3px solid var(--lime); flex:none; }
.chiave.tratteggio{ border-top:2px dashed rgba(234,229,223,.5); }

/* ============================ PERCORSI ============================ */
.percorsi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:2px; background:var(--rigo); }
.percorso{
  background:var(--bianco); padding:clamp(30px,3.4vw,46px);
  display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit;
  transition:background .2s;
}
.percorso:hover, .percorso:focus-visible{ background:var(--sabbia); }
.percorso .freccia{ margin-top:auto; padding-top:14px; font-family:var(--display); font-weight:500;
  color:var(--verde); display:inline-flex; align-items:center; gap:9px; }
.percorso:hover .freccia{ color:var(--lime-dark); }
.percorso p{ color:var(--testo-soft); }

/* ============================ GRIGLIE ============================ */
.griglia{ display:grid; gap:clamp(26px,3vw,44px); }
/* colonne fisse: con auto-fit un numero pari di schede finiva 3+1 */
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .g3{ grid-template-columns:1fr; } }
@media (max-width:780px){ .g2{ grid-template-columns:1fr; } }
.testa-sez{ max-width:66ch; margin-bottom:clamp(38px,4.4vw,60px); }

.blocco{ padding-top:22px; border-top:2px solid var(--verde); }
.scuro .blocco{ border-top-color:var(--lime); }
.blocco h3{ margin-bottom:10px; }
.blocco p{ color:var(--testo-soft); font-size:16px; }
.scuro .blocco p{ color:rgba(234,229,223,.78); }

/* fasi: numerate perché sono una sequenza reale di commessa */
.fasi{ counter-reset:f; display:grid; gap:0; }
.fase{
  counter-increment:f; display:grid; grid-template-columns:64px 1fr; gap:clamp(16px,3vw,40px);
  padding:30px 0; border-top:1px solid var(--rigo);
}
.fase:last-child{ border-bottom:1px solid var(--rigo); }
.fase::before{
  content:counter(f,decimal-leading-zero);
  font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:.06em;
  color:var(--lime-dark); padding-top:5px;
}
.fase h3{ margin-bottom:8px; }
.fase p{ color:var(--testo-soft); max-width:70ch; }
.scuro .fase p, .verde .fase p, .hero .fase p{ color:rgba(234,229,223,.85); }
.scuro .fase h3{ color:var(--bianco); }
.fase .chi{
  display:inline-block; margin-top:12px; font-family:var(--display); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:2px;
}
.chi.noi{ background:var(--verde); color:var(--lime); }
.chi.loro{ background:var(--sabbia); color:var(--testo-soft); border:1px dashed rgba(28,69,56,.4); }
@media (max-width:600px){ .fase{ grid-template-columns:1fr; gap:6px; } }

/* ============================ REGOLE / PERIMETRO ============================ */
.regole{ display:grid; gap:1px; background:var(--rigo-scuro); border:1px solid var(--rigo-scuro); }
.regola{ background:var(--verde-dark); padding:clamp(24px,2.8vw,34px); }
.regola h3{ font-size:19px; margin-bottom:9px; color:var(--lime); }
.regola p{ color:rgba(234,229,223,.82); font-size:16px; }

/* ============================ NORMATIVE ============================ */
.norme{ width:100%; border-collapse:collapse; font-size:16px; }
.norme th{
  text-align:left; font-family:var(--display); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime-dark);
  padding:0 18px 12px 0; border-bottom:2px solid var(--verde);
}
.norme td{ padding:16px 18px 16px 0; border-bottom:1px solid var(--rigo); vertical-align:top; color:var(--testo-soft); }
.norme td:first-child{ font-family:var(--display); font-weight:500; color:var(--verde); white-space:nowrap; }
@media (max-width:680px){
  .norme, .norme tbody, .norme tr, .norme td{ display:block; width:100%; }
  .norme thead{ display:none; }
  .norme tr{ padding:18px 0; border-bottom:1px solid var(--rigo); }
  .norme td{ border:none; padding:0 0 6px; }
}

/* ============================ CTA / BOTTONI ============================ */
.azioni{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--display); font-weight:500; font-size:16px;
  padding:14px 26px; border-radius:2px; border:1.5px solid transparent;
  transition:background .18s, color .18s, border-color .18s;
}
.btn-lime{ background:var(--lime); color:var(--verde-dark); }
.btn-lime:hover{ background:var(--bianco); }
.btn-linea{ border-color:currentColor; color:inherit; }
.btn-linea:hover{ background:var(--lime); color:var(--verde-dark); border-color:var(--lime); }

/* ============================ CONTATTI ============================ */
.contatti{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,44px); }
@media (max-width:820px){ .contatti{ grid-template-columns:1fr; } }
.contatti a{ text-decoration:none; border-bottom:1px solid var(--lime-dark); }
.contatti a:hover{ color:var(--lime-dark); }
.scuro .contatti a{ border-bottom-color:var(--lime); }
.scuro .contatti a:hover{ color:var(--lime); }
.dato{ font-family:var(--display); font-size:20px; font-weight:500; margin-bottom:6px; }

/* ============================ FOOTER ============================ */
.piede{ background:var(--verde-dark); color:rgba(234,229,223,.78); padding-block:clamp(46px,5vw,68px) 34px; font-size:15px; }
.piede a{ color:rgba(234,229,223,.78); text-decoration:none; }
.piede a:hover{ color:var(--lime); }
.piede-top{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  padding-bottom:34px; border-bottom:1px solid var(--rigo-scuro); }
@media (max-width:760px){ .piede-top{ grid-template-columns:1fr; gap:28px; } }
.piede h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); margin-bottom:14px; }
.piede ul{ list-style:none; padding:0; margin:0; }
.piede li{ margin-bottom:8px; }
.piede-basso{ padding-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:13.5px; color:rgba(234,229,223,.66); }

:focus-visible{ outline:2.5px solid var(--lime); outline-offset:3px; }
.scuro :focus-visible, .testa :focus-visible, .piede :focus-visible{ outline-color:var(--lime); }
.salta{ position:absolute; left:-9999px; }
.salta:focus{ left:var(--gut); top:10px; z-index:99; background:var(--lime); color:var(--verde-dark); padding:10px 16px; }

/* ============================ RIFINITURE ============================ */
.testa-sez h1 + .intro,
.testa-sez h2 + .intro{ margin-top:18px; }

.regole{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .regole{ grid-template-columns:1fr; } }

.verde .intro{ color:rgba(234,229,223,.86); }
.verde .occhiello{ color:var(--lime); }
.verde .blocco{ border-top-color:var(--lime); }
.verde .blocco p{ color:rgba(234,229,223,.78); }

@media (max-width:620px){
  .testa .wrap{ gap:10px; height:62px; }
  .logo{ --h:19px; }
  .marchio{ gap:9px; }
  .marchio .tag{ font-size:10px; padding:3px 6px; letter-spacing:.14em; }
  .menu-btn{ padding:6px 9px; font-size:12px; letter-spacing:.08em; }
  .nav .lingua{ padding:5px 9px; font-size:11.5px; }
  .testa.aperto .nav{ top:62px; }
}

/* ============================ FORM ============================ */
.modulo{ display:grid; gap:20px; max-width:760px; }
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo label{
  font-family:var(--display); font-size:12.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--verde);
}
.scuro .campo label{ color:var(--lime); }
.campo .aiuto{ font-size:13.5px; color:var(--testo-soft); }
.scuro .campo .aiuto{ color:rgba(234,229,223,.7); }
.campo input, .campo select, .campo textarea{
  font-family:var(--body); font-size:16px; color:var(--testo);
  background:var(--bianco); border:1.5px solid rgba(28,69,56,.28);
  border-radius:2px; padding:12px 14px; width:100%;
  transition:border-color .16s;
}
.campo textarea{ min-height:110px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color:var(--verde); }
.campo-doppio{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:600px){ .campo-doppio{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .nodo{ grid-template-columns:1fr; gap:4px; }
  .nodo .chi-nodo{ grid-row:2; } .nodo .det{ grid-row:3; grid-column:1; margin-top:8px; }
}

.consenso{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--testo-soft); }
.scuro .consenso{ color:rgba(234,229,223,.8); }
.consenso input{ width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--verde); }
.consenso a{ color:inherit; }

.modulo .btn{ justify-self:start; border:none; cursor:pointer; font-size:16px; }
.modulo .btn[disabled]{ opacity:.55; cursor:progress; }

.esito{ display:none; padding:16px 18px; border-radius:2px; font-size:15.5px; }
.esito.ok{ display:block; background:var(--verde); color:var(--lime); }
.esito.ko{ display:block; background:#F4E4DC; color:#7A2E12; border:1px solid #C97B54; }
.errore{ border-color:#C97B54 !important; }
.nav a{ white-space:nowrap; }
@media (max-width:1300px) and (min-width:1101px){ .nav a:not(.lingua){ font-size:13.5px; } .nav{ gap:15px; } }

/* ============================ TOPBAR ============================ */
.topbar{ background:var(--verde-dark); border-bottom:1px solid rgba(188,213,48,.14); }
.topbar .wrap{ display:flex; align-items:center; gap:18px; height:46px; font-size:13.5px; }
.topbar .claim{ color:rgba(234,229,223,.6); font-family:var(--display); letter-spacing:.04em; }
.topbar .dx{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.topbar a{ color:rgba(234,229,223,.85); text-decoration:none; font-family:var(--display); }
.topbar a:hover{ color:var(--lime); }
.topbar .cta{ background:var(--lime); color:var(--verde-dark); padding:7px 15px; border-radius:2px;
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.topbar .cta:hover{ background:var(--bianco); color:var(--verde-dark); }
@media (max-width:820px){ .topbar .claim{ display:none; } .topbar .wrap{ height:42px; } }

/* ---- fascia di richiamo normativo ---- */
.fascia{ background:var(--lime); color:var(--verde-dark); }
.fascia .wrap{ display:flex; align-items:center; gap:16px; padding-block:11px; flex-wrap:wrap; }
.fascia .tag-n{ font-family:var(--display); font-weight:500; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; background:var(--verde-dark); color:var(--lime); padding:4px 9px; border-radius:2px; }
.fascia p{ margin:0; font-size:14.5px; font-weight:500; }
.fascia a{ margin-left:auto; font-family:var(--display); font-weight:500; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--verde-dark); text-decoration:none;
  border-bottom:1.5px solid var(--verde-dark); white-space:nowrap; }

/* ============================ HERO 2 COLONNE ============================ */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(188,213,48,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(188,213,48,.05) 1px, transparent 1px);
  background-size:64px 64px;
}
.hero .wrap{ position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,4.5vw,68px); align-items:start; }
@media (max-width:1180px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1 s{ color:rgba(234,229,223,.45); text-decoration-line:line-through;
  text-decoration-color:var(--lime-dark); text-decoration-thickness:5px; }
.hero-grid h1{ font-size:clamp(31px,3.6vw,50px); }

/* ---- scheda credenziali ---- */
.scheda{ border:1px solid rgba(188,213,48,.28); background:rgba(0,0,0,.16); padding:clamp(22px,2.4vw,30px); }
.scheda::before{ content:""; display:block; width:56px; height:4px; background:var(--lime); margin-bottom:20px; }
.scheda h2{ font-size:20px; margin-bottom:20px; }
.scheda dl{ margin:0; }
.scheda .riga{ display:flex; align-items:baseline; gap:14px; padding:11px 0;
  border-bottom:1px solid rgba(234,229,223,.1); font-size:14.5px; }
.scheda .riga:last-child{ border-bottom:none; }
.scheda .riga dt{ color:rgba(234,229,223,.62); }
.scheda .riga dd{ margin:0 0 0 auto; font-family:var(--display); font-weight:500; color:var(--lime); text-align:right; }

/* ---- riga dati sotto l'hero ---- */
/* quattro dati: 4/2/1 colonne */
.dati{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 34px;
  margin-top:clamp(40px,4.5vw,58px); padding-top:30px; border-top:1px solid var(--rigo-scuro); }
.dato-k{ font-family:var(--display); font-weight:500; font-size:clamp(26px,2.6vw,32px); color:var(--lime); line-height:1; }
.dato-l{ display:block; margin-top:10px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(234,229,223,.55); line-height:1.45; }

/* ---- striscia normativa ---- */
.striscia{ background:var(--verde); }
/* striscia: 5 voci, quindi 5 colonne o una sola */
.striscia .wrap{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px 0; padding-block:30px; }
@media (max-width:1100px){ .striscia .wrap{ grid-template-columns:1fr; } }
.striscia div{ padding:2px 20px; border-left:2px solid var(--lime); }
.striscia b{ display:block; font-family:var(--display); font-weight:500; font-size:17px; color:var(--bianco); }
.striscia span{ font-size:13px; color:rgba(234,229,223,.68); }

/* numerazione delle fasi al posto delle etichette contrattuali */
.nodo .chi-nodo{ font-size:11px; letter-spacing:.18em; color:rgba(188,213,48,.75); }
.schema-legenda span{ font-size:14.5px; color:rgba(234,229,223,.72); }

/* ============================ SELETTORE PUBBLICO ============================ */
.chisei{ margin-top:clamp(34px,4vw,52px); padding-top:28px; border-top:1px solid var(--rigo-scuro); }
.chisei-tit{ font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime); margin:0 0 20px; }
/* quattro rotte: 4/2/1 colonne, mai una card orfana */
.rotte{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1180px){ .rotte{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rotte{ grid-template-columns:1fr; } }
@media (max-width:980px){ .dati{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .dati{ grid-template-columns:1fr; } }
.rotta{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  border:1.5px solid rgba(188,213,48,.3); background:rgba(0,0,0,.14);
  padding:20px 20px 18px; transition:border-color .16s, background .16s;
}
.rotta:hover, .rotta:focus-visible{ border-color:var(--lime); background:rgba(188,213,48,.09); }
.rotta b{ font-family:var(--display); font-weight:500; font-size:17px; color:var(--bianco); line-height:1.25; }
.rotta span{ font-size:14px; line-height:1.5; color:rgba(234,229,223,.72); }
.rotta i{ font-style:normal; margin-top:auto; padding-top:12px; font-family:var(--display);
  font-size:13px; letter-spacing:.06em; color:var(--lime); }

/* card percorsi: niente celle vuote grigie */
.percorsi{ background:none; gap:0; }
.percorso{ border-top:2px solid var(--verde); padding-inline:0; padding-block:26px 0; }
.percorso:hover, .percorso:focus-visible{ background:none; }
.percorsi{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); column-gap:clamp(26px,3vw,44px); }

/* su schermi stretti il selettore viene prima della scheda credenziali */
@media (max-width:1180px){
  .hero .wrap{ display:flex; flex-direction:column; }
  .hero-grid{ display:contents; }
  .hero-grid > div:first-child{ order:1; }
  .chisei{ order:2; margin-top:32px; }
  .hero-grid > .scheda{ order:3; margin-top:34px; }
  .dati{ order:4; }
  .schema{ order:5; }
}

/* ============================ GRAFICO PROFILO ============================ */
.grafico-box{ margin-top:clamp(30px,3.5vw,44px); padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--rigo); background:var(--bianco); }
.scuro .grafico-box, .verde .grafico-box{ border-color:var(--rigo-scuro); background:rgba(0,0,0,.16); }
.grafico{ width:100%; height:auto; display:block; }
.grafico .gr{ stroke:rgba(28,69,56,.12); stroke-width:1; }
.grafico .ln{ fill:none; stroke:var(--verde); stroke-width:2.2; stroke-linejoin:round; }
.grafico .lim{ stroke:var(--lime-dark); stroke-width:2; stroke-dasharray:7 5; }
.grafico .lb{ font-family:var(--display); font-size:13px; fill:var(--lime-dark); font-weight:500; }
.grafico .lb2{ font-family:var(--display); font-size:13px; fill:var(--verde); font-weight:500; }
.grafico .ax{ font-family:var(--body); font-size:12px; fill:var(--testo-soft); }
.grafico-did{ margin-top:14px; font-size:14px; color:var(--testo-soft); }

/* icone nelle fasi */
.nodo svg.ico{ width:26px; height:26px; stroke:var(--lime); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px; display:block; }
@media (max-width:1180px){ .nodo svg.ico{ grid-row:1; grid-column:1; margin-bottom:6px; } }
.grafico .lead{ stroke:var(--verde); stroke-width:1.2; }

/* ============================ FOTOGRAFIA ============================ */
.banda-foto{ display:grid; grid-template-columns:1.05fr .95fr; grid-template-rows:minmax(0,1fr);
  background:var(--verde-dark); height:clamp(380px,36vw,500px); overflow:hidden; }
.banda-foto > *{ min-height:0; }
.banda-foto > img{ width:100%; height:100%; object-fit:cover; display:block; }
.banda-testo{ display:flex; align-items:center; padding:clamp(34px,4vw,60px) 0; }
.banda-testo .wrap{ width:100%; max-width:calc(var(--max)/2 + var(--gut)); margin:0 0 0 auto; padding-right:clamp(28px,4vw,64px); }
.banda-testo h2{ color:var(--bianco); max-width:15ch; }
.banda-testo p{ color:rgba(234,229,223,.86); max-width:40ch; margin-top:14px; font-size:17px; }
@media (max-width:820px){
  .banda-foto{ grid-template-columns:1fr; }
  .banda-foto{ height:auto; grid-template-rows:auto auto; }
  .banda-foto > img{ height:clamp(240px,52vw,360px); order:2; }
  .banda-testo{ order:1; }
  .banda-testo .wrap{ max-width:none; margin:0; padding-inline:var(--gut); }
}

.foto-lato{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,52px); align-items:center; }
@media (max-width:820px){ .foto-lato{ grid-template-columns:1fr; } }
.foto-lato figure{ margin:0; }
.foto-lato img{ width:100%; height:auto; display:block; border:1px solid var(--rigo); }
.scuro .foto-lato img, .verde .foto-lato img{ border-color:var(--rigo-scuro); }
.foto-lato figcaption{ margin-top:10px; font-size:13.5px; color:var(--testo-soft); }
.scuro .foto-lato figcaption{ color:rgba(234,229,223,.6); }

/* ============================ CAPACITÀ (infografica) ============================ */
/* sei voci: colonne fisse 3/2/1, cosi' non restano mai celle vuote */
.capacita{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--rigo); border:1px solid var(--rigo); }
@media (max-width:900px){ .capacita{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .capacita{ grid-template-columns:1fr; } }
.scuro .capacita, .verde .capacita{ background:var(--rigo-scuro); border-color:var(--rigo-scuro); }
.cap{ background:var(--sabbia); padding:clamp(26px,2.8vw,36px) clamp(18px,2vw,26px); text-align:center;
  display:flex; flex-direction:column; }
.sez.sabbia .cap{ background:var(--bianco); }
.scuro .cap{ background:var(--verde-dark); }
.cap svg{ width:42px; height:42px; margin:0 auto 14px; display:block; stroke:var(--lime-dark);
  stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.scuro .cap svg{ stroke:var(--lime); }
.cap b{ display:block; font-family:var(--display); font-weight:500; font-size:16.5px;
  color:var(--verde); line-height:1.25; }
.scuro .cap b{ color:var(--bianco); }
.cap span{ display:block; margin-top:8px; font-size:14px; line-height:1.5; color:var(--testo-soft); }
.foto-lato figcaption{ color:var(--testo-soft); }
.scuro .cap span{ color:rgba(234,229,223,.7); }

/* tre criteri in forma compatta */
/* tre criteri: 3 o 1 colonna, mai 2+1 */
.criteri{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); }
@media (max-width:780px){ .criteri{ grid-template-columns:1fr; } }
.criterio{ border-top:2px solid var(--lime-dark); padding-top:18px; }
.criterio b{ display:block; font-family:var(--display); font-weight:500; font-size:18px; color:var(--verde); margin-bottom:8px; }
.criterio span{ font-size:15px; color:var(--testo-soft); line-height:1.55; }
.scuro .criterio span, .verde .criterio span{ color:rgba(234,229,223,.85); }
.scuro .criterio b, .verde .criterio b{ color:var(--bianco); }

/* campo file */
.campo input[type=file]{ padding:11px 12px; background:var(--bianco); font-size:14.5px; }
.campo input[type=file]::file-selector-button{ font-family:var(--display); font-size:13px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--verde); background:none;
  color:var(--verde); padding:7px 13px; border-radius:2px; margin-right:14px; cursor:pointer; }
.campo input[type=file]::file-selector-button:hover{ background:var(--lime); border-color:var(--lime); }
.banda-foto > img{ filter:saturate(.86) contrast(1.03); }