/* Corsi Download — identità propria: neri neutri, un solo accento ambra, angoli vivi.
   Si carica per ultimo e sistema i punti dove il tema nasceva chiaro. */

/* ---------- 1. superfici ---------- */
/* Font identità coupon self-hostati (variabili, un file per famiglia): niente richieste esterne */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}
body { background: var(--sc-paper); color: var(--sc-text); }

/* i blocchi "ink" nel tema chiaro erano pannelli scuri su pagina bianca:
   qui restano scuri, ma su fondo scuro vanno staccati con un bordo, non col colore */
.sc-on-ink, .sc-section--ink {
  background: var(--sc-paper-2);
  color: var(--sc-text);
  border-top: 1px solid var(--sc-rule-soft);
  border-bottom: 1px solid var(--sc-rule-soft);
}
.sc-on-ink h1, .sc-on-ink h2, .sc-on-ink h3,
.sc-section--ink h1, .sc-section--ink h2, .sc-section--ink h3 { color: var(--sc-ink); }

h1, h2, h3, h4 { color: var(--sc-ink); }

/* ---------- 2. bottoni: ambra con testo scuro, mai bianco su bianco ---------- */
.sc-btn {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  color: var(--sc-su-accento);
  font-family: var(--sc-display);
  font-weight: 650;
  letter-spacing: 0.01em;
  border-radius: 0;
}
.sc-btn:hover { background: var(--sc-accent-ink); border-color: var(--sc-accent-ink); color: var(--sc-su-accento); }
.sc-btn--accent { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-su-accento); }
.sc-btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-leader); }
.sc-btn--ghost:hover { background: var(--sc-ink); color: var(--sc-paper); border-color: var(--sc-ink); }
.sc-on-ink .sc-btn, .sc-section--ink .sc-btn {
  background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-su-accento);
}
.sc-on-ink .sc-btn:hover, .sc-section--ink .sc-btn:hover { background: var(--sc-accent-ink); color: var(--sc-su-accento); }

/* ---------- 3. campi ---------- */
.sc-input, .sc-select, .sc-textarea {
  background: var(--sc-paper-3);
  color: var(--sc-ink);
  border: 1px solid var(--sc-rule-soft);
  border-radius: 0;
}
.sc-input::placeholder, .sc-textarea::placeholder { color: var(--sc-muted); }
.sc-input:focus, .sc-select:focus, .sc-textarea:focus {
  border-color: var(--sc-accent);
  outline: 2px solid rgba(245, 165, 36, 0.28);
  outline-offset: 0;
}

/* ---------- 4. schede corso: righe d'archivio ---------- */
.sc-card {
  background: var(--sc-paper-2);
  border: 1px solid var(--sc-rule-soft);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--sc-ease);
}
.sc-card:hover { border-color: var(--sc-accent); transform: none; }
.sc-card__title { font-family: var(--sc-display); letter-spacing: -0.01em; color: var(--sc-ink); }
.sc-card__who, .sc-card__meta { color: var(--sc-muted); }

/* etichetta tecnica, stile indice di archivio */
.sc-eyebrow, .sc-kicker, .sc-card__meta {
  font-family: var(--sc-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-accent);
}

/* ---------- 5. prezzi: bianco il nostro, grigio barrato il listino ---------- */
.sc-price__now { color: var(--sc-ink); font-family: var(--sc-display); font-weight: 700; }
.sc-price__old { color: var(--sc-muted); }
.sc-badge, .sc-tag {
  border-radius: 0;
  border: 1px solid var(--sc-rule-soft);
  background: transparent;
  color: var(--sc-text);
  font-family: var(--sc-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}
.sc-badge--sconto { border-color: var(--sc-accent); color: var(--sc-accent); }

/* ---------- 6. intestazione, navigazione, piede ---------- */
.sc-header { background: rgba(15, 17, 21, 0.94); border-bottom: 1px solid var(--sc-rule-soft); }
.sc-logo { font-family: var(--sc-display); letter-spacing: -0.02em; color: var(--sc-ink); }
.sc-logo b, .sc-logo strong, .sc-logo .sc-logo__ext { color: var(--sc-accent); }
.sc-nav a { color: var(--sc-text); }
.sc-nav a:hover, .sc-nav a[aria-current] { color: var(--sc-accent); }
.sc-footer { background: var(--sc-paper-2); border-top: 1px solid var(--sc-rule-soft); color: var(--sc-text); }
a { color: var(--sc-accent); }
a:hover { color: var(--sc-accent-ink); }

/* ---------- 7. tabelle ---------- */
.sc-table th {
  font-family: var(--sc-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sc-muted); text-align: left;
  border-bottom: 1px solid var(--sc-rule-soft); padding: 10px 12px;
}
.sc-table td { border-bottom: 1px solid var(--sc-rule-soft); padding: 12px; color: var(--sc-text); }
.sc-table tr:hover td { background: var(--sc-hover-bg); }

/* ---------- 8. angoli vivi: è il segno del sito ---------- */
.sc-btn, .sc-card, .sc-input, .sc-select, .sc-textarea, .sc-badge, .sc-tag,
.sc-box, .sc-panel, .sc-pack__card, .sc-note, .sc-alert, .sc-buy-box,
.sc-pkb-size, .sc-buy-opt { border-radius: 0 !important; }

/* ---------- 9. separatori ---------- */
.sc-section + .sc-section { border-top: 1px solid var(--sc-rule-soft); }
hr, .sc-hr { border: 0; border-top: 1px solid var(--sc-rule-soft); }

/* ---------- 10. barra promozionale: ambra piena, testo scuro ---------- */
.sc-promo, .promo-bar {
  background: var(--sc-accent) !important;
  color: var(--sc-su-accento) !important;
  font-family: var(--sc-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.sc-promo a, .promo-bar a, .sc-promo b, .promo-bar b { color: var(--sc-su-accento) !important; }
.sc-promo .sc-promo__code, .promo-bar [class*="code"] {
  background: var(--sc-su-accento) !important;
  color: var(--sc-accent) !important;
  border-radius: 0;
  padding: 2px 10px;
  font-weight: 700;
}

/* ---------- 11. box acquisto: nel tema chiaro era bianco ---------- */
.sc-buy-box { background: var(--sc-paper-2); border: 1px solid var(--sc-rule-soft); }
.sc-buy-box__lead { color: var(--sc-text); }
.sc-buy-opt { background: var(--sc-paper-3); border: 1px solid var(--sc-rule-soft); color: var(--sc-text); }
.sc-buy-opt--main { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-su-accento); }
.sc-buy-opt--main .sc-buy-opt__was, .sc-buy-opt--main .sc-buy-opt__desc { color: rgba(22, 18, 10, 0.72); }

/* ---------- 12. pack ---------- */
.sc-pkb-size { background: var(--sc-paper-2); border: 1px solid var(--sc-rule-soft); color: var(--sc-text); }
.sc-pkb-size.is-on { border-color: var(--sc-accent); background: var(--sc-accent-tint); }
.sc-pkb-size.is-on .sc-pkb-size__r { color: var(--sc-text); }
.sc-pkb-size__n, .sc-pack__price { color: var(--sc-ink); font-family: var(--sc-display); }

/* ============================================================
   13. HOME: impaginato proprio — banco di ricerca, fascia pack, indice
   Gli altri siti del gruppo hanno titolone a sinistra e pannello a destra.
   Qui la pagina si apre come un archivio: si cerca, poi si sfoglia l'indice.
   ============================================================ */

.cd-banco {
  border-bottom: 1px solid var(--sc-rule-soft);
  padding: clamp(40px, 7vw, 86px) 0 clamp(32px, 5vw, 56px);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(245, 165, 36, 0.07) 0%, transparent 70%),
    var(--sc-paper);
}
.cd-banco__meta {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  font-family: var(--sc-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sc-muted); margin: 0 0 22px;
}
.cd-banco__meta span { position: relative; }
.cd-banco__meta span + span::before {
  content: ""; position: absolute; left: -15px; top: 50%;
  width: 4px; height: 4px; background: var(--sc-accent); transform: translateY(-50%);
}
.cd-banco__t {
  font-family: var(--sc-display);
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  line-height: 1.04; letter-spacing: -0.03em; font-weight: 750;
  color: var(--sc-ink); margin: 0 0 16px; max-width: 18ch;
}
.cd-banco__lead {
  color: var(--sc-text); font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6; max-width: 62ch; margin: 0 0 28px;
}
.cd-cerca { display: flex; max-width: 760px; border: 1px solid var(--sc-leader); background: var(--sc-paper-3); }
.cd-cerca__in {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--sc-ink);
  padding: 17px 18px; font: inherit; font-size: 1.0625rem;
}
.cd-cerca__in::placeholder { color: var(--sc-muted); }
.cd-cerca__in:focus { outline: 2px solid var(--sc-accent); outline-offset: -2px; }
.cd-cerca__btn {
  border: 0; background: var(--sc-accent); color: var(--sc-su-accento);
  font-family: var(--sc-display); font-weight: 700; font-size: 1rem;
  padding: 0 30px; cursor: pointer; letter-spacing: 0.01em;
}
.cd-cerca__btn:hover { background: var(--sc-accent-ink); }

