/* =====================================================================
   academy.sinapsisalute.it - BOZZA 1.3, solo la HOME
   VA Design, 21/08/2026. NON ANCORA PUBBLICATO: si prova in locale
   iniettandolo nella pagina vera con
     node attrezzi-misura\misura.js https://academy.sinapsisalute.it/ dopo ..\bozza-home\va-usabilita-home.css

   Ogni blocco porta accanto il NUMERO che corregge, misurato il 21/08/2026
   a 390, 768 e 1440 px. Niente e' a occhio.

   Regola di scrittura: si prefissa con `body.kc-css-system` (la classe che
   mette la nostra toppa 1.2) per vincere di specificita' senza `!important`,
   e si usa `!important` SOLO dove il valore da battere e' scritto in linea
   nell'HTML o dal JavaScript del tema - li' la specificita' non basta.
   Mai una regola pagina-per-pagina: si lavora sulle classi.
   ===================================================================== */


/* =====================================================================
   1. TESTO CHE C'E' MA NESSUNO PUO' LEGGERE
   E' il grosso di quello che Vitaliano chiama «cose incomprensibili».
   ===================================================================== */

/* 1a. LA FISARMONICA MORTA - 7 blocchi di testo che nessuno puo' aprire.
   Misurato sulla pagina viva: tutte e 7 le sezioni (Evidence Based Medicine,
   Multidisciplinarieta', Razionale Clinico, Materiale didattico, Gruppo di
   discussione, Gruppo di ricerca, Corsi personalizzati) hanno il contenuto a
   `display:none` e altezza 0 px. Il codice che le apriva era di
   KingComposer/jQuery UI, spento: `jQuery.fn.accordion` NON esiste piu'.
   Cliccare non fa niente, e i 7 collegamenti `#evidence-based-medicine`...
   puntano ad ancore inesistenti (7 errori pa11y «NoSuchID»).

   ⛔ LA VERSIONE 1 LE APRIVA TUTTE E SETTE INSIEME. Sbagliato: Vitaliano ha
   guardato le foto e ha detto che preferiva il prima, «troppo pieno». Aveva
   ragione: la home passava da 5.822 a 8.763 px di altezza. Un elenco di sette
   voci si legge a colpo d'occhio solo se resta un elenco.
   Cura giusta: la fisarmonica torna a FUNZIONARE (la riaccende
   `va-usabilita-home.js`, 20 righe, nessuna libreria) e resta CHIUSA
   all'apertura della pagina. Si apre quella che interessa, con un clic.
   Chiusa occupa 411 px: esattamente quanto oggi. */

/* aspetto della singola voce - chiusa e aperta */
body.kc-css-system .kc_accordion_wrapper .kc_accordion_section {
  border: 0;
  border-left: 4px solid #00838a;
  background: #f5f8f9;
  margin-bottom: 8px;
  border-radius: 0 8px 8px 0;
}
body.kc-css-system .kc_accordion_wrapper .kc_accordion_header {
  padding: 0;
  background: transparent;
  border: 0;
  margin: 0;
  position: relative;
}
body.kc-css-system .kc_accordion_wrapper .kc_accordion_header a,
body.kc-css-system .kc_accordion_wrapper .kc_accordion_header > span.vad-testo {
  display: block;
  padding: 14px 52px 14px 22px;   /* 14+14+23 di riga = 51 px: il dito ci arriva (soglia 44) */
  color: #002b46;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
/* il segno a destra oggi e' un quadratino vuoto: il carattere icona del tema
   (Font Awesome) non arriva piu'. Si spegne e si disegna la freccia col bordo,
   che non dipende da nessun carattere. */
body.kc-css-system .kc_accordion_wrapper .kc_accordion_header .ui-accordion-header-icon,
body.kc-css-system .kc_accordion_wrapper .kc_accordion_header i { display: none; }

/* ⛔ FRECCIA E DITO SOLO SE IL JAVASCRIPT E' ARRIVATO: la classe
   `vad-fisarmonica` la mette lui. Senza, non si promette un clic che non
   funziona - resta l'elenco di oggi, che almeno non mente. */
.vad-fisarmonica body.kc-css-system .kc_accordion_wrapper .kc_accordion_header { cursor: pointer; }
.vad-fisarmonica body.kc-css-system .kc_accordion_wrapper .kc_accordion_header::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 21px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #00838a;
  border-bottom: 2px solid #00838a;
  transform: rotate(45deg);       /* punta in giu' = si puo' aprire */
  transition: transform .15s ease;
}
/* chi ha chiesto al proprio computer di non far muovere niente (mal di testa,
   vertigini, epilessia) non deve vedere nemmeno questa: la freccia cambia
   verso di colpo, senza girare. E' l'unica animazione di tutto il foglio. */
