/* Dott. Oscar Gonzales — home (step 5, design approvato «versione 6»)
   Colori misurati dal design (confronta-design.py --colori + campioni per zona), in #hex.
   Caratteri serviti dal sito: Barlow Condensed ExtraBold (titoli) e Inter (testi), licenza OFL. */

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

:root {
  /* colori del design */
  --sfondo: #F6F7F6;
  --bianco: #FFFFFF;
  --petrolio: #142E38;
  --petrolio-chiaro: #183B46;
  --petrolio-scuro: #132F38;
  --petrolio-contatti: #163641;
  --blu: #3E798E;
  --blu-cerchio: #4E91A8;
  --inchiostro: #0B1A28;
  --testo: #26303D;
  --testo-tenue: #5D6A73;
  --grigio-chiaro: #A1ABB1;
  --ellisse: #CCE5ED;
  --azzurro-vivo: #86D2E8;
  --ghiaccio: #EFF5F7;
  --attestato: #E8F2F6;
  --azzurro-alto: #E4F1F6;
  --azzurro-basso: #D7EAF1;
  --chiaro-alto: #FDFEFE;
  --chiaro-basso: #F1F5F6;
  --bordo: #DCE5E9;

  /* misure */
  --wrap: 1320px;
  --wrap-largo: 1364px;
  --margine: clamp(20px, 4.2vw, 60px);
  --raggio: 16px;
  --raggio-grande: 24px;
  --ombra-scheda: 0 14px 34px rgba(11, 26, 40, 0.08), 0 2px 6px rgba(11, 26, 40, 0.05);
  --titoli: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --testi: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --testata-h: 72px;
  --barra-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--testi);
  font-size: 17px;
  line-height: 1.5;
  font-optical-sizing: auto;
  overflow-x: hidden;
  padding-top: calc(var(--testata-h) + env(safe-area-inset-top, 0px));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.menu-aperto { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }
/* niente parole sole in fondo a una riga: i titoli si bilanciano, i paragrafi evitano l'ultima parola sola */
h1, h2, h3, dt, .scheda__voci strong, .formazione strong, .formazione em, .oscar__ruolo, .foto-scheda__link, .sezione__link,
.attestati__spazi li, .piede__chi p { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
.intero { white-space: nowrap; }
/* il numero di telefono in un pezzo solo, dentro il suo link: resta in riga col testo accanto, in ogni contesto */
a[href^="tel:"] .intero { display: inline; margin: 0; color: inherit; }
a, button, input, textarea, label { touch-action: manipulation; }

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--margine));
  margin-inline: auto;
}
.wrap--largo { width: min(var(--wrap-largo), 100% - 2 * max(12px, var(--margine) - 20px)); }

.nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--petrolio); color: var(--bianco); text-decoration: none; font-weight: 600;
}
.salta:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }

/* icone del kit (svg e png), colorate con currentColor */
.ico {
  display: inline-block;
  flex: none;
  width: 44px; height: 44px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* ───────── pulsanti ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 999px;
  font: 600 17px/1.2 var(--testi);
  text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out), box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn--blu { background: var(--blu); color: var(--bianco); }
.btn--scuro { background: var(--petrolio); color: var(--bianco); }
.btn--azzurro { background: var(--azzurro-vivo); color: var(--petrolio); }
.btn--azzurro .ico { width: 28px; height: 28px; }
.btn--pieno { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--blu:hover { background: #356F84; }
  .btn--scuro:hover { background: #1F414D; }
  .btn--azzurro:hover { background: #9BE1ED; }
}
.btn--freccia { padding: 0 8px 0 30px; min-height: 62px; gap: 18px; font-size: 18px; }
.btn__cerchio {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blu-cerchio); color: var(--bianco);
  transition: transform 0.2s var(--ease-out);
}
.btn__cerchio .ico { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .btn--freccia:hover .btn__cerchio { transform: translateX(3px); }
}

/* ───────── testata ───────── */
/* Fissa: scorrendo compare il fondo (opacità) e la riga si compatta (transform); l'impaginazione non si muove. */
.testata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
}
.testata::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--barra-h) + env(safe-area-inset-top, 0px));
  background: var(--sfondo);
  box-shadow: 0 1px 0 var(--bordo), 0 10px 28px rgba(11, 26, 40, 0.07);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.testata.is-scorsa::before { opacity: 1; }
html.menu-aperto .testata::before { opacity: 1; box-shadow: none; }
.testata__riga { position: relative; display: flex; align-items: center; gap: 24px; min-height: var(--testata-h); transition: transform 0.45s var(--ease-out); }
.testata__riga a, .testata__riga button { pointer-events: auto; }
.testata__logo { display: block; flex: none; margin-right: auto; }
.testata__logo img { width: auto; height: 56px; transform-origin: 0 50%; transition: transform 0.45s var(--ease-out); }
.testata.is-scorsa .testata__logo img { transform: scale(0.86); }
.menu { display: none; }
.hamburger {
  display: inline-grid; place-content: center; gap: 6px;
  width: 48px; height: 48px; padding: 0; margin-right: -6px;
  border: 0; border-radius: 12px; background: transparent; color: var(--inchiostro);
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background-color 0.15s ease, transform 0.14s var(--ease-out);
}
.hamburger span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease-out), opacity 0.18s ease; }
.hamburger:active { background: rgba(11, 26, 40, 0.06); transform: scale(0.94); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 1023px) {
  /* menu a tutto schermo: si apre in 260 ms con le voci una dopo l'altra, si chiude più in fretta (160 ms) */
  .menu {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 30px;
    height: 100dvh; padding: calc(var(--testata-h) + 28px + env(safe-area-inset-top, 0px)) var(--margine) calc(32px + env(safe-area-inset-bottom, 0px));
    background: var(--sfondo);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
  }
  .menu.aperto { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.26s var(--ease-out); }
  .menu__voci { display: grid; gap: 6px; }
  .menu__voci li, .menu__cta { opacity: 0; translate: 0 18px; transition: opacity 0.12s ease, translate 0.16s var(--ease-out); }
  .menu.aperto .menu__voci li, .menu.aperto .menu__cta { opacity: 1; translate: none; transition: opacity 0.36s var(--ease-out), translate 0.5s var(--ease-out); }
  .menu.aperto .menu__voci li:nth-child(1) { transition-delay: 60ms; }
  .menu.aperto .menu__voci li:nth-child(2) { transition-delay: 110ms; }
  .menu.aperto .menu__voci li:nth-child(3) { transition-delay: 160ms; }
  .menu.aperto .menu__voci li:nth-child(4) { transition-delay: 210ms; }
  .menu.aperto .menu__cta { transition-delay: 270ms; }
  .menu__voci a {
    display: inline-block; padding: 10px 0;
    font: 800 40px/1 var(--titoli); text-transform: uppercase; color: var(--inchiostro); text-decoration: none;
    -webkit-user-select: none; user-select: none;
    transition: color 0.15s ease, transform 0.14s var(--ease-out);
  }
  .menu__voci a:active { color: var(--blu); transform: scale(0.97); }
  .menu__cta { align-self: flex-start; min-height: 56px; }
  .menu__apri { display: none; }
  .menu__etichetta { display: block; padding: 6px 0 2px; font: 800 13px/1.2 var(--testi); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blu); }
  .menu__sotto { display: grid; gap: 2px; margin: 0 0 6px; padding-left: 16px; border-left: 2px solid var(--bordo); }
  .menu__sotto a { padding: 7px 0; font-size: 30px; }
}

/* ───────── titoli ───────── */
.titolo-sezione {
  font: 800 clamp(34px, 4.9vw, 68px)/0.95 var(--titoli);
  text-transform: uppercase; letter-spacing: -0.003em;
  color: var(--inchiostro);
}
.titolo-sezione--medio { font-size: clamp(32px, 4.4vw, 60px); }
.titolo-sezione--piccolo { font-size: clamp(28px, 3.6vw, 50px); }
.occhiello {
  font: 800 13px/1.2 var(--testi); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--inchiostro);
}
.didascalia { margin-top: 16px; text-align: center; font-size: 13px; font-style: italic; color: var(--testo-tenue); }

/* ───────── hero ───────── */
/* 6-quater, giro 2 (05/11/2026): la hero della home è una fascia scura con la foto larga 16:9 (Oscar nel terzo destro,
   i due terzi a sinistra calmi per il titolo, sotto una velatura petrolio del kit). Da telefono: il testo, poi la foto
   in verticale tagliata su Oscar, poi la scheda «La valutazione iniziale» che si appoggia sul bordo della foto.
   Il punto della foto che resta in vista si regola con --fuoco (computer e tablet) e --fuoco-telefono. */
.hero { position: relative; z-index: 2; }
.hero__wrap { position: relative; display: grid; }
.hero__testo { position: relative; z-index: 2; }
.hero__titolo {
  margin-top: 14px;
  font: 800 clamp(46px, 15.4vw, 66px)/0.86 var(--titoli);
  text-transform: uppercase; letter-spacing: -0.004em;
  color: var(--inchiostro);
}
.hero__titolo span { display: block; }
.hero__titolo .hero__titolo-blu { color: var(--blu); }
.hero__sotto { margin-top: 16px; max-width: 34ch; font-size: 17px; line-height: 1.45; color: var(--testo); }
.hero__firma { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--testo); }
.hero__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.hero__azioni .btn--freccia { min-height: 56px; padding-left: 22px; font-size: 16px; gap: 12px; text-align: left; }
.hero__azioni .btn__cerchio { width: 42px; height: 42px; flex: none; }

.hero--foto { --fuoco: 60% 40%; --fuoco-telefono: 50% 40%; }
.hero--foto .hero__visivo { position: relative; z-index: 1; margin-top: 26px; }
.hero__foto { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; aspect-ratio: 4 / 5; background: var(--petrolio-chiaro); }
.hero__foto picture { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco-telefono); }
.scheda {
  position: relative; z-index: 2;
  margin: -66px 12px 0;
  padding: 16px 18px 10px;
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra-scheda);
}
.scheda__titolo { font: 700 17px/1.15 var(--testi); color: var(--inchiostro); letter-spacing: -0.01em; }
.scheda__voci { margin-top: 8px; }
.scheda__voci li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--bordo); font-size: 13.5px; line-height: 1.3; color: var(--testo); }
.scheda__voci li:first-child { border-top: 0; }
.scheda__voci .ico { width: 32px; height: 32px; color: var(--blu); }
.scheda__voci strong { display: block; font-size: 14.5px; color: var(--inchiostro); }

/* ───────── un percorso costruito su di te ───────── */
/* (giro 2: la fascia è la sezione stessa, «.fondo-petrolio»; la scheda dentro tiene solo l'impaginazione) */
.percorso__scheda { color: var(--bianco); }
.percorso__titolo { font: 800 15px/1.2 var(--testi); letter-spacing: 0.03em; text-transform: uppercase; color: var(--bianco); }
.percorso__voci { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 20px; }
.percorso__voce .ico { width: 38px; height: 38px; color: var(--azzurro-vivo); }
.percorso__voce h3 { margin-top: 10px; font: 700 17px/1.2 var(--testi); color: var(--bianco); }
.percorso__voce p { margin-top: 8px; font-size: 14px; line-height: 1.4; color: #C9D3D8; }

/* ───────── schede con foto (aree e dove) ───────── */
.scorre {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine);
  margin-inline: calc(-1 * var(--margine)); margin-top: -6px; padding: 10px var(--margine) 36px;
  scrollbar-width: none;
}
.scorre::-webkit-scrollbar { display: none; }
.scorre > * { scroll-snap-align: start; }
.foto-scheda { display: flex; flex-direction: column; }
.foto-scheda__foto { position: relative; overflow: hidden; border-radius: var(--raggio) var(--raggio) 0 0; aspect-ratio: 2.1 / 1; background: var(--bordo); }
.foto-scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.foto-scheda__testo {
  position: relative; flex: 1;
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: -14px; padding: 18px 18px 20px;
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra-scheda);
}
.foto-scheda__testo .ico { width: 38px; height: 38px; color: var(--blu); }
.foto-scheda__testo h3 { font: 700 18px/1.2 var(--testi); color: var(--inchiostro); letter-spacing: -0.01em; }
.foto-scheda__testo p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--testo); }
@media (max-width: 639px) {
  .aree__schede { grid-auto-columns: 86%; }
  .aree .foto-scheda__testo { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; column-gap: 12px; }
  .aree .foto-scheda__testo > div { display: contents; }
  .aree .foto-scheda__testo p { grid-column: 1 / -1; margin-top: 10px; font-size: 14px; }
  .aree .foto-scheda__testo .ico { width: 34px; height: 34px; }
}
.foto-scheda--breve .foto-scheda__testo { align-items: center; padding: 14px 16px 16px; }
.foto-scheda__link, .sezione__link { margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.foto-scheda__link a, .sezione__link a { color: var(--blu); text-decoration: none; -webkit-user-select: none; user-select: none; transition: color 0.15s ease; }
.foto-scheda__link a::after, .sezione__link a::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -4px; background-color: currentColor;
  -webkit-mask: url(/assets/icone/freccia-destra.svg) center / contain no-repeat; mask: url(/assets/icone/freccia-destra.svg) center / contain no-repeat;
  transition: transform 0.2s var(--ease-out);
}
.foto-scheda__link a:active, .sezione__link a:active { color: var(--petrolio); }
.sezione__link { margin-top: 18px; }
.sezione__link--chiaro a { color: var(--azzurro-vivo); }
@media (hover: hover) and (pointer: fine) {
  .foto-scheda__link a:hover, .sezione__link a:hover { color: var(--petrolio); }
  .sezione__link--chiaro a:hover { color: var(--bianco); }
  .foto-scheda__link a:hover::after, .sezione__link a:hover::after { transform: translateX(3px); }
}
.foto-scheda--breve .foto-scheda__testo h3 { font-size: 16px; }
.foto-scheda--breve .foto-scheda__testo .ico { width: 32px; height: 32px; }
@media (hover: hover) and (pointer: fine) {
  .foto-scheda:hover .foto-scheda__foto img { transform: scale(1.04); }
}

/* ───────── da cosa vuoi ripartire ───────── */
.aree__schede { margin-top: 12px; }
@media (max-width: 1023px) { .aree .didascalia { margin-top: -6px; } }

