/* International Council — foglio di stile unico del sito di prova.
   Colori veri del marchio, presi da assets/css/main.css del sito vero:
   navy #002F56 · inchiostro #0F1E46 · accento #C14048 · grigio #64748C
   Impostazione Apple: fondo bianco, titoli grandi, molta aria, poco colore. */

:root{
  --navy:#002F56; --navy-deep:#001a30; --inchiostro:#0F1E46;
  --accento:#C14048; --accento-chiaro:#ff8a90; --grigio:#5B6B82; --linea:#E2E6EA; /* grigio scurito il 26/09: #64748C faceva 4,47:1 sul fondo alternato, sotto la soglia 4,5 */
  --fondo:#fff; --fondo-alt:#F8F8F8;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Inter,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--fondo); color:var(--inchiostro); font-family:var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:var(--accento); text-decoration:none;}
img{max-width:100%;}
.contenuto{max-width:1060px; margin:0 auto; padding:0 24px;}
.stretto{max-width:820px;}

/* Testata comune a tutte le pagine */
header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.07);}
.barra{max-width:1060px; margin:0 auto; padding:0 24px; height:48px; display:flex; align-items:center; justify-content:space-between;}
.marchio{font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--navy);}
nav ul{list-style:none; display:flex; gap:24px; margin:0; padding:0;}
nav a{font-size:14px; color:var(--inchiostro); opacity:.82;}
nav a:hover, nav a.qui{opacity:1; color:var(--accento);}
nav a.lingua-sw{font-weight:700; letter-spacing:.06em; border:1px solid var(--linea); border-radius:999px; padding:2px 9px; opacity:1;}

/* Titoli */
.titolone{font-size:clamp(40px,7vw,86px); line-height:1.03; font-weight:700; letter-spacing:-.03em; margin:0 0 20px; text-align:center;}
.titolo-pagina{font-size:clamp(34px,5.4vw,66px); line-height:1.05; font-weight:700; letter-spacing:-.028em; margin:0 0 20px; text-align:center;}
.titolo-sez{font-size:clamp(30px,4.4vw,54px); line-height:1.08; font-weight:700; letter-spacing:-.024em; margin:0 0 18px; text-align:center;}
.occhiello-sez{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accento); text-align:center; margin:0 0 14px;}
.sottotitolo{font-size:clamp(17px,1.9vw,23px); line-height:1.42; color:var(--grigio); text-align:center; margin:0 auto 30px; max-width:720px;}
.acc{color:var(--accento);}

.bottoni{display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap;}
.pillola{background:var(--navy); color:#fff; font-size:17px; padding:13px 28px; border-radius:980px; transition:transform .2s ease, opacity .2s ease;}
.pillola:hover{opacity:.9; transform:translateY(-1px);}
.pillola.chiara{background:#fff; color:var(--navy);}
.freccia{font-size:17px; color:var(--accento);}
.freccia:hover{text-decoration:underline;}

section{padding:64px 0; position:relative;}
section.stretta{padding:56px 0;}
.alt{background:var(--fondo-alt);}
.scura{background:var(--navy); color:#fff;}
.scura .titolo-sez,.scura .titolo-pagina{color:#fff;}
.scura .sottotitolo{color:rgba(255,255,255,.7);}
.scura .occhiello-sez{color:var(--accento-chiaro);}

/* Foto */
.cornice-foto{margin-top:24px; overflow:hidden; border-radius:22px;}
.cornice-foto img{width:100%; height:min(52vh,440px); object-fit:cover; display:block;}
.cornice-foto.bassa img{height:min(48vh,420px);}
.didascalia{text-align:center; font-size:15px; color:var(--grigio); margin:12px 0 0;}

/* Numeri */
.numeri{display:grid; grid-template-columns:repeat(4,1fr); margin-top:54px;}
.numero{padding:0 18px; border-left:1px solid rgba(255,255,255,.16); text-align:center;}
.numero:first-child{border-left:0;}
.cifra{font-size:clamp(44px,5.4vw,66px); font-weight:700; letter-spacing:-.035em; line-height:1; color:#fff;}
.cifra small{font-size:.45em; font-weight:600; margin-left:4px;}
.etichetta{font-size:15px; font-weight:600; margin-top:12px; color:#fff;}
.nota{font-size:15px; color:rgba(255,255,255,.6); margin-top:6px; line-height:1.45;}

/* Schede */
.griglia-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px;}
.griglia-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px;}
.griglia-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px;}
.scheda{background:#fff; border:1px solid var(--linea); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;}
.scheda:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(0,47,86,.12);}
.scheda img{width:100%; height:210px; object-fit:cover; display:block;}
.scheda .testo{padding:26px 26px 28px; flex:1; display:flex; flex-direction:column;}
.scheda .occhiello{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accento);}
/* h2 e h3 uguali dentro le schede: cosi' la prima fila di schede sotto l'h1 puo' essere h2 senza saltare un livello */
.scheda h2,.scheda h3{font-size:24px; font-weight:700; letter-spacing:-.018em; margin:10px 0 10px; line-height:1.2;}
.scheda p{font-size:15px; line-height:1.55; color:var(--grigio); margin:0 0 16px;}
.scheda ul{margin:0 0 16px; padding-left:18px;}
.scheda li{font-size:15px; line-height:1.6; color:var(--grigio); margin-bottom:5px;}
.scheda .freccia{font-size:15px; margin-top:auto;}
.mini{padding:24px 22px 26px;}
.mini h2,.mini h3{font-size:19px; margin:8px 0 8px;}
.mini p{font-size:15px;}

/* Programma lungo: numero grande a sinistra, contenuto a destra */
.programma{display:grid; grid-template-columns:200px 1fr; gap:40px; padding:54px 0; border-top:1px solid var(--linea);}
.programma .indice{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accento);}
.programma h2{font-size:clamp(26px,3.2vw,40px); font-weight:700; letter-spacing:-.022em; line-height:1.14; margin:0 0 16px;}
.programma p{font-size:17px; line-height:1.62; color:var(--grigio); margin:0 0 18px;}
.programma ul{margin:0; padding-left:20px;}
.programma li{font-size:16px; line-height:1.66; color:var(--grigio); margin-bottom:8px;}
.programma li b{color:var(--inchiostro); font-weight:600;}

/* Listino */
.listino{max-width:760px; margin:44px auto 0;}
.voce{display:flex; align-items:baseline; gap:18px; padding:20px 0; border-top:1px solid var(--linea);}
.voce:last-child{border-bottom:1px solid var(--linea);}
.voce .cosa{flex:1; font-size:17px; font-weight:600;}
.voce .dett{font-size:15px; color:var(--grigio); font-weight:400; display:block; margin-top:4px;}
.voce .prezzo{font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--navy); white-space:nowrap;}

