/* ==========================================================================
   COPIA di shinka/www/assets/shinka.css — rigenerata il 2026-10-02
   da bin/copia-css-vetrina.sh del portale. Non modificarla qui: le modifiche
   vanno nel CSS del portale, poi si rilancia lo script.

   Serve alle pagine pubbliche del programma (/shinka/il-programma,
   /shinka/livello-N, /shinka/quanto-costa, /shinka/faq): sono il duplicato di
   quelle del portale, e per essere identiche devono avere lo stesso foglio.
   Unica differenza: i percorsi dei font, che qui puntano a ../vendor/.
   ========================================================================== */
/* ==========================================================================
   Portale SHINKA — design system
   --------------------------------------------------------------------------
   Token e scale ripresi da #shk-ext in /var/www/superfly/web/shinka/index.html
   (le fasce scritte a mano sotto l'export Showit). La differenza e' che li'
   il fondo e' crema con alcune fasce scure, qui il fondo scuro e' l'ambiente:
   il portale e' "dentro", il sito pubblico e' "fuori".

   Font self-hosted: nessuna chiamata a Google, niente CLS da webfont esterni.
   ========================================================================== */

@font-face { font-family: 'Newsreader Display Extra Light Italic'; src: url('../vendor/fonts/newsreader-extralightitalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Newsreader Display Light';              src: url('../vendor/fonts/newsreader-light.woff')            format('woff'); font-display: swap; }
@font-face { font-family: 'Newsreader Display Light Italic';       src: url('../vendor/fonts/newsreader-lightitalic.woff')      format('woff'); font-display: swap; }
@font-face { font-family: 'Commuters Sans Light';                  src: url('../vendor/fonts/commuterssans-light.woff')         format('woff'); font-display: swap; }
@font-face { font-family: 'Commuter Sans Regular';                 src: url('../vendor/fonts/commuterssans-regular.woff')       format('woff'); font-display: swap; }
@font-face { font-family: 'Made Canvas Light';                     src: url('../vendor/fonts/made_canvas_light.woff')           format('woff'); font-display: swap; }

@import url('../vendor/gfonts/fonts.css');

:root {
  --serif:   'Newsreader Display Extra Light Italic', 'Playfair Display', Georgia, serif;
  --sans:    'Raleway', 'Commuters Sans Light', -apple-system, 'Segoe UI', sans-serif;
  --label:   'Commuters Sans Light', 'Raleway', sans-serif;
  --display: 'Made Canvas Light', 'Raleway', sans-serif;

  --dark:    #191816;   /* fondo del portale */
  --dark2:   #211f1d;   /* superfici sollevate: card, barre */
  --dark3:   #2b2926;   /* bordi pieni, stati hover discreti */
  --gold:    #b6a793;   /* eyebrow, accenti, filetti */
  --sand:    #e1d1be;
  --cream:   #f3ede4;   /* titoli e testo forte su scuro */
  --ink:     #443f3d;   /* testo su fondo chiaro (bottoni pieni) */
  --ink2:    #5a544d;
  /* L'oro per le PAROLE su fondo chiaro. --gold sul crema fa 2:1, meno della
     meta' del minimo per un testo piccolo: su chiaro l'oro sta nelle linee, e
     le parole prendono questo, che fa 4,8:1. Il nome e' lo stesso della
     vetrina, dove la regola e' nata. */
  --gold-testo: #7a6544;

  --testo:   rgba(255, 255, 255, .72);
  --testo2:  rgba(255, 255, 255, .52);
  --linea:   rgba(255, 255, 255, .14);
  --linea2:  rgba(182, 167, 147, .35);

  --ok:      #8ea67f;
  --errore:  #c98b7a;

  --wrap:    1140px;
  --t:       .35s ease;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--dark);
  color: var(--testo);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.95rem, 3.7vw, 1.02rem);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--cream); text-decoration: none; transition: color var(--t), opacity var(--t); }
a:hover { color: var(--gold); }

::selection { background: var(--gold); color: var(--dark); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* --------------------------------------------------------------------------
   Impalcatura
   -------------------------------------------------------------------------- */
.shk-main { flex: 1 0 auto; }
.shk-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(22px, 6vw, 44px); }
/* Solo sopra e sotto, mai la scorciatoia a due valori: `padding: X 0` azzera
   anche i lati, e queste due classi stanno quasi sempre sullo stesso elemento
   di .shk-wrap, che i lati li ha appena messi. Su uno schermo largo non si
   vedeva — ci pensa il max-width a tenere il testo lontano dal bordo — ma sul
   telefono il contenitore riempie lo schermo e le parole toccavano il vetro. */
.shk-band { padding-top: clamp(56px, 9vw, 104px); padding-bottom: clamp(56px, 9vw, 104px); }
.shk-band--tight { padding-top: clamp(36px, 6vw, 64px); padding-bottom: clamp(36px, 6vw, 64px); }
/* L'aria sopra il titolo era misurata quando sopra c'era anche un occhiello.
   Dove il titolo e' la prima cosa (la dashboard, dopo i testi di Valeria) la
   stessa aria non e' respiro, e' un buco: sotto una barra fissa si legge come
   pagina non finita di caricare. */
.shk-band--alto { padding-top: clamp(30px, 4.4vw, 52px); }

/* Pagine pubbliche (login, registrazione): una sola colonna centrata,
   con l'immagine di sfondo tenuta molto indietro per non disturbare il form. */
.shk-gate {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 88px) clamp(20px, 6vw, 44px);
  position: relative;
  isolation: isolate;
}
.shk-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/bg_shinka.jpg') center / cover no-repeat;
  opacity: .17;
}
.shk-gate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(25,24,22,.55) 0%, rgba(25,24,22,.94) 72%);
}
.shk-gate__box { width: 100%; max-width: 460px; text-align: center; }
.shk-gate__box--largo { max-width: 560px; }


/* --------------------------------------------------------------------------
   Marchio
   -------------------------------------------------------------------------- */
/* Il logo e' nero su trasparente: su fondo scuro va invertito, come fa il
   sito pubblico nelle sue fasce .shk-dark. */
.shk-logo { filter: invert(1) brightness(1.6); }
.shk-logo--gate { width: clamp(150px, 34vw, 205px); margin: 0 auto clamp(26px, 4.5vw, 38px); }
.shk-logo--barra { width: 118px; }


/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.shk-eyebrow {
  display: block;
  font-family: var(--label);
  font-size: clamp(10px, 2.6vw, 11.5px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  line-height: 1.6;
}

/* I font del progetto sono dichiarati senza peso, quindi valgono 400: chiedere
   700 non carica un altro file, fa fabbricare al browser un grassetto finto
   ingrassando i tratti — e su un Extra Light Italic il risultato e' impastato.
   I titoli quindi non ereditano il bold predefinito. Chi vuole un peso vero lo
   chiede a Raleway, che il 600 ce l'ha davvero. */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }

.shk-h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.85rem, 6vw, 2.85rem);
  line-height: 1.2;
  color: var(--cream);
  margin-top: .5em;
}

.shk-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 5vw, 2.3rem);
  line-height: 1.24;
  color: var(--cream);
  margin-top: .45em;
}