/* ───────── passo dopo passo ───────── */
.passi__elenco { display: grid; gap: 12px; margin-top: 20px; counter-reset: none; }
.passo {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--ghiaccio);
}
.passo__testa { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.passo__numero { font: 800 34px/1 var(--titoli); color: var(--blu); min-width: 1.4em; }
.passo .ico { width: 34px; height: 34px; color: var(--blu); }
.passo h3 { align-self: end; font: 700 16.5px/1.2 var(--testi); color: var(--inchiostro); }
.passo p { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--testo); }

/* ───────── competenza, movimento, persona ───────── */
.oscar__griglia { display: grid; gap: 22px; }
.oscar__ritratto { overflow: hidden; border-radius: var(--raggio-grande); aspect-ratio: 1 / 1.02; background: var(--bordo); }
.oscar__ritratto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.oscar__corpo { display: grid; grid-template-columns: 1fr 36%; column-gap: 16px; align-items: start; margin-top: 14px; }
.oscar__presentazione { display: contents; }
.oscar__nome { grid-column: 1; grid-row: 1; }
.oscar__frase { grid-column: 1 / -1; grid-row: 3; }
.oscar__logo-maglia { grid-column: 2; grid-row: 1 / span 2; }
.oscar__nome, .oscar__ruolo { align-self: end; }
.oscar__numeri { grid-column: 1 / -1; grid-row: 4; }
.oscar__formazione { grid-column: 1 / -1; grid-row: 5; }
.oscar__nome { font: 700 21px/1.2 var(--testi); color: var(--inchiostro); letter-spacing: -0.01em; }
.oscar__ruolo { grid-column: 1; grid-row: 2; margin-top: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--blu); }
.oscar__frase { margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--testo); }
.oscar__formazione a { color: inherit; text-decoration: underline; text-decoration-color: var(--bordo); text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color 0.15s ease, color 0.15s ease; }
@media (hover: hover) and (pointer: fine) { .oscar__formazione a:hover { color: var(--blu); text-decoration-color: currentColor; } }
.oscar__numeri { display: flex; flex-wrap: nowrap; gap: 0; margin-top: 18px; }
.oscar__numeri li { flex: 1 1 0; padding-right: 12px; }
.oscar__numeri li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.25; color: var(--testo); }
.oscar__numeri li + li { padding-left: 16px; border-left: 1.5px solid var(--bordo); }
.oscar__numeri .ico { width: 32px; height: 32px; color: var(--blu); }
.oscar__numeri strong { display: block; font: 800 clamp(20px, 6.6vw, 26px)/1 var(--titoli); color: var(--inchiostro); letter-spacing: 0.01em; }
.oscar__formazione { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--inchiostro); }
.oscar__formazione .ico { width: 32px; height: 32px; color: var(--blu); }
.oscar__logo-maglia { overflow: hidden; border-radius: var(--raggio); aspect-ratio: 1.25 / 1; background: #5A5F57; }
.oscar__logo-maglia img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.formazione { display: grid; gap: 14px; margin-top: 26px; }
.formazione li { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; line-height: 1.35; color: var(--inchiostro); }
.formazione .ico { width: 36px; height: 36px; color: var(--blu); }
.formazione strong { display: block; font-weight: 700; }
.formazione em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; color: var(--blu); }

/* ───────── formazione che continua ───────── */
.attestati__spazi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.attestati__spazi li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 112px; padding: 14px 8px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--attestato);
  text-align: center; font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--inchiostro);
}
.attestati__spazi .ico { width: 34px; height: 34px; color: var(--blu); }
.attestati__spazi strong { display: block; font-weight: 700; }
@media (max-width: 639px) {
  /* da telefono la serie dei certificati scorre col dito, come le altre serie */
  .attestati__spazi {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding: 4px var(--margine) 20px; scroll-padding-inline: var(--margine);
  }
  .attestati__spazi::-webkit-scrollbar { display: none; }
  .attestati__spazi > li { scroll-snap-align: start; min-height: 120px; font-size: 14px; }
}
.attestati__spazi li > span { display: block; font-weight: 400; color: var(--testo); }

/* ───────── il percorso viene da te ───────── */
.dove__fascia { display: grid; }
.dove__schede { margin-top: 10px; grid-auto-columns: 80%; }
.dove__info { display: grid; gap: 14px; margin-top: -10px; }
.dove__info li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.4; color: var(--inchiostro); }
.dove__info .ico { width: 34px; height: 34px; color: var(--petrolio); }
.dove__info strong { font-weight: 700; }
.dove__info span { color: var(--testo); }
.dove__info .intero { display: inline; margin: 0; font-size: inherit; }

/* ───────── prima di cominciare ───────── */
.domande__elenco { display: grid; gap: 10px; margin-top: 16px; }
.domanda {
  display: grid; gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--bordo); border-radius: 12px;
  background: linear-gradient(180deg, var(--chiaro-alto), var(--chiaro-basso));
}
.domanda dt { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--inchiostro); }
.domanda dd { font-size: 14.5px; line-height: 1.4; color: var(--testo); }

/* ───────── recensioni in video (nascoste finché non ci sono video) ───────── */
.recensioni[hidden] { display: none; }
.recensioni__testo { margin-top: 10px; font-size: 16px; color: var(--testo); }
.recensioni__video { margin-top: 16px; }

/* ───────── il primo passo è parlarne ───────── */
.contatti__scheda { display: grid; gap: 26px; color: var(--bianco); }
.contatti__titolo { font: 800 clamp(34px, 4.6vw, 64px)/0.95 var(--titoli); text-transform: uppercase; color: var(--bianco); }
.contatti__sotto { margin-top: 10px; font-size: 16px; color: #E5ECEF; }
.contatti__testo .btn--azzurro { margin-top: 20px; min-height: 54px; padding: 0 26px 0 20px; font-size: 17px; }
.contatti__voci { display: grid; gap: 14px; margin-top: 22px; }
.contatti__voci li { display: flex; align-items: center; gap: 16px; }
.contatti__voci .ico { width: 34px; height: 34px; color: var(--azzurro-vivo); }
.contatti__voci span { display: flex; flex-direction: column; font-size: 16px; line-height: 1.35; }
.contatti__voci a { color: var(--bianco); font-weight: 700; text-decoration: none; }
.contatti__voci small { font-size: 13.5px; color: #D5DEE2; }
@media (hover: hover) and (pointer: fine) { .contatti__voci a:hover { text-decoration: underline; text-underline-offset: 3px; } }

.modulo {
  display: grid; gap: 12px; align-content: start;
  padding: 18px;
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--testo);
}
.campo { display: grid; gap: 6px; }
.modulo input[type="text"], .modulo textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #C3D0D5; border-radius: 12px;
  background: var(--bianco);
  font: 400 16px/1.35 var(--testi); color: var(--inchiostro);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modulo textarea { min-height: 92px; resize: vertical; }
.modulo input::placeholder, .modulo textarea::placeholder { color: var(--testo-tenue); opacity: 1; }
.modulo input:focus, .modulo textarea:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(62, 121, 142, 0.18); }
.modulo [aria-invalid="true"] { border-color: #B3261E; }
.campo__errore { font-size: 13.5px; color: #B3261E; }
.thk-avviso-salute { font-size: 13px; line-height: 1.4; color: var(--testo-tenue); }
.thk-avviso-modulo { font-size: 12.5px; line-height: 1.45; color: var(--testo-tenue); text-align: center; }
.thk-avviso-modulo a { color: var(--blu); font-weight: 600; }
.modulo .btn--pieno { min-height: 54px; font-size: 17px; }
.modulo { position: relative; }
.modulo__trappola { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.modulo__conferma { padding: 10px 14px; border-radius: 10px; background: var(--ghiaccio); font-size: 14px; color: var(--inchiostro); }

/* ───────── piede ───────── */
/* il piede è l'ultima fascia: bianca, larga come le altre; sotto, da telefono, lo spazio per la barra fissa */
.piede {
  width: min(var(--wrap-largo), 100% - 2 * var(--gutter));
  margin: var(--gutter) auto calc(80px + env(safe-area-inset-bottom, 0px));
  padding: 28px 0 24px;
  border-radius: var(--raggio-fascia);
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--bordo);
}
.piede__riga { display: grid; justify-items: center; gap: 16px; text-align: center; }
.piede__logo img { width: auto; height: 72px; }
.piede__chi { display: grid; gap: 2px; font-size: 15px; line-height: 1.4; color: var(--testo); }
.piede__nome { font-size: 17px; font-weight: 700; color: var(--inchiostro); }
.piede__legale { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.piede__legale a { color: var(--inchiostro); text-decoration: none; padding: 6px 2px; }
.piede__legale a + a { padding-left: 18px; border-left: 1.5px solid var(--grigio-chiaro); }
@media (hover: hover) and (pointer: fine) { .piede__legale a:hover { color: var(--blu); } }
.piede__fondo { display: grid; gap: 6px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bordo); text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--testo-tenue); }
.piede__fondo a { color: var(--testo); }
.piede__contatti { margin-top: 6px; font-size: 14px; }
.piede__contatti a { color: var(--testo); text-decoration: none; }
.piede__contatti span { margin: 0 6px; color: var(--grigio-chiaro); }
.piede__pagine { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 13.5px; }
.piede__pagine a { color: var(--inchiostro); text-decoration: none; padding: 4px 0; }
.piede__pagine span { color: var(--grigio-chiaro); }
@media (max-width: 639px) { .piede__pagine { gap: 2px 16px; } .piede__pagine span, .piede__contatti span { display: none; } .piede__contatti a { display: block; } }
@media (hover: hover) and (pointer: fine) { .piede__contatti a:hover, .piede__pagine a:hover { color: var(--blu); } }
.credit a { font-weight: 600; }

/* barra fissa da telefono */
.barra-telefono {
  position: fixed; z-index: 40;
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px;
  padding: 8px;
  border-radius: 999px;
  background: var(--bianco);
  box-shadow: 0 10px 30px rgba(11, 26, 40, 0.18), 0 1px 3px rgba(11, 26, 40, 0.08);
  transform: translateY(calc(100% + 24px)); opacity: 0;
  transition: transform 0.32s var(--ease-out), opacity 0.2s ease;
}
.barra-telefono.is-visibile { transform: none; opacity: 1; }
.barra-telefono .btn { flex: 1; min-height: 50px; font-size: 16px; }
.barra-telefono__wa {
  display: grid; place-items: center; flex: none;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--azzurro-vivo); color: var(--petrolio);
  -webkit-user-select: none; user-select: none;
  transition: transform 0.16s var(--ease-out);
}
.barra-telefono__wa:active { transform: scale(0.94); }
.barra-telefono__wa .ico { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .barra-telefono { transition: opacity 0.2s ease; transform: none; } }