@media (prefers-reduced-motion: reduce) {
  .vad-fisarmonica body.kc-css-system .kc_accordion_wrapper .kc_accordion_header::after { transition: none; }
}
.vad-fisarmonica body.kc-css-system .kc_accordion_wrapper .kc_accordion_section.vad-aperto .kc_accordion_header::after {
  transform: rotate(-135deg);     /* punta in su' = si puo' richiudere */
  top: 25px;
}
.vad-fisarmonica body.kc-css-system .kc_accordion_wrapper .kc_accordion_header:focus-within {
  outline: 2px solid #00838a;     /* chi naviga da tastiera deve vedere dov'e' */
  outline-offset: 2px;
}
/* il contenuto: chiuso resta com'e' (display:none del tema), aperto si vede */
body.kc-css-system .kc_accordion_wrapper .kc_accordion_section.vad-aperto .kc_accordion_content {
  display: block !important;
  height: auto !important;
  padding: 0 24px 18px 22px;
}
body.kc-css-system .kc_accordion_wrapper .kc_accordion_content p {
  margin-bottom: 0;
}

/* 1b. LA FASCIA «DICONO DI NOI»: TUTTO SCRITTO IN BIANCO SU UNA FOTO CHIARA.
   ⛔ QUI LA VERSIONE 1 AVEVA CREDUTO A UN MISURATORE INVECE CHE ALLA FOTO.
   Il controllo automatico diceva «bianco su bianco, 1:1» e la versione 1 ha
   concluso che lo sfondo fosse bianco. Non lo e': guardando lo scatto si vede
   una FOTOGRAFIA di un'aula. Verificato risalendo gli antenati uno per uno,
   il 21/08/2026: `section.kc-css-4092253` ha
   `background-image: .../2017/01/bg-testimonials.jpg`.
   Il difetto vero e' che quella foto e' chiarissima quasi ovunque e scura in un
   punto (un pannello nero al centro): il bianco ci sparisce sopra per tre
   quarti della fascia. Quindi il titolo, il sottotitolo, la recensione e il
   nome ci sono e non si leggono - e' la fascia che Vitaliano vede vuota.

   Cura: si stende una VELATURA CHIARA sopra la foto e si scrive scuro. La
   velatura si mette con un'ombra interna gigante, non ridichiarando lo sfondo:
   cosi' non serve riscrivere l'indirizzo della foto (se il cliente un domani la
   cambia, la velatura resta al suo posto).
   Perche' l'86% basta e non e' un'opinione: sotto puo' esserci al massimo il
   nero pieno, e l'86% di bianco sopra il nero fa rgb(219,219,219). Il nostro
   grigio scuro #33404a su rgb(219,219,219) fa 7,0:1, ben oltre la soglia di
   4,5:1. Sul resto della foto, che e' chiara, si arriva a 10,9:1. Cioe': il
   caso peggiore possibile passa lo stesso. */