.cd-fascia { border-bottom: 1px solid var(--sc-rule-soft); background: var(--sc-paper-2); }
.cd-fascia__in {
  display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap;
  /* solo sopra e sotto: la scorciatoia azzerava il margine laterale del contenitore */
  padding-top: 16px; padding-bottom: 16px;
}
.cd-fascia__t {
  font-family: var(--sc-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sc-muted); margin: 0; flex: none;
}
.cd-fascia__opz { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.cd-fascia__o {
  display: inline-flex; align-items: baseline; gap: 10px;
  border: 1px solid var(--sc-rule-soft); padding: 9px 15px; text-decoration: none;
  color: var(--sc-text); transition: border-color var(--sc-ease), background var(--sc-ease);
}
.cd-fascia__o:hover { border-color: var(--sc-accent); background: var(--sc-hover-bg); color: var(--sc-text); }
.cd-fascia__o b { font-family: var(--sc-display); color: var(--sc-ink); font-size: 0.95rem; }
.cd-fascia__o span { font-family: var(--sc-display); color: var(--sc-accent); font-weight: 700; }
.cd-fascia__o em { font-style: normal; font-family: var(--sc-mono); font-size: 0.6875rem; color: var(--sc-muted); }
.cd-fascia__o.is-pop { border-color: var(--sc-accent); }
.cd-fascia__how {
  border: 0; background: none; color: var(--sc-accent); cursor: pointer;
  font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px;
}

.cd-indice { padding: clamp(36px, 5vw, 64px) 0; border-bottom: 1px solid var(--sc-rule-soft); }
.cd-indice__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.cd-indice__h {
  font-family: var(--sc-display); font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em; color: var(--sc-ink); margin: 0;
}
.cd-indice__all { font-family: var(--sc-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cd-indice__l {
  list-style: none; margin: 0; padding: 0;
  columns: 4; column-gap: 34px;
}
.cd-indice__l li { break-inside: avoid; }
.cd-indice__l a {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--sc-rule-soft); text-decoration: none; color: var(--sc-text);
}
.cd-indice__l a:hover { color: var(--sc-accent); }
.cd-indice__l a span {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem;
}
.cd-indice__l a i {
  font-style: normal; font-family: var(--sc-mono); font-size: 0.6875rem; color: var(--sc-muted);
}
@media (max-width: 1100px) { .cd-indice__l { columns: 3; } }
@media (max-width: 780px) { .cd-indice__l { columns: 2; } .cd-banco__t { max-width: none; } }
@media (max-width: 520px) {
  .cd-indice__l { columns: 1; }
  .cd-cerca { flex-direction: column; }
  .cd-cerca__btn { padding: 14px; }
}

/* ---------- 14. correzioni viste a schermo ---------- */

/* le schede dentro le sezioni "ink" restavano chiare con testo chiaro */
.sc-section--ink .sc-card, .sc-on-ink .sc-card {
  background: var(--sc-paper-3);
  color: var(--sc-text);
  border-color: var(--sc-rule-soft);
}
.sc-section--ink .sc-card__title, .sc-on-ink .sc-card__title { color: var(--sc-ink); }
.sc-section--ink .sc-card__media, .sc-on-ink .sc-card__media {
  background: var(--sc-paper); border-bottom-color: var(--sc-rule-soft);
}
.sc-card { border-color: var(--sc-rule-soft); }

/* pillola di navigazione: testo scuro sull'ambra */
.sc-nav a.is-cta, .sc-nav .sc-nav__cta, .sc-nav a[class*="cta"],
.sc-navlink--pack, .sc-nav__pack {
  background: var(--sc-accent) !important;
  color: var(--sc-su-accento) !important;
  border-radius: 999px;
  font-weight: 650;
}

/* contatore del carrello */
.sc-cart__n, .sc-header [class*="cart"] [class*="badge"], .sc-cart-count {
  background: var(--sc-accent); color: var(--sc-su-accento);
  border-radius: 0; font-family: var(--sc-mono); font-size: 0.6875rem; font-weight: 700;
}

/* la fascia pack */
.cd-fascia__t { max-width: 15ch; line-height: 1.5; }
@media (max-width: 1240px) { .cd-fascia__t { max-width: none; width: 100%; } }
.sc-nav__link--pack {
  background: var(--sc-accent) !important;
  color: var(--sc-su-accento) !important;
  border-radius: 999px;
  font-weight: 650;
}
.sc-nav__link--pack:hover { background: var(--sc-accent-ink) !important; color: var(--sc-su-accento) !important; }

/* etichette dei pagamenti: erano riquadri chiari con testo chiaro */
.sc-pay__tag { background: var(--sc-accent-tint) !important; color: var(--sc-accent) !important;
  border: 1px solid var(--sc-accent); padding: 3px 9px; font-family: var(--sc-mono);
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- 15. ultimi riquadri chiari con testo chiaro ---------- */
.sc-count { background: var(--sc-accent) !important; color: var(--sc-su-accento) !important;
  font-family: var(--sc-mono); font-size: 0.6875rem; font-weight: 700; border-radius: 0; }
.sc-card__prem, .sc-pd__prem {
  background: var(--sc-su-accento) !important; color: var(--sc-accent) !important;
  border: 1px solid var(--sc-accent); border-radius: 0;
  font-family: var(--sc-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.sc-logo__dot { background: var(--sc-accent) !important; }

/* ---------- 16. campo di ricerca del catalogo: non si vedeva il riquadro ---------- */
.sc-search { background: var(--sc-paper-3); border: 1px solid var(--sc-rule-soft); border-radius: 0; }
.sc-search__input { background: transparent; color: var(--sc-ink); }
.sc-search__input::placeholder { color: var(--sc-muted); }
.sc-search__btn {
  background: var(--sc-accent); color: var(--sc-su-accento); border-radius: 0;
  font-family: var(--sc-display); font-weight: 650;
}
.sc-search__btn:hover { background: var(--sc-accent-ink); color: var(--sc-su-accento); }
.sc-search:focus-within { border-color: var(--sc-accent); }

/* ---------- 17. contrasti trovati col controllo automatico ---------- */
/* il bottone accento prendeva l'ambra scura: su testo scuro faceva 3,3 invece di 4,5 */
.sc-btn--accent, .sc-btn--accent:link, .sc-btn--accent:visited {
  background: var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
  color: var(--sc-su-accento) !important;
}
.sc-btn--accent:hover { background: var(--sc-accent-ink) !important; border-color: var(--sc-accent-ink) !important; }

/* etichetta "il più scelto": era bianca su ambra */
.sc-pk-tag, .sc-hpk__tag {
  background: var(--sc-su-accento) !important;
  color: var(--sc-accent) !important;
  border: 1px solid var(--sc-accent);
  font-family: var(--sc-mono); letter-spacing: 0.08em; text-transform: uppercase;
}

/* rombo dei corsi premium: era ambra scura su fondo scuro */
.sc-pk-prem-ico { color: var(--sc-accent) !important; }

/* ============================================================
   18. HOME proposta C: ricerca, aree, corsi subito, pack in fascia,
   poi un blocco per argomento, ciascuno con "mostra altro".
   ============================================================ */
.cd-cerca-fascia { padding: 30px 0 26px; border-bottom: 1px solid var(--sc-rule-soft); }
.cd-h1 {
  font-family: var(--sc-display); font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.1; letter-spacing: -0.025em; font-weight: 750; color: var(--sc-ink); margin: 0 0 6px;
}
.cd-sub { font-family: var(--sc-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--sc-muted); margin: 0 0 18px; text-transform: uppercase; }
.cd-cerca { display: flex; border: 1px solid var(--sc-leader); background: var(--sc-paper-3); width: 100%; }
.cd-cerca__in { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--sc-ink);
  padding: 15px 17px; font: inherit; font-size: 1.0625rem; }
.cd-cerca__in::placeholder { color: var(--sc-muted); }
.cd-cerca__in:focus { outline: 2px solid var(--sc-accent); outline-offset: -2px; }
.cd-cerca__btn { border: 0; background: var(--sc-accent); color: var(--sc-su-accento);
  font-family: var(--sc-display); font-weight: 700; font-size: 1rem; padding: 0 30px; cursor: pointer; }
.cd-cerca__btn:hover { background: var(--sc-accent-ink); }
.cd-aree { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cd-area { display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--sc-rule-soft);
  padding: 7px 12px; text-decoration: none; color: var(--sc-text);
  font-family: var(--sc-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cd-area:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.cd-area i { font-style: normal; color: var(--sc-muted); font-size: 0.625rem; }
.cd-area--all { border-color: var(--sc-accent); color: var(--sc-accent); }

.cd-blocco { padding: 30px 0; border-bottom: 1px solid var(--sc-rule-soft); }
.cd-blocco__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cd-blocco__t { font-family: var(--sc-display); font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.02em; color: var(--sc-ink); margin: 0; }
.cd-blocco__piu { font-family: var(--sc-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; }
.cd-griglia { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1280px) { .cd-griglia { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .cd-griglia { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cd-griglia { grid-template-columns: repeat(2, 1fr); } }

.cd-pack { background: var(--sc-accent); color: var(--sc-su-accento); padding: 22px 0; }
.cd-pack__in { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cd-pack__occhiello { font-family: var(--sc-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 4px; opacity: 0.75; }
.cd-pack__claim { font-family: var(--sc-display); font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 750; margin: 0; letter-spacing: -0.02em; }
.cd-pack__how { margin-top: 6px; border: 0; background: none; color: var(--sc-su-accento);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 0.875rem; }
.cd-pack__opz { display: flex; gap: 12px; flex-wrap: wrap; }
.cd-pack__o { position: relative; display: flex; flex-direction: column; gap: 2px;
  background: var(--sc-su-accento); color: var(--sc-accent); text-decoration: none;
  padding: 14px 20px; min-width: 158px; border: 1px solid var(--sc-su-accento); }
/* chi ha l'etichetta sopra ha bisogno di un po' di spazio in piu' */
.cd-pack__o.is-pop { padding-top: 22px; }
.cd-pack__o:hover { background: #000; color: var(--sc-accent-ink); }
.cd-pack__o b { font-family: var(--sc-display); font-size: 1rem; color: var(--sc-ink); }
/* il prezzo: NON l'etichetta, che e' anch'essa uno span dentro il riquadro */
.cd-pack__o > span:not(.cd-pack__tag) { font-family: var(--sc-display); font-size: 1.7rem; font-weight: 750; line-height: 1.05; }
.cd-pack__o em { font-style: normal; font-family: var(--sc-mono); font-size: 0.625rem; color: var(--sc-muted); }
.cd-pack__o.is-pop { border-color: var(--sc-accent); box-shadow: inset 0 0 0 1px var(--sc-accent); }
.cd-pack__tag { position: absolute; top: 6px; left: 20px; right: 20px;
  background: none; color: var(--sc-accent); border: 0; padding: 0;
  font-family: var(--sc-mono); font-size: 0.5625rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 860px) { .cd-pack__in { flex-direction: column; align-items: flex-start; } }


/* ================================================================
   COUPON CORSI — override identita' Udemy (CHIARO).
   Caricato dopo il layout ereditato (hero cd-banco, griglia cd-griglia,
   fasce, card): ridefinisce le variabili :root su chiaro e ritocca i
   componenti. Le variabili vincono ovunque, quindi il tema diventa chiaro
   mantenendo TUTTA la struttura e le dimensioni (griglia, immagini card).
   ================================================================ */
/* Coupon Corsi — identità propria in stile Udemy: pagina CHIARA, viola Udemy come unico
   accento, nero quasi puro per testi e titoli, card con bordo sottile e angoli appena
   smussati, pulsanti rettangolari. Si carica per ultimo e ribalta il tema (nato scuro)
   su una base chiara. Niente deve ricordare gli altri siti del gruppo. */

/* ---------- 1. Palette: ribalto le variabili su chiaro Udemy ---------- */
:root {
  --sc-paper: #ffffff;        /* pagina */
  --sc-paper-2: #f7f9fa;      /* sezioni alternate */
  --sc-paper-3: #ffffff;      /* card */
  --sc-ink: #1c1d1f;          /* titoli / nero Udemy */
  --sc-text: #2d2f31;         /* testo corrente */
  --sc-muted: #6a6f73;        /* grigio secondario */
  --sc-rule: #1c1d1f;
  --sc-rule-soft: #d1d7dc;    /* bordo card/linee Udemy */
  --sc-leader: #d1d7dc;
  --sc-hover-bg: #f7f9fa;
  --sc-accent: #a435f0;       /* viola Udemy */
  --sc-accent-ink: #8710d8;   /* viola scuro hover */
  --sc-accent-tint: #f3e9fc;  /* viola tenue di fondo */
  --sc-accent-on-ink: #a435f0;
  --sc-accent2: #5624d0;      /* indaco per i link */
  --sc-su-accento: #ffffff;   /* testo sopra il viola */
  --sc-grad: linear-gradient(180deg, #a435f0 0%, #8710d8 100%);
  --sc-ok: #1e8e3e;
  --sc-ko: #dc2626;
  --sc-warn: #b4690e;
  --sc-ok-text: #137333;
  --sc-ko-text: #c5221f;
  --sc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sc-display: "Archivo", "Inter", system-ui, sans-serif;
  --sc-radius: 8px;
  --sc-radius-sm: 4px;
  --sc-shadow: 0 2px 4px rgba(6,17,118,.08), 0 1px 2px rgba(6,17,118,.06);
  --sc-shadow-lg: 0 8px 24px rgba(6,17,118,.14);
  /* stelle/valutazioni in stile Udemy */
  --uc-star: #e59819;
  --uc-rating: #b4690e;
  --uc-border: #d1d7dc;
}

/* ---------- 2. Superfici: tutto chiaro ---------- */
body { background: var(--sc-paper); color: var(--sc-text); }

/* i pannelli "ink" (nel tema originale erano scuri) su Udemy diventano il blocco NERO
   di contrasto: fondo #1c1d1f, testo bianco — è un tratto riconoscibile di Udemy */
.sc-on-ink, .sc-section--ink {
  background: #1c1d1f;
  color: #d1d7dc;
  border: 0;
}
.sc-on-ink h1, .sc-on-ink h2, .sc-on-ink h3,
.sc-section--ink h1, .sc-section--ink h2, .sc-section--ink h3 { color: #ffffff; }

h1, h2, h3, h4 { color: var(--sc-ink); font-family: var(--sc-display); letter-spacing: -0.01em; }
a { color: var(--sc-accent2); }
a:hover { color: var(--sc-accent-ink); }

/* ---------- 3. Header: barra bianca, bordo sotto, logo nero ---------- */
.sc-header, header.sc-header {
  background: #ffffff;
  border-bottom: 1px solid var(--uc-border);
  box-shadow: 0 1px 2px rgba(6,17,118,.05);
}
.sc-header a, .sc-nav a { color: var(--sc-ink); }
.sc-header a:hover, .sc-nav a:hover { color: var(--sc-accent); }
.sc-logo, .sc-logo b, .sc-brand { color: var(--sc-ink); font-family: var(--sc-display); font-weight: 800; }

/* ---------- 4. Pulsanti: rettangolari, viola pieno, testo bianco ---------- */
.sc-btn, .btn, button.sc-btn {
  background: var(--sc-accent);
  border: 1px solid var(--sc-accent);
  color: #ffffff;
  font-family: var(--sc-display);
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--sc-radius-sm);
  box-shadow: none;
  transition: background .12s ease;
}
.sc-btn:hover, .btn:hover { background: var(--sc-accent-ink); border-color: var(--sc-accent-ink); color: #ffffff; }
/* secondario: bianco con bordo nero (stile Udemy "outline") */
.sc-btn--ghost, .sc-btn--secondary, .sc-btn.is-ghost {
  background: #ffffff; color: var(--sc-ink); border: 1px solid var(--sc-ink);
}
.sc-btn--ghost:hover, .sc-btn--secondary:hover { background: var(--sc-accent-tint); color: var(--sc-ink); border-color: var(--sc-ink); }
/* il blocco nero usa il pulsante viola uguale (contrasto forte Udemy) */
.sc-on-ink .sc-btn, .sc-section--ink .sc-btn { background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); }

/* ---------- 5. Card corso: bianca, bordo sottile, angoli appena smussati ---------- */
.sc-card, .sc-course-card, .sc-product-card, article.sc-card {
  background: #ffffff;
  border: 1px solid var(--uc-border);
  border-radius: var(--sc-radius-sm);
  box-shadow: none;
  transition: box-shadow .12s ease, transform .12s ease;
}
.sc-card:hover, .sc-course-card:hover, .sc-product-card:hover {
  box-shadow: var(--sc-shadow-lg);
  transform: none;              /* Udemy non solleva le card */
  border-color: var(--uc-border);
}
.sc-card h3, .sc-card h2, .sc-course-card .title { color: var(--sc-ink); font-weight: 700; line-height: 1.2; }
.sc-card .sc-muted, .sc-course-card .instructor { color: var(--sc-muted); font-size: .8125rem; }

/* prezzo: nero grande + listino barrato grigio (layout prezzo Udemy) */
.sc-price, .price-now { color: var(--sc-ink); font-weight: 800; font-family: var(--sc-display); }
.sc-price-old, .price-old, del { color: var(--sc-muted); font-weight: 400; }

/* valutazioni a stelle in ocra, come Udemy */
.sc-rating, .stars, .rating { color: var(--uc-rating); font-weight: 700; }
.sc-rating svg, .stars svg, .star { fill: var(--uc-star); color: var(--uc-star); }

/* badge "bestseller" giallo Udemy */
.sc-badge, .badge-bestseller, .sc-tag--hot {
  background: #eceb98; color: #3d3c0a; font-weight: 700;
  border-radius: var(--sc-radius-sm); border: 0; letter-spacing: 0;
}

/* ---------- 6. Chip categoria: grigino, testo nero ---------- */
.sc-chip, .sc-pill, .category-pill {
  background: #f7f9fa; color: var(--sc-ink);
  border: 1px solid var(--uc-border); border-radius: 999px;
}
.sc-chip:hover, .sc-pill:hover { background: var(--sc-accent-tint); border-color: var(--sc-accent); color: var(--sc-ink); }

/* ---------- 7. Hero: fondo chiaro, titolo nero grande, riquadro bianco ombra ---------- */
.sc-hero, section.sc-hero {
  background: #f7f9fa;
  border-bottom: 1px solid var(--uc-border);
}
.sc-hero h1 { color: var(--sc-ink); font-weight: 800; letter-spacing: -0.02em; }
.sc-hero p, .sc-hero .lead { color: var(--sc-text); }
.sc-hero .sc-panel, .sc-hero__card { background: #fff; border: 1px solid var(--uc-border); box-shadow: var(--sc-shadow-lg); border-radius: var(--sc-radius); }

/* ---------- 8. Barra coupon in alto: viola piena, è il cuore del sito ---------- */
.sc-promo, .promo-bar {
  background: var(--sc-accent); color: #ffffff; font-weight: 600;
}
.sc-promo .sc-promo__code, .promo-bar .code {
  background: #ffffff; color: var(--sc-accent-ink);
  font-family: var(--sc-display); font-weight: 800;
  border-radius: var(--sc-radius-sm); padding: 2px 10px; letter-spacing: .02em;
}

/* ---------- 9. Sezioni, linee, tabelle ---------- */
.sc-section--alt { background: var(--sc-paper-2); }
hr, .sc-rule, .sc-divider { border-color: var(--uc-border); background: var(--uc-border); }
table th { color: var(--sc-ink); border-bottom: 2px solid var(--uc-border); }
table td { border-bottom: 1px solid var(--uc-border); color: var(--sc-text); }

/* ---------- 10. Footer: nero Udemy, testo chiaro ---------- */
.sc-footer, footer.sc-footer {
  background: #1c1d1f; color: #d1d7dc; border-top: 0;
}
.sc-footer a { color: #d1d7dc; }
.sc-footer a:hover { color: #ffffff; }
.sc-footer h3, .sc-footer h4, .sc-footer strong { color: #ffffff; }
/* brand e piede su footer nero: erano var(--sc-ink)=#1c1d1f (nero su nero, invisibili) */
.sc-footer__brand .sc-logo, .sc-footer .sc-logo { color: #ffffff; }
.sc-footer__h, .sc-footer h2 { color: #ffffff; }
.sc-footer__brand p, .sc-footer__bottom, .sc-footer__bottom a, .sc-footer__bottom span { color: #b4bac0; }
.sc-footer__mail { color: #ffffff; border-bottom-color: #4a4c4f; }
.sc-footer__mail:hover { color: var(--sc-accent); border-bottom-color: var(--sc-accent); }
.sc-footer .sc-logo__tld { color: var(--sc-accent); }
.sc-footer .sc-logo__dot { background: var(--sc-accent) !important; }

/* ---------- 11. Home: righe corso a carosello orizzontale (stile Netflix) ---------- */
/* SOLO i blocchi della home (.cd-blocco): le griglie di catalogo/categoria restano a griglia */
.cd-blocco { position: relative; }
.cd-blocco .cd-griglia {
  display: grid; grid-template-columns: none;
  grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 234px);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 2px; padding: 2px 2px 16px;
  -webkit-overflow-scrolling: touch;
}
.cd-blocco .cd-griglia > * { scroll-snap-align: start; }
/* card tutte uguali: la griglia a riga unica le stira a pari altezza; dentro, titolo a 2 righe
   fisse, prezzo e bottone allineati in basso */
.cd-blocco .cd-griglia > .sc-card { display: flex; flex-direction: column; }
.cd-blocco .cd-griglia > .sc-card > .sc-card__link { flex: 1 1 auto; display: flex; flex-direction: column; }
.cd-blocco .cd-griglia > .sc-card .sc-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.cd-blocco .cd-griglia > .sc-card .sc-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.55em;
}
.cd-blocco .cd-griglia > .sc-card .sc-price { margin-top: auto; }
.cd-blocco .cd-griglia > .sc-card .sc-card__rating { flex-wrap: nowrap; white-space: nowrap; }
.cd-blocco .cd-griglia::-webkit-scrollbar { height: 8px; }
.cd-blocco .cd-griglia::-webkit-scrollbar-thumb { background: var(--sc-rule-soft); border-radius: 999px; }
.cd-blocco .cd-griglia::-webkit-scrollbar-track { background: transparent; }
/* frecce tonde iniettate via JS, visibili al passaggio del mouse su desktop */
.cd-rail-nav {
  position: absolute; top: 56%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sc-rule-soft);
  background: #fff; color: var(--sc-ink); cursor: pointer; display: none;
  align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.cd-rail-nav:hover { background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); }
.cd-rail-nav--prev { left: -10px; }
.cd-rail-nav--next { right: -10px; }
@media (min-width: 1000px) {
  .cd-blocco:hover .cd-rail-nav { display: inline-flex; }
  .cd-blocco .cd-griglia { scrollbar-width: none; }
  .cd-blocco .cd-griglia::-webkit-scrollbar { height: 0; }
}

/* ---------- 12. Stelle valutazione (social proof on-page) + timer promo ---------- */
.sc-rating { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 0.9rem; flex-wrap: wrap; }
.sc-rating__val { font-family: var(--sc-display); font-weight: 700; color: var(--sc-accent-ink, #8710d8); }
.sc-rating__stars { position: relative; display: inline-block; white-space: nowrap; font-size: 1rem; line-height: 1; }
.sc-rating__stars::before { content: "\2605\2605\2605\2605\2605"; color: #e4e4e4; }
.sc-rating__stars::after { content: "\2605\2605\2605\2605\2605"; color: #e59819; position: absolute; left: 0; top: 0; width: var(--r, 100%); overflow: hidden; }
.sc-rating__count, .sc-rating__seen, .sc-card__rcount { color: var(--sc-muted); font-size: 0.82rem; }
.sc-card__rating { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.sc-card__rating .sc-rating__stars { font-size: 0.85rem; }
.sc-card__rating .sc-rating__val { font-size: 0.82rem; }
.sc-promo-timer { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 13px;
  background: #fff4e5; border: 1px solid #f0c48a; border-radius: 8px; color: #8a5a00; font-size: 0.9rem; }
.sc-promo-timer__ico { font-size: 1.05rem; line-height: 1; }
.sc-promo-timer b.js-promo-clock { font-family: var(--sc-mono, monospace); font-weight: 700; color: #b4300a; letter-spacing: 0.02em; }

/* ================================================================
   13. RESTYLE MODERNO — identità propria di coupon-corsi, diversa dai siti gemelli.
   Font geometrici (Space Grotesk + Plus Jakarta Sans), angoli morbidi, ombre al
   posto dei bordi netti, pulsanti a pillola, accento violetto moderno.
   Caricato per ultimo: ridefinisce le variabili e ritocca i componenti chiave.
   ================================================================ */
:root {
  --sc-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sc-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  --sc-ink: #1a1430;          /* titoli: nero-violaceo moderno */
  --sc-text: #3a3550;
  --sc-muted: #716c88;
  --sc-paper-2: #f6f4fc;      /* sezioni alternate: velo lavanda */
  --sc-rule-soft: #e9e4f5;
  --sc-leader: #e9e4f5;
  --uc-border: #e9e4f5;
  --sc-accent: #7c3aed;       /* violetto moderno */
  --sc-accent-ink: #6d28d9;
  --sc-accent-tint: #f1ecfe;
  --sc-accent-on-ink: #a78bfa;
  --sc-accent2: #6d28d9;
  --sc-grad: linear-gradient(120deg, #7c3aed, #6d28d9);
  --sc-radius: 16px;
  --sc-radius-sm: 10px;
  --sc-shadow: 0 1px 2px rgba(26,20,48,.05), 0 10px 28px rgba(109,40,217,.07);
  --sc-shadow-lg: 0 20px 44px rgba(109,40,217,.16);
}
body { font-family: var(--sc-font); }
h1, h2, h3, h4, .sc-display, .cd-h1, .sc-pd__title, .cd-blocco__t { font-family: var(--sc-display); letter-spacing: -0.025em; }

/* superfici scure (blocchi "ink" + footer): deep violet, coerenti con l'accento */
.sc-on-ink, .sc-section--ink, .sc-footer, footer.sc-footer { background: #17132b; }

/* pulsanti a pillola con ombra morbida e micro-sollevamento */
.sc-btn, .sc-btn--accent, .sc-btn--ghost, .sc-btn--sm, .sc-btn--lg,
.cd-cerca__btn, .sc-search__btn, .sc-nav__link--pack,
.sc-pd__cta .sc-btn, .sc-card__act .sc-btn, .sc-pk-how {
  border-radius: 999px !important;
}
/* questi sono BOX di contenuto (opzioni pack/pagamento), non pulsanti: rettangolo arrotondato, non pillola */
.cd-pack__o, .sc-buy-opt, .sc-pkb-size { border-radius: 14px !important; }

/* loghi dei metodi di pagamento nella scheda corso */
.sc-paypanel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 2px; }
.sc-paypanel__lbl { font-size: 0.82rem; color: var(--sc-muted); font-weight: 600; }
.sc-paylogos { display: inline-flex; align-items: center; gap: 8px; }
.sc-paylogo { display: inline-flex; align-items: center; justify-content: center; height: 28px; border-radius: 8px; font-weight: 800; box-shadow: 0 1px 2px rgba(26,20,48,.12); }
.sc-paylogo--pp { padding: 0 10px; background: #fff; border: 1px solid #e3e8ee; font-style: italic; font-family: Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: -0.02em; }
.sc-paylogo--pp b { color: #003087; font-weight: 800; }
.sc-paylogo--pp i { color: #0070e0; font-weight: 800; font-style: italic; }
.sc-paylogo--btc, .sc-paylogo--eth, .sc-paylogo--usdt { width: 28px; color: #fff; font-size: 16px; }
.sc-paylogo--btc { background: #f7931a; }
.sc-paylogo--eth { background: #627eea; }
.sc-paylogo--usdt { background: #26a17b; }
.sc-btn--accent, .cd-cerca__btn, .sc-search__btn, .sc-pd__cta .sc-btn--accent, .sc-card__act .sc-btn--accent {
  box-shadow: 0 6px 16px rgba(109,40,217,.22); transition: transform .12s ease, box-shadow .12s ease;
}
.sc-btn--accent:hover, .cd-cerca__btn:hover, .sc-search__btn:hover,
.sc-pd__cta .sc-btn--accent:hover, .sc-card__act .sc-btn--accent:hover {
  transform: translateY(-1px); box-shadow: 0 11px 24px rgba(109,40,217,.32);
}

/* card morbide: bordo tenue + ombra, si sollevano all'hover; media con angoli alti arrotondati */
.sc-card, article.sc-card { border-radius: var(--sc-radius) !important; border: 1px solid var(--sc-rule-soft);
  box-shadow: var(--sc-shadow) !important; overflow: hidden; transition: transform .14s ease, box-shadow .14s ease; }
.sc-card:hover, article.sc-card:hover { transform: translateY(-4px) !important; box-shadow: var(--sc-shadow-lg) !important; border-color: #d9cff5; }

/* ricerca a pillola (hero + header) */
.cd-cerca, .sc-search { border-radius: 999px !important; overflow: hidden; }
.cd-cerca { border-color: var(--sc-rule-soft); box-shadow: var(--sc-shadow); }
.cd-cerca__in, .sc-search__input { padding-left: 22px; }

/* chip, badge e sconti arrotondati */
.cd-area, .sc-card__off, .sc-card__prem, .sc-badge, .sc-price__off, .sc-pd__prem,
.sc-tag, .sc-pk-tag, .sc-eyebrow { border-radius: 999px; }

/* hero con velo sfumato, niente righe dure fra i caroselli */
.cd-cerca-fascia { background: linear-gradient(180deg, #f3effe 0%, #ffffff 100%); }
.cd-blocco { border-bottom: 0; }

/* input/box arrotondati */
.sc-input, .sc-select, .sc-textarea, .sc-buy-box, .sc-pk-box, .sc-note, .sc-promo-timer { border-radius: 14px; }

/* promo bar e pulsanti nav coerenti con il nuovo violetto (il colore di fondo arriva dai settings,
   qui uniformo gli stati hover) */
.sc-nav__link--pack:hover { background: var(--sc-accent-ink) !important; }

/* scheda corso: immagine pareggiata all'altezza della colonna info, così non resta il vuoto a sinistra */
@media (min-width: 960px) {
  .sc-pd__top { align-items: stretch; }
  .sc-pd__media { aspect-ratio: auto; align-self: stretch; min-height: 340px; }
  .sc-pd__media img { object-position: center top; }
}

/* box Pacchetti a tutta larghezza nella scheda corso: 3 opzioni affiancate */
.sc-pk-box--wide { margin-top: 0; border-color: var(--sc-rule-soft); background: var(--sc-accent-tint); }
.sc-pk-box--wide .sc-pk-box__list { border-top: 0; }
@media (min-width: 720px) {
  .sc-pk-box--wide .sc-pk-box__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 6px; }
  .sc-pk-box--wide .sc-pk-box__list li { border: 1px solid var(--sc-rule-soft); border-bottom: 1px solid var(--sc-rule-soft); border-radius: 14px; padding: 14px 16px; background: #fff; }
  .sc-pk-box--wide .sc-pk-box__mark { margin-left: auto; }
}

/* ---------- 11. Form / input chiari ---------- */
input, select, textarea {
  background: #ffffff; color: var(--sc-ink);
  border: 1px solid var(--sc-ink); border-radius: var(--sc-radius-sm);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sc-accent); outline-offset: 0; border-color: var(--sc-accent); }

/* ---------- 12. Dettagli di download/consegna restano leggibili su chiaro ---------- */
.sc-note, .sc-callout { background: var(--sc-accent-tint); border: 1px solid var(--sc-accent); color: var(--sc-ink); border-radius: var(--sc-radius-sm); }

/* ================================================================
   19. EDITORIALE — concept "magazine" per coupon-corsi (24/10/2026).
   Crema + serif Fraunces + verde/coral. Caricato per ULTIMO: ridefinisce
   le variabili (vincono ovunque) e ritocca hero, card, pack, footer.
   Rimpiazza visivamente il restyle viola (sez.13) mantenendo la struttura.
   ================================================================ */
@font-face { font-family:"Fraunces"; font-style:normal; font-display:swap; font-weight:400 650;
  src:url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:italic; font-display:swap; font-weight:400 650;
  src:url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family:"Mulish"; font-style:normal; font-display:swap; font-weight:300 800;
  src:url("../fonts/mulish-latin-wght-normal.woff2") format("woff2"); }

:root {
  --sc-font: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sc-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-paper: #f4efe6;        /* crema */
  --sc-paper-2: #efe8db;      /* sezioni alternate */
  --sc-paper-3: #ffffff;      /* card bianche */
  --sc-ink: #241f1a;          /* titoli / testo forte */
  --sc-text: #4b4339;         /* testo corrente */
  --sc-muted: #6e6354;        /* secondario (scurito per contrasto) */
  --sc-rule-soft: #e4dac8;
  --sc-leader: #d8cdba;
  --uc-border: #e4dac8;
  --sc-hover-bg: #efe8db;
  --sc-accent: #0b7a57;       /* verde (scurito per contrasto AA su bianco) */
  --sc-accent-ink: #086046;   /* verde scuro hover */
  --sc-accent-tint: #e3f3ee;  /* verde tenue */
  --sc-accent-on-ink: #58c9a6;
  --sc-accent2: #0b7a57;      /* link verdi */
  --sc-su-accento: #ffffff;
  --sc-coral: #ff5630;        /* coral: coupon / sconti */
  --sc-grad: linear-gradient(120deg, #0e8f6e, #0a6f54);
  --sc-radius: 14px;
  --sc-radius-sm: 10px;
  --sc-shadow: 0 1px 2px rgba(36,31,26,.05), 0 10px 30px rgba(36,31,26,.08);
  --sc-shadow-lg: 0 22px 48px rgba(36,31,26,.16);
}

body { font-family: var(--sc-font); background: var(--sc-paper); color: var(--sc-text); }
h1, h2, h3, h4, .cd-h1, .cd-blocco__t, .cd-banco__t, .sc-card__title, .sc-pd__title {
  font-family: var(--sc-display); font-weight: 600; letter-spacing: -0.005em;
}
a { color: var(--sc-accent2); }
a:hover { color: var(--sc-accent-ink); }

/* pulsanti e ricerca: testo in Mulish (il serif serve ai titoli, non ai bottoni) */
.sc-btn, .cd-cerca__btn, .sc-search__btn, .sc-btn--accent, .sc-btn--ghost {
  font-family: var(--sc-font); font-weight: 800; letter-spacing: 0;
}
.sc-btn--accent, .cd-cerca__btn, .sc-search__btn { box-shadow: 0 6px 16px rgba(14,143,110,.22); }
.sc-btn--accent:hover, .cd-cerca__btn:hover, .sc-search__btn:hover { box-shadow: 0 11px 24px rgba(14,143,110,.3); }

/* hero: crema caldo, titolo serif grande */
.cd-cerca-fascia {
  background: radial-gradient(70% 140% at 15% 0%, rgba(14,143,110,.07), transparent 60%), var(--sc-paper);
  border-bottom: 1px solid var(--sc-rule-soft); padding: 40px 0 30px;
}
.cd-h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.04; letter-spacing: -0.01em; font-weight: 600; }
.cd-sub { color: var(--sc-muted); }

/* righe corso: titoli serif, card calde */
.cd-blocco__t { font-weight: 600; }
.sc-card, article.sc-card { background: #fff; border: 1px solid var(--sc-rule-soft); }
.sc-card:hover, article.sc-card:hover { border-color: var(--sc-leader); }
.sc-card__title { font-size: 1.02rem; line-height: 1.18; }
.sc-card__who { color: var(--sc-muted); }
.sc-price__now { color: var(--sc-accent-ink); font-family: var(--sc-display); font-weight: 600; }
.sc-price__old { color: var(--sc-muted); }

/* badge sconto sulle copertine: coral "coupon" */
.sc-card__off {
  background: var(--sc-coral); color: #fff; border: 0;
  font-family: var(--sc-font); font-weight: 800; font-size: 0.72rem; letter-spacing: 0;
  padding: 4px 9px; border-radius: 8px; box-shadow: 0 2px 8px rgba(255,86,48,.3);
}

/* occhielli: coral scuro (leggibile su crema, contrasto AA) */
.sc-eyebrow, .sc-card__meta { color: #b23913; }

/* fascia pacchetti: banda scura calda; "il piu' scelto" in verde, etichetta coral */
.cd-pack { background: #241f1a; color: #f4efe6; }
.cd-pack__occhiello { color: #ffb3a3; opacity: 1; }
.cd-pack__claim, .cd-pack__how { color: #f4efe6; }
.cd-pack__how { text-decoration-color: rgba(244,239,230,.5); }
.cd-pack__o { background: #332c22; color: #f4efe6; border: 1px solid #4a4133; border-radius: 14px !important; }
.cd-pack__o b { color: #fff; }
.cd-pack__o > span:not(.cd-pack__tag) { color: #fff; }
.cd-pack__o em { color: #cbbfb0; }
.cd-pack__o:hover { background: #000; color: #f4efe6; }
.cd-pack__o.is-pop { background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: none; }
.cd-pack__o.is-pop b, .cd-pack__o.is-pop > span:not(.cd-pack__tag), .cd-pack__o.is-pop em { color: #fff; }
.cd-pack__tag { color: var(--sc-coral); }

/* sezioni scure + footer: nero caldo, coerente con la crema */
.sc-on-ink, .sc-section--ink, .sc-footer, footer.sc-footer { background: #241f1a; }
.sc-footer .sc-logo__tld { color: var(--sc-accent); }
.sc-footer .sc-logo__dot { background: var(--sc-accent) !important; }

/* sezione alternata (come funziona): crema piu' calda */
.sc-section--alt { background: var(--sc-paper-2); }

/* ---- hero editoriale: titolo serif a sinistra + card corso in evidenza a destra ---- */
.cc-hero { background: radial-gradient(60% 120% at 12% 0%, rgba(14,143,110,.08), transparent 60%), var(--sc-paper); border-bottom: 1px solid var(--sc-rule-soft); }
.cc-hero__in { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(24px,4vw,52px); align-items: center; padding: clamp(34px,5vw,64px) 0 clamp(30px,4vw,52px); }
.cc-hero__kick { font-family: var(--sc-font); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-coral); margin: 0 0 14px; }
.cc-hero__t { font-family: var(--sc-display); font-weight: 600; font-size: clamp(2.2rem,4.8vw,3.7rem); line-height: 1.02; letter-spacing: -.01em; color: var(--sc-ink); margin: 0 0 16px; }
.cc-hero__t em { font-style: italic; color: var(--sc-accent); }
.cc-hero__lead { color: var(--sc-text); font-size: 1.05rem; line-height: 1.55; max-width: 46ch; margin: 0 0 22px; }
.cc-hero__cerca { max-width: 540px; }
.cc-hero__aree { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cc-hero__card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sc-rule-soft); border-radius: var(--sc-radius); overflow: hidden; box-shadow: var(--sc-shadow-lg); text-decoration: none; transition: transform .16s ease; }
.cc-hero__card:hover { transform: translateY(-4px); }
.cc-hero__badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--sc-ink); color: #fff; font-family: var(--sc-font); font-weight: 800; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; }
.cc-hero__media { position: relative; display: block; aspect-ratio: 16/10; background: var(--sc-paper-2); }
.cc-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-hero__off { position: absolute; top: 14px; right: 14px; background: var(--sc-coral); color: #fff; font-family: var(--sc-font); font-weight: 800; font-size: .85rem; padding: 6px 11px; border-radius: 9px; box-shadow: 0 2px 10px rgba(255,86,48,.35); }
.cc-hero__cb { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.cc-hero__ct { font-family: var(--sc-display); font-weight: 600; font-size: 1.2rem; line-height: 1.14; color: var(--sc-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-hero__cp { display: flex; align-items: baseline; gap: 9px; font-family: var(--sc-display); font-weight: 600; font-size: 1.5rem; color: var(--sc-accent-ink); }
.cc-hero__cp del { color: var(--sc-muted); font-weight: 400; font-size: .95rem; font-family: var(--sc-font); }
@media (max-width: 900px) { .cc-hero__in { grid-template-columns: 1fr; } .cc-hero__card { max-width: 460px; } }

/* etichette piccole in sans (non monospace), come nel concept */
.sc-eyebrow, .sc-card__meta, .cd-sub, .cd-blocco .sc-eyebrow { font-family: var(--sc-font); font-weight: 800; letter-spacing: .1em; }

/* ---- PACK piu' grande e vistoso ---- */
.cd-pack { padding: clamp(34px,5vw,58px) 0; }
.cd-pack__in { gap: 34px; align-items: center; }
.cd-pack__occhiello { font-size: .74rem; letter-spacing: .16em; }
.cd-pack__claim { font-size: clamp(1.5rem,3vw,2.35rem); line-height: 1.08; max-width: 16ch; }
.cd-pack__how { font-size: .95rem; margin-top: 12px; }
.cd-pack__opz { gap: 14px; }
.cd-pack__o { min-width: 190px; padding: 24px 28px 20px; gap: 4px; }
.cd-pack__o.is-pop { padding-top: 32px; transform: scale(1.06); }
.cd-pack__o b { font-size: 1.05rem; }
.cd-pack__o > span:not(.cd-pack__tag) { font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; }
.cd-pack__o em { font-size: .72rem; }
.cd-pack__tag { top: 10px; font-size: .62rem; }
@media (max-width: 860px) { .cd-pack__o.is-pop { transform: none; } .cd-pack__opz { width: 100%; } .cd-pack__o { flex: 1 1 42%; min-width: 140px; } }

/* niente monospace nelle etichette UI: "Mostra altro", chip categorie, link indice -> Mulish */
.cd-blocco__piu { font-family: var(--sc-font); font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--sc-accent); font-size: .85rem; }
.cd-blocco__piu:hover { color: var(--sc-accent-ink); }
.cd-area { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--sc-rule-soft); border-radius: 999px; padding: 8px 15px; font-family: var(--sc-font); font-weight: 700; font-size: .84rem; letter-spacing: 0; text-transform: none; color: var(--sc-ink); box-shadow: 0 1px 2px rgba(36,31,26,.04); transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; }
.cd-area:hover { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; transform: translateY(-1px); }
.cd-area i { font-style: normal; font-weight: 700; font-size: .72rem; color: var(--sc-muted); }
.cd-area:hover i { color: rgba(255,255,255,.82); }
.cd-area--all { background: var(--sc-accent-tint); border-color: transparent; color: var(--sc-accent-ink); }
.cd-area--all:hover { background: var(--sc-accent); color: #fff; }
.cd-indice__all { font-family: var(--sc-font); font-weight: 800; letter-spacing: 0; text-transform: none; }

/* "Assistenza: info@..." in header (desktop + mobile): via dal monospace, in Mulish */
.sc-nav__aside, .sc-mnav__meta { font-family: var(--sc-font); letter-spacing: 0; text-transform: none; }

/* loghi pagamento nella sezione "Paga come vuoi" (home) */
.sc-pay__logos { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; }
.sc-pay__card .sc-paylogo { height: 34px; }
.sc-pay__card .sc-paylogo--btc, .sc-pay__card .sc-paylogo--eth, .sc-pay__card .sc-paylogo--usdt { width: 34px; font-size: 19px; }
.sc-pay__card .sc-paylogo--pp { font-size: 16px; }

/* ================= rifiniture giro feedback (24/10) ================= */
/* 1) via il monospace da tutto il sito (breadcrumb, box categoria, "corsi/pagina", "Ordina", ecc.) */
:root { --sc-mono: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sc-mono { font-family: var(--sc-mono) !important; }

/* 2) footer: i link di colonna erano scuri su scuro (invisibili) -> testo chiaro, titoli bianchi */
.sc-footer p, .sc-footer li, .sc-footer span { color: #cfc5b8; }
.sc-footer a { color: #e7ded2 !important; }
.sc-footer a:hover { color: #ffffff !important; }
.sc-footer .sc-footer__h, .sc-footer h2, .sc-footer h3, .sc-footer .sc-logo { color: #ffffff; }
.sc-footer .sc-logo__tld { color: var(--sc-accent); }

/* 3) etichetta "il più scelto" sul taglio verde del pack: bianca, non coral (era illeggibile) */
.cd-pack__o.is-pop .cd-pack__tag { color: #ffffff; }

/* 3b) paginatore: numero della pagina corrente era scuro su pill scuro (invisibile) */
.sc-pager [aria-current="page"], .sc-pager [aria-current] { color: #ffffff; }

/* 4) immagine scheda prodotto: nel suo formato (7:5), non stirata a quadrato/tagliata */
/* colonna sinistra = immagine + riquadro benefici, così non resta vuoto sotto l'immagine */
.sc-pd__left { display: flex; flex-direction: column; gap: 18px; }
.sc-pd__assure { background: #fff; border: 1px solid var(--sc-rule-soft); border-radius: var(--sc-radius); padding: 18px 20px; box-shadow: var(--sc-shadow); }
.sc-pd__assure-h { font-family: var(--sc-display); font-weight: 600; font-size: 1.1rem; margin: 0 0 12px; color: var(--sc-ink); }
.sc-pd__assure-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sc-pd__assure-l li { position: relative; padding-left: 28px; color: var(--sc-text); font-size: .95rem; line-height: 1.4; }
.sc-pd__assure-l li::before { content: "\2713"; position: absolute; left: 0; top: 1px; color: #fff; background: var(--sc-accent); width: 19px; height: 19px; border-radius: 999px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
@media (max-width: 960px) { .sc-pd__assure { display: none; } }
.sc-pd__media { aspect-ratio: 7 / 5; min-height: 0; }
.sc-pd__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 960px) {
  .sc-pd__top { align-items: start; }
  .sc-pd__media { align-self: start; min-height: 0; aspect-ratio: 7 / 5; }
}

/* 5) loghi pagamento più grandi; PayPal in evidenza (scheda prodotto + home) */
.sc-paylogo { height: 32px; }
.sc-paylogo--pp { height: 36px; padding: 0 14px; font-size: 18px; }
.sc-paylogo--btc, .sc-paylogo--eth, .sc-paylogo--usdt { width: 32px; font-size: 18px; }
.sc-pay__card .sc-paylogo { height: 40px; }
.sc-pay__card .sc-paylogo--pp { height: 44px; font-size: 22px; padding: 0 18px; }
.sc-pay__card .sc-paylogo--btc, .sc-pay__card .sc-paylogo--eth, .sc-pay__card .sc-paylogo--usdt { width: 40px; font-size: 22px; }