/* ───────── tablet (da 640 px) ───────── */
@media (min-width: 640px) {
  .scorre { grid-auto-columns: calc((100% - 2 * var(--margine) - 28px) / 2.15); }
  .percorso__voci { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .passi__elenco { grid-template-columns: 1fr 1fr; }
  .formazione { grid-template-columns: 1fr 1fr; }
  .domanda { grid-template-columns: minmax(220px, 36%) 1fr; align-items: center; gap: 24px; }
  .domanda dd { padding-left: 24px; border-left: 1.5px solid var(--bordo); }
  /* tablet: la foto torna larga (Oscar a destra), la scheda si appoggia in basso a sinistra */
  .hero__foto { aspect-ratio: 16 / 10; }
  .hero__foto img { object-position: var(--fuoco); }
  .scheda { width: min(330px, 46%); margin: -96px 0 0 22px; }
}

/* ───────── computer (da 1024 px): il design ───────── */
@media (min-width: 1024px) {
  :root { --u: min(1px, 100vw / 1440); }
  body { font-size: 18px; }
  html { scroll-padding-top: 110px; }

  :root { --testata-h: calc(174 * var(--u)); --barra-h: calc(96 * var(--u)); }
  .testata__riga { gap: calc(40 * var(--u)); }
  .testata__logo img { height: calc(154 * var(--u)); }
  .testata.is-scorsa .testata__riga { transform: translateY(calc((var(--barra-h) - var(--testata-h)) / 2)); }
  .testata.is-scorsa .testata__logo img { transform: scale(0.56); }
  .hamburger { display: none; }
  .menu { display: flex; align-items: center; gap: calc(70 * var(--u)); }
  .menu__voci { display: flex; gap: calc(62 * var(--u)); }
  .menu__voci a { position: relative; font-size: max(16px, calc(23 * var(--u))); font-weight: 500; color: var(--inchiostro); text-decoration: none; padding: 8px 0; }
  .menu__voci a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
    background: var(--blu); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-out);
  }
  .menu__voci a:focus-visible::after { transform: scaleX(1); }
  @media (hover: hover) and (pointer: fine) { .menu__voci a:hover::after { transform: scaleX(1); } }
  .menu__cta { min-height: calc(66 * var(--u)); padding: 0 calc(36 * var(--u)); font-size: max(16px, calc(23 * var(--u))); }
  .menu__etichetta { display: none; }
  .menu__gruppo { position: relative; }
  .menu__apri {
    position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: none; cursor: pointer;
    font: 500 max(16px, calc(23 * var(--u)))/1.5 var(--testi); color: var(--inchiostro);
    -webkit-user-select: none; user-select: none;
  }
  .menu__apri::after {
    content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 0.2s var(--ease-out);
  }
  .menu__apri[aria-expanded="true"]::after { transform: translateY(3px) rotate(225deg); }
  .menu__sotto {
    position: absolute; top: calc(100% + 10px); left: -22px; z-index: 5; min-width: 290px;
    display: grid; gap: 2px; padding: 12px;
    border: 1px solid var(--bordo); border-radius: 18px; background: var(--bianco);
    box-shadow: 0 18px 40px rgba(11, 26, 40, 0.12), 0 2px 6px rgba(11, 26, 40, 0.05);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: 30px 0;
    transition: opacity 0.12s ease, transform 0.12s var(--ease-out), visibility 0s linear 0.12s;
  }
  .menu__gruppo.aperto .menu__sotto { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s var(--ease-out), transform 0.2s var(--ease-out); }
  .menu__sotto::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .menu__sotto a { display: block; padding: 10px 14px; border-radius: 10px; font-size: max(15px, calc(20 * var(--u))); white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
  .menu__sotto a::after { display: none; }
  .menu__sotto a:focus-visible { background: var(--ghiaccio); }
  @media (hover: hover) and (pointer: fine) {
    .menu__gruppo:hover .menu__sotto { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s var(--ease-out), transform 0.2s var(--ease-out); }
    .menu__sotto a:hover { background: var(--ghiaccio); color: var(--blu); }
  }

  /* hero (le pagine interne ricompongono la loro più sotto) */
  .occhiello { font-size: calc(24 * var(--u)); }
  .hero__titolo { margin-top: calc(18 * var(--u)); font-size: calc(112 * var(--u)); }
  .hero__sotto { margin-top: calc(22 * var(--u)); max-width: calc(520 * var(--u)); font-size: max(17px, calc(24 * var(--u))); line-height: 1.32; }
  .hero__firma { margin-top: calc(12 * var(--u)); font-size: max(15px, calc(20 * var(--u))); }
  .hero__azioni { margin-top: calc(30 * var(--u)); gap: calc(22 * var(--u)); flex-wrap: nowrap; }
  .hero__azioni .btn--freccia { min-height: calc(70 * var(--u)); padding-left: calc(32 * var(--u)); padding-right: calc(9 * var(--u)); font-size: max(16px, calc(21 * var(--u))); gap: calc(22 * var(--u)); }
  .hero__azioni .btn__cerchio { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
  .hero__azioni .btn__cerchio .ico { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

  .scheda__titolo { font-size: calc(36 * var(--u)); line-height: 1.1; }
  .scheda__voci { margin-top: calc(18 * var(--u)); }
  .scheda__voci li { gap: calc(22 * var(--u)); padding: calc(10 * var(--u)) 0; font-size: max(13px, calc(21 * var(--u))); }
  .scheda__voci .ico { width: calc(74 * var(--u)); height: calc(74 * var(--u)); }
  .scheda__voci strong { font-size: max(14px, calc(22 * var(--u))); margin-bottom: 4px; }

  /* la hero della home: la foto copre tutta la fascia; il testo nella metà sinistra, calma; Oscar fra il centro e il
     terzo destro; la scheda nell'angolo in basso a destra, che la foto lascia libero */
  .hero--foto { display: grid; align-content: center; min-height: calc(700 * var(--u)); padding-block: calc(56 * var(--u)); }
  .hero--foto .hero__wrap { position: static; grid-template-columns: minmax(0, calc(580 * var(--u))) minmax(0, 1fr) calc(276 * var(--u)); column-gap: calc(30 * var(--u)); align-items: end; }
  .hero--foto .hero__testo { grid-column: 1; grid-row: 1; }
  .hero--foto .hero__visivo { display: contents; }
  .hero--foto .hero__foto { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: var(--raggio-fascia); }
  .hero--foto .hero__foto img { object-position: var(--fuoco); }
  .hero--foto .scheda { grid-column: 3; grid-row: 1; align-self: end; width: auto; margin: 0 0 calc(-8 * var(--u)); padding: calc(24 * var(--u)) calc(22 * var(--u)) calc(10 * var(--u)); border-radius: calc(22 * var(--u)); }
  .hero--foto .scheda__titolo { font-size: max(17px, calc(25 * var(--u))); }
  .hero--foto .scheda__voci { margin-top: calc(10 * var(--u)); }
  .hero--foto .scheda__voci li { gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) 0; font-size: max(13px, calc(16 * var(--u))); }
  .hero--foto .scheda__voci .ico { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  .hero--foto .scheda__voci strong { font-size: max(14px, calc(18 * var(--u))); margin-bottom: 2px; }

  /* percorso */
  .percorso__titolo { font-size: calc(30 * var(--u)); }
  .percorso__voci { gap: 0; margin-top: calc(24 * var(--u)); }
  .percorso__voce { padding: calc(4 * var(--u)) calc(22 * var(--u)) calc(4 * var(--u)) calc(34 * var(--u)); border-left: 1.5px solid rgba(161, 171, 177, 0.35); }
  .percorso__voce:first-child { padding-left: calc(10 * var(--u)); border-left: 0; }
  .percorso__voce .ico { width: calc(74 * var(--u)); height: calc(74 * var(--u)); }
  .percorso__voce h3 { margin-top: calc(12 * var(--u)); font-size: max(18px, calc(31 * var(--u))); line-height: 1.1; min-height: 2.2em; }
  .percorso__voce p { margin-top: calc(14 * var(--u)); font-size: max(15px, calc(23 * var(--u))); line-height: 1.32; color: #E1E7EA; }

  /* schede con foto: in fila, niente scorrimento */
  .scorre { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: calc(34 * var(--u)); }
  .foto-scheda__foto { border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0; }
  .foto-scheda__foto { aspect-ratio: 2 / 1; }
  .foto-scheda__testo { margin-top: calc(-30 * var(--u)); padding: calc(30 * var(--u)) calc(28 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u)); gap: calc(26 * var(--u)); border-radius: calc(22 * var(--u)); }
  .foto-scheda__testo .ico { width: calc(66 * var(--u)); height: calc(66 * var(--u)); }
  .foto-scheda__testo h3 { font-size: max(19px, calc(30 * var(--u))); line-height: 1.12; }
  .foto-scheda__testo p { margin-top: calc(16 * var(--u)); font-size: max(15px, calc(22 * var(--u))); line-height: 1.36; }

  .aree .titolo-sezione { font-size: calc(68 * var(--u)); }
  .aree__schede { margin-top: calc(22 * var(--u)); }
  .didascalia { margin-top: calc(22 * var(--u)); font-size: max(13px, calc(15 * var(--u))); }

  /* passi */
  .passi .titolo-sezione { font-size: calc(66 * var(--u)); }
  .passi__elenco { grid-template-columns: repeat(3, 1fr); column-gap: calc(46 * var(--u)); row-gap: calc(26 * var(--u)); margin-top: calc(24 * var(--u)); }
  .passo { display: block; min-height: calc(196 * var(--u)); padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u)); border-radius: calc(22 * var(--u)); }
  .passo:not(:nth-child(3n))::after {
    content: ""; position: absolute; top: 50%; left: 100%;
    width: calc(46 * var(--u)); height: 1.5px; background: #A9BAC2;
  }
  .passo__testa { flex-direction: row; align-items: center; gap: calc(20 * var(--u)); }
  .passo__numero { font-size: calc(58 * var(--u)); min-width: 0; }
  .passo .ico { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
  .passo h3 { margin-top: calc(8 * var(--u)); padding-left: calc(92 * var(--u)); font-size: max(17px, calc(27 * var(--u))); }
  .passo p { margin-top: calc(6 * var(--u)); padding-left: calc(92 * var(--u)); font-size: max(14px, calc(21 * var(--u))); line-height: 1.3; }

  /* oscar */
  .oscar__griglia { grid-template-columns: calc(434 * var(--u)) minmax(0, 1fr); gap: calc(40 * var(--u)); align-items: start; }
  .oscar__ritratto { aspect-ratio: 434 / 446; border-radius: calc(28 * var(--u)); }
  .oscar__testo { padding-top: calc(8 * var(--u)); }
  .oscar .titolo-sezione { font-size: calc(62 * var(--u)); white-space: nowrap; }
  .oscar__corpo { grid-template-columns: 1fr calc(320 * var(--u)); gap: calc(30 * var(--u)); margin-top: calc(14 * var(--u)); }
  .oscar__presentazione { display: block; }
  .oscar__logo-maglia { grid-column: 2; grid-row: 1; }
  .oscar__numeri li { flex: none; }
  .oscar__nome { font-size: calc(34 * var(--u)); }
  .oscar__ruolo { margin-top: calc(6 * var(--u)); font-size: max(14px, calc(19 * var(--u))); }
  .oscar__frase { margin-top: calc(12 * var(--u)); font-size: max(16px, calc(24 * var(--u))); line-height: 1.35; }
  .oscar__numeri { flex-wrap: nowrap; gap: 0; margin-top: calc(26 * var(--u)); }
  .oscar__numeri li { gap: calc(16 * var(--u)); padding-right: calc(30 * var(--u)); font-size: max(14px, calc(21 * var(--u))); }
  .oscar__numeri li + li { padding-left: calc(30 * var(--u)); }
  .oscar__numeri .ico { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .oscar__numeri strong { font-size: calc(46 * var(--u)); margin-bottom: 2px; }
  .oscar__formazione { margin-top: calc(26 * var(--u)); gap: calc(16 * var(--u)); font-size: max(15px, calc(22 * var(--u))); }
  .oscar__formazione .ico { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
  .oscar__logo-maglia { margin-top: calc(-4 * var(--u)); aspect-ratio: 1.16 / 1; border-radius: calc(26 * var(--u)); }

  /* il master ha il nome per intero (2 Step): la prima colonna è più larga, così la riga resta bassa */
  .formazione { grid-template-columns: 1.42fr 1fr 1.2fr 0.95fr 1.05fr; gap: 0; margin-top: calc(34 * var(--u)); }
  .formazione li { gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-left: 1.5px solid var(--bordo); font-size: max(14px, calc(21 * var(--u))); line-height: 1.22; }
  .formazione li:first-child { padding-left: 0; border-left: 0; }
  .formazione .ico { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .formazione em { margin-top: calc(10 * var(--u)); font-size: max(13px, calc(19 * var(--u))); }

  /* attestati */
  .attestati__spazi { gap: calc(28 * var(--u)); margin-top: calc(24 * var(--u)); }
  .attestati__spazi li { min-height: calc(124 * var(--u)); gap: calc(14 * var(--u)); border-radius: calc(20 * var(--u)); font-size: max(15px, calc(20 * var(--u))); }
  .attestati__spazi .ico { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }

  /* dove */
  .dove__fascia { grid-template-columns: minmax(0, 1fr) calc(400 * var(--u)); align-items: center; gap: calc(48 * var(--u)); }
  .dove__schede { margin-top: calc(22 * var(--u)); gap: calc(22 * var(--u)); }
  .foto-scheda--breve .foto-scheda__testo { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); gap: calc(14 * var(--u)); }
  .foto-scheda--breve .foto-scheda__testo h3 { font-size: max(15px, calc(20 * var(--u))); line-height: 1.15; }
  .foto-scheda--breve .foto-scheda__testo .ico { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
  .dove__info { gap: calc(30 * var(--u)); margin: 0; padding-left: calc(40 * var(--u)); border-left: 1.5px solid rgba(20, 46, 56, 0.16); }
  .dove__info li { gap: calc(22 * var(--u)); font-size: max(15px, calc(24 * var(--u))); line-height: 1.28; }
  .dove__info .ico { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }

  /* domande */
  .domande .titolo-sezione { font-size: calc(48 * var(--u)); }
  .domande__elenco { gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u)); }
  .domanda { grid-template-columns: calc(470 * var(--u)) 1fr; padding: calc(16 * var(--u)) calc(32 * var(--u)); border-radius: calc(16 * var(--u)); }
  .domanda dt { font-size: max(16px, calc(21 * var(--u))); }
  .domanda dd { padding-left: calc(30 * var(--u)); font-size: max(14px, calc(17 * var(--u))); }

  /* contatti */
  .contatti__scheda { grid-template-columns: minmax(0, 1fr) calc(566 * var(--u)); gap: calc(72 * var(--u)); position: relative; }
  .contatti__scheda::before {
    content: ""; position: absolute; top: calc(30 * var(--u)); bottom: calc(30 * var(--u));
    right: calc(566 * var(--u) + 36 * var(--u)); width: 1.5px; background: rgba(161, 171, 177, 0.3);
  }
  .contatti__titolo { font-size: calc(56 * var(--u)); max-width: 11em; }
  .contatti__sotto { margin-top: calc(12 * var(--u)); font-size: max(16px, calc(23 * var(--u))); }
  .contatti__testo .btn--azzurro { margin-top: calc(24 * var(--u)); min-height: calc(62 * var(--u)); padding: 0 calc(46 * var(--u)) 0 calc(30 * var(--u)); font-size: max(17px, calc(25 * var(--u))); gap: calc(16 * var(--u)); }
  .contatti__testo .btn--azzurro .ico { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .contatti__voci { gap: calc(18 * var(--u)); margin-top: calc(26 * var(--u)); padding-left: calc(22 * var(--u)); }
  .contatti__voci li { gap: calc(40 * var(--u)); }
  .contatti__voci .ico { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
  .contatti__voci span { font-size: max(16px, calc(22 * var(--u))); }
  .contatti__voci small { font-size: max(13px, calc(17 * var(--u))); }
  .modulo { gap: calc(12 * var(--u)); padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)); border-radius: calc(26 * var(--u)); }
  .modulo input[type="text"], .modulo textarea { padding: calc(11 * var(--u)) 16px; }
  .modulo textarea { min-height: calc(92 * var(--u)); }
  .modulo .btn--pieno { min-height: calc(58 * var(--u)); font-size: max(17px, calc(21 * var(--u))); }

  /* piede */
  .piede { margin-bottom: var(--gutter); padding: calc(30 * var(--u)) 0 calc(26 * var(--u)); }
  .piede__riga { grid-template-columns: calc(220 * var(--u)) auto 1fr auto; justify-items: start; align-items: center; gap: 0; text-align: left; }
  .piede__logo { justify-self: center; }
  .piede__logo img { height: calc(96 * var(--u)); }
  .piede__chi { padding: calc(6 * var(--u)) calc(64 * var(--u)) calc(6 * var(--u)) calc(56 * var(--u)); border-left: 1.5px solid var(--bordo); font-size: max(15px, calc(19 * var(--u))); }
  .piede__nome { font-size: max(17px, calc(22 * var(--u))); }
  .piede__legale { grid-column: 4; padding: calc(18 * var(--u)) 0 calc(18 * var(--u)) calc(90 * var(--u)); border-left: 1.5px solid var(--bordo); font-size: max(15px, calc(19 * var(--u))); gap: calc(28 * var(--u)); }
  .piede__legale a + a { padding-left: calc(28 * var(--u)); }
  .piede__fondo { grid-template-columns: 1fr auto; text-align: left; margin-top: calc(18 * var(--u)); padding-top: calc(14 * var(--u)); }
  .piede__pagine { grid-column: 1 / -1; justify-content: flex-start; font-size: max(14px, calc(16 * var(--u))); }
  .piede__contatti { font-size: max(14px, calc(16 * var(--u))); }
  .barra-telefono { display: none; }
}


/* ───────── pagine legali e 404 ───────── */
.wrap--stretto { width: min(860px, 100% - 2 * var(--margine)); margin-inline: auto; }
.legale-pagina { padding: 28px 0 56px; }
.legale h1 { font: 800 clamp(40px, 6vw, 72px)/0.95 var(--titoli); text-transform: uppercase; color: var(--inchiostro); }
.legale h1 + p { margin-top: 12px; font-size: 14px; color: var(--testo-tenue); }
.legale h2 { margin-top: 36px; font: 700 clamp(20px, 2.2vw, 26px)/1.25 var(--testi); color: var(--inchiostro); letter-spacing: -0.01em; }
.legale p, .legale li { font-size: 16.5px; line-height: 1.6; color: var(--testo); }
.legale p { margin-top: 12px; }
.legale ul { margin-top: 12px; padding-left: 1.2em; list-style: disc; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--blu); font-weight: 600; }
.legale table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14.5px; }
.legale th, .legale td { padding: 10px 12px; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.legale th { font-weight: 700; color: var(--inchiostro); background: var(--ghiaccio); }
@media (max-width: 639px) {
  .legale table, .legale thead, .legale tbody, .legale tr, .legale th, .legale td { display: block; }
  .legale thead { display: none; }
  .legale tr { padding: 10px 0; border-bottom: 1px solid var(--bordo); }
  .legale td { padding: 2px 0; border: 0; }
  .legale td:first-child { font-weight: 700; color: var(--inchiostro); }
}
.non-trovata { padding: 56px 0 72px; }
.non-trovata .titolo-sezione { margin-top: 12px; }
.non-trovata__testo { margin-top: 16px; font-size: 18px; color: var(--testo); }
.non-trovata__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.non-trovata__link { font-weight: 600; color: var(--blu); }
/* le pagine legali e la 404 non hanno la barra fissa da telefono: il piede non le lascia spazio */
.pagina-interna .piede { margin-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) {
  .legale-pagina { padding: 40px 0 80px; }
  .non-trovata { padding: 90px 0 120px; }
}

/* ═════════ pagine interne (step 6-bis): gli stessi pezzi della home, ricomposti ═════════ */

.contatti__voci span a { color: inherit; font-weight: 700; }

.contatti__testo .btn--azzurro + .sezione__link { margin-top: 0; }

.menu__voci a[aria-current="page"], .piede__pagine a[aria-current="page"] { color: var(--blu); }

/* ═════════ movimento (step 5-bis): curve e durate di Emil Kowalski, cosa si muove dalle regole THK ═════════ */

/* la prima schermata entra al caricamento, senza aspettare il JavaScript; la foto grande non parte mai trasparente:
   si assesta, da un poco più grande alla sua misura */
@keyframes entra { from { opacity: 0; transform: translateY(var(--da, 30px)); } }
@keyframes sale { from { transform: translateY(34px) scale(0.985); } }
@keyframes si-assesta { from { transform: scale(1.07); } }
@keyframes appare { from { opacity: 0; } }
.hero .occhiello, .hero__titolo > span, .hero__sotto, .hero__firma, .hero__azioni { animation: entra 0.8s var(--ease-out) both; }
.hero .occhiello { animation-delay: 0.05s; }
.hero__titolo > span { --da: 40px; }
.hero__titolo > span:nth-child(1) { animation-delay: 0.12s; }
.hero__titolo > span:nth-child(2) { animation-delay: 0.2s; }
.hero__sotto { animation-delay: 0.3s; }
.hero__firma { animation-delay: 0.36s; }
.hero__azioni { animation-delay: 0.42s; }
.scheda { --da: 36px; animation: entra 0.9s var(--ease-out) 0.5s both; }
.scheda .scheda__voci li { --da: 16px; animation: entra 0.7s var(--ease-out) both; }
.scheda .scheda__voci li:nth-child(1) { animation-delay: 0.66s; }
.scheda .scheda__voci li:nth-child(2) { animation-delay: 0.73s; }
.scheda .scheda__voci li:nth-child(3) { animation-delay: 0.8s; }
.hero__foto img { transform-origin: 70% 40%; animation: si-assesta 1.6s var(--ease-out) both; }

/* le sezioni arrivano mentre si scorre (.reveal → .in), una scheda dopo l'altra */
.js .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.js .reveal.is-visible, .js .reveal.in { opacity: 1; transform: none; }
/* il ritratto si svela dal basso e si assesta */
/* (il ritaglio va sulla foto: la cornice resta osservabile) */
.js .oscar__ritratto.reveal { opacity: 1; transform: none; }
.js .oscar__ritratto.reveal img { clip-path: inset(100% 0 0 0); transform: scale(1.1); transition: clip-path 1.1s var(--ease-in-out), transform 1.4s var(--ease-out); }
.js .oscar__ritratto.reveal.is-visible img, .js .oscar__ritratto.reveal.in img { clip-path: inset(0 0 0 0); transform: none; }

/* i numeri che salgono: la larghezza resta ferma */
.conta { display: inline-block; font-variant-numeric: tabular-nums; }

/* schede che rispondono al mouse (al dito rispondono pulsanti e collegamenti, con :active) */
.foto-scheda__testo { transition: transform 0.35s var(--ease-out), box-shadow 0.25s ease; }
.passo, .attestati__spazi li, .domanda { transition: border-color 0.2s ease, background-color 0.2s ease; }
.passo .ico, .formazione .ico { transition: color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .foto-scheda:hover .foto-scheda__testo { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(11, 26, 40, 0.11), 0 2px 6px rgba(11, 26, 40, 0.05); }
  .passo:hover { border-color: #A9BAC2; background-color: #EAF2F5; }
  .passo:hover .ico { color: var(--petrolio); }
  .attestati__spazi li:hover { border-color: #A9BAC2; }
  .domanda:hover { border-color: #C3D0D5; }
  .formazione li:hover .ico { color: var(--petrolio); }
}

/* meno movimento, non zero: restano le dissolvenze, spariscono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  .hero .occhiello, .hero__titolo > span, .hero__sotto, .hero__firma, .hero__azioni, .scheda, .scheda .scheda__voci li { animation: appare 0.5s ease both; }
  .hero__foto img { animation: none; }
  .js .reveal { transform: none; transition: opacity 0.5s ease; transition-delay: 0s; }
  .js .oscar__ritratto.reveal { opacity: 0; transition: opacity 0.5s ease; }
  .js .oscar__ritratto.reveal.is-visible, .js .oscar__ritratto.reveal.in { opacity: 1; }
  .js .oscar__ritratto.reveal img { clip-path: none; transform: none; transition: none; }
  .menu__voci li, .menu__cta { translate: none; }
  .foto-scheda__foto img, .foto-scheda__testo { transition: none; }
  .foto-scheda:hover .foto-scheda__foto img, .foto-scheda:hover .foto-scheda__testo { transform: none; }
  .testata__riga, .testata__logo img { transition-duration: 0.2s; }
}

/* ═════════ 6-quater · il salto di livello (04/11/2026) ═════════
   Stessa struttura, stesso copy, stesso kit: cambia la qualità grafica (la critica: Design/SALTO-DI-LIVELLO.md).
   La versione fedele resta tutta qui sopra; queste regole la alzano. */
:root {
  --cerchio: #E3EEF2;
  --linea: #CFE0E7;
  --ombra-morbida: 0 1px 2px rgba(11, 26, 40, 0.04), 0 12px 28px -12px rgba(11, 26, 40, 0.12), 0 32px 64px -28px rgba(20, 46, 56, 0.22);
  --ombra-cta: 0 16px 30px -14px rgba(20, 46, 56, 0.62);
}

/* le icone del kit dentro un cerchio di colore */
.ico-cerchio {
  display: inline-grid; place-items: center; flex: none;
  width: var(--d, 60px); height: var(--d, 60px);
  border-radius: 50%;
  background: var(--cerchio); color: var(--blu);
}
.ico-cerchio .ico.ico { width: 54%; height: 54%; }

/* pulsanti con un'ombra del loro colore */
.btn--scuro { box-shadow: var(--ombra-cta); }
.btn--blu { box-shadow: 0 14px 28px -16px rgba(62, 121, 142, 0.8); }
.btn--azzurro { box-shadow: 0 16px 30px -16px rgba(134, 210, 232, 0.7); }
.btn:active { box-shadow: none; }

/* l'occhiello della prima schermata con il filo blu davanti */
.hero .occhiello { display: flex; align-items: center; gap: 14px; }
.hero .occhiello::before { content: ""; flex: none; width: 34px; height: 3px; border-radius: 3px; background: var(--blu); }

/* la scheda «La valutazione iniziale»: vetro senza filtro, bianco quasi pieno, con l'ombra azzurra */
.scheda {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.93));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 30px 60px -24px rgba(9, 26, 34, 0.55), 0 2px 8px rgba(11, 26, 40, 0.08);
}

/* ───────── il metodo in 4 punti ───────── */
.percorso__titolo { font: 800 26px/1 var(--titoli); letter-spacing: 0.01em; }
.percorso__voce .ico-cerchio { --d: 56px; background: rgba(134, 210, 232, 0.12); color: var(--azzurro-vivo); }
.percorso__voce h3 { display: flex; align-items: flex-end; }

/* ───────── i percorsi: l'icona come un distintivo sul bordo della foto ───────── */
.aree .foto-scheda__testo { display: block; padding-top: 40px; }
.aree .foto-scheda__testo > .ico-cerchio { position: absolute; top: -30px; left: 18px; --d: 60px; background: var(--bianco); box-shadow: 0 0 0 5px var(--cerchio), 0 10px 22px -10px rgba(20, 46, 56, 0.35); }
.aree .foto-scheda__testo > div { display: block; }
.foto-scheda__testo { box-shadow: var(--ombra-morbida); }
.foto-scheda--breve .ico-cerchio { --d: 46px; }
.foto-scheda__link a, .sezione__link a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 2px; transition: color 0.15s ease, text-decoration-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .foto-scheda__link a:hover, .sezione__link a:hover { text-decoration-color: currentColor; } }
.sezione__link { font-size: 16px; }

/* ───────── come funziona: da telefono una linea del tempo ───────── */
.passo .ico-cerchio { --d: 40px; }
@media (max-width: 1023px) {
  .passi__elenco { gap: 0; margin-top: 26px; }
  .passo { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 16px; padding: 0 0 24px; border: 0; border-radius: 0; background: none; }
  .passo::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: 2px; width: 2px; border-radius: 2px; background: linear-gradient(var(--linea), var(--linea)); }
  .passo:last-child { padding-bottom: 4px; }
  .passo:last-child::before { display: none; }
  .passo__testa { display: contents; }
  .passo .passo__numero { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bianco); box-shadow: inset 0 0 0 2px var(--blu), 0 8px 18px -10px rgba(20, 46, 56, 0.4); font-size: 22px; }
  .passo .ico-cerchio { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
  .passo h3 { grid-column: 2; grid-row: 1; align-self: start; padding-top: 4px; }
  .passo p { grid-column: 2; grid-row: 2; }
}