body.kc-css-system .kc-css-4092253 {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, .86);
}
body.kc-css-system .kc-css-4092253 .widget-heading-title.center_white .title,
body.kc-css-system .kc-css-4092253 .widget-heading-title.center_white h2,
body.kc-css-system .kc-css-4092253 .widget-heading-title.center_white h3 {
  color: #002b46;
}
body.kc-css-system .kc-css-4092253 .widget-heading-title.center_white .desc {
  color: #4a5b68;
  font-size: 16px;
}

/* 1c. LE 7 RECENSIONI: CI SONO, SI CAMBIANO, MA SONO SCRITTE IN BIANCO
       (sopra la foto chiara del punto 1b).
   ⛔ QUI LA VERSIONE 1 AVEVA SBAGLIATO LA DIAGNOSI, ed e' il motivo per cui la
   pagina era diventata lunga il doppio. Diceva: «il carosello e' morto, le
   recensioni non escono, si mettono tutte e 7 in griglia». Rimisurato il
   21/08/2026 sulla pagina viva, a 390, 768 e 1440 px: IL CAROSELLO FUNZIONA.
   Owl e' caricato (`owl-loaded`), i 7 riquadri ci sono, e il riquadro del testo
   contiene davvero la recensione dell'immagine scelta. Provato cliccando la
   freccia: il testo cambia da «Corsi in sede, corsi online...» a «Ottima! La
   consiglio vivamente...».
   Il difetto vero e' UN COLORE: `.testimonial-content` e' `rgb(255,255,255)`
   sopra il bianco, cioe' 1:1. La recensione c'e', e' scritta in bianco su
   bianco. Stessa cosa per il nome di chi l'ha scritta. Nella foto della fascia
   si vedono infatti solo le faccine e la parola «Osteopata» (il mestiere, che
   e' grigio).
   Cura: si rimettono i colori, si porta il testo a 16 px e si rendono visibili
   le due frecce - il carattere icona del tema non arriva piu', quindi le
   frecce sono disegnate col bordo. La fascia resta alta 251 px come oggi, e
   tutte e 7 le recensioni restano raggiungibili. Zero righe di codice. */