.shk-h3 {
  font-family: var(--display);
  font-size: clamp(1.05rem, 4vw, 1.28rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 300;
  line-height: 1.3;
}

.shk-p { margin-top: 1.15em; color: var(--testo); }
.shk-p--soft { color: var(--testo2); font-size: .93em; line-height: 1.75; }
/* 600 e non 400: il corpo e' Raleway 300, e il 400 e' lo stesso disegno —
   il grassetto si distingueva solo per il colore, e serviva un occhio attento.
   Con un peso vero si vede da subito, senza gridare. */
.shk-p strong, .shk-h1 strong, .shk-h2 strong { font-weight: 600; color: var(--cream); }

.shk-rule { width: 44px; height: 1px; background: var(--linea2); margin: clamp(30px, 5vw, 48px) auto; border: 0; }


/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.shk-btn {
  display: inline-block;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  padding: 19px 42px;
  cursor: pointer;
  text-align: center;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.shk-btn:hover:not(:disabled) { background: var(--cream); color: var(--dark); border-color: var(--cream); }
.shk-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Azione primaria: oro pieno. Una sola per schermata. */
.shk-btn--oro { background: var(--gold); border-color: var(--gold); color: var(--dark); font-weight: 400; }
.shk-btn--oro:hover:not(:disabled) { background: var(--cream); border-color: var(--cream); color: var(--dark); }

.shk-btn--block { display: block; width: 100%; }
.shk-btn--small { padding: 13px 24px; font-size: 11px; letter-spacing: .2em; }

@media (max-width: 520px) {
  .shk-btn { font-size: 11px; letter-spacing: .15em; padding: 18px 22px; }
}

/* Link testuale discreto (es. "Non hai un account?") */
.shk-link {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.shk-link:hover { color: var(--cream); }


/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.shk-form { margin-top: clamp(28px, 5vw, 40px); text-align: left; }
.shk-form__riga { margin-top: 20px; }
.shk-form__riga:first-child { margin-top: 0; }

@media (min-width: 560px) {
  .shk-form__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .shk-form__coppia .shk-form__riga { margin-top: 20px; }
}

.shk-label {
  display: block;
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}

.shk-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border-radius: 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: .02em;
  padding: 15px 16px;
  outline: none;
  transition: border-color var(--t), background var(--t);
}
.shk-input::placeholder { color: rgba(255, 255, 255, .3); }
.shk-input:focus { border-color: var(--gold); background: rgba(255, 255, 255, .06); }
.shk-input:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px #232120 inset;
  caret-color: var(--cream);
}

/* Occhio mostra/nascondi password */
.shk-pw { position: relative; }
.shk-pw .shk-input { padding-right: 58px; }
.shk-pw__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  color: var(--testo2);
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--t);
}
.shk-pw__toggle:hover { color: var(--gold); }

.shk-aiuto { display: block; margin-top: 7px; font-size: 12px; line-height: 1.6; color: var(--testo2); }

/* Checkbox: quadrato disegnato a mano, coerente con i filetti sottili
   del resto del sistema. L'input resta accessibile, solo visivamente nascosto. */
.shk-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; cursor: pointer; }
.shk-check input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}
.shk-check__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, .4);
  position: relative;
  transition: border-color var(--t), background var(--t);
}
.shk-check__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--dark);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s ease;
}
.shk-check input:checked + .shk-check__box { background: var(--gold); border-color: var(--gold); }
.shk-check input:checked + .shk-check__box::after { transform: rotate(45deg) scale(1); }
.shk-check input:focus-visible + .shk-check__box { outline: 2px solid var(--gold); outline-offset: 3px; }
.shk-check__testo { font-size: 13px; line-height: 1.65; color: var(--testo2); }
.shk-check__testo a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.shk-form .shk-btn { margin-top: clamp(26px, 4vw, 34px); }


/* --------------------------------------------------------------------------
   Messaggi
   -------------------------------------------------------------------------- */
.shk-msg {
  text-align: left;
  font-size: .93rem;
  line-height: 1.7;
  padding: 15px 18px;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, .04);
  margin-bottom: 26px;
}
.shk-msg a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.shk-msg--errore { border-left-color: var(--errore); color: #e8c9c0; }
.shk-msg--ok     { border-left-color: var(--ok);     color: #d6e2cf; }


/* --------------------------------------------------------------------------
   Barra superiore (area riservata)
   -------------------------------------------------------------------------- */
.shk-topbar {
  border-bottom: 1px solid var(--linea);
  background: rgba(25, 24, 22, .92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.shk-topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.shk-topbar__nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); }
.shk-topbar__nav a {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo2);
}
.shk-topbar__nav a:hover, .shk-topbar__nav a[aria-current='page'] { color: var(--cream); }
/* "Sold out" sta dove stava "Acquista", ma non e' un link: la stessa voce, in
   oro e senza puntatore — dice, non porta da nessuna parte. */
.shk-topbar__nav .shk-topbar__voce--soldout {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: default;
  white-space: nowrap;
}
/* Sul telefono le voci non ci stanno in riga accanto al logo: erano tre e
   passavano, con "Quanto costa" no — e il flex, invece di mandarle a capo,
   stringeva il logo fino a farlo sparire. Quindi qui la barra diventa due
   righe, il marchio sopra e la navigazione sotto, e il logo non si stringe
   piu'. `nowrap` sulle voci perche' a spezzarsi sia il gruppo, non le parole:
   "Il mio / percorso" su due righe si legge come due voci diverse. */
@media (max-width: 560px) {
  /* Con quattro voci la riga era lunga 370 pixel su uno schermo da 362: "Esci"
     finiva sotto da sola. Nove pixel e un filo meno di spaziatura la
     riportano in riga — le lettere restano leggibili perche' sono
     maiuscolette e spaziate. */
  .shk-topbar__nav a,
  .shk-topbar__nav .shk-topbar__voce--soldout { font-size: 9px; letter-spacing: .05em; white-space: nowrap; }
  .shk-logo--barra { width: 76px; }
  /* L'aria ai lati la mette .shk-wrap una volta sola, ed e' giusto cosi' per il
     contenuto. La barra e' l'eccezione: qui dentro quei 23 pixel per lato sono
     la differenza fra una riga e due, e due righe appiccicate in cima costano
     piu' di un margine strettino su una fascia alta 45 pixel. */
  .shk-topbar .shk-wrap { padding-left: 14px; padding-right: 14px; }
  .shk-topbar__in { gap: 8px; min-height: 54px; padding-top: 8px; padding-bottom: 8px; }
  .shk-topbar__in > a { flex: 0 0 auto; }
  .shk-topbar__nav { flex-wrap: wrap; justify-content: flex-end; gap: 2px 9px; }
  /* Il marchio porta a /area/, cioe' esattamente dove porta "Il mio percorso":
     sul telefono la voce si toglie e il logo fa il suo lavoro. Con cinque voci
     la barra andava su tre righe — 139 pixel appiccicati in cima a uno schermo
     alto 844, per dire due volte la stessa cosa. */
  .shk-topbar__voce--percorso { display: none; }
  /* E con "Acquista" in mezzo le voci sono tornate cinque, cioe' due righe
     appiccicate in cima. Sul telefono esce "FAQ": e' la voce che si cerca
     dopo, non quella che porta avanti, e resta a un clic dal listino. */
  .shk-topbar__voce--faq { display: none; }
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.shk-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--linea);
  padding: clamp(28px, 5vw, 40px) 0;
  text-align: center;
}
.shk-footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; }
.shk-footer a, .shk-footer span {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo2);
}
.shk-footer a:hover { color: var(--gold); }


/* --------------------------------------------------------------------------
   Area riservata — intestazione del percorso
   -------------------------------------------------------------------------- */
.shk-intro { max-width: 720px; }
.shk-intro .shk-p { max-width: 62ch; }

.shk-progresso {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(26px, 4vw, 34px);
}
.shk-progresso__barra {
  flex: 1 1 auto;
  max-width: 240px;
  height: 1px;
  background: var(--linea);
  position: relative;
}
.shk-progresso__barra i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gold);
  transition: width .6s ease;
}
.shk-progresso__testo {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--testo2);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Griglia delle lezioni
   -------------------------------------------------------------------------- */