/* ───────── chi siamo: il ritratto con la cornice sfalsata ───────── */
.oscar__ritratto { box-shadow: -14px 14px 0 0 var(--ellisse); }

/* ───────── certificati e attestati: carta, doppia cornice, sigillo, fascia blu ───────── */
.attestati__spazi li {
  position: relative; overflow: hidden;
  padding-top: 24px;
  border: 1px solid #D5E4EA; border-radius: 14px;
  background: var(--bianco);
  box-shadow: inset 0 0 0 6px var(--bianco), inset 0 0 0 7px #E2EDF1, var(--ombra-morbida);
}
.attestati__spazi li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--petrolio), var(--blu) 55%, var(--azzurro-vivo));
}
.attestati__spazi .ico-cerchio { --d: 54px; background: var(--attestato); box-shadow: 0 0 0 4px var(--bianco), 0 0 0 5.5px #CFE0E7; }
.attestati__spazi strong { margin-bottom: 4px; font: 800 19px/1.05 var(--titoli); text-transform: uppercase; letter-spacing: 0.02em; color: var(--inchiostro); }

/* ───────── domande frequenti: un elenco a fili ───────── */
.domande__elenco { gap: 0; margin-top: 18px; border-top: 1.5px solid var(--inchiostro); }
.domanda { padding: 16px 0 18px; border: 0; border-bottom: 1px solid var(--bordo); border-radius: 0; background: none; }
.domanda dt { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.domanda dt::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--blu); box-shadow: 0 0 0 4px var(--cerchio); transform: translateY(-1px); }
.domanda dd { padding-left: 22px; color: var(--testo); }
@media (hover: hover) and (pointer: fine) { .domanda:hover { border-color: var(--bordo); } .domanda:hover dt { color: var(--blu); } }
.domanda dt { transition: color 0.2s ease; }

/* ───────── richiedi informazioni: il modulo come un oggetto sopra la fascia ───────── */
.modulo { box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.08); }
.modulo input[type="text"], .modulo textarea { min-height: 52px; border: 1.5px solid transparent; border-radius: 14px; background: var(--ghiaccio); }
.modulo input[type="text"]:hover, .modulo textarea:hover { border-color: var(--bordo); }
.modulo input:focus, .modulo textarea:focus { background: var(--bianco); }
.modulo input[aria-invalid="true"], .modulo textarea[aria-invalid="true"],
.modulo input[aria-invalid="true"]:hover, .modulo textarea[aria-invalid="true"]:hover,
.modulo input[aria-invalid="true"]:focus, .modulo textarea[aria-invalid="true"]:focus { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16); }
.contatti__voci .ico { transition: transform 0.2s var(--ease-out); }

/* ───────── piede ───────── */
.piede__logo img { height: 80px; }