body.kc-css-system .testimonial-default .testimonial-content {
  color: #33404a;
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.kc-css-system .testimonial-default .name-client { font-size: 17px; color: #002b46; margin: 0 0 2px; }
body.kc-css-system .testimonial-default .job { font-size: 15px; color: #6f6f6f; }
/* ⛔ NON si forza `opacity:1` sul blocchetto nome+mestiere, come faceva la
   versione 1. Il tema lo tiene a zero su tutte le faccine tranne quella scelta,
   ed e' giusto cosi': sotto le faccine deve esserci UN nome, non sette. Messo a
   1, tre nomi in piu' finivano fuori dalla finestra (misurato: 37 -> 40
   straripamenti a 768 px). */

/* LE DUE FRECCE. Misurate 60 x 60 px (grandi abbastanza per il dito) ma senza
   niente dentro: il `<span class="fa fa-angle-left">` non disegna piu' nulla.
   Si spegne e si disegna la punta col bordo, come sulla fisarmonica: una
   regola sola, nessun carattere da scaricare. */
body.kc-css-system .testimonial-default .owl-nav .owl-prev span,
body.kc-css-system .testimonial-default .owl-nav .owl-next span { display: none; }
body.kc-css-system .testimonial-default .owl-nav .owl-prev,
body.kc-css-system .testimonial-default .owl-nav .owl-next {
  /* ⛔ TONDE NO: la regola degli angoli di questo foglio (punto 7) dice bottoni
     a 3 px, riquadri a 8, tonde solo le foto di persona. Due cerchi qui
     avrebbero aperto una quarta forma. E il fondo e' pieno, non un grigino:
     sulla fascia velata un bottone quasi bianco su quasi bianco non si vede. */
  background: #00838a;
  border-radius: 3px;
  cursor: pointer;
  /* ⛔ IL TEMA LE TIENE A `opacity: 0` E LE ACCENDE COL PASSAGGIO DEL MOUSE.
     Sul telefono il mouse non esiste: li' le sette recensioni erano
     irraggiungibili, non solo invisibili. Misurato: `opacity` 0 con la freccia
     comunque cliccabile (60 x 60 px). Restano accese sempre. */
  opacity: 1;
}
/* ⛔ SUL TELEFONO E SUL TABLET LE FRECCE SI SPENGONO, e non e' una rinuncia.
   Su un monitor largo stanno nel margine bianco a fianco (misurato: x=1075 su
   1440) e non danno fastidio a nessuno. Sotto i 992 px non c'e' margine: il
   carosello e' addirittura 30 px piu' largo del riquadro che lo contiene (390
   contro 360 a 390 px), quindi le frecce finivano fuori dallo schermo; e
   riportate dentro finivano SOPRA due delle faccine, coprendole (visto nello
   scatto, non calcolato).
   Si spengono perche' li' il comando c'e' gia' ed e' migliore: TOCCARE LA
   FACCINA cambia recensione. Provato davvero, a 390, 768 e 1440 px: si tocca un
   viso e compare la sua recensione. La faccina scelta ha l'anello colorato, le
   altre no: si capisce senza istruzioni. */
@media screen and (max-width: 991px) {
  body.kc-css-system .widget-testimonials .testimonial-default .owl-carousel .owl-controls .owl-nav { display: none; }
}
body.kc-css-system .testimonial-default .owl-nav .owl-prev::after,
body.kc-css-system .testimonial-default .owl-nav .owl-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
body.kc-css-system .testimonial-default .owl-nav .owl-next::after { transform: translate(-70%, -50%) rotate(45deg); }
body.kc-css-system .testimonial-default .owl-nav .owl-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
/* la faccina scelta deve distinguersi dalle altre: oggi cambia solo di misura */
body.kc-css-system .testimonial-default .owl-item.active .testimonial-avatar img { box-shadow: 0 0 0 3px #00838a; }


/* =====================================================================
   2. CONTRASTO - la soglia WCAG 2.2 e' 4,5:1 per il testo normale
   ===================================================================== */

/* 2a. IL VERDE DEL MARCHIO E' TROPPO CHIARO PER IL BIANCO SOPRA.
   Misurato: bianco su `#008E96` = 3,96:1, sotto la soglia. Colpisce il menu
   (7 voci), il bottone ISCRIVITI, il distintivo «Seminari:N» (4), la fascia
   di richiamo del corso nuovo, le barre delle aree. 26 dei 57 errori pa11y a
   1440 px sono questo.
   Cura: si scurisce il verde dell'8% - `#00838A`. A occhio e' lo stesso
   colore, al numero fa 4,55:1. La tinta chiara resta dov'e' decorativa. */
body.kc-css-system .header-main.main-sticky-header,   /* la barra del menu: e' QUI che sta il verde */
body.kc-css-system .btn-theme,
body.kc-css-system .btn.btn-theme,
body.kc-css-system .edr-thumbnail-wrapper .duration,
body.kc-css-system .kc-cta-button a,
body.kc-css-system .input-group-btn > .btn-theme {
  background-color: #00838a;
}
body.kc-css-system .kc-css-815857,                    /* fascia newsletter */
body.kc-css-system .kc-css-151882 {                   /* fascia «Nuovo Corso!» */
  background-color: #00838a !important;               /* il valore vecchio e' nel CSS della pagina */
}
/* testo verde su bianco: stesso problema al contrario (3,96:1) */
body.kc-css-system a.creative_title,
body.kc-css-system .creative_title,
body.kc-css-system .text-theme,
body.kc-css-system .title-color-theme {
  color: #00838a;
}
/* Una sola parola sulla home ha il verde scritto A MANO nell'attributo style:
   e' «CORSI» dentro il titolo «I NOSTRI CORSI». Contate: elementi con quel
   colore in linea = 1, quindi il selettore per attributo qui e' sicuro e
   risparmia una modifica al contenuto della pagina. */
body.kc-css-system [style*="#008e96" i] { color: #00838a !important; }

/* 2b. I GRIGI TROPPO CHIARI.
   Misurato: `rgb(150,150,150)` su bianco = 2,96:1 (9 punti: mestiere dei
   docenti, riga di contatto in cima, Login/Register, didascalie) e
   `rgb(153,153,153)` = 2,85:1. Il grigio piu' chiaro che passa 4,5:1 su bianco
   e' `#767676`: si usa quello. Prima 2,96 - dopo 4,54. */
body.kc-css-system .contact-topbar span,
body.kc-css-system .login-topbar a,
body.kc-css-system .media .media-body,
body.kc-css-system .media .media-left,
body.kc-css-system .info .job,
body.kc-css-system .edr-course .category a,
body.kc-css-system .rating-print-total {
  color: #767676;
}
/* ⛔ I CONTATORI NO: quella fascia ha il FONDO SCURO (una velatura nera al 56%
   sopra una foto), quindi le didascalie vanno schiarite, non scurite. Messo
   prima il grigio #767676 anche qui e il risultato peggiorava: grigio scuro su
   grigio scuro, circa 1,1:1. Preso guardando lo scatto, non il numero: il mio
   misuratore salta gli sfondi non piatti e li' non si pronuncia.
   Le didascalie oggi sono `rgb(153,153,153)`: sul fondo di quella fascia fanno
   circa 1,8:1. In bianco fanno oltre 7:1. */
body.kc-css-system .counters h5 { color: #ffffff; }


/* =====================================================================
   3. CORPO DEL CARATTERE - «font piccoli», parole sue
   Misurato: 91 elementi sotto i 15 px a 1440 px, 52 sotto i 14 px a 390 px.
   Sotto ogni riga c'e' il valore trovato.
   ===================================================================== */

body.kc-css-system .edr-thumbnail-wrapper .duration { font-size: 15px; padding: 6px 10px; }   /* era 10 px */

/* IL TESTO PRINCIPALE DELLA HOME E' A 14 px. E' questo che si vede appena
   entrati («La SINAPSI ACADEMY propone corsi di aggiornamento postgraduate...»),
   ed e' la prima cosa che Vitaliano chiama «font piccoli». Sedici px e' il
   minimo di lettura su schermo; per un testo di presentazione se ne mettono 17.
   Il peso in linea (`font-weight:400`) resta com'e': si tocca solo la misura. */
body.kc-css-system .kc_text_block p,
body.kc-css-system .kc_text_block p span,
body.kc-css-system .kc_text_block li { font-size: 17px; line-height: 1.65; }
body.kc-css-system .contact-topbar span,
body.kc-css-system .login-topbar a { font-size: 15px; }
body.kc-css-system .kc-cta-button a { font-size: 16px !important; }   /* il 12 px arriva dal CSS personalizzato del cliente, con !important */
body.kc-css-system .input-group-btn > .btn-theme,
body.kc-css-system .input-group-btn > button.btn { font-size: 15px; }
/* riga di chiusura del sito: grigio 153 su bianco = 2,85:1 */
body.kc-css-system .kc-css-275223 p,
body.kc-css-system .kc-css-275223 a { color: #5c6a72; }
body.kc-css-system .kc-flip-container .front .front-content h3 { font-size: 16px; line-height: 1.3; }  /* era 11,2 px, su 12 riquadri */
body.kc-css-system .kc-flip-container .back .des p { font-size: 15px; line-height: 1.45; }             /* era 11,2 px, su 12 riquadri */
body.kc-css-system .info .job,
body.kc-css-system .media .media-body,
body.kc-css-system .media .media-left,
body.kc-css-system .edr-course .category a,
body.kc-css-system .counters h5,
body.kc-css-system .category-wrapper h3,
body.kc-css-system .author-title a,
body.kc-css-system .kc-cta-button a,
body.kc-css-system .widget-heading-title .desc { font-size: 15px; }                                    /* erano 12 px */
body.kc-css-system .edr-course__title,
body.kc-css-system .edr-course__title a { font-size: 17px; line-height: 1.35; }                        /* era 14 px */
/* ⛔ IL MENU RESTA A 14 px, ED E' UNA COSA SCOPERTA PROVANDO, non una svista.
   Portando le 7 voci a 15 px la pagina si SFASCIA: il contenitore della prima
   fascia passa da 1.440 px a 120 px di larghezza e la fisarmonica a 33 px, con
   il testo che va a capo una lettera per riga (altezza della home da 7.200 a
   14.354 px). Rifatta la prova quattro volte: con 14 px non succede, col solo
   colore cambiato non succede, sul menu del telefono non succede. E' il codice
   del megamenu del tema che misura la barra e, quando non ci sta piu', cambia
   modo. Quattordici px su un menu non violano nessuna soglia: si lascia stare
   e si guadagna spazio col riempimento (sotto, bersagli da toccare). */
body.kc-css-system a > span.creative_title { font-size: 15px; }                                        /* «Il team»: era 14 px */
/* la recensione e il nome di chi la firma stanno nel punto 1c: li' si sistemano
   misura e colore insieme, perche' il difetto e' lo stesso (erano bianchi) */
/* testo corrente: sul telefono il minimo di legge e' 16 px, sotto il browser zooma da solo */
@media screen and (max-width: 767px) {
  body.kc-css-system .kc_text_block p,
  body.kc-css-system .kc_accordion_content p { font-size: 16px; line-height: 1.6; }
}


/* =====================================================================
   4. BERSAGLI DA TOCCARE - 18 sotto i 44 x 44 px sul telefono
   ===================================================================== */
body.kc-css-system .navigation .nav > li > a,
body.kc-css-system .login-topbar a,
body.kc-css-system .button-show-search {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.kc-css-system .button-show-search { min-width: 44px; }                     /* era 16 x 50 */
body.kc-css-system .login-topbar a.login,
body.kc-css-system .login-topbar a.register { padding: 10px 14px; }             /* erano 87 x 35 e 103 x 35 */
body.kc-css-system .btn-danger.btn-sm { min-height: 44px; padding: 10px 16px; } /* il tasto MENU: era 89 x 24 */
body.kc-css-system .edr-course__title a,
body.kc-css-system .author-title a,
body.kc-css-system .edr-course .category a {
  display: inline-block;
  padding: 11px 0;                                                             /* erano alti 17-20 px; con 8 px si fermava a 43, uno sotto la soglia */
  min-height: 44px;
}
/* i collegamenti che avvolgono una foto sono `display:inline`: il browser li
   misura alti 20 px anche se l'immagine e' alta 270. Chi tocca sul telefono
   prende o non prende a seconda del pixel. */
body.kc-css-system a.post-thumbnail,
body.kc-css-system .entry-thumb > a { display: block; }
body.kc-css-system .apus-teacher-inner h3.name a { display: block; padding: 8px 0; }

/* I NOMI DEI DUE FONDATORI stanno in bianco SOPRA il ritratto, senza niente
   sotto: se il volto e' su un fondo chiaro il nome sparisce. Una velatura
   scura in basso li tiene leggibili su qualunque foto - e' il modo standard,
   non un abbellimento. */
body.kc-css-system .apus-teacher-inner.style2 { position: relative; }
body.kc-css-system .apus-teacher-inner.style2 .infor {
  background: linear-gradient(to top, rgba(0, 30, 46, .78) 0%, rgba(0, 30, 46, .45) 55%, rgba(0, 30, 46, 0) 100%);
  padding: 40px 16px 16px;
}


/* =====================================================================
   5. LE SCHEDE DEI CORSI - oggi non sono allineate e l'ordine e' sbagliato
   Misurato a 1440 px: le 4 schede partono tutte da y=3187 ma il titolo cade a
   y=3495 su tre e a y=3417 sulla quarta, perche' quel corso non ha il docente
   e il riquadro grigio si accorcia di 78 px. E l'ordine e' immagine ->
   docente -> categoria -> titolo: il titolo del corso arriva per ultimo.
   ===================================================================== */
/* Le 4 colonne sono `float:left` alla vecchia maniera: ognuna e' alta quanto il
   suo contenuto, quindi la scheda senza docente resta piu' corta e i titoli
   vanno a quote diverse. Con la riga in flex le colonne si allungano insieme. */
body.kc-css-system .widget-courses > .row {
  display: flex;
  flex-wrap: wrap;
}
body.kc-css-system .widget-courses > .row > [class*="col-"] {
  float: none;
  display: flex;
  margin-bottom: 24px;
}
body.kc-css-system .widget-courses > .row > [class*="col-"] > .edr-course { width: 100%; }
body.kc-css-system .edr-course {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e3e9eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
body.kc-css-system .edr-course .edr-thumbnail-wrapper { order: 1; }
body.kc-css-system .edr-course .edr-course__header    { order: 2; padding: 16px 18px 6px; }
body.kc-css-system .edr-course .meta-data             { order: 3; margin-top: auto; padding: 10px 18px 16px; background: transparent; min-height: 66px; }
body.kc-css-system .edr-course .edr-teacher { display: flex; align-items: center; gap: 10px; }
body.kc-css-system .edr-course .edr-teacher .avatar-img img { width: 36px; height: 36px; border-radius: 50%; }
body.kc-css-system .edr-course .author-title { margin: 0; font-size: 15px; }
body.kc-css-system .edr-course .edr-teacher br { display: none; }

/* Le pagine sono state salvate come HTML grezzo e WordPress ci ha infilato
   dentro decine di paragrafi VUOTI (`<p></p>`): non si vedono ma occupano
   spazio. Contati nella pagina come la vede il browser: 174 sulla sola home.
   Si spengono, e nessun testo si muove. */
body.kc-css-system .kc-elm p:empty,
body.kc-css-system .edr-course p:empty,
body.kc-css-system .widget p:empty { display: none; margin: 0; }
/* le stelle a zero e il «4 reviews» dicono il falso su corsi senza recensioni:
   finche' non c'e' un dato vero non si mostrano (regola: niente segnaposto) */
body.kc-css-system .edr-course .course-review { display: none; }


/* =====================================================================
   6. ARIA DI TROPPO - la pagina e' lunga per quello che dice
   Misurato a 1440 px: la fascia dei contatori e' alta 525 px per 235 px di
   contenuto (150 px di margine sopra + 140 sotto). La fascia dei corsi 649 px
   per 544. Si portano i margini a 70 px: la home cala di ~150 px senza
   togliere niente.
   ===================================================================== */
body.kc-css-system .kc-css-230823 { padding-top: 70px !important; padding-bottom: 70px !important; }
body.kc-css-system .kc-css-2720576 { padding-top: 70px !important; }

/* Sul telefono i 12 riquadri delle professioni sono alti 190 px l'uno: 12 x 190
   = 2.280 px di scorrimento per un elenco di parole. Portati a 96 px si legge
   tutto in un terzo dello spazio. */
@media screen and (max-width: 767px) {
  body.kc-css-system .kc-flip-container,
  body.kc-css-system .kc-flip-container .flipper,
  body.kc-css-system .kc-flip-container .front,
  body.kc-css-system .kc-flip-container .back { height: 96px !important; min-height: 96px !important; }
}


/* =====================================================================
   7. LA CHIAMATA ALL'AZIONE
   Regola di casa: la conversione e' il MODULO, non altro. Oggi in cima alla
   home il primo bottone visibile e' «Login/Register» (area riservata), e il
   modulo di richiesta non c'e'. Questo pezzo NON si risolve col CSS: serve un
   blocco nuovo, ed e' scritto nella relazione come cosa da decidere.
   Intanto si rende evidente il solo bottone di azione che c'e' gia'.
   ===================================================================== */
body.kc-css-system .kc-cta-button a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 26px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 3px;   /* 3 px, non 4: e' il raggio che il tema usa gia' su tutti i bottoni */
}

/* ⛔ UNA SOLA REGOLA PER GLI ANGOLI, scritta qui perche' altrimenti fra sei mesi
   se ne inventa un'altra: BOTTONI 3 px (quello del tema), RIQUADRI 8 px
   (schede corso, recensioni, blocchi della fisarmonica), FOTO DI PERSONA
   tonde. Nient'altro. Contati dopo la correzione: 8 px in 10 punti, tondo in
   10, 3 px in 4. Zero raggi orfani. (Gli 8 px della fisarmonica stanno gia'
   scritti al punto 1a: qui non si ripetono.) */


/* =====================================================================
   8. ULTIMA PAROLA
   Regole che devono stare in fondo perche' correggono un valore che il
   foglio stesso ha impostato piu' su (a parita' di peso vince l'ultima).
   ===================================================================== */
/* ⛔ L'INDIRIZZO EMAIL NEL PIEDE DI PAGINA STRARIPA FRA 768 E 991 px.
   Misurato: `info@sinapsisalute.it` a 15 px e' largo 162 px e comincia a
   x=617, quindi arriva a 779 su una finestra da 768 - e il piede taglia gli
   ultimi 11 px. Non e' colpa del piede: e' un indirizzo, cioe' una parola sola
   che non puo' andare a capo, dentro una colonna che a quella larghezza si
   stringe. Sul telefono e sul tablet la soglia di lettura e' 14 px, non 15:
   li' si lascia a 14 e ci sta. La riga dopo e' la rete di sicurezza - se un
   giorno l'indirizzo si allunga, va a capo invece di essere tagliato. */
@media screen and (max-width: 991px) {
  body.kc-css-system .apus-footer .media .media-body,
  body.kc-css-system .apus-footer .media .media-left { font-size: 14px; }
}
body.kc-css-system .apus-footer .media .media-body { overflow-wrap: anywhere; }

/* Il mestiere del recensore: al punto 2b `.info .job` viene messo a #767676 per
   tutta la pagina, e quella regola sta piu' in basso di questa. Qui si ripete
   con un selettore piu' forte perche' nella fascia delle recensioni si vuole il
   grigio piu' scuro (5,0:1 invece di 4,54:1): e' testo piccolo su bianco. */
body.kc-css-system .testimonial-default .info .job { color: #6f6f6f; }

/* ⛔ SUL TELEFONO LA PAGINA PERDE I PRIMI 52 PIXEL, SEMPRE E SU OGNI PAGINA.
   Misurato a 390 px: la barra in cima (`.header-mobile`) e' `position:fixed`,
   alta 52 px, ma il contenitore che dovrebbe tenerle il posto (`#apus-header`)
   e' alto 0. Risultato: il contenuto comincia a y=1 e i primi 52 px finiscono
   SOTTO la barra. Sulla home vuol dire che la riga «Benvenuti su Sinapsi –»
   non si vede: si legge solo «Academy», e sembra un titolo sbagliato.
   E' esattamente la cosa che Vitaliano chiama «cose tagliate».
   Cura: si tiene il posto alla barra sul contenitore che la ospita davvero.
   Non e' un margine inventato: 52 px e' l'altezza misurata della barra.
   ⛔ Provata prima la strada di dare l'altezza a `#apus-header`: NON funziona,
   perche' sotto i 992 px quel contenitore e' a `display:none` e la barra sta
   in realta' attaccata a `#wrapper-container`, non dentro di lui.
   La barra si vede sotto i 992 px (classi `hidden-lg hidden-md` del tema). */
@media screen and (max-width: 991px) {
  body.kc-css-system #wrapper-container { padding-top: 52px; }
}