/* Nastro */
.nastro{overflow:hidden; margin-top:34px; padding:18px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);}
.nastro-riga{display:flex; gap:44px; white-space:nowrap; will-change:transform;}
.nastro-riga span{font-size:17px; font-weight:600; color:var(--navy); opacity:.62;}

/* Cruscotto HR */
.cruscotto{max-width:840px; margin:44px auto 0; border:1px solid var(--linea); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 20px 50px rgba(0,47,86,.09);}
.cruscotto .testa{display:flex; gap:8px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--linea); background:var(--fondo-alt);}
.pallino{width:10px; height:10px; border-radius:50%; background:#ddd;}
.cruscotto .titolo{font-size:12px; color:var(--grigio); margin-left:10px;}
.riga-hr{display:flex; gap:18px; padding:20px 22px; border-top:1px solid var(--linea); align-items:flex-start;}
.riga-hr:first-of-type{border-top:0;}
.riga-hr .chiave{flex:0 0 190px; font-size:15px; font-weight:700; color:var(--navy);}
.riga-hr .valore{font-size:15px; line-height:1.55; color:var(--grigio);}
.riga-hr .barretta{flex:0 0 90px; height:6px; border-radius:3px; background:var(--linea); overflow:hidden; margin-top:6px;}
.riga-hr .barretta i{display:block; height:100%; width:0; background:var(--accento);}

/* Tre riquadri */
.tre{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.garanzia{background:#fff; border:1px solid var(--linea); border-radius:18px; padding:26px 24px 28px;}
.garanzia h3{font-size:19px; font-weight:700; margin:0 0 10px; letter-spacing:-.01em;}
.garanzia p{font-size:15px; line-height:1.55; color:var(--grigio); margin:0;}

/* Sedi */
.sedi{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:42px;}
.sede{background:#fff; border:1px solid var(--linea); border-radius:14px; padding:18px 22px; min-width:196px; transition:transform .25s ease;}
.sede:hover{transform:translateY(-3px);}
.sede strong{display:block; font-size:18px; letter-spacing:-.01em;}
.sede span{display:block; font-size:15px; color:var(--grigio); margin-top:5px;}

footer{border-top:1px solid var(--linea); padding:42px 0 64px; font-size:14px; color:var(--grigio);}
footer .riga{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
footer a{color:var(--grigio);} footer a:hover{color:var(--accento);}
.prova{background:#fff3cd; border-bottom:1px solid #f0d98c; color:#6b5400; font-size:12px; text-align:center; padding:7px 16px;}

.sale{opacity:0; transform:translateY(28px);}
.parola{display:inline-block; opacity:0; transform:translateY(26px);}

@media (prefers-reduced-motion:reduce){
  .sale,.parola{opacity:1 !important; transform:none !important;}
}
@media (max-width:900px){
  .griglia-2,.griglia-3,.griglia-4{grid-template-columns:1fr;}
  .numeri{grid-template-columns:repeat(2,1fr); row-gap:40px;}
  .numero:nth-child(3){border-left:0;}
  .programma{grid-template-columns:1fr; gap:14px; padding:40px 0;}
  .tre{grid-template-columns:1fr;}
  .riga-hr{flex-direction:column; gap:8px;} .riga-hr .chiave{flex:none;}
  /* telefono: la barra va a capo e il menu scorre in orizzontale, cosi' "Sedi e contatti" non finisce fuori dal bordo */
  .barra{height:auto; flex-wrap:wrap; gap:4px 12px; padding:8px 16px;}
  nav{max-width:100%;}
  nav ul{gap:14px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none;}
  nav ul::-webkit-scrollbar{display:none;}
  nav a{font-size:14px;}
  section{padding:64px 0;}
}

/* 26/09 sera: la fascia dei numeri era troppo alta, soprattutto in tedesco dove le etichette
   vanno a capo due volte. Respiro, titolo e cifre piu' contenuti: stessa fascia, 150 px in meno. */
section.scura.stretta{padding:44px 0;}
section.scura.stretta .titolo-sez{font-size:clamp(26px,3.2vw,40px); margin-bottom:8px;}
.numeri{margin-top:34px;}
.numeri .cifra{font-size:clamp(36px,4vw,50px);}
.numeri .etichetta{margin-top:10px;}

/* fascia dei soli numeri (home): senza titolo sopra non serve il distacco */
.contenuto > .numeri:first-child{margin-top:0;}

/* 27/09: le domande si devono poter toccare col dito (44 px, regola WCAG 2.2)
   Lighthouse segnalava target-size sulle fisarmoniche delle pagine aziendali. */
details > summary{min-height:44px; display:flex; align-items:center; gap:10px; padding:10px 0;}


/* ===== PELLE DEL MARCHIO (27/09/2026) =====================================
   Pinuccia: "mi piace quasi di piu' il vecchio". Aveva ragione su tre cose che
   il sito online ha e questo aveva perso: la barra navy, il marchio vero al
   posto della scritta, e la testata con la foto a tutta larghezza e il claim
   sopra. La struttura resta quella nuova, cambia la faccia. */
:root{ --navy-marchio:#002855; --giallo:#FBCE0D; }

header{ background:var(--navy-marchio); }
.barra{ max-width:1320px; height:64px; }
.marchio a{ display:flex; align-items:center; }
.marchio img{ height:30px; width:auto; display:block; }
header nav a{ color:#fff; opacity:.92; }
header nav a:hover{ opacity:1; }
header nav a.qui{ color:#fff; opacity:1; border-bottom:2px solid var(--giallo); padding-bottom:2px; }
header .lingua-sw{ color:#fff; opacity:.8; }

/* testata della home: foto a tutta larghezza, claim sopra */
.testata{ position:relative; min-height:78vh; display:flex; align-items:flex-end;
  overflow:hidden; color:#fff; padding:0 0 64px; }
.testata .sfondo{ position:absolute; inset:0; background:center 42%/cover no-repeat; transform:scale(1.03); }
.testata .velo{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,20,40,.42), rgba(0,20,40,.18) 42%, rgba(0,20,40,.58)); }
.testata .contenuto{ position:relative; z-index:2; margin-left:max(24px,calc((100% - 1320px)/2 + 24px)); margin-right:auto; }
.testata h1{ font-size:clamp(34px,3.7vw,58px); line-height:1.0; font-weight:700; letter-spacing:-.035em;
  text-transform:uppercase; margin:0 0 18px; text-align:left; max-width:none; }
.testata .sottotitolo{ color:rgba(255,255,255,.92); text-align:left; max-width:60ch; margin:0 0 12px; }
.testata .bottoni{ justify-content:flex-start; margin-top:22px; }
.testata .pillola{ background:var(--giallo); color:var(--navy-marchio); font-weight:600; }
.testata .freccia{ color:#fff; border-bottom-color:rgba(255,255,255,.6); }
@media (max-width:760px){ .testata{ min-height:88vh; padding-bottom:44px; } .testata h1{ max-width:100%; } }


/* scheda dei test sovrapposta alla foto, come sul sito online */
.testata .scheda-test{ position:absolute; z-index:3; right:max(24px,calc((100% - 1320px)/2 + 24px));
  top:auto; bottom:64px; width:392px; background:#fff; color:var(--navy); border-radius:16px;
  padding:22px 24px; box-shadow:0 18px 50px rgba(0,20,40,.28); }
.scheda-test .occhiello{ font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grigio); margin:0 0 8px; }
.scheda-test h2{ font-size:20px; line-height:1.25; font-weight:700; margin:0 0 6px; }
.scheda-test p{ font-size:15px; color:var(--grigio); margin:0 0 14px; }
.scheda-test .pillola{ font-size:14px; padding:9px 18px; background:var(--navy); color:#fff; }
@media (max-width:1100px){ .testata .scheda-test{ display:none; } }

/* la parola del claim che cambia */
.rota{ display:inline-block; min-width:4.2ch; }

/* barra trasparente sulla foto, piena quando si scorre */
body.con-testata header{ position:fixed; top:0; left:0; right:0; z-index:90;
  background:transparent; transition:background .25s ease; }
body.con-testata header.piena{ background:var(--navy-marchio); }
body.con-testata .testata{ padding-top:64px; }