/* ═════ pagine legali e 404: un foglio bianco ═════ */
.legale-pagina { padding-top: 18px; }
.legale-pagina .wrap--stretto { padding: 30px 20px 36px; border: 1px solid var(--bordo); border-radius: var(--raggio-grande); background: var(--bianco); box-shadow: var(--ombra-morbida); }
.legale h1 + p { display: inline-block; margin-top: 16px; padding: 6px 14px; border-radius: 999px; background: var(--ghiaccio); font-weight: 600; color: var(--testo); }
.legale h2 { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--bordo); }
.legale tbody tr:nth-child(even) td { background: #FAFCFC; }
.legale p, .legale li, .legale td { overflow-wrap: break-word; }
.non-trovata { position: relative; overflow: hidden; isolation: isolate; }
.non-trovata::before, .non-trovata::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.non-trovata::before { width: 420px; aspect-ratio: 1; right: -180px; bottom: -160px; background: radial-gradient(circle at 32% 30%, #DDEEF4 0%, var(--ellisse) 46%, #C2DFE9 100%); }
.non-trovata::after { width: 520px; aspect-ratio: 1; right: -230px; bottom: -210px; border: 1.5px solid rgba(62, 121, 142, 0.2); outline: 1.5px solid rgba(62, 121, 142, 0.1); outline-offset: 44px; }
.non-trovata .titolo-sezione { font-size: clamp(54px, 15vw, 128px); line-height: 0.88; }

/* ═════ computer ═════ */
@media (min-width: 1024px) {
  .hero .occhiello::before { width: calc(46 * var(--u)); height: calc(4 * var(--u)); }
  .hero .occhiello { gap: calc(18 * var(--u)); }

  .percorso__titolo { font-size: calc(42 * var(--u)); }
  .percorso__voce .ico-cerchio { --d: calc(88 * var(--u)); }
  .percorso__voce h3 { margin-top: calc(18 * var(--u)); }

  .aree .foto-scheda__testo { padding: calc(54 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u)); }
  .aree .foto-scheda__testo > .ico-cerchio { top: calc(-44 * var(--u)); left: calc(30 * var(--u)); --d: calc(88 * var(--u)); box-shadow: 0 0 0 calc(7 * var(--u)) var(--cerchio), 0 14px 26px -12px rgba(20, 46, 56, 0.35); }
  .aree .foto-scheda__testo p { margin-top: calc(12 * var(--u)); }
  .foto-scheda--breve .ico-cerchio { --d: calc(54 * var(--u)); }
  .foto-scheda--breve .foto-scheda__testo { gap: calc(12 * var(--u)); padding-left: calc(16 * var(--u)); padding-right: calc(14 * var(--u)); }
  .aree .foto-scheda__foto { aspect-ratio: 2.25 / 1; }
  .sezione__link { font-size: max(16px, calc(20 * var(--u))); }

  .passi__elenco { row-gap: calc(30 * var(--u)); }
  .passo { min-height: 0; padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); border-color: transparent; background: var(--bianco); box-shadow: var(--ombra-morbida); }
  .passo:not(:nth-child(3n))::after { height: 2px; background: repeating-linear-gradient(90deg, #A9BAC2 0 5px, transparent 5px 11px); }
  .passo__testa { justify-content: space-between; }
  .passo__numero { font-size: calc(62 * var(--u)); line-height: 0.9; }
  .passo .ico-cerchio { --d: calc(68 * var(--u)); }
  .passo h3 { margin-top: calc(14 * var(--u)); padding-left: 0; }
  .passo p { padding-left: 0; }
  @media (hover: hover) and (pointer: fine) { .passo:hover { border-color: transparent; background-color: var(--bianco); } .passo:hover .ico-cerchio { background: var(--ellisse); } }
  .passo .ico-cerchio { transition: background-color 0.2s ease; }

  .oscar__ritratto { box-shadow: calc(-26 * var(--u)) calc(26 * var(--u)) 0 0 var(--ellisse); }
  .oscar__numeri strong { font-size: calc(48 * var(--u)); }

  .attestati__spazi li { gap: calc(12 * var(--u)); min-height: calc(150 * var(--u)); padding-top: calc(26 * var(--u)); padding-bottom: calc(16 * var(--u)); border-radius: calc(16 * var(--u)); }
  .attestati__spazi .ico-cerchio { --d: calc(60 * var(--u)); }
  .attestati__spazi strong { font-size: max(18px, calc(28 * var(--u))); }
  /* una serie di attestati sta in una riga sola, qualunque sia il numero (la home ne ha 3, Chi siamo 5) */
  .attestati__spazi { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .attestati__spazi:has(> li:nth-child(5)) strong { font-size: max(17px, calc(24 * var(--u))); }
  
  
  
  
  

  /* domande: il titolo fermo a sinistra, l'elenco a destra */
  .domande .wrap { display: grid; grid-template-columns: calc(340 * var(--u)) minmax(0, 1fr); column-gap: calc(80 * var(--u)); align-items: start; }
  .domande .titolo-sezione { position: sticky; top: calc(var(--barra-h) + 40 * var(--u)); font-size: calc(68 * var(--u)); line-height: 0.92; }
  /* sotto il titolo, l'icona del dialogo in un cerchio */
  .domande .titolo-sezione::before, .domande .titolo-sezione::after { content: ""; position: absolute; left: 0; top: calc(100% + 34 * var(--u)); pointer-events: none; }
  .domande .titolo-sezione::before { width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: 50%; background: var(--cerchio); }
  .domande .titolo-sezione::after {
    left: calc(24 * var(--u)); top: calc(100% + 58 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); background-color: var(--blu);
    -webkit-mask: url(/assets/icone/ascolto.svg) center / contain no-repeat; mask: url(/assets/icone/ascolto.svg) center / contain no-repeat;
  }
  .domande__elenco { margin-top: calc(6 * var(--u)); }
  .domanda { grid-template-columns: calc(380 * var(--u)) minmax(0, 1fr); gap: calc(30 * var(--u)); padding: calc(18 * var(--u)) 0 calc(19 * var(--u)); border-radius: 0; }
  .domanda dt { gap: calc(16 * var(--u)); font-size: max(16px, calc(21 * var(--u))); }
  .domanda dt::before { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
  .domanda dd { padding-left: 0; border-left: 0; font-size: max(15px, calc(18 * var(--u))); line-height: 1.45; }

  .modulo input[type="text"], .modulo textarea { min-height: calc(56 * var(--u)); padding-top: calc(14 * var(--u)); padding-bottom: calc(14 * var(--u)); }

  .piede__logo img { height: calc(108 * var(--u)); }

  /* pagine interne */
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  

  

  .legale-pagina { padding: calc(30 * var(--u)) 0 calc(90 * var(--u)); }
  .legale-pagina .wrap--stretto { width: min(900px, 100% - 2 * var(--margine)); padding: calc(64 * var(--u)) calc(76 * var(--u)) calc(70 * var(--u)); border-radius: calc(32 * var(--u)); }
  .non-trovata::before { width: calc(760 * var(--u)); right: calc(-200 * var(--u)); bottom: calc(-260 * var(--u)); }
  .non-trovata::after { width: calc(900 * var(--u)); right: calc(-270 * var(--u)); bottom: calc(-330 * var(--u)); outline-offset: calc(70 * var(--u)); }
}


/* ═════════ pagine interne: gli stessi pezzi della home (collaudo, 04/11/2026) ═════════
   Ogni pagina interna è fatta con le sezioni della home e le loro classi: la hero, «Chi siamo» (testo e foto), le schede
   dei percorsi, la fascia scura, la fascia azzurra, gli attestati con la striscia della formazione e la fascia dei
   contatti. Qui sotto solo come si dispongono quando il contenuto è diverso da quello della home: una foto al posto del
   ritaglio di Oscar, titoli più lunghi, il lato della foto che si alterna, una scheda senza foto. */

/* la cornice del ritratto (la foto di «Chi siamo») tiene anche le altre foto del kit */
.oscar__ritratto > picture { display: block; width: 100%; height: 100%; }
.oscar__ritratto > picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* hero: il titolo più lungo, la foto nella cornice del ritratto, dentro la sua fascia azzurra */
.pagina-interna-piena .hero__titolo { font-size: clamp(26px, 8.2vw, 58px); line-height: 0.95; max-width: none; }
.pagina-interna-piena .hero:has(.oscar__logo-maglia) .hero__titolo { font-size: clamp(64px, 22vw, 110px); line-height: 0.86; }
.pagina-interna-piena .hero__visivo { position: relative; z-index: 1; height: auto; margin: 24px 0 6px; }
.hero__visivo .oscar__ritratto { aspect-ratio: 16 / 11; animation: sale 1.1s var(--ease-out) both; }
.hero__visivo:has(.oscar__logo-maglia) .oscar__ritratto { aspect-ratio: 1 / 1.05; max-width: 520px; }
.hero__visivo .oscar__logo-maglia { position: absolute; right: -6px; bottom: -20px; width: 42%; border: 6px solid var(--bianco); box-shadow: 0 24px 40px -18px rgba(20, 46, 56, 0.5); --da: 24px; animation: entra 0.9s var(--ease-out) 0.45s both; }
.hero__testo > .scheda__voci { margin-top: 20px; max-width: 34em; animation: entra 0.8s var(--ease-out) 0.36s both; }
.hero__testo > .scheda__voci li { padding: 8px 0; font-size: 15px; color: var(--inchiostro); }
.hero__testo > .scheda__voci li:first-child { border-top: 1px solid var(--bordo); }
.hero__testo > .scheda__voci li:last-child { border-bottom: 1px solid var(--bordo); }
.scheda__voci .passo__numero { font-size: 22px; min-width: 1.6em; }

/* testo e foto: la sezione «Chi siamo»; una sezione sì e una no la foto passa a sinistra */
.oscar__testo > p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--testo); max-width: 38em; }
.oscar__testo > .oscar__frase { margin-top: 16px; font-size: 17px; line-height: 1.45; color: var(--inchiostro); }
.oscar__testo > .scheda__voci { margin-top: 18px; }
.oscar__testo .scheda__voci li, .foto-scheda__testo .scheda__voci li { gap: 14px; padding: 10px 0; font-size: 15px; line-height: 1.4; }
.oscar__testo .scheda__voci .ico, .foto-scheda__testo .scheda__voci .ico { width: 32px; height: 32px; color: var(--blu); }
.oscar__testo .scheda__voci strong, .foto-scheda__testo .scheda__voci strong { font-size: 16px; }
.pagina-interna-piena .oscar__ritratto { aspect-ratio: 16 / 10; }
.oscar__testo + .oscar__ritratto { box-shadow: 14px 14px 0 0 var(--ellisse); }
.oscar .attestati__spazi { margin-top: 30px; }

/* le schede dei percorsi, senza foto: il distintivo dell'icona sul bordo alto della scheda */
.aree__schede:not(.scorre) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px 14px; margin-top: 0; padding-top: 30px; }
.aree__schede:not(.scorre) .foto-scheda__testo { margin-top: 0; }
.foto-scheda__testo h2 { font: 700 18px/1.2 var(--testi); color: var(--inchiostro); letter-spacing: -0.01em; }
.foto-scheda__testo .scheda__voci { margin-top: 10px; }
@media (min-width: 640px) { .aree__schede:not(.scorre) { grid-template-columns: 1fr 1fr; } }

/* la fascia scura con il testo prima e dopo le voci; da telefono le voci lunghe una per riga */
.percorso__scheda > p:not(.sezione__link) { margin-top: 12px; max-width: 52em; font-size: 15.5px; line-height: 1.5; color: #E1E7EA; }
.percorso__scheda:not(:has(.percorso__voci)) .percorso__titolo { font-size: clamp(32px, 8.4vw, 44px); line-height: 0.95; }
@media (max-width: 639px) { .pagina-interna-piena .percorso__voci { grid-template-columns: 1fr; } }

/* la fascia azzurra: il testo a sinistra, la foto a destra (o le schede dei luoghi sotto, per tutta la larghezza) */
.dove__luoghi > p:not(.sezione__link) { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--inchiostro); }
.dove__luoghi > .titolo-sezione + p { margin-top: 14px; }
.dove__luoghi .dove__info { margin-top: 18px; }
.dove__luoghi > .dove__schede { margin-top: 18px; }
.dove__fascia > .oscar__ritratto { margin-top: 20px; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55), var(--ombra-scheda); }

/* gli attestati e la striscia della formazione, con il testo d'apertura */
.attestati .wrap > p:not(.didascalia):not(.sezione__link) { margin-top: 12px; max-width: 46em; font-size: 16px; line-height: 1.5; color: var(--testo); }
.attestati .formazione { margin-top: 22px; }

/* la fascia dei contatti con la foto al posto del modulo */
.contatti__scheda:not(:has(.modulo))::before { display: none; }
.contatti__scheda > .oscar__ritratto { box-shadow: -14px 14px 0 0 rgba(134, 210, 232, 0.2); }
.contatti__testo > h3 { margin-top: 26px; font: 700 18px/1.25 var(--testi); color: var(--bianco); }
.contatti__testo > .btn--azzurro + .sezione__link { margin-top: 16px; }

@media (min-width: 1024px) {
  .pagina-interna-piena .hero, .pagina-interna-piena .hero__wrap { min-height: calc(560 * var(--u)); }
  .pagina-interna-piena .hero__wrap { grid-template-columns: minmax(0, 1fr) calc(580 * var(--u)); column-gap: calc(64 * var(--u)); align-items: center; }
  .pagina-interna-piena .hero__testo { width: auto; padding: calc(10 * var(--u)) 0 calc(30 * var(--u)); }
  .pagina-interna-piena .hero__titolo { font-size: calc(76 * var(--u)); line-height: 0.92; white-space: normal; max-width: 14em; }
  .pagina-interna-piena .hero:has(.oscar__logo-maglia) .hero__titolo { font-size: calc(150 * var(--u)); line-height: 0.86; }
  .pagina-interna-piena .hero__visivo { position: relative; inset: auto; margin: 0 0 calc(20 * var(--u)); }
  .hero__visivo .oscar__ritratto { aspect-ratio: 580 / 430; border-radius: calc(28 * var(--u)); }
  .hero__visivo:has(.oscar__logo-maglia) .oscar__ritratto { width: calc(470 * var(--u)); max-width: none; aspect-ratio: 470 / 520; }
  .hero__visivo .oscar__logo-maglia { right: calc(-10 * var(--u)); bottom: calc(-34 * var(--u)); width: calc(240 * var(--u)); margin: 0; border-width: calc(8 * var(--u)); }
  .hero__testo > .scheda__voci { margin-top: calc(24 * var(--u)); max-width: calc(600 * var(--u)); }
  .hero__testo > .scheda__voci li { gap: calc(18 * var(--u)); padding: calc(9 * var(--u)) 0; font-size: max(15px, calc(19 * var(--u))); }
  .scheda__voci .passo__numero { font-size: calc(30 * var(--u)); line-height: 1; }

  .pagina-interna-piena .oscar__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(70 * var(--u)); align-items: center; }
  .pagina-interna-piena .oscar .titolo-sezione { white-space: normal; font-size: calc(60 * var(--u)); }
  .oscar__testo > p { margin-top: calc(14 * var(--u)); font-size: max(16px, calc(20 * var(--u))); }
  .oscar__testo > .oscar__frase { margin-top: calc(22 * var(--u)); font-size: max(17px, calc(23 * var(--u))); }
  .oscar__testo .scheda__voci li, .foto-scheda__testo .scheda__voci li { gap: calc(18 * var(--u)); padding: calc(12 * var(--u)) 0; font-size: max(15px, calc(19 * var(--u))); }
  .oscar__testo .scheda__voci .ico, .foto-scheda__testo .scheda__voci .ico { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
  .oscar__testo .scheda__voci strong, .foto-scheda__testo .scheda__voci strong { font-size: max(16px, calc(21 * var(--u))); }
  .pagina-interna-piena .oscar__ritratto { aspect-ratio: 4 / 3; border-radius: calc(28 * var(--u)); }
  .oscar__testo + .oscar__ritratto { box-shadow: calc(26 * var(--u)) calc(26 * var(--u)) 0 0 var(--ellisse); }
  main > :nth-child(even of .oscar) .oscar__ritratto { order: -1; box-shadow: calc(-26 * var(--u)) calc(26 * var(--u)) 0 0 var(--ellisse); }
  #formazione .oscar__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  #formazione .oscar__ritratto { aspect-ratio: 2.1 / 1; }
  .oscar .attestati__spazi { margin-top: calc(48 * var(--u)); }

  .aree__schede:not(.scorre) { gap: calc(64 * var(--u)) calc(34 * var(--u)); padding-top: calc(44 * var(--u)); }
  .foto-scheda__testo h2 { font-size: max(19px, calc(30 * var(--u))); line-height: 1.12; }

  .percorso__scheda > p:not(.sezione__link) { margin-top: calc(14 * var(--u)); font-size: max(16px, calc(21 * var(--u))); }
  .percorso__scheda:not(:has(.percorso__voci)) .percorso__titolo { font-size: calc(60 * var(--u)); }

  .dove__fascia > .dove__luoghi:only-child { grid-column: 1 / -1; }
  .dove__luoghi > p:not(.sezione__link) { font-size: max(16px, calc(21 * var(--u))); }
  .dove__luoghi .dove__info { margin-top: calc(24 * var(--u)); padding-left: 0; border-left: 0; gap: calc(18 * var(--u)); }
  .dove__luoghi .dove__info li { font-size: max(15px, calc(21 * var(--u))); }
  .dove__fascia > .oscar__ritratto { margin-top: 0; aspect-ratio: 490 / 330; border-radius: calc(22 * var(--u)); }

  .attestati .wrap > p:not(.didascalia):not(.sezione__link) { margin-top: calc(14 * var(--u)); font-size: max(16px, calc(20 * var(--u))); }
  .formazione:not(:has(> li:nth-child(5))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

  .contatti__scheda > .oscar__ritratto { align-self: center; aspect-ratio: 566 / 400; border-radius: calc(26 * var(--u)); box-shadow: calc(-26 * var(--u)) calc(26 * var(--u)) 0 0 rgba(134, 210, 232, 0.2); }
  .contatti__testo > h3 { margin-top: calc(30 * var(--u)); font-size: max(18px, calc(26 * var(--u))); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__visivo .oscar__ritratto { animation: none; }
  .hero__visivo .oscar__logo-maglia, .hero__testo > .scheda__voci { animation: appare 0.5s ease both; }
}

/* menu da telefono sugli schermi bassi (320×568): voci e spazi più stretti, il pulsante «Richiedi informazioni» sta intero */
@media (max-width: 1023px) and (max-height: 640px) {
  .menu { gap: 14px; padding-top: calc(var(--testata-h) + 10px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .menu__voci { gap: 0; }
  .menu__voci a { padding: 6px 0; font-size: 32px; }
  .menu__etichetta { padding-top: 2px; }
  .menu__sotto { margin-bottom: 2px; }
  .menu__sotto a { padding: 4px 0; font-size: 25px; }
  .menu__cta { min-height: 52px; }
}

/* ───────── gli attestati veri (2 Step, 05/11/2026): la scheda «diploma» con dentro il documento ─────────
   Home: 5 attestati; Chi siamo: tutti e 10. Al tocco il documento si apre in grande (main.js, <dialog>).
   I documenti restano come sono (08 § 4-bis: Design/FOTO-COME-SONO.md). */
.attestati__spazi--foto > li { justify-content: flex-start; align-items: stretch; gap: 10px; padding: 22px 12px 16px; }
.attestato {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; padding: 8px;
  border-radius: 10px; background: var(--ghiaccio);
  cursor: zoom-in;
  transition: transform 0.16s var(--ease-out);
}
.attestato img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(11, 26, 40, 0.14));
  transition: transform 0.4s var(--ease-out);
}
.attestato:active { transform: scale(0.97); }
.attestato:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .attestato:hover img { transform: scale(1.04); } }
.attestati__spazi--foto strong { margin-bottom: 4px; }
@media (max-width: 1023px) {
  /* telefono e tablet: la serie scorre col dito, una scheda e un pezzo della seguente */
  .attestati__spazi--foto {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding: 4px var(--margine) 20px; scroll-padding-inline: var(--margine);
  }
  .attestati__spazi--foto::-webkit-scrollbar { display: none; }
  .attestati__spazi--foto > li { scroll-snap-align: start; }
}
@media (min-width: 640px) and (max-width: 1023px) { .attestati__spazi--foto { grid-auto-columns: 40%; } }
@media (min-width: 1024px) {
  /* cinque per riga: la home ne ha 5, Chi siamo 10 (due righe piene) */
  .attestati__spazi--foto { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: calc(24 * var(--u)); }
  .attestati__spazi--foto > li { gap: calc(12 * var(--u)); padding: calc(26 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)); font-size: 15px; line-height: 1.35; }
  .attestati__spazi--foto:has(> li:nth-child(1)) strong { font-size: max(17px, calc(22 * var(--u))); }
}
.attestati__spazi + .didascalia, .attestati__spazi--foto + .didascalia { margin-top: 6px; }
/* da telefono le schede scritte (Chi siamo: master, laurea, patentino) larghe come quelle con l'attestato */
@media (max-width: 639px) { .attestati__spazi:not(.attestati__spazi--foto) { grid-auto-columns: 78%; } }
/* «Tutti gli attestati» porta qui: la riga resta sotto la testata, anche quella da computer */
#attestati { scroll-margin-top: 48px; }
@media (min-width: 1024px) { #attestati { scroll-margin-top: calc(130 * var(--u)); } }

/* il documento in grande */
.attestato-grande {
  width: min(92vw, 1100px); max-width: none; max-height: 92vh; margin: auto; padding: 0;
  border: 0; border-radius: var(--raggio); overflow: visible;
  background: var(--bianco); color: var(--inchiostro);
  box-shadow: 0 30px 80px rgba(11, 26, 40, 0.35);
}
.attestato-grande::backdrop { background: rgba(11, 26, 40, 0.74); }
.attestato-grande figure { margin: 0; padding: 14px 14px 12px; }
.attestato-grande img { display: block; width: 100%; height: auto; max-height: calc(92vh - 96px); object-fit: contain; }
.attestato-grande figcaption { padding: 10px 6px 0; font-size: 14px; line-height: 1.4; text-align: center; color: var(--testo); text-wrap: balance; }
.attestato-grande__chiudi {
  position: absolute; top: -14px; right: -14px;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--petrolio); color: var(--bianco);
  font: 400 28px/1 var(--testi); cursor: pointer;
  box-shadow: 0 8px 20px rgba(11, 26, 40, 0.3);
  transition: transform 0.16s var(--ease-out), background-color 0.2s ease;
}
.attestato-grande__chiudi:active { transform: scale(0.92); }
.attestato-grande__chiudi:focus-visible { outline: 2px solid var(--azzurro-vivo); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .attestato-grande__chiudi:hover { background-color: var(--blu); } }
@media (max-width: 639px) { .attestato-grande__chiudi { top: -18px; right: -6px; } }
.attestato-grande[open] { animation: attestato-apre 0.28s var(--ease-out); }
.attestato-grande[open]::backdrop { animation: velo-apre 0.28s var(--ease-out); }
.attestato-grande.chiude { animation: attestato-chiude 0.18s var(--ease-out) forwards; }
.attestato-grande.chiude::backdrop { animation: velo-chiude 0.18s var(--ease-out) forwards; }
@keyframes attestato-apre { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes attestato-chiude { to { opacity: 0; transform: scale(0.97); } }
@keyframes velo-apre { from { opacity: 0; } }
@keyframes velo-chiude { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .attestato-grande[open] { animation: velo-apre 0.2s ease; }
  .attestato-grande.chiude { animation: velo-chiude 0.15s ease forwards; }
  .attestato img { transition: none; }
}

/* ═════════ 6-quater · giro 2 (05/11/2026): ogni sezione nella sua fascia ═════════
   Domenico: «mi sembra tutto troppo unito», «vedo troppo spazio», «voglio qualcosa di più strutturato».
   Ogni sezione è una fascia col suo fondo del kit (bianco, azzurro, petrolio: fondi/), alternati, e tutte hanno le
   stesse misure: la stessa larghezza (quella della testata), gli stessi angoli, lo stesso respiro dentro e lo stesso
   stacco stretto fra l'una e l'altra. Fra le foto delle serie gli spazi si stringono. Stessi colori, caratteri, icone. */
:root {
  --gutter: 8px;                                   /* lo stacco fra una fascia e l'altra */
  --larghezza-fascia: calc(100% - 2 * var(--gutter));
  --pad-x: 18px;                                   /* il margine dentro la fascia */
  --pad-fascia: 28px;                              /* il respiro sopra e sotto */
  --raggio-fascia: 22px;
  --titolo-fascia: clamp(28px, 8vw, 38px);
  --dopo-titolo: 16px;
  --gap-foto: 12px;                                /* fra una foto e l'altra delle serie */
}
main > section {
  position: relative;
  width: var(--larghezza-fascia);
  margin: var(--gutter) auto 0;
  padding-block: var(--pad-fascia);
  border-radius: var(--raggio-fascia);
  overflow: hidden;
  overflow: clip;                                  /* le serie che scorrono finiscono sul bordo della fascia */
}
main > section > .wrap { width: auto; margin-inline: var(--pad-x); }
.piede > .wrap { width: auto; margin-inline: var(--pad-x); }
.piede { width: var(--larghezza-fascia); }
.fondo-bianco { background: var(--bianco); box-shadow: inset 0 0 0 1px var(--bordo); }
.fondo-azzurro { background: linear-gradient(180deg, var(--azzurro-alto) 0%, var(--azzurro-basso) 100%); }
.fondo-petrolio { background: linear-gradient(180deg, var(--petrolio-chiaro) 0%, var(--petrolio-scuro) 100%); color: var(--bianco); }

/* i titoli delle fasce: una misura sola, la stessa distanza dal contenuto */
main > section .titolo-sezione, .percorso__titolo, .contatti__titolo { font: 800 var(--titolo-fascia)/0.95 var(--titoli); text-transform: uppercase; letter-spacing: 0; white-space: normal; }
.fondo-petrolio .titolo-sezione { color: var(--bianco); }
.fondo-petrolio .didascalia { color: #AFC0C7; }
.aree__schede, .passi__elenco, .percorso__voci, .attestati__spazi, .dove__luoghi > .dove__schede { margin-top: var(--dopo-titolo); }
.scorre { gap: var(--gap-foto); margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x); }
.aree__schede.scorre { margin-top: calc(var(--dopo-titolo) - 10px); padding-bottom: 6px; }

/* ── la hero della home, sulla fascia scura ── */
.hero--foto { padding-top: 28px; padding-bottom: 20px; }
.fondo-petrolio .occhiello, .fondo-petrolio .hero__titolo { color: var(--bianco); }
.fondo-petrolio.hero .occhiello::before { background: var(--azzurro-vivo); }
.fondo-petrolio .hero__titolo .hero__titolo-blu { color: var(--azzurro-vivo); }
.fondo-petrolio .hero__sotto { color: #E1E7EA; }
.fondo-petrolio .hero__firma { color: #C9D3D8; }
.btn--azzurro .btn__cerchio { background: var(--petrolio); color: var(--bianco); }
/* «Richiedi informazioni senza impegno» è lungo: da telefono va su due righe, bilanciate, senza uscire */
.btn { text-wrap: balance; }
.hero__azioni .btn--freccia { line-height: 1.2; }
@media (max-width: 639px) {
  .hero__azioni { display: grid; }
  .hero__azioni .btn--freccia { justify-content: space-between; min-height: 62px; padding-block: 8px; }
  .contatti__testo .btn--azzurro { width: 100%; min-height: 58px; padding: 8px 18px; line-height: 1.2; text-align: center; }
}

/* ── le fasce del metodo e dei contatti: la fascia è la sezione, dentro solo l'impaginazione ── */
.percorso__voce h3 { display: block; }
.percorso:not(:has(.percorso__voci))::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 460px; aspect-ratio: 1; right: -150px; bottom: -240px; border-radius: 50%;
  border: 1.5px solid rgba(134, 210, 232, 0.2);
  outline: 1.5px solid rgba(134, 210, 232, 0.1); outline-offset: 46px;
}
.percorso > .wrap { position: relative; z-index: 1; }

/* ── le schede: sui fondi bianchi un azzurro ghiaccio, sui fondi colorati il bianco ── */
.fondo-bianco .foto-scheda__testo { background: var(--ghiaccio); box-shadow: none; }
.fondo-bianco .aree__schede:not(.scorre) .foto-scheda__testo { box-shadow: inset 0 0 0 1px var(--bordo); }

/* ── come funziona, sul fondo azzurro: la guida della linea del tempo si vede ── */
@media (max-width: 1023px) {
  .fondo-azzurro .passo::before { background: rgba(62, 121, 142, 0.28); }
}

/* ── il luogo delle sedute: le tre foto in verticale, una accanto all'altra, anche da telefono ── */
.dove__schede.scorre { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: var(--gap-foto); }
.dove .foto-scheda__foto { aspect-ratio: 4 / 5; border-radius: 14px 14px 0 0; }
.dove .foto-scheda--breve .foto-scheda__testo { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: -12px; padding: 10px 10px 12px; border-radius: 12px; }
.dove .foto-scheda--breve .foto-scheda__testo h3 { font-size: 13.5px; line-height: 1.2; }
.dove .foto-scheda--breve .ico-cerchio { --d: 30px; }
.dove__fascia > .dove__info { margin-top: 22px; }
.fondo-azzurro .oscar__ritratto, .fondo-azzurro .hero__visivo .oscar__ritratto { box-shadow: -14px 14px 0 0 rgba(255, 255, 255, 0.75); }
.fondo-azzurro .dove__fascia > .oscar__ritratto { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.6), var(--ombra-scheda); }

/* ── certificati e attestati, sul fondo petrolio: i diplomi come carta appoggiata ── */
.fondo-petrolio .attestati__spazi li { border-color: transparent; box-shadow: inset 0 0 0 6px var(--bianco), inset 0 0 0 7px #E2EDF1, 0 26px 44px -30px rgba(0, 0, 0, 0.7); }
.attestati__spazi--foto, .attestati__spazi { gap: var(--gap-foto); }
@media (max-width: 1023px) {
  .attestati__spazi--foto { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x); }
}
@media (max-width: 639px) {
  .attestati__spazi { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x); }
}

/* ── le pagine interne: la hero nella sua fascia azzurra ── */
.pagina-interna-piena .hero { padding-top: 30px; padding-bottom: 30px; }
.pagina-interna-piena .hero__visivo { margin-bottom: 14px; }
.aree__schede:not(.scorre) { gap: 40px var(--gap-foto); padding-top: 28px; margin-top: 0; }
main > section.aree:has(.aree__schede:not(.scorre)) { padding-top: calc(var(--pad-fascia) - 4px); }

/* ── chi sono (home): un blocco con due parti chiare. Sopra il ritratto, col logo della maglia appoggiato sull'angolo,
   e accanto la presentazione coi due numeri in tessere; sotto le cinque credenziali, ognuna nella sua tessera.
   Gli attestati hanno la loro fascia, scura, subito dopo. ── */
#chi-sono .oscar__griglia { gap: 30px; }
.oscar__foto { position: relative; margin: 0 12px 16px 0; }
#chi-sono .oscar__ritratto { aspect-ratio: 1 / 1.04; }
.oscar__foto .oscar__logo-maglia { position: absolute; right: -12px; bottom: -16px; width: 40%; border: 5px solid var(--bianco); border-radius: 16px; box-shadow: 0 22px 36px -18px rgba(20, 46, 56, 0.5); }
#chi-sono .oscar__corpo { display: block; margin-top: 12px; }
#chi-sono .oscar__presentazione { display: block; }
#chi-sono .oscar__ruolo { margin-top: 4px; }
#chi-sono .oscar__frase { margin-top: 10px; }
#chi-sono .oscar__numeri { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-foto); margin-top: 18px; }
#chi-sono .oscar__numeri li, #chi-sono .oscar__numeri li + li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 0; border-radius: 14px; background: var(--ghiaccio); }
#chi-sono .oscar__numeri .ico { width: 28px; height: 28px; }
#chi-sono .oscar__formazione { margin-top: 16px; }
.formazione { gap: var(--gap-foto); }
.formazione li { flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--ghiaccio); }
.fondo-azzurro .formazione li { background: var(--bianco); }
.formazione li .ico { width: 34px; height: 34px; }
.oscar .formazione {
  grid-auto-flow: column; grid-auto-columns: 72%; margin-top: 26px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad-x)); padding: 2px var(--pad-x) 4px; scroll-padding-inline: var(--pad-x);
}
.oscar .formazione::-webkit-scrollbar { display: none; }
.oscar .formazione > li { scroll-snap-align: start; }