/* Filetti da 1px al posto dei box: e' la stessa grammatica della griglia
   webinar del sito pubblico (.shk-web-grid), dove a separare sono le linee. */
.shk-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(38px, 6vw, 56px);
}
@media (min-width: 860px) {
  .shk-griglia { grid-template-columns: repeat(3, 1fr); }
}

.shk-tessera {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background var(--t);
}
.shk-tessera--aperta:hover { background: var(--dark2); }

.shk-tessera__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--dark3);
}
.shk-tessera__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease, filter var(--t), opacity var(--t);
}
.shk-tessera--aperta:hover .shk-tessera__media img { transform: scale(1.04); }

/* Chiusa: l'immagine resta, ma spenta. Si intuisce cosa c'e' senza mostrarlo. */
.shk-tessera--chiusa .shk-tessera__media img { filter: grayscale(1) brightness(.42); opacity: .8; }

/* Triangolo play, disegnato in CSS: nessuna icona da caricare. */
.shk-tessera__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  background: rgba(25, 24, 22, .35);
  transition: background var(--t), border-color var(--t);
}
.shk-tessera__play::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.shk-tessera--aperta:hover .shk-tessera__play { background: var(--gold); border-color: var(--gold); }
.shk-tessera--aperta:hover .shk-tessera__play::after { border-left-color: var(--dark); }

/* Lucchetto della tessera chiusa */
.shk-tessera__lucchetto {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 2px;
}
.shk-tessera__lucchetto::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 12px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.shk-tessera__corpo {
  padding: clamp(24px, 3.4vw, 32px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.shk-tessera__no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  font-weight: 300;
}
.shk-tessera__titolo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.42rem);
  line-height: 1.25;
  color: var(--cream);
  font-weight: 300;
  margin-top: .4em;
}
.shk-tessera__testo {
  font-size: .92rem;
  line-height: 1.72;
  color: var(--testo2);
  margin-top: .95em;
  flex: 1 1 auto;
}
.shk-tessera--chiusa .shk-tessera__titolo { color: rgba(243, 237, 228, .5); }
.shk-tessera--chiusa .shk-tessera__no     { color: rgba(182, 167, 147, .5); }

.shk-tessera__piede {
  /* auto e non una misura fissa: il corpo e' una colonna flessibile, e cosi' il
     piede si appoggia al fondo della tessera invece di scorrere dietro alla
     descrizione. Le descrizioni sono lunghe diverse, e prima i filetti delle
     cinque tessere cadevano a altezze diverse — 21px di scarto, che su una
     riga orizzontale si notano subito. */
  margin-top: auto;
  padding-top: 1.1em;
  border-top: 1px solid var(--linea);
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.9;
  /* Due righe garantite: e' cio' che tiene i filetti delle tessere su una riga
     sola. Senza, basta un testo piu' corto e il piede si alza. */
  min-height: calc(2 * 1.9em);
  color: var(--gold);
}
.shk-tessera--chiusa .shk-tessera__piede { color: var(--testo2); }
.shk-tessera__piede em { font-style: normal; color: var(--cream); }

/* Tutta la tessera aperta e' cliccabile, ma il link resta uno solo:
   lo stende sopra la card invece di annidare il markup. */
.shk-tessera__link { position: absolute; inset: 0; z-index: 2; }
.shk-tessera__link span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* Nastro "visto" */
.shk-tessera__visto {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  font-family: var(--label);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--gold);
  padding: 5px 10px;
}


/* --------------------------------------------------------------------------
   Pagina lezione
   -------------------------------------------------------------------------- */
.shk-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--linea);
  margin-top: clamp(26px, 4vw, 36px);
}
.shk-player video { width: 100%; height: 100%; display: block; background: #000; }

/* Stato "video non ancora caricato": la tessera c'e', il file no. */
.shk-player--vuoto {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--dark2);
}
.shk-player--vuoto p {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--testo2);
  line-height: 2;
}

.shk-lezione__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(34px, 5vw, 48px);
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 1px solid var(--linea);
}


/* --------------------------------------------------------------------------
   Blocco "prossimo passo" a fondo dashboard
   -------------------------------------------------------------------------- */
.shk-prossimo {
  margin-top: clamp(38px, 6vw, 56px);
  border: 1px solid var(--linea2);
  padding: clamp(30px, 5vw, 52px);
  text-align: center;
}
.shk-prossimo .shk-h2 { margin-top: .3em; }
.shk-prossimo .shk-p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.shk-prossimo .shk-btn { margin-top: clamp(26px, 4vw, 34px); }


/* --------------------------------------------------------------------------
   Avviso: indirizzo email da confermare
   L'indirizzo e' scritto per esteso apposta: e' la parte che fa il lavoro.
   Chi ha sbagliato a digitare se ne accorge leggendolo, non dal messaggio.
   -------------------------------------------------------------------------- */
.shk-verifica {
  border: 1px solid var(--linea2);
  background: rgba(182, 167, 147, .05);
  padding: clamp(22px, 3.4vw, 32px);
  margin-bottom: clamp(30px, 4.4vw, 44px);
}
.shk-verifica .shk-p { margin-top: .5em; max-width: 60ch; }
.shk-verifica__mail {
  color: var(--cream);
  font-weight: 400;
  border-bottom: 1px solid var(--linea2);
  white-space: nowrap;
}

.shk-verifica__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em .85em;
  margin-top: 20px;
  font-size: .9rem;
  color: var(--testo2);
}
.shk-verifica__azioni form { display: inline; }
.shk-verifica__domanda { margin-right: -.2em; }

/* Filetto verticale fra le due azioni: una barra scritta a mano ("|") sarebbe
   un carattere di testo, letto ad alta voce dai lettori di schermo e allineato
   male con il maiuscoletto. Questo e' un segno grafico e basta. */
.shk-verifica__sep {
  align-self: center;
  width: 1px;
  height: 1.05em;
  background: var(--linea2);
}

/* Chiuso e' un elemento della riga; aperto prende tutta la larghezza, cosi' il
   modulo scende sotto invece di sfondare la riga. */
.shk-verifica__correggi[open] { flex-basis: 100%; margin-top: .4em; }

/* Aperto, "Correggi l'indirizzo" va a capo e il filetto resterebbe appeso in
   fondo alla riga di sopra, a separare il nulla. :has() guarda avanti fra i
   fratelli; dove non c'e' il filetto resta, ed e' solo un segno di troppo. */
.shk-verifica__azioni:has(.shk-verifica__correggi[open]) .shk-verifica__sep {
  visibility: hidden;
}

/* Bottone che deve sembrare un link: e' un'azione secondaria, e un bottone
   pieno accanto a quello del video litigherebbe per l'attenzione. */
.shk-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t);
}
.shk-linkbtn:hover { color: var(--sand); }

.shk-verifica__correggi { margin-top: 0; }
.shk-verifica__correggi > summary {
  cursor: pointer;
  font-size: .9rem;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.shk-verifica__correggi > summary::-webkit-details-marker { display: none; }
.shk-verifica__correggi > summary:hover { color: var(--sand); }
.shk-verifica__correggi[open] > summary { color: var(--testo2); text-decoration: none; }

.shk-verifica__correzione { margin-top: 18px; max-width: 420px; }
.shk-verifica__correzione .shk-input  { margin-top: 6px; }
.shk-verifica__correzione .shk-btn    { margin-top: 14px; }


/* Sottotitolo del programma sotto il logo (atrio). Non e' un eyebrow: e'
   troppo lungo per reggere il maiuscoletto spaziato senza andare a capo male. */
.shk-tagline {
  font-family: var(--label);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-top: -10px;
  margin-bottom: clamp(26px, 4vw, 34px);
}


/* --------------------------------------------------------------------------
   Carosello dei video (area riservata)
   Non e' una griglia: i video sono cinque e domani potrebbero essere di piu'.
   La pista scorre nativamente — dito, trackpad, tastiera — e le frecce sono
   solo una scorciatoia per il mouse.
   -------------------------------------------------------------------------- */
.shk-carosello {
  position: relative;
  margin-top: clamp(38px, 6vw, 56px);
}

.shk-pista {
  display: flex;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra di scorrimento sparisce: al suo posto ci sono le frecce, e su
     fondo scuro quella di sistema e' un graffio bianco. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shk-pista::-webkit-scrollbar { display: none; }

.shk-pista > .shk-tessera {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .shk-pista > .shk-tessera { flex-basis: calc(50% - .5px); } }
@media (min-width: 980px) { .shk-pista > .shk-tessera { flex-basis: calc(33.3333% - .67px); } }

/* Chi preferisce meno animazioni non si trova la pista che scivola da sola. */
@media (prefers-reduced-motion: reduce) {
  .shk-pista { scroll-behavior: auto; }
}

/* Frecce sopra la pista, non sovrapposte alle tessere: cosi' non coprono mai
   il contenuto e non dipendono dall'altezza della tessera, che cambia con la
   lunghezza del testo. Sono disabilitate agli estremi invece che nascoste,
   altrimenti la riga salterebbe a ogni scorrimento. */
.shk-frecce {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.shk-frecce[hidden] { display: none; }

.shk-freccia {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea2);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t);
}
.shk-freccia:hover:not(:disabled) { background: var(--dark2); color: var(--cream); border-color: var(--gold); }
.shk-freccia:disabled { opacity: .28; cursor: default; }

/* Chevron disegnato col bordo: nessun file da caricare, come il play e il
   lucchetto delle tessere. */
.shk-freccia::before {
  content: '';
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.shk-freccia--succ::before { transform: rotate(45deg);   margin-left: -3px; }
.shk-freccia--prec::before { transform: rotate(-135deg); margin-right: -3px; }


/* --------------------------------------------------------------------------
   Il programma prima di sbloccarsi
   Stesso trattamento delle tessere chiuse: si intuisce cosa c'e' senza
   mostrarlo, e il blocco non compare dal nulla all'ultimo video.
   -------------------------------------------------------------------------- */
.shk-prossimo--chiusa { border-color: var(--linea); }
.shk-prossimo--chiusa .shk-eyebrow,
.shk-prossimo--chiusa .shk-h2,
.shk-prossimo--chiusa .shk-p { opacity: .4; }

.shk-prossimo__chiuso {
  margin-top: clamp(22px, 3.4vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo2);
}

/* Stesso lucchetto delle tessere, in linea invece che centrato sull'immagine. */
.shk-lucchetto {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 2px;
  margin-top: 6px;
}
.shk-lucchetto::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}


/* --------------------------------------------------------------------------
   Pagina del programma: le tre targhe dei livelli
   Le immagini sono crema su pagina scura: sono loro la luce della pagina, e
   per questo intorno non ci va nient'altro che aria.
   -------------------------------------------------------------------------- */
.shk-intro--centro {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.shk-livelli {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 46px);
  margin-top: clamp(44px, 7vw, 68px);
}
@media (min-width: 820px) {
  .shk-livelli { grid-template-columns: repeat(3, 1fr); }
}

.shk-livello { text-align: center; }

.shk-livello__targa {
  display: block;
  width: 100%;
  height: auto;
  /* Quadrate come le ha disegnate Valeria: il testo occupa una fascia stretta
     al centro e l'aria intorno fa parte del segno, non e' spazio sprecato. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--t);
}
.shk-livello:hover .shk-livello__targa { transform: translateY(-3px); }

.shk-livello__btn { margin-top: clamp(18px, 2.6vw, 24px); }

.shk-livello__stato {
  display: inline-block;
  margin-top: clamp(18px, 2.6vw, 24px);
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Bottone "fantasma": ha la forma di un bottone ma non e' cliccabile, perche'
   la pagina che aprirebbe non esiste ancora. Meglio questo di un link a un 404. */
.shk-btn--fantasma {
  opacity: .5;
  cursor: default;
}
.shk-btn--fantasma:hover { background: transparent; color: var(--gold); }

/* Spento, non sbiadito. A .62 il testo scuro sull'oro velato scendeva a 3,5:1:
   le linee guida esentano i comandi disattivati, ma questo bottone e' quello
   che si vede su ogni pagina da qui al 21 settembre, e sotto c'e' scritta la
   data — cioe' l'informazione che conta. A .75 si legge (4,8:1) e resta
   chiaramente inattivo: non ha puntatore, non ha hover, ed e' piu' pallido di
   quello vivo. */
.shk-btn--spento {
  opacity: .75;
  cursor: default;
  pointer-events: none;
}

.shk-btn--grande { padding-left: clamp(48px, 8vw, 82px); padding-right: clamp(48px, 8vw, 82px); }

.shk-iscrizione {
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: clamp(44px, 6vw, 64px);
  border-top: 1px solid var(--linea);
  text-align: center;
}
/* Sul listino e sull'iscrizione il filetto si stringe. Altrove separa due
   discorsi lunghi e quell'aria serve; qui separa una tabella dal suo bottone,
   e tenerli a centocinquanta pixel di distanza vuol dire che chi apre la
   pagina vede i prezzi ma non cosa farne — il bottone resta sotto la piega,
   e per trovarlo bisogna sapere che c'e'. */
.shk-iscrizione--vicina {
  margin-top: clamp(28px, 3.6vw, 40px);
  padding-top: clamp(24px, 3vw, 32px);
}
.shk-iscrizione .shk-p { max-width: 46ch; margin: 20px auto 0; }


/* --------------------------------------------------------------------------
   Pagina di un singolo livello
   -------------------------------------------------------------------------- */
.shk-indietro { margin-bottom: clamp(26px, 4vw, 38px); }

.shk-livello-testa {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 40px);
  align-items: center;
}
@media (min-width: 780px) {
  .shk-livello-testa { grid-template-columns: 300px 1fr; gap: clamp(38px, 5vw, 56px); }
}
.shk-livello-testa__targa { display: block; width: 100%; height: auto; }
.shk-livello-testa .shk-h1 { margin-top: .15em; }

.shk-periodo {
  margin-top: 1em;
  font-family: var(--label);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* L'avvertenza del documento: c'e' ma non deve gridare. */
.shk-avvertenza {
  margin-top: clamp(34px, 5vw, 48px);
  max-width: 68ch;
  font-size: .92rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--testo2);
}

/* Il box: e' la parte che Valeria ha chiesto di evidenziare. Fondo appena
   sollevato e filetto oro a sinistra — lo stesso segno dei messaggi flash,
   perche' nel portale "guarda qui" si dice gia' cosi'. */
.shk-box {
  margin-top: clamp(40px, 6vw, 60px);
  border: 1px solid var(--linea2);
  border-left-width: 2px;
  border-left-color: var(--gold);
  background: rgba(182, 167, 147, .05);
  padding: clamp(28px, 4.4vw, 46px);
}
.shk-box__titolo {
  font-family: var(--label);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(24px, 3.4vw, 34px);
}
.shk-box__voce + .shk-box__voce { margin-top: clamp(24px, 3.4vw, 32px); }
.shk-box__voce-titolo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cream);
  margin-bottom: .35em;
}
.shk-box .shk-p { max-width: 72ch; }
.shk-box strong { color: #fff; font-weight: 600; }

/* Il calendario */
.shk-calendario { margin-top: clamp(56px, 8vw, 84px); }

/* Apertura di sezione, non un'etichetta come le date qui sotto: stessa famiglia
   ma piu' grande, piu' spaziata, in crema invece che oro — dentro il calendario
   l'oro e' il colore dei dati — e con un filetto che chiude la riga. Prima era
   un eyebrow identico alle date, che pero' sono .76rem: il dato risultava piu'
   importante del titolo che lo contiene. */
.shk-calendario__titolo,
.shk-faq__titolo {
  font-family: var(--label);
  font-weight: 400;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: clamp(16px, 2.2vw, 22px);
  border-bottom: 1px solid var(--linea2);
  margin-bottom: clamp(10px, 1.6vw, 14px);
}

.shk-sessione { padding: clamp(26px, 4vw, 36px) 0; border-top: 1px solid var(--linea); }
/* La prima no: sopra c'e' gia' il filetto del titolo di sezione, e due righe a
   pochi pixel una dall'altra si leggono come un errore. */
.shk-sessione:first-of-type { border-top: 0; padding-top: clamp(18px, 2.6vw, 26px); }
.shk-sessione__data {
  display: block;
  font-family: var(--label);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75em;
}
.shk-sessione__titolo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  color: var(--cream);
}
.shk-sessione__sommario { margin-top: .7em; max-width: 70ch; color: var(--testo); }
.shk-sessione__sommario + .shk-sessione__sommario { margin-top: .9em; }
.shk-indietro--fondo {
  margin-top: clamp(44px, 6vw, 64px);
  margin-bottom: 0;
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid var(--linea);
  text-align: center;
}

/* Gli altri livelli, in fondo alla pagina di un livello. */
.shk-altri {
  margin-top: clamp(50px, 7vw, 76px);
  padding-top: clamp(34px, 4.6vw, 48px);
  border-top: 1px solid var(--linea);
  text-align: center;
}
.shk-altri__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(22px, 3vw, 28px);
}
@media (min-width: 700px) {
  .shk-altri__lista { grid-template-columns: repeat(2, 1fr); }
}
.shk-altri__voce {
  background: var(--dark);
  padding: clamp(22px, 3.2vw, 30px) clamp(18px, 3vw, 28px);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.3;
  color: var(--cream);
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.shk-altri__voce:hover { background: var(--dark2); color: var(--sand); }
.shk-altri__tutti { margin-top: clamp(24px, 3.4vw, 32px); }


/* --------------------------------------------------------------------------
   Aree toccabili
   WCAG 2.2 chiede almeno 24x24px per un bersaglio. Diversi link erano alti
   14-20px: non per il testo, ma perche' l'area cliccabile finiva con la riga.
   Si allarga con il padding — l'aspetto non cambia, cambia dove si puo'
   premere, che su un telefono e' la differenza fra centrare e sbagliare.
   -------------------------------------------------------------------------- */
.shk-topbar__nav a {
  padding-top: 7px;
  padding-bottom: 7px;
}
.shk-footer__in a,
.shk-footer__in span {
  padding-top: 5px;
  padding-bottom: 5px;
}
/* I link di testo dentro un paragrafo sono esentati dalla regola (sono "inline"
   in una frase), ma quelli che stanno da soli come comando no. */
.shk-indietro .shk-link,
.shk-altri__tutti .shk-link,
.shk-link--comando {
  display: inline-block;
  padding-top: 6px;
  padding-bottom: 6px;
}

.shk-tessera__riga { display: block; }
.shk-tessera__riga:empty { display: none; }


/* --------------------------------------------------------------------------
   Quanto costa
   --------------------------------------------------------------------------
   Tre riquadri, una combinazione ciascuno, divisi dai filetti da 1px come la
   griglia dei video e l'elenco degli altri livelli: nel portale "queste cose
   stanno sullo stesso piano" si dice cosi'.

   Ogni riquadro porta *entrambi* i prezzi, quello di oggi grande e l'altro
   sotto in piccolo. Non e' ridondanza: l'early bird e' uno sconto, e uno sconto
   senza il prezzo accanto e' un'affermazione da credere sulla parola.
   -------------------------------------------------------------------------- */

/* La fascia dell'early bird: il dato e la data, non un annuncio. Stesso segno
   dei messaggi e del box del programma — filetto oro a sinistra — perche' qui
   "guarda questo" si dice sempre allo stesso modo. */
.shk-early {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  margin-top: clamp(24px, 3.4vw, 32px);
  padding: clamp(12px, 1.8vw, 15px) clamp(18px, 3vw, 28px);
  border: 1px solid var(--linea2);
  border-left-width: 2px;
  border-left-color: var(--gold);
  background: rgba(182, 167, 147, .05);
  text-align: center;
  font-size: .95rem;
  line-height: 1.7;
}
.shk-early__tag {
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.shk-early__testo { max-width: 60ch; }
/* La prova live non e' un'offerta: e' la cassa aperta in anticipo con lo
   sconto dentro. Stesso impianto della fascia early bird, ma nel colore degli
   errori — deve essere impossibile leggerla distrattamente. */
.shk-early--prova { border-left-color: var(--errore); background: rgba(201, 139, 122, .07); }
.shk-early--prova .shk-early__tag { color: var(--errore); }
.shk-early strong { font-weight: 600; color: var(--cream); }

.shk-prezzi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(22px, 3vw, 30px);
}
@media (min-width: 820px) {
  .shk-prezzi { grid-template-columns: repeat(3, 1fr); }
}

.shk-prezzo {
  display: flex;
  flex-direction: column;
  background: var(--dark);
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 30px);
  text-align: center;
}
/* Il programma intero: superficie appena sollevata e un filetto oro in cima.
   Non un nastro "consigliato" — il prezzo lo dice gia' da solo, e un nastro
   sposterebbe il peso dall'informazione alla spinta. */
.shk-prezzo--tutto {
  background: var(--dark2);
  box-shadow: inset 0 2px 0 var(--gold);
}

.shk-prezzo__comprende {
  list-style: none;
  display: grid;
  gap: 5px;
  margin-top: clamp(12px, 1.8vw, 16px);
  /* Light Italic come i temi del calendario: stessa misura, stesso ruolo —
     il nome di una cosa che sta dentro. L'Extra Light a questo corpo sparisce. */
  font-family: 'Newsreader Display Light Italic', 'Playfair Display', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--sand);
}

/* I prezzi in fondo e non subito sotto l'elenco: le tre liste hanno un numero
   di righe diverso, e senza questo `auto` i tre importi cadrebbero a tre
   altezze diverse — che e' esattamente il confronto che la pagina deve rendere
   facile. */
.shk-prezzo__importi {
  margin-top: auto;
  padding-top: clamp(18px, 2.4vw, 24px);
}

.shk-prezzo__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 10px;
}
.shk-prezzo__riga + .shk-prezzo__riga { margin-top: clamp(14px, 2vw, 18px); }

.shk-prezzo__importo {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.6rem);
  line-height: 1.15;
  color: var(--testo2);
}
.shk-prezzo__riga--ora .shk-prezzo__importo {
  font-size: clamp(2.1rem, 5.4vw, 2.8rem);
  color: var(--cream);
}

/* Il listino barrato sta accanto all'importo, non sotto: e' un confronto, e un
   confronto si legge su una riga. */
.shk-prezzo__listino {
  font-size: .92rem;
  color: var(--testo2);
  text-decoration-thickness: 1px;
}

.shk-prezzo__quando {
  flex-basis: 100%;
  margin-top: .5em;
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.shk-prezzo__riga:not(.shk-prezzo__riga--ora) .shk-prezzo__quando { color: var(--testo2); }

.shk-prezzi__nota {
  max-width: 68ch;
  margin: clamp(18px, 2.6vw, 24px) auto 0;
  text-align: center;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--testo2);
}


/* --------------------------------------------------------------------------
   Domande frequenti
   --------------------------------------------------------------------------
   <details> nativo: apre e chiude senza JavaScript, e chi arriva da tastiera o
   da lettore di schermo lo trova gia' annunciato per quello che e'. Le risposte
   sono le voci del box "Cosa comprende SHINKA" — stesse parole, altra forma.
   -------------------------------------------------------------------------- */
.shk-faq { margin-top: clamp(56px, 8vw, 84px); }

.shk-faq__voce { border-bottom: 1px solid var(--linea); }

.shk-faq__d {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(15px, 2.2vw, 19px) 0;
  list-style: none;
  cursor: pointer;
  font-family: 'Newsreader Display Light Italic', 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 2.2vw, 1.18rem);
  line-height: 1.4;
  color: var(--cream);
  transition: color var(--t);
}
.shk-faq__d::-webkit-details-marker { display: none; }
.shk-faq__d:hover { color: var(--sand); }

/* Chevron col bordo, come le frecce del carosello: nessun file da caricare.
   Giu' quando e' chiusa, su quando e' aperta. */
.shk-faq__d::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: auto;
  margin-top: .5em;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--t);
}
.shk-faq__voce[open] .shk-faq__d::after { transform: rotate(-135deg); }

.shk-faq__r {
  max-width: 76ch;
  padding-bottom: clamp(18px, 2.6vw, 24px);
}
.shk-faq__r .shk-p:first-child { margin-top: 0; }
.shk-faq__r strong { color: #fff; font-weight: 600; }


/* --------------------------------------------------------------------------
   Iscrizione
   --------------------------------------------------------------------------
   Il carrello ha la sua sezione in fondo al file ("Componi il tuo percorso");
   qui restano i pezzi che condivide con il ringraziamento.
   -------------------------------------------------------------------------- */
/* La spunta dei termini in un blocco centrato: il testo resta a bandiera,
   perche' tre righe di condizioni centrate non si leggono. */
.shk-iscrizione .shk-check {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(26px, 4vw, 34px);
  text-align: left;
}

/* Il riepilogo dell'ordine sulla pagina di ringraziamento. */
.shk-box--ordine {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.shk-box--ordine .shk-p:first-of-type { margin-top: 0; }


/* Rimando a una nota: il segno sta in alto e non deve allargare la riga. */
.shk-rif {
  font-size: .85em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}
/* La nota vera, sotto la griglia dei prezzi. Piu' piccola del testo normale ma
   non sbiadita: e' una condizione di quello che si sta comprando, non una
   postilla da nascondere. */
.shk-asterisco {
  max-width: 78ch;
  margin: clamp(14px, 2vw, 18px) auto 0;
  text-align: center;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--testo2);
}


/* Le FAQ come pagina e non come coda del listino: sopra non c'e' piu' una
   griglia di prezzi da cui staccarsi, quindi l'aria in cima si riduce, e la
   prima domanda prende il suo filetto — senza, la lista sembra cominciare a
   meta'. */
.shk-faq--pagina {
  max-width: 860px;
  margin: clamp(26px, 3.6vw, 38px) auto 0;
}
.shk-faq--pagina .shk-faq__voce:first-of-type { border-top: 1px solid var(--linea); }


/* --------------------------------------------------------------------------
   Il calendario per tipi: le live di Valeria Ferrari, gli ospiti, l'extra
   --------------------------------------------------------------------------
   Dal documento di Valeria: "box per le parti che riguardano gli ospiti + un
   box un po' diverso per le live con me". Il tipo sta a database
   (shinka_programma_sessioni.tipo), l'aspetto sta qui.

   Le live sono la casa: superficie piena, appena sollevata, niente accenti.
   Gli ospiti sono chi viene da fuori: fondo vuoto, bordo e filetto oro — lo
   stesso segno che nel portale vuol dire "guarda qui". Si distinguono al primo
   sguardo anche senza leggere, ed e' il punto.
   -------------------------------------------------------------------------- */
.shk-sessione--live,
.shk-sessione--ospite,
.shk-sessione--live:first-of-type,
.shk-sessione--ospite:first-of-type {
  margin-top: 14px;
  padding: clamp(22px, 3.4vw, 34px) clamp(20px, 3.4vw, 36px);
  border: 1px solid var(--linea);
}
.shk-sessione--live { background: var(--dark2); }
/* Sul fondo scuro la sola assenza di riempimento non bastava: messi uno sotto
   l'altro, live e ospite sembravano lo stesso box. L'ospite prende quindi il
   bordo oro tutto intorno, piu' spesso a sinistra, e un velo d'oro dentro. */
.shk-sessione--ospite,
.shk-sessione--ospite:first-of-type {
  background: rgba(182, 167, 147, .07);
  border-color: rgba(182, 167, 147, .6);
  border-left: 3px solid var(--gold);
}

/* L'occhiello: "Guest Webinar / Parte I". Sta fra la data e il titolo, e non
   deve confondersi con la data — quella e' oro, lui e' sabbia. */
.shk-sessione__occhiello {
  display: block;
  margin-top: -.3em;
  margin-bottom: .6em;
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
}

/* "con Nicole Zunino, MBA Business Consultant, ...". In Raleway e non nel
   serif del titolo: il nome va in grassetto, e il Newsreader Light Italic un
   grassetto vero non ce l'ha — chiederglielo fa fabbricare al browser un
   grassetto finto. Raleway il 600 ce l'ha. */
.shk-sessione__ospite {
  margin-top: .55em;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--sand);
}
.shk-sessione__ospite strong { font-weight: 600; color: var(--cream); }
.shk-sessione__ospite + .shk-sessione__sommario { margin-top: 1.1em; }

/* --------------------------------------------------------------------------
   L'evento extra: la Guest Masterclass di Ila Malu'
   --------------------------------------------------------------------------
   "BOX GRANDE ... si deve capire che e' un extra totale." Un pannello a colore
   rovesciato — crema su una pagina scura — e un cartellino nero in cima: e'
   l'unica cosa del portale fatta cosi', quindi non si scambia per un incontro
   del livello nemmeno scorrendo in fretta.

   Dentro vale la regola dei fondi chiari: l'oro solo nelle linee, le parole in
   --gold-testo o in inchiostro.
   -------------------------------------------------------------------------- */
.shk-extra {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(30px, 5vw, 60px) clamp(22px, 5vw, 60px);
  background: var(--cream);
  color: var(--ink);
  box-shadow: inset 0 3px 0 var(--gold);
}
.shk-extra__tag {
  display: inline-block;
  padding: 7px 12px;
  background: var(--dark);
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
}
.shk-extra__data {
  display: block;
  margin-top: clamp(20px, 3vw, 28px);
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-testo);
}
.shk-extra__occhiello {
  display: block;
  margin-top: .5em;
  font-family: var(--label);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.shk-extra__titolo {
  margin-top: .35em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.14;
  color: var(--dark);
}
.shk-extra__testo { margin-top: clamp(18px, 2.6vw, 26px); }
.shk-extra .shk-p { max-width: 70ch; color: var(--ink); }
.shk-extra .shk-p:first-child { margin-top: 0; }
.shk-extra strong { font-weight: 600; color: var(--dark); }

.shk-extra__parte {
  margin-top: clamp(26px, 3.6vw, 36px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(68, 63, 61, .18);
}
.shk-extra__parte-titolo {
  margin-bottom: .6em;
  font-family: var(--label);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-testo);
}

/* Le quote: due riquadri affiancati, come i prezzi del listino. Quella che vale
   oggi grande, l'altra sotto tono — e passato l'early bird ne resta una. */
.shk-extra__quote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 4px 0 18px;
  background: rgba(68, 63, 61, .18);
  border: 1px solid rgba(68, 63, 61, .18);
}
.shk-extra__quota {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--cream);
}
.shk-extra__quota-etichetta {
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-testo);
}
.shk-extra__quota-importo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  line-height: 1.2;
  color: var(--ink2);
}
.shk-extra__quota--ora .shk-extra__quota-importo { color: var(--dark); }
.shk-extra__quota-lordo { font-size: .85rem; color: var(--ink2); }

.shk-extra__cta {
  margin-top: clamp(28px, 4vw, 40px);
  background: var(--dark);
  border-color: var(--dark);
  color: var(--cream);
  letter-spacing: .16em;
  line-height: 1.5;
  white-space: normal;
}
.shk-extra__cta:hover { background: var(--gold-testo); border-color: var(--gold-testo); color: #fff; }
/* Sul telefono il cartellino andava a capo a meta' ("QUOTA / SEPARATA"): meno
   spazio fra le lettere e sta su una riga. */
@media (max-width: 520px) {
  .shk-extra__tag { letter-spacing: .12em; }
}


/* --------------------------------------------------------------------------
   Il programma fra un incontro e l'altro
   --------------------------------------------------------------------------
   Le voci che nel documento stanno sotto una live non sono gli argomenti della
   live: sono il programma di quella fase, quello che si trova nell'area
   riservata. Per questo stanno fuori dal box dell'incontro.

   In chiaro, senza box e senza cartellino, una sotto l'altra: gli incontri
   sono le cose con una data e un contorno, il programma e' quello che scorre
   fra l'uno e l'altro. Il rientro a sinistra e' lo stesso del testo dentro i
   box, cosi' i titoli si allineano con quelli delle live e la pagina resta
   una colonna sola da leggere.
   -------------------------------------------------------------------------- */
.shk-programma {
  display: grid;
  gap: clamp(16px, 2.2vw, 20px);
  padding: clamp(20px, 2.8vw, 28px) clamp(20px, 3.4vw, 36px);
}
.shk-modulo__titolo {
  /* Light Italic, come i temi di prima: l'Extra Light a questo corpo sparisce. */
  font-family: 'Newsreader Display Light Italic', 'Playfair Display', Georgia, serif;
  font-weight: 300;
  font-size: 1.08rem;
  letter-spacing: .012em;
  line-height: 1.35;
  color: var(--sand);
}
.shk-modulo__testo { margin-top: .35em; max-width: 70ch; font-size: .93rem; line-height: 1.7; color: var(--testo2); }


/* --------------------------------------------------------------------------
   Il carrello: "Componi il tuo percorso SHINKA"
   --------------------------------------------------------------------------
   Una tabella da spuntare, come la disegna Valeria: il nome a sinistra, early
   bird e standard in colonna a destra. Ogni riga e' un'etichetta intorno alla
   sua casella, quindi si preme tutta la riga; la casella resta nel documento,
   invisibile, perche' e' lei che risponde alla tastiera e che il modulo spedisce.

   Sul telefono le colonne non ci stanno: i due prezzi scendono sotto il nome,
   ciascuno con la sua etichetta scritta accanto (data-etichetta), perche' la
   testata con i nomi delle colonne li' non c'e' piu'.
   -------------------------------------------------------------------------- */
.shk-carrello {
  --colonna: 9.8rem;
  max-width: 900px;
  margin: clamp(30px, 4.4vw, 46px) auto 0;
}

.shk-carrello__gruppo { border: 1px solid var(--linea); }
/* La masterclass e' un'altra cosa, e il bordo lo dice senza alzare la voce: lo
   stesso oro dei box degli ospiti, non il crema del pannello del calendario —
   qui si sceglie, non si racconta. */
.shk-carrello__gruppo--extra { border-color: var(--linea2); box-shadow: inset 0 2px 0 var(--gold); }

.shk-carrello__testa,
.shk-carrello__riga {
  display: grid;
  grid-template-columns: 18px 1fr var(--colonna) var(--colonna);
  column-gap: clamp(14px, 2vw, 20px);
  align-items: center;
  padding-left: clamp(16px, 2.6vw, 26px);
  padding-right: clamp(16px, 2.6vw, 26px);
}
.shk-carrello--pieno .shk-carrello__testa,
.shk-carrello--pieno .shk-carrello__riga { grid-template-columns: 18px 1fr var(--colonna); }

.shk-carrello__testa {
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.5;
}
/* Il nome del gruppo parte dalla colonna del testo, non da quella delle
   caselle: sta sopra i nomi, e li' si allinea. */
.shk-carrello__testa > :first-child { grid-column: 2; }
.shk-carrello__testa > :not(:first-child) { text-align: right; }

.shk-carrello__riga {
  position: relative;
  padding-top: clamp(16px, 2.2vw, 20px);
  padding-bottom: clamp(16px, 2.2vw, 20px);
  cursor: pointer;
  transition: background var(--t);
}
.shk-carrello__riga + .shk-carrello__riga { border-top: 1px solid var(--linea); }
.shk-carrello__riga:hover { background: var(--dark2); }
.shk-carrello__riga:has(input:checked) { background: var(--dark2); }
.shk-carrello__riga:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Il livello fisso e quelli gia' presi non si possono togliere: niente mano,
   niente hover — la riga non risponde perche' non c'e' niente da cambiare. */
.shk-carrello__riga--fisso,
.shk-carrello__riga--suo { cursor: default; }

.shk-carrello__riga input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.shk-carrello__riga .shk-check__box { align-self: start; margin-top: .3em; }
.shk-carrello__riga input:checked + .shk-check__box { background: var(--gold); border-color: var(--gold); }
.shk-carrello__riga input:checked + .shk-check__box::after { transform: rotate(45deg) scale(1); }
.shk-carrello__riga--suo .shk-check__box { opacity: .55; }

.shk-carrello__cosa { display: block; min-width: 0; }
.shk-carrello__nome {
  display: block;
  font-family: 'Newsreader Display Light Italic', 'Playfair Display', Georgia, serif;
  font-size: clamp(1.02rem, 2.4vw, 1.14rem);
  line-height: 1.35;
  color: var(--cream);
}
.shk-carrello__nota {
  display: block;
  margin-top: .3em;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--testo2);
}

.shk-carrello__prezzo {
  text-align: right;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.2;
  color: var(--testo2);
  white-space: nowrap;
}
.shk-carrello__prezzo--ora { font-size: clamp(1.3rem, 3vw, 1.55rem); color: var(--cream); }

.shk-carrello__gia {
  grid-column: 3 / -1;
  text-align: right;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Le righe sotto una tabella: una condizione di quello che si sta scegliendo,
   non una postilla — piccole ma non sbiadite. */
.shk-carrello__regola {
  margin-top: clamp(12px, 1.8vw, 16px);
  padding: 0 clamp(16px, 2.6vw, 26px);
  font-size: .86rem;
  line-height: 1.7;
  color: var(--testo2);
}
.shk-carrello__regola strong { font-weight: 600; color: var(--cream); }

.shk-carrello__titolo {
  margin-top: clamp(40px, 6vw, 58px);
  margin-bottom: clamp(14px, 2vw, 18px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 1.25;
  color: var(--cream);
  text-align: center;
}

/* Il totale: il numero grande e sotto, piccolo, come si e' formato. */
.shk-carrello__totale {
  margin-top: clamp(40px, 6vw, 56px);
  padding-top: clamp(30px, 4.4vw, 42px);
  border-top: 1px solid var(--linea2);
  text-align: center;
}
.shk-carrello__importo {
  display: block;
  margin-top: .3em;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, 3.3rem);
  line-height: 1.1;
  color: var(--cream);
}
.shk-carrello__iva {
  display: block;
  margin-top: .45em;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo2);
}
.shk-carrello__riga-conto { margin-top: .9em; font-size: .95rem; color: var(--testo); }
.shk-carrello__riga-conto + .shk-carrello__riga-conto { margin-top: .25em; }
.shk-carrello__riga-conto strong { font-weight: 600; color: var(--gold); }
.shk-carrello__rate { margin-top: 1.1em; font-size: .9rem; color: var(--testo2); }

@media (max-width: 640px) {
  .shk-carrello__testa { grid-template-columns: 18px 1fr; }
  .shk-carrello__testa > :not(:first-child) { display: none; }

  .shk-carrello__riga,
  .shk-carrello--pieno .shk-carrello__riga { grid-template-columns: 18px 1fr auto; row-gap: 8px; }
  .shk-carrello__riga .shk-carrello__cosa { grid-column: 2 / -1; }

  /* I prezzi sotto il nome, uno accanto all'altro, ciascuno col suo nome. */
  .shk-carrello__prezzo { grid-row: 2; text-align: left; }
  .shk-carrello__prezzo--ora { grid-column: 2; }
  .shk-carrello__prezzo:not(.shk-carrello__prezzo--ora) { grid-column: 3; text-align: right; }
  .shk-carrello__prezzo::before {
    content: attr(data-etichetta);
    display: block;
    margin-bottom: 2px;
    font-family: var(--label);
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--testo2);
  }
  .shk-carrello__prezzo--ora::before { color: var(--gold); }
  .shk-carrello__gia { grid-row: 2; grid-column: 2 / -1; text-align: left; }
}


/* --------------------------------------------------------------------------
   Il conto alla rovescia
   --------------------------------------------------------------------------
   Sopra il carrello finche' la cassa e' chiusa. Le cifre in serif come i
   prezzi, le unita' in maiuscoletto come le etichette: e' un dato, non un
   allarme — niente rosso, niente lampeggi.
   -------------------------------------------------------------------------- */
.shk-conto {
  max-width: 900px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding: clamp(18px, 2.8vw, 26px) clamp(16px, 3vw, 28px);
  border: 1px solid var(--linea2);
  border-left: 2px solid var(--gold);
  background: rgba(182, 167, 147, .05);
  text-align: center;
}
/* Al posto del bottone "Iscriviti": niente riquadro, perche' sta gia' dentro
   la fascia dell'iscrizione, che ha il suo filetto — un riquadro dentro un
   riquadro. */
.shk-conto--bottone {
  max-width: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
}
.shk-conto__cifre {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 44px);
  margin-top: clamp(10px, 1.6vw, 14px);
}
.shk-conto__cella { display: flex; flex-direction: column; align-items: center; min-width: 3.2em; }
/* `hidden` da solo non basta: un `display` scritto qui vince sull'attributo, e
   la cella dei giorni resterebbe a dire "0 GIORNI" a poche ore dall'apertura. */
.shk-conto__cella[hidden] { display: none; }
.shk-conto__n {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.shk-conto__u {
  margin-top: .35em;
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo2);
}


/* --------------------------------------------------------------------------
   Quello che hai comprato, in fondo al tuo spazio
   --------------------------------------------------------------------------
   Il programma comincia settimane dopo il pagamento: qui non c'e' niente da
   guardare, c'e' da sapere che c'e' e quando parte. Stesso segno degli avvisi
   — filetto oro a sinistra su un velo d'oro — perche' nel portale "guarda
   questo" si dice sempre allo stesso modo.
   -------------------------------------------------------------------------- */
.shk-tuoi {
  display: flex;
  flex-direction: column;
  margin-top: clamp(38px, 6vw, 56px);
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--linea2);
  border-left-width: 2px;
  border-left-color: var(--gold);
  background: rgba(182, 167, 147, .05);
}

/* Il cartellino dice di chi e' questa roba, ed e' **pieno**: come eyebrow —
   oro maiuscolo, come le date qui sotto — si leggeva come l'etichetta della
   prima voce, e sembrava che riguardasse solo il Livello 1. Riempito e
   spostato a destra, sulla sua riga, appartiene visibilmente al riquadro e non
   alla voce. */
.shk-tuoi__tag {
  align-self: flex-end;
  margin-bottom: clamp(12px, 2vw, 18px);
  padding: 7px 13px;
  background: var(--gold);
  color: var(--dark);
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.shk-tuoi__voce + .shk-tuoi__voce {
  margin-top: clamp(20px, 3vw, 26px);
  padding-top: clamp(20px, 3vw, 26px);
  border-top: 1px solid var(--linea);
}
.shk-tuoi__nome {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--cream);
}
.shk-tuoi__quando {
  display: block;
  margin-top: .5em;
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.shk-tuoi__nota { margin-top: .6em; max-width: 60ch; font-size: .92rem; line-height: 1.7; color: var(--testo2); }
.shk-tuoi .shk-link--comando { display: inline-block; margin-top: .9em; }
.shk-tuoi__coda {
  margin-top: clamp(22px, 3.2vw, 30px);
  padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid var(--linea);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--testo2);
}

/* Il posto alla masterclass, per chi ce l'ha gia': al posto del bottone che lo
   prenoterebbe una seconda volta. Sul pannello crema il testo e' scuro e la
   riga oro, come vuole il contrasto (vedi Grafica in CLAUDE.md). */
.shk-extra__riservato {
  margin-top: clamp(24px, 3.4vw, 34px);
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  max-width: 60ch;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   La scheda dei dati (/area/dati)
   --------------------------------------------------------------------------
   Tre blocchi in fila, nell'ordine dell'attrito: la fatturazione arriva gia'
   compilata da Stripe e si rilegge, le spedizioni sono una casella da spuntare
   solo se serve, le due domande sono l'unica cosa nuova. Ogni blocco ha il suo
   filetto in cima, cosi' si vede dove finisce uno e comincia l'altro senza
   riquadri dentro riquadri.
   -------------------------------------------------------------------------- */
.shk-scheda { max-width: 620px; }

.shk-scheda__blocco {
  border: 0;
  padding: 0;
  margin: 0;
  margin-top: clamp(30px, 4.4vw, 44px);
  padding-top: clamp(22px, 3vw, 28px);
  border-top: 1px solid var(--linea);
}
.shk-scheda__blocco:first-of-type { margin-top: clamp(22px, 3vw, 30px); }

/* `legend` dentro un fieldset senza bordo: si comporta come un titolo, ma i
   lettori di schermo lo annunciano come il nome del gruppo — che e'
   esattamente cosa e'. */
.shk-scheda__titolo {
  padding: 0;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.shk-scheda__blocco > .shk-p--soft { margin-top: .7em; }
.shk-scheda__blocco .shk-form__riga:first-child { margin-top: 20px; }

.shk-scheda__sped { margin-top: 4px; }
.shk-scheda__sped[hidden] { display: none; }

/* Le due risposte una sotto l'altra: sono una scelta, non una lista di
   condizioni, quindi stanno vicine e si leggono insieme. */
.shk-scheda__scelte { display: grid; gap: 4px; margin-top: 10px; }
.shk-scheda__scelte .shk-check { margin-top: 6px; }

/* Il quadrato della spunta vale anche per i radio: la forma la disegna lo
   stesso CSS, e due controlli che si comportano allo stesso modo non hanno
   motivo di vestirsi in modo diverso. */
.shk-check input[type='radio'] + .shk-check__box { border-radius: 50%; }
.shk-check input[type='radio']:checked + .shk-check__box { background: var(--gold); border-color: var(--gold); }
.shk-check input[type='radio']:checked + .shk-check__box::after { transform: rotate(45deg) scale(1); }

.shk-scheda .shk-btn--block { margin-top: clamp(30px, 4.4vw, 42px); }
.shk-scheda .shk-p--soft { text-align: center; }
.shk-verifica .shk-btn { margin-top: 6px; }