/* ── testata: il pulsante lungo ci sta; da telefono il menu tiene il pulsante intero ── */
@media (max-width: 1023px) {
  .menu__cta { font-size: 16px; padding: 8px 20px; line-height: 1.2; text-align: center; }
}
.barra-telefono .btn { min-width: 0; padding: 6px 16px; font-size: 15px; line-height: 1.15; text-align: center; }

/* ═════ computer ═════ */
@media (min-width: 1024px) {
  :root {
    --gutter: calc(16 * var(--u));
    --larghezza-fascia: min(var(--wrap), 100% - 2 * var(--margine));   /* larga come la testata: logo e pulsante ai bordi */
    --pad-x: calc(56 * var(--u));
    --pad-fascia: calc(50 * var(--u));
    --raggio-fascia: calc(32 * var(--u));
    --titolo-fascia: calc(54 * var(--u));
    --dopo-titolo: calc(26 * var(--u));
    --gap-foto: calc(20 * var(--u));
  }
  .scorre { margin-inline: 0; padding: 0; }
  .aree__schede.scorre { margin-top: var(--dopo-titolo); padding: 0; }

  /* testata: «Richiedi informazioni senza impegno» ci sta in una riga, anche a 1024 px */
  .testata__riga { gap: calc(40 * var(--u)); }
  .menu { gap: calc(40 * var(--u)); }
  .menu__voci { gap: calc(44 * var(--u)); }
  .menu__voci a, .menu__apri { font-size: max(16px, calc(21 * var(--u))); }
  .menu__cta { min-height: calc(62 * var(--u)); padding: 0 calc(28 * var(--u)); font-size: max(15px, calc(19 * var(--u))); white-space: nowrap; }

  /* la hero della home: la velatura petrolio sui due terzi a sinistra, Oscar libero a destra */
  .hero--foto { padding-block: calc(56 * var(--u)); }
  .hero--foto .hero__wrap { margin-inline: var(--pad-x); }
  .hero--foto .hero__foto picture { inset: -5% 0; will-change: transform; }
  .hero--foto .hero__foto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(19, 47, 56, 0.94) 0%, rgba(19, 47, 56, 0.88) 34%, rgba(19, 47, 56, 0.58) 45%, rgba(19, 47, 56, 0.18) 54%, rgba(19, 47, 56, 0) 61%),
      linear-gradient(0deg, rgba(19, 47, 56, 0.38) 0%, rgba(19, 47, 56, 0) 30%);
  }
  .hero__azioni .btn--freccia { white-space: nowrap; }

  .percorso__voce h3 { min-height: 0; margin-top: calc(16 * var(--u)); }
  .percorso__voce .ico-cerchio { --d: calc(76 * var(--u)); }
  .percorso:not(:has(.percorso__voci))::after { width: calc(560 * var(--u)); right: calc(-250 * var(--u)); bottom: calc(-330 * var(--u)); outline-offset: calc(64 * var(--u)); }

  /* un titolo e, sulla stessa riga a destra, il suo collegamento: la fascia si legge come un blocco */
  .passi > .wrap, .attestati > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(40 * var(--u)); align-items: end; }
  .passi > .wrap > *, .attestati > .wrap > * { grid-column: 1 / -1; }
  .passi > .wrap > .titolo-sezione, .attestati > .wrap > .titolo-sezione { grid-column: 1; grid-row: 1; }
  .passi > .wrap > .sezione__link, .attestati > .wrap > .sezione__link { grid-column: 2; grid-row: 1; margin: 0 0 calc(4 * var(--u)); }

  /* come funziona: le sei schede più vicine, i fili fra una e l'altra corti */
  .passi__elenco { column-gap: var(--gap-foto); row-gap: var(--gap-foto); }
  .passo:not(:nth-child(3n))::after { width: var(--gap-foto); }

  /* il luogo delle sedute: le tre foto a sinistra, le informazioni a destra */
  .dove .foto-scheda__foto { border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0; }
  .dove .foto-scheda--breve .foto-scheda__testo { flex-direction: row; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(-24 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(20 * var(--u)); }
  .dove .foto-scheda--breve .foto-scheda__testo h3 { font-size: max(15px, calc(19 * var(--u))); }
  .dove .foto-scheda--breve .ico-cerchio { --d: calc(48 * var(--u)); }
  .dove__fascia > .dove__info { margin-top: 0; }
  .fondo-azzurro .oscar__ritratto, .fondo-azzurro .hero__visivo .oscar__ritratto { box-shadow: calc(-26 * var(--u)) calc(26 * var(--u)) 0 0 rgba(255, 255, 255, 0.75); }

  /* chi sono: ritratto e presentazione affiancati, poi le cinque tessere delle credenziali in una riga */
  #chi-sono .oscar__griglia { grid-template-columns: calc(410 * var(--u)) minmax(0, 1fr); gap: calc(80 * var(--u)); align-items: center; }
  .oscar__foto { margin: 0 calc(22 * var(--u)) calc(22 * var(--u)) 0; }
  #chi-sono .oscar__ritratto { aspect-ratio: 410 / 430; }
  .oscar__foto .oscar__logo-maglia { right: calc(-22 * var(--u)); bottom: calc(-22 * var(--u)); width: calc(190 * var(--u)); border-width: calc(7 * var(--u)); border-radius: calc(22 * var(--u)); aspect-ratio: 1.16 / 1; margin: 0; }
  #chi-sono .oscar__testo { padding-top: 0; }
  #chi-sono .oscar__corpo { margin-top: calc(18 * var(--u)); }
  #chi-sono .oscar__numeri { grid-template-columns: repeat(2, minmax(0, calc(260 * var(--u)))); gap: var(--gap-foto); margin-top: calc(26 * var(--u)); }
  #chi-sono .oscar__numeri li, #chi-sono .oscar__numeri li + li { gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(20 * var(--u)); }
  #chi-sono .oscar__numeri .ico { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  #chi-sono .oscar__formazione { margin-top: calc(26 * var(--u)); }
  .formazione, .oscar .formazione { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--gap-foto); margin: calc(40 * var(--u)) 0 0; padding: 0; overflow: visible; }
  .formazione li, .formazione li:first-child { gap: calc(14 * var(--u)); padding: calc(22 * var(--u)) calc(20 * var(--u)); border-left: 0; border-radius: calc(20 * var(--u)); }
  .formazione li .ico { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }

  /* le pagine interne */
  .pagina-interna-piena .hero, .pagina-interna-piena .hero__wrap { min-height: 0; }
  .pagina-interna-piena .hero { padding-block: calc(56 * var(--u)); }
  .pagina-interna-piena .hero__testo { padding: 0; }
  .pagina-interna-piena .hero__visivo { margin: 0 0 calc(14 * var(--u)); }
  .pagina-interna-piena .oscar__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(56 * var(--u)); }
  main > :nth-child(even of .oscar) .oscar__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  #formazione .oscar__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .aree__schede:not(.scorre) { gap: calc(56 * var(--u)) var(--gap-foto); padding-top: calc(40 * var(--u)); }
  main > section.aree:has(.aree__schede:not(.scorre)) { padding-top: calc(var(--pad-fascia) - 10 * var(--u)); }
  .oscar .attestati__spazi { margin-top: calc(36 * var(--u)); }
  .contatti__scheda > .oscar__ritratto { box-shadow: calc(-26 * var(--u)) calc(26 * var(--u)) 0 0 rgba(134, 210, 232, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--foto .hero__foto picture { will-change: auto; }
}

/* ── ritocchi dopo la prima prova (giro 2) ── */
.contatti__scheda > .modulo { align-self: center; }
@media (max-width: 1023px) {
  .passo { padding-bottom: 18px; }
  .passo::before { top: 52px; }
}
@media (min-width: 1024px) {
  .piede__riga { grid-template-columns: calc(190 * var(--u)) auto 1fr auto; }
  .piede__chi { padding: calc(4 * var(--u)) calc(40 * var(--u)) calc(4 * var(--u)) calc(44 * var(--u)); }
  .piede__legale { padding-left: calc(56 * var(--u)); }
  .piede__contatti { white-space: nowrap; }
}
/* da telefono meno vuoti fra una foto e l'altra (secondo studio, 05/11): gli elenchi con l'icona accanto al testo,
   non sopra; le voci brevi due per riga */
@media (max-width: 1023px) {
  .formazione li { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
  .formazione:not(:has(em)) { grid-template-columns: 1fr 1fr; }
  .formazione li .ico { width: 30px; height: 30px; }
  .oscar .formazione li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .pagina-interna-piena .percorso__voci { grid-template-columns: 1fr; gap: 16px; }
  .pagina-interna-piena .percorso__voce { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .pagina-interna-piena .percorso__voce .ico-cerchio { --d: 46px; grid-row: span 2; align-self: start; }
  .pagina-interna-piena .percorso__voce h3 { margin-top: 0; grid-column: 2; }
  .pagina-interna-piena .percorso__voce p { margin-top: 4px; grid-column: 2; }
  .pagina-interna-piena .percorso__voce p:only-of-type { margin-top: 0; }
  .aree__schede:not(.scorre) { gap: 34px; padding-top: 24px; }
  .aree__schede:not(.scorre) .foto-scheda__testo { padding-top: 34px; }
  .aree__schede:not(.scorre) .foto-scheda__testo > .ico-cerchio { --d: 50px; top: -24px; }
}
/* Chi sono, «Formazione e certificati»: le tre credenziali scritte (master, laurea, patentino) sono tessere, come
   quelle della home; i diplomi veri restano carta. Così si distinguono i titoli dai documenti */
.attestati__spazi:not(.attestati__spazi--foto) li {
  flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 14px;
  padding: 16px; border: 0; border-radius: 14px; background: var(--ghiaccio); box-shadow: none; text-align: left;
}
.attestati__spazi:not(.attestati__spazi--foto) li::before { display: none; }
.attestati__spazi:not(.attestati__spazi--foto) .ico-cerchio { --d: 46px; background: var(--bianco); box-shadow: none; }
.attestati__spazi:not(.attestati__spazi--foto) strong { margin-bottom: 4px; font: 700 16px/1.25 var(--testi); text-transform: none; letter-spacing: -0.01em; }
@media (max-width: 360px) { .dove .foto-scheda--breve .foto-scheda__testo h3 { font-size: 12.5px; } }
@media (min-width: 1024px) {
  .attestati__spazi:not(.attestati__spazi--foto) li { gap: calc(18 * var(--u)); min-height: 0; padding: calc(24 * var(--u)); border-radius: calc(20 * var(--u)); font-size: max(15px, calc(17 * var(--u))); }
  .attestati__spazi:not(.attestati__spazi--foto) .ico-cerchio { --d: calc(56 * var(--u)); }
  .attestati__spazi:not(.attestati__spazi--foto) strong { font-size: max(16px, calc(20 * var(--u))); }
  .dove__luoghi:only-child .foto-scheda__foto { aspect-ratio: 1 / 1; }
}
/* da telefono al massimo tre righe per blocco (collaudo, 05/11): i titoli lunghi delle pagine interne un poco più
   piccoli; le tessere scritte di Chi sono con l'icona sopra e più larghe */
.pagina-interna-piena .hero__titolo { font-size: clamp(25px, 7.6vw, 58px); }
@media (max-width: 639px) {
  .attestati__spazi:not(.attestati__spazi--foto) { grid-auto-columns: 86%; }
  .attestati__spazi:not(.attestati__spazi--foto) li { flex-direction: column; gap: 10px; }
}
/* sui telefoni stretti (fino a 360 px) le fasce lasciano un poco più di spazio al testo */
@media (max-width: 360px) { :root { --gutter: 6px; --pad-x: 14px; } }

/* ═════ il copy nuovo sulla grafica del giro 2 (05/11/2026) ═════ */
/* la hero: «Dimagrisci / senza effetto / yo-yo» in grande, sotto, nello stesso <h1>, chi, il mestiere e il dove */
.hero__titolo .hero__chi {
  margin-top: 16px; max-width: 30em;
  font: 600 16px/1.35 var(--testi); text-transform: none; letter-spacing: 0; color: #E1E7EA;
}
.hero__titolo > span:nth-child(3) { animation-delay: 0.28s; }
.hero__titolo > span:nth-child(4) { animation-delay: 0.36s; }
.hero__sotto { animation-delay: 0.42s; }
.hero__firma { animation-delay: 0.48s; }
.hero__azioni { animation-delay: 0.54s; }
/* i percorsi: le tre zone della terza scheda come righe brevi */
#percorsi .scheda__voci { margin-top: 10px; }
#percorsi .scheda__voci li { padding: 7px 0; font-size: 14.5px; line-height: 1.35; }
#percorsi .scheda__voci strong { display: inline; font-size: inherit; margin: 0; }
#percorsi .foto-scheda__testo p + p { margin-top: 8px; }
/* il luogo delle sedute, da telefono: le etichette sono frasi, quindi ogni luogo è una riga con la foto accanto */
@media (max-width: 639px) {
  .dove__schede.scorre { grid-template-columns: 1fr; gap: 10px; }
  .dove .foto-scheda--breve { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .dove .foto-scheda--breve .foto-scheda__foto { border-radius: 14px 0 0 14px; }
  .dove .foto-scheda--breve .foto-scheda__testo { flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 0 14px 14px 0; }
  .dove .foto-scheda--breve .foto-scheda__testo h3 { font-size: 15px; line-height: 1.3; }
  .dove .foto-scheda--breve .ico-cerchio { --d: 38px; }
}
@media (min-width: 1024px) {
  .hero--foto .hero__wrap { grid-template-columns: minmax(0, calc(610 * var(--u))) minmax(0, 1fr) calc(276 * var(--u)); }
  .hero__titolo { font-size: calc(106 * var(--u)); }
  .hero__titolo .hero__chi { margin-top: calc(22 * var(--u)); font-size: max(17px, calc(23 * var(--u))); }
  #percorsi .scheda__voci li { padding: calc(8 * var(--u)) 0; font-size: max(15px, calc(19 * var(--u))); }
  .dove .foto-scheda--breve .foto-scheda__testo h3 { font-size: max(15px, calc(18 * var(--u))); line-height: 1.25; }
}
/* Come funziona, «Per chi è il percorso»: sette voci, ognuna porta alla sua pagina; da computer quattro per riga */
.percorso__voce p a { color: inherit; text-decoration: underline; text-decoration-color: rgba(134, 210, 232, 0.35); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color 0.2s ease, color 0.2s ease; }
.percorso__voce p a:active { color: var(--azzurro-vivo); }
@media (hover: hover) and (pointer: fine) { .percorso__voce p a:hover { color: var(--bianco); text-decoration-color: var(--azzurro-vivo); } }
@media (min-width: 640px) and (max-width: 1023px) { .percorso__voci:has(> li:nth-child(5)) { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .percorso__voci:has(> li:nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: calc(30 * var(--u)); }
  .percorso__voci:has(> li:nth-child(5)) > li:nth-child(4n+1) { padding-left: calc(10 * var(--u)); border-left: 0; }
}
/* Chi sono: il titolo che divide i tre titoli scritti dalla galleria dei diplomi */
#formazione h3.titolo-sezione { margin-top: 34px; font-size: clamp(24px, 6.6vw, 30px); }
@media (min-width: 1024px) { #formazione h3.titolo-sezione { margin-top: calc(56 * var(--u)); font-size: calc(40 * var(--u)); } }
/* le pagine interne: la domanda in evidenza sotto il titolo */
.pagina-interna-piena .hero__sotto strong { color: var(--inchiostro); }
/* «senza effetto» sta in una riga anche da telefono */
@media (max-width: 1023px) { .hero--foto .hero__titolo { font-size: clamp(42px, 14vw, 64px); } }
/* Chi sono: la qualifica in evidenza subito sotto il titolo (la stessa riga del ruolo della home) */
.hero .oscar__ruolo { margin-top: 12px; font-size: 18px; }
@media (min-width: 1024px) { .hero .oscar__ruolo { margin-top: calc(16 * var(--u)); font-size: max(18px, calc(26 * var(--u))); } }
/* ═════ la hero con la foto vera (05/11/2026): Oscar sta al centro della foto, quindi da computer la hero si divide.
   A sinistra il testo sulla fascia petrolio, a destra la foto tagliata su Oscar, che sfuma nel petrolio dal suo bordo;
   la scheda nell'angolo in basso a destra, lontana dal viso. Da telefono la versione verticale. ═════ */
.hero--foto { --fuoco: 96% 30%; --fuoco-telefono: 50% 40%; }
@media (min-width: 1024px) {
  .hero--foto .hero__foto { inset: 0 0 0 44%; border-radius: 0 var(--raggio-fascia) var(--raggio-fascia) 0; }
  .hero--foto .hero__foto::after {
    background:
      linear-gradient(90deg, rgba(19, 47, 56, 1) 0%, rgba(19, 47, 56, 0.55) 6%, rgba(19, 47, 56, 0) 14%),
      linear-gradient(0deg, rgba(19, 47, 56, 0.4) 0%, rgba(19, 47, 56, 0) 28%);
  }
}
/* Chi sono: nel dettaglio della polo si vede il logo sul petto */
.hero__visivo .oscar__logo-maglia img { object-position: 72% 38%; }
.hero__visivo .oscar__logo-maglia { background: #4E5444; }

/* ═════ secondo giro sulle voci di Domenico (05/11/2026) ═════
   Voce 4: la foto della hero sta intera nel suo riquadro, senza margine nascosto sopra (la testa di Oscar non si taglia).
   Voce 12: meno spazio verticale da computer e da tablet, fra una fascia e l'altra e dentro le fasce; il telefono resta com'era. */
.hero--foto .hero__foto picture { inset: 0; transform: none; will-change: auto; }
.hero--foto .hero__foto img { object-position: var(--fuoco); }
.hero__visivo .oscar__logo-maglia { background: #0B0F0E; }
.hero__visivo .oscar__logo-maglia img { object-position: 50% 0%; }
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --pad-fascia: 18px; }
  .pagina-interna-piena .hero, .hero--foto { padding-top: 22px; padding-bottom: 22px; }
}
@media (min-width: 1024px) {
  :root { --gutter: calc(8 * var(--u)); --pad-fascia: calc(16 * var(--u)); --dopo-titolo: calc(22 * var(--u)); }
  .hero--foto { padding-block: calc(34 * var(--u)); min-height: calc(660 * var(--u)); }
  .hero--foto .hero__foto img { object-position: 96% 12%; }
  .pagina-interna-piena .hero { padding-block: calc(30 * var(--u)); }
  main > section.aree:has(.aree__schede:not(.scorre)) { padding-top: calc(var(--pad-fascia) - 6 * var(--u)); }
  .aree__schede:not(.scorre) { padding-top: calc(38 * var(--u)); }
}
/* voce 12 anche da telefono (05/11/2026, Domenico guarda il sito dal telefono): fasce più strette sopra e sotto,
   stacchi più corti, titoli e foto più vicini al loro contenuto */
@media (max-width: 639px) {
  :root { --gutter: 6px; --pad-fascia: 18px; --dopo-titolo: 12px; }
  .hero--foto { padding-top: 20px; padding-bottom: 16px; }
  .hero--foto .hero__visivo { margin-top: 20px; }
  .pagina-interna-piena .hero { padding-top: 20px; padding-bottom: 18px; }
  .pagina-interna-piena .hero__visivo { margin-top: 18px; margin-bottom: 8px; }
  .aree__schede:not(.scorre) { gap: 30px; padding-top: 22px; }
  .oscar__testo > p { margin-top: 10px; }
  .oscar__griglia, #chi-sono .oscar__griglia { gap: 18px; }
  .dove__fascia > .oscar__ritratto { margin-top: 16px; }
  .formazione, .oscar .formazione { margin-top: 18px; }
}

/* collaudo 05/11: l'icona delle schede scritte resta al centro del suo cerchio (la regola «li > span» la metteva in blocco) */
.attestati__spazi li > .ico-cerchio { display: inline-grid; place-items: center; }

/* ═════ giro 3 (05/11/2026), Domenico: «adesso è tutto pucciato… più spazio». Le fasce respirano di nuovo: più margine
   fra l'una e l'altra, così ognuna si vede staccata, e più spazio dentro, sopra e sotto titoli e contenuti.
   Le griglie di foto restano compatte. La hero, con meno testo, prende aria. ═════ */
@media (max-width: 639px) {
  :root { --gutter: 16px; --pad-fascia: 48px; --dopo-titolo: 22px; }
  .hero--foto { padding-top: 40px; padding-bottom: 28px; }
  .hero--foto .hero__visivo { margin-top: 30px; }
  .pagina-interna-piena .hero { padding-top: 40px; padding-bottom: 36px; }
  .pagina-interna-piena .hero__visivo { margin-top: 26px; }
  .aree__schede:not(.scorre) { gap: 38px; padding-top: 28px; }
  .oscar__griglia, #chi-sono .oscar__griglia { gap: 26px; }
  .formazione, .oscar .formazione { margin-top: 26px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --gutter: 18px; --pad-fascia: 60px; --dopo-titolo: 26px; }
  .pagina-interna-piena .hero, .hero--foto { padding-top: 52px; padding-bottom: 52px; }
}
.hero--foto .hero__sotto { margin-top: 22px; }
.hero--foto .hero__azioni { margin-top: 30px; }
@media (min-width: 1024px) {
  :root { --gutter: calc(28 * var(--u)); --pad-fascia: calc(88 * var(--u)); --dopo-titolo: calc(34 * var(--u)); }
  .hero--foto { padding-block: calc(72 * var(--u)); min-height: calc(700 * var(--u)); }
  .hero--foto .hero__sotto { margin-top: calc(30 * var(--u)); max-width: calc(500 * var(--u)); }
  .hero--foto .hero__azioni { margin-top: calc(42 * var(--u)); }
  .pagina-interna-piena .hero { padding-block: calc(72 * var(--u)); }
  main > section.aree:has(.aree__schede:not(.scorre)) { padding-top: calc(var(--pad-fascia) - 20 * var(--u)); }
  .aree__schede:not(.scorre) { padding-top: calc(44 * var(--u)); }
}

/* la hero nuova (proposta 1, Oscar nella metà destra): da computer la foto mostra la sua parte destra; da telefono la
   verticale ricavata dalla stessa foto. Le due righe che a 390 andavano su 4 tornano a 3 (impaginazione, testo uguale) */
.hero--foto { --fuoco-telefono: 50% 30%; }
@media (min-width: 1024px) { .hero--foto .hero__foto img { object-position: 100% 25%; } }
@media (max-width: 639px) {
  .percorso__voci { column-gap: 12px; }
  .percorso__voce p { font-size: 13.5px; }
  .oscar__testo > p { font-size: 15.5px; }
}

/* la hero scelta da Domenico (proposta 2): il fondo della foto è già petrolio, quindi la foto si fonde con la fascia;
   resta solo un velo leggerissimo sul bordo sinistro, perché non si veda la giuntura */
@media (min-width: 1024px) {
  .hero--foto .hero__foto img { object-position: 85% 30%; }
  .hero--foto .hero__foto::after { background: linear-gradient(90deg, rgba(24, 59, 70, 1) 0%, rgba(24, 59, 70, 0) 9%); }
}
.hero--foto .hero__foto { background: transparent; }
/* la scheda della valutazione va in basso a sinistra della foto, sul fondo petrolio: non copre il viso, il logo sul petto
   né le braccia conserte (05/11/2026) */
@media (min-width: 1024px) { .hero--foto .scheda { grid-column: 2; justify-self: start; width: calc(276 * var(--u)); } }


/* ───────── le video recensioni, quando ci sono: partono mute, l'unico comando è l'audio (16 § 2-quater) ───────── */
.recensione { min-width: 0; }
.recensione__box { position: relative; overflow: hidden; border-radius: 16px; background: #173a44; }
.recensione__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.recensione__audio { position: absolute; left: 10px; top: 10px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(13, 34, 41, .78); color: #fff; font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; }
.recensione__audio[aria-pressed="true"] { background: rgba(13, 34, 41, .94); }
.recensione__nome { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--testo); }
@media (min-width: 1024px) { .recensioni__video.scorre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }