/* =============================================================
   SCHOLA — DESIGN SYSTEM
   -------------------------------------------------------------
   Caricato dopo style.css (tema originale, ancora usato dalle
   pagine legacy). Qui vivono token, tipografia e componenti del
   sito pubblico. Identita' invariata: marrone del marchio,
   terracotta del gufo, panna, rosa cipria; logo in MoonTime;
   slogan in Reenie Beanie + EB Garamond.

   Indice
   1. Token                 8. Card delle aree e dei servizi
   2. Base e tipografia     9. Card dei corsi
   3. Layout e sezioni     10. Pagina corso
   4. Pulsanti e link      11. Listino prezzi
   5. Etichette e chip     12. Contenuti (note, FAQ, passi, valori)
   6. Header e menu        13. Modulo di contatto e mappa
   7. Hero e testate       14. Richiamo finale e footer
                           15. Movimento e pagine legacy
   ============================================================= */

/* 1. TOKEN ----------------------------------------------------- */
:root {
  /* Colori del marchio */
  --sc-marrone: #59524c;
  --sc-marrone-scuro: #3f3935;
  --sc-marrone-chiaro: #746b63;
  --sc-terracotta: #bd7f6f;          /* il gufo: decorativo, testi grandi */
  --sc-terracotta-scura: #95594a;    /* terracotta leggibile su chiaro (5:1) */
  --sc-terracotta-tenue: #f5e8e3;
  --sc-rosa: #eedfdb;
  --sc-panna: #f6f4f1;
  --sc-sabbia: #ece8e1;
  --sc-bianco: #fff;

  /* Testi e linee */
  --sc-testo: #2a2522;
  --sc-testo-2: #5e5751;
  --sc-testo-3: #756d66;
  --sc-bordo: #e4ddd6;
  --sc-bordo-forte: #cfc6bd;

  /* Stati */
  --sc-ok: #2f5c28;       --sc-ok-bg: #e5efe1;
  --sc-avviso: #6f5305;   --sc-avviso-bg: #f9eecd;
  --sc-errore: #8c2f26;   --sc-errore-bg: #f7e6e3;

  /* Caratteri */
  --sc-font-testo: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-titoli: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-logo: "MoonTime", "Brush Script MT", cursive;
  --sc-font-mano: "Reenie Beanie", cursive;
  --sc-font-serif: "EB Garamond", Georgia, serif;

  /* Scala tipografica (fluida tra 320 e 1280 px) */
  --sc-fs-h1: clamp(1.9rem, 1.45rem + 2.1vw, 3rem);
  --sc-fs-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.15rem);
  --sc-fs-h3: clamp(1.1rem, 1.05rem + .3vw, 1.3rem);
  --sc-fs-lead: clamp(1.02rem, .98rem + .25vw, 1.15rem);
  --sc-fs-testo: 1rem;
  --sc-fs-piccolo: .875rem;
  --sc-fs-etichetta: .75rem;

  /* Spazi */
  --sc-sp-1: .5rem;
  --sc-sp-2: 1rem;
  --sc-sp-3: 1.5rem;
  --sc-sp-4: 2rem;
  --sc-sp-5: 3rem;
  --sc-sp-6: 4.5rem;
  --sc-sezione: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Forme */
  --sc-r-s: 8px;
  --sc-r: 14px;
  --sc-r-l: 22px;
  --sc-r-pillola: 999px;
  --sc-ombra-1: 0 1px 2px rgba(61, 56, 52, .05), 0 4px 14px -6px rgba(61, 56, 52, .12);
  --sc-ombra-2: 0 18px 40px -18px rgba(61, 56, 52, .35);

  --sc-header-h: 64px;
  --sc-transizione: .22s cubic-bezier(.2, .7, .3, 1);
}
@media (min-width: 992px) { :root { --sc-header-h: 76px; } }

/* 2. BASE E TIPOGRAFIA ----------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.sc {
  font-family: var(--sc-font-testo);
  font-size: var(--sc-fs-testo);
  line-height: 1.65;
  color: var(--sc-testo);
  background: var(--sc-bianco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sc h1, .sc h2, .sc h3, .sc h4 {
  font-family: var(--sc-font-titoli);
  color: var(--sc-testo);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.sc h1 { font-size: var(--sc-fs-h1); font-weight: 700; }
.sc h2 { font-size: var(--sc-fs-h2); font-weight: 600; }
.sc h3 { font-size: var(--sc-fs-h3); font-weight: 600; }
.sc h4 { font-size: 1rem; font-weight: 600; }
.sc p { margin: 0 0 1em; }
.sc a { color: var(--sc-marrone); text-underline-offset: 3px; }
.sc a:hover { color: var(--sc-marrone-scuro); }
.sc img { max-width: 100%; height: auto; }
.sc ::selection { background: var(--sc-rosa); color: var(--sc-testo); }
.sc [id] { scroll-margin-top: calc(var(--sc-header-h) + 16px); }

/* Fuoco visibile ovunque, per chi naviga da tastiera. */
.sc a:focus-visible, .sc button:focus-visible, .sc input:focus-visible,
.sc textarea:focus-visible, .sc select:focus-visible, .sc summary:focus-visible, .sc [tabindex]:focus-visible {
  outline: 3px solid var(--sc-marrone);
  outline-offset: 3px;
  border-radius: 4px;
}

.sc-occhiello {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-bottom: var(--sc-sp-1);
  font-family: var(--sc-font-titoli);
  font-size: var(--sc-fs-etichetta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-terracotta-scura);
}
.sc-lead { font-size: var(--sc-fs-lead); color: var(--sc-testo-2); line-height: 1.6; }
.sc-piccolo { font-size: var(--sc-fs-piccolo); color: var(--sc-testo-2); }
.sc-marchio { font-family: var(--sc-font-logo); font-weight: 400; color: var(--sc-terracotta); letter-spacing: 0; }

/* Salto al contenuto: visibile solo quando riceve il fuoco. */
.sc-salta {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 1100;
  padding: 10px 18px;
  background: var(--sc-marrone);
  color: #fff !important;
  border-radius: var(--sc-r-s);
}
.sc-salta:focus { left: 8px; }

/* 3. LAYOUT E SEZIONI ------------------------------------------ */
.sc .container { padding-left: 20px; padding-right: 20px; }
@media (min-width: 1200px) { .sc .container { max-width: 1200px; } }

.sc-sezione { padding: var(--sc-sezione) 0; overflow: visible; }
.sc-sezione--panna { background: var(--sc-panna); }
.sc-sezione--rosa { background: var(--sc-rosa); }
.sc-sezione--stretta { padding: calc(var(--sc-sezione) * .55) 0; }
.sc-sezione--senza-sopra { padding-top: 0; }

.sc-testata { max-width: 44rem; margin-bottom: var(--sc-sp-4); }
.sc-testata--centro { margin-left: auto; margin-right: auto; text-align: center; }
.sc-testata h1, .sc-testata h2 { margin: 0 0 .5em; }
.sc-testata p { font-size: var(--sc-fs-lead); color: var(--sc-testo-2); margin: 0; }
.sc-testata__riga { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sc-sp-2); margin-bottom: var(--sc-sp-4); }
.sc-testata__riga .sc-testata { margin-bottom: 0; }

.sc-griglia { display: grid; gap: var(--sc-sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sc-griglia--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
@media (min-width: 992px) {
  .sc-griglia--3 { grid-template-columns: repeat(3, 1fr); }
  .sc-griglia--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Contenuto + colonna laterale (sticky da desktop). */
.sc-colonne { display: grid; gap: var(--sc-sp-4); }
@media (min-width: 992px) {
  .sc-colonne { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sc-sp-5); align-items: start; }
  .sc-colonne__lato { position: sticky; top: calc(var(--sc-header-h) + 20px); }
}

.sc-testo { max-width: 42rem; }
.sc-testo h2 { font-size: 1.4rem; margin: 2.2em 0 .6em; }
.sc-testo h3 { font-size: 1.1rem; margin: 1.8em 0 .5em; }
.sc-testo > :first-child { margin-top: 0; }
.sc-testo p, .sc-testo li { color: var(--sc-testo-2); }

/* Briciole di pane */
.sc-briciole { padding: 14px 0 0; font-size: var(--sc-fs-piccolo); color: var(--sc-testo-3); }
.sc-briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; }
.sc-briciole li::after { content: "/"; margin-left: 6px; color: var(--sc-bordo-forte); }
.sc-briciole li:last-child::after { content: ""; }
.sc-briciole a { color: var(--sc-testo-2); }

/* Testata delle pagine interne */
.sc-pagina-testa { background: var(--sc-panna); padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.sc-pagina-testa .sc-testata { margin: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) 0 0; }
.sc-pagina-testa .sc-btn-fila { margin-top: var(--sc-sp-3); }

/* Banner delle schede corso: stesso linguaggio grafico della copertina disegnata
   (colore di categoria, trama di punti, cerchio che richiama il gufo). Niente
   fotografie generiche: sul sito ci sono solo immagini di Schola.
   Il testo resta sul fondo chiaro della categoria, quindi il contrasto non cala. */
.sc-pagina-testa--corso { position: relative; overflow: hidden; background: var(--cat-tinta, var(--sc-panna)); }
.sc-pagina-testa--presenza { --cat: var(--sc-marrone); --cat-tinta: var(--sc-sabbia); }
.sc-pagina-testa--online   { --cat: var(--sc-terracotta-scura); --cat-tinta: var(--sc-terracotta-tenue); }
.sc-pagina-testa--corso::before {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--cat);
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 18px 18px;
  opacity: .12;
  pointer-events: none;
}
.sc-pagina-testa--corso::after {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  right: -8%;
  top: -46%;
  border-radius: 50%;
  background: var(--cat);
  opacity: .1;
  pointer-events: none;
}
.sc-pagina-testa--corso > * { position: relative; z-index: 1; }
@media (max-width: 767.98px) { .sc-pagina-testa--corso::after { width: 60%; right: -18%; top: -22%; } }

/* LABORATORIO TEATRALE — sfondo a colori.
   Riusa assets/img/color.gif, la decorazione a colori gia' presente nel sito
   di Schola: nessuna immagine nuova, nessuna licenza da verificare.
   Il file e' in gran parte bianco con le forme colorate in alto: con
   "multiply" il bianco sparisce e restano solo sole, foglie e macchie sopra
   la tinta della categoria. Sta a destra e non passa sotto al testo, che
   resta sul fondo chiaro: il contrasto non cambia. */
main[data-item="teatro"] .sc-pagina-testa--corso::after {
  width: min(46%, 520px);
  aspect-ratio: auto;
  height: 100%;
  right: 0;
  top: 0;
  border-radius: 0;
  /* "cover" ancorato in alto a destra mostra la fascia colorata del file e
     taglia via la parte vuota sotto: si vedono sole, foglie e macchie, non
     un ritaglio mezzo bianco. */
  background: url("../img/color.gif") no-repeat right top / cover;
  mix-blend-mode: multiply;
  opacity: .85;
}
/* Da tablet in giu' il testo si allarga: la decorazione si restringe e si
   alleggerisce, cosi' resta un accento nell'angolo e non arriva sulle parole. */
@media (max-width: 991.98px) {
  main[data-item="teatro"] .sc-pagina-testa--corso::after { width: 38%; opacity: .7; }
}
/* Su telefono il testo riempie tutto il banner: qualunque posizione andrebbe
   a finire sopra le parole (la briciola di pane in alto, il sommario al
   centro). Si apre quindi una fascia sotto al testo e la decorazione sta li',
   dove non passa nessuno. Il riquadro e' in basso ma l'immagine resta
   ancorata in alto: e' li' che il file ha le forme colorate. */
@media (max-width: 575.98px) {
  main[data-item="teatro"] .sc-pagina-testa--corso {
    padding-bottom: calc(clamp(2rem, 1.5rem + 2.5vw, 3.5rem) + 84px);
  }
  main[data-item="teatro"] .sc-pagina-testa--corso::after {
    width: 62%;
    height: 104px;
    top: auto;
    bottom: 4px;
    background-position: right top;
    opacity: .7;
  }
}

/* 4. PULSANTI E LINK ------------------------------------------- */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 46px;
  padding: 11px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--sc-r-pillola);
  font-family: var(--sc-font-titoli);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sc-transizione), color var(--sc-transizione), border-color var(--sc-transizione), transform .12s ease, box-shadow var(--sc-transizione);
}
.sc-btn:active { transform: scale(.98); }
.sc-btn .bx { font-size: 1.15em; }
.sc-btn--primario { background: var(--sc-marrone); color: #fff !important; }
.sc-btn--primario:hover { background: var(--sc-marrone-scuro); box-shadow: 0 8px 18px -10px rgba(61, 56, 52, .7); }
.sc-btn--secondario { background: transparent; color: var(--sc-marrone) !important; border-color: var(--sc-bordo-forte); }
.sc-btn--secondario:hover { border-color: var(--sc-marrone); background: var(--sc-bianco); }
.sc-btn--chiaro { background: #fff; color: var(--sc-marrone-scuro) !important; }
.sc-btn--chiaro:hover { background: var(--sc-rosa); }
.sc-btn--contorno-chiaro { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .55); }
.sc-btn--contorno-chiaro:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.sc-btn--blocco { display: flex; width: 100%; }
.sc-btn-fila { display: flex; flex-wrap: wrap; gap: 12px; }

/* Link con freccia: l'azione testuale del sito. */
.sc-freccia {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--sc-font-titoli);
  font-weight: 500;
  font-size: .95rem;
  color: var(--sc-marrone);
  text-decoration: none;
}
.sc-freccia::after { content: "→"; transition: transform var(--sc-transizione); }
a.sc-freccia:hover::after, a:hover .sc-freccia::after { transform: translateX(4px); }

/* 5. ETICHETTE E CHIP ------------------------------------------ */
.sc-stato {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 4px 11px;
  border-radius: var(--sc-r-pillola);
  font-family: var(--sc-font-titoli);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
}
.sc-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sc-stato--aperto       { background: var(--sc-ok-bg); color: var(--sc-ok); }
.sc-stato--programmato  { background: var(--sc-avviso-bg); color: var(--sc-avviso); }
.sc-stato--preparazione { background: var(--sc-rosa); color: var(--sc-marrone-scuro); }
.sc-stato--completo     { background: var(--sc-errore-bg); color: var(--sc-errore); }
.sc-stato--concluso     { background: var(--sc-sabbia); color: var(--sc-testo-2); }
/* "Nuovo corso": stessa pastiglia degli stati, tinte della palette Schola
   (terracotta tenue + terracotta scura, gia' usate altrove). Non e' uno stato
   commerciale, quindi niente pallino davanti: si affianca a "Iscrizioni
   aperte" senza sembrare un'altra condizione del corso. */
.sc-stato--nuovo        { background: var(--sc-terracotta-tenue); color: var(--sc-terracotta-scura); }
.sc-stato--nuovo::before { display: none; }
/* Le pastiglie stanno su una riga e vanno a capo insieme se non ci stanno. */
.sc-pastiglie { display: flex; flex-wrap: wrap; gap: 6px; }

.sc-chip-fila { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 4px 10px;
  border-radius: var(--sc-r-pillola);
  background: var(--sc-panna);
  border: 1px solid var(--sc-bordo);
  font-size: .8rem;
  color: var(--sc-testo-2);
}
.sc-chip .bx { color: var(--sc-terracotta-scura); }

/* Elenco con spunte */
.sc-elenco { list-style: none; margin: 0 0 1em; padding: 0; }
.sc-elenco li { position: relative; padding: 4px 0 4px 28px; line-height: 1.55; color: var(--sc-testo-2); }
.sc-elenco li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--sc-terracotta);
  border-bottom: 2px solid var(--sc-terracotta);
  transform: rotate(-45deg);
}
.sc-elenco--due { columns: 2 14rem; column-gap: var(--sc-sp-4); }
.sc-elenco--due li { break-inside: avoid; }

/* 6. HEADER E MENU --------------------------------------------- */
.sc-topbar { display: none; background: var(--sc-marrone); color: #fff; font-size: .82rem; }
@media (min-width: 992px) { .sc-topbar { display: block; } }
.sc-topbar__riga { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.sc-topbar__contatti { display: flex; gap: 22px; }
.sc-topbar a { color: rgba(255, 255, 255, .9) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.sc-topbar a:hover { color: #fff !important; }
.sc-topbar__social { display: flex; gap: 14px; font-size: 1rem; }

.sc-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--sc-transizione), border-color var(--sc-transizione);
}
@supports (backdrop-filter: blur(8px)) { .sc-header { background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(10px); } }
.sc-header.is-scorrimento { border-bottom-color: var(--sc-bordo); box-shadow: 0 6px 20px -16px rgba(61, 56, 52, .5); }
.sc-header__riga { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--sc-header-h); }

.sc-logo {
  font-family: var(--sc-font-logo);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--sc-marrone-scuro) !important;
  text-decoration: none;
  padding-top: 6px; /* il MoonTime ha la linea di base alta */
  -webkit-text-stroke: .35px currentColor; /* il tratto e' molto sottile: un filo di corpo in piu' */
}
@media (min-width: 992px) { .sc-logo { font-size: 3.1rem; } }

.sc-header__azioni { display: flex; align-items: center; gap: 4px; }
.sc-header__tel, .sc-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sc-marrone);
  font-size: 1.35rem;
  text-decoration: none;
  cursor: pointer;
}
.sc-header__tel:hover, .sc-hamburger:hover { background: var(--sc-panna); }
.sc-hamburger__linee, .sc-hamburger__linee::before, .sc-hamburger__linee::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--sc-transizione), opacity var(--sc-transizione);
}
.sc-hamburger__linee { position: relative; }
.sc-hamburger__linee::before, .sc-hamburger__linee::after { content: ""; position: absolute; left: 0; }
.sc-hamburger__linee::before { top: -6px; }
.sc-hamburger__linee::after { top: 6px; }
.sc-hamburger[aria-expanded="true"] .sc-hamburger__linee { background: transparent; }
.sc-hamburger[aria-expanded="true"] .sc-hamburger__linee::before { transform: translateY(6px) rotate(45deg); }
.sc-hamburger[aria-expanded="true"] .sc-hamburger__linee::after { transform: translateY(-6px) rotate(-45deg); }

.sc-nav__lista { list-style: none; margin: 0; padding: 0; }
.sc-nav a { text-decoration: none; }
.sc-nav__link, .sc-nav__apri {
  font-family: var(--sc-font-titoli);
  font-size: .95rem;
  font-weight: 500;
  color: var(--sc-testo) !important;
}
.sc-nav__sotto { list-style: none; margin: 0; padding: 0; }
.sc-nav__sotto a { font-family: var(--sc-font-titoli); color: var(--sc-testo) !important; }
.sc-nav__apri { border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; }
.sc-nav__apri .bx { transition: transform var(--sc-transizione); }
.sc-nav__apri[aria-expanded="true"] .bx { transform: rotate(180deg); }

/* Menu da desktop */
@media (min-width: 992px) {
  .sc-header__azioni { display: none; }
  .sc-nav__lista { display: flex; align-items: center; gap: 4px; }
  .sc-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--sc-r-s); }
  .sc-nav__link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--sc-terracotta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sc-transizione);
  }
  .sc-nav__link:hover::after, .sc-nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .sc-nav__gruppo { position: relative; display: flex; align-items: center; }
  .sc-nav__link--gruppo { padding-right: 2px; }
  .sc-nav__link--gruppo::after { right: 2px; }
  .sc-nav__apri { width: 28px; height: 36px; justify-content: center; padding: 0; border-radius: var(--sc-r-s); }
  .sc-nav__apri-testo { display: none; }
  .sc-nav__sotto {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sc-bordo);
    border-radius: var(--sc-r);
    box-shadow: var(--sc-ombra-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--sc-transizione), transform var(--sc-transizione), visibility var(--sc-transizione);
  }
  .sc-nav__sotto::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .sc-nav__gruppo:hover .sc-nav__sotto,
  .sc-nav__gruppo:focus-within .sc-nav__sotto,
  .sc-nav__apri[aria-expanded="true"] + .sc-nav__sotto { opacity: 1; visibility: visible; transform: none; }
  .sc-nav__sotto a { display: block; padding: 9px 12px; border-radius: var(--sc-r-s); font-size: .92rem; }
  .sc-nav__sotto a:hover { background: var(--sc-panna); }
  .sc-nav__solo-mobile { display: none; }
  .sc-nav__accesso { margin-left: 8px; padding: 8px 16px; border: 1.5px solid var(--sc-bordo-forte); border-radius: var(--sc-r-pillola); }
  .sc-nav__accesso::after { display: none; }
  .sc-nav__accesso:hover, .sc-nav__accesso[aria-current="page"] { border-color: var(--sc-marrone); }
}
@media (min-width: 992px) and (max-width: 1150px) {
  .sc-nav__link { padding: 10px 8px; font-size: .9rem; }
  .sc-nav__link::after { left: 8px; right: 8px; }
}

/* Menu da mobile: pannello sotto l'header */
@media (max-width: 991.98px) {
  .sc-nav {
    position: fixed;
    top: var(--sc-header-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--sc-header-h));
    max-height: calc(100dvh - var(--sc-header-h));
    overflow-y: auto;
    padding: 8px 20px 24px;
    background: #fff;
    border-top: 1px solid var(--sc-bordo);
    box-shadow: 0 24px 40px -24px rgba(61, 56, 52, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--sc-transizione), transform var(--sc-transizione), visibility var(--sc-transizione);
  }
  .sc-menu-aperto .sc-nav { opacity: 1; visibility: visible; transform: none; }
  .sc-menu-aperto { overflow: hidden; }
  .sc-nav__lista > li { border-bottom: 1px solid var(--sc-panna); }
  .sc-nav__link, .sc-nav__apri { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; font-size: 1.05rem; text-align: left; }
  .sc-nav__link[aria-current="page"] { color: var(--sc-terracotta-scura) !important; }
  .sc-nav__link--gruppo { display: none; }
  .sc-nav__apri-aiuto { display: none; }
  .sc-nav__sotto { display: none; padding: 0 0 10px 12px; }
  .sc-nav__apri[aria-expanded="true"] + .sc-nav__sotto { display: block; }
  .sc-nav__sotto a { display: flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: .98rem; color: var(--sc-testo-2) !important; }
  .sc-nav__accesso { justify-content: flex-start; gap: 8px; }
  /* Sfondo oscurato sotto il pannello */
  body.sc::before {
    content: "";
    position: fixed;
    inset: var(--sc-header-h) 0 0 0;
    z-index: 850;
    background: rgba(42, 37, 34, .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sc-transizione), visibility var(--sc-transizione);
  }
  body.sc.sc-menu-aperto::before { opacity: 1; visibility: visible; }
}

/* 7. HERO E TESTATE -------------------------------------------- */
.sc-hero {
  position: relative;
  overflow: hidden;
  background: var(--sc-panna);
  padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.sc-hero::before { /* motivo a puntini, solo decorativo */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(89, 82, 76, .09) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 75%);
          mask-image: linear-gradient(115deg, transparent 35%, #000 75%);
  pointer-events: none;
}
.sc-hero__griglia { position: relative; display: grid; gap: var(--sc-sp-4); align-items: center; }
@media (min-width: 768px) { .sc-hero__griglia { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.sc-hero__titolo { margin: .1em 0 .2em; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); }
.sc-hero__titolo .sc-marchio { font-size: 1.75em; line-height: .8; vertical-align: -.08em; margin-left: .05em; }
.sc-hero__slogan { margin: 0 0 var(--sc-sp-3); line-height: 1; color: var(--sc-testo); }
.sc-hero__slogan-mano { display: block; font-family: var(--sc-font-mano); font-size: clamp(2.2rem, 1.7rem + 2vw, 3.4rem); font-weight: 400; transform: rotate(-3deg); transform-origin: left; margin-left: .15em; }
/* Il maiuscolo lo fa il CSS: nel markup il testo resta in minuscolo, cosi' i lettori di schermo
   lo annunciano come una frase e non come una sigla. */
.sc-hero__slogan-serif { display: block; font-family: var(--sc-font-serif); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); letter-spacing: .03em; margin-top: -.15em; text-transform: uppercase; }
.sc-hero .sc-lead { max-width: 34rem; }
.sc-hero__azioni { margin-top: var(--sc-sp-3); }

/* Il gufo: stessa illustrazione del sito, ritagliata nel suo cerchio. */
.sc-gufo {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(61, 56, 52, .55);
}
.sc-gufo img { position: absolute; width: 145.4%; max-width: none; height: auto; left: -17.9%; top: -35.6%; }
.sc-gufo--piccolo { width: 132px; }
@media (max-width: 767px) {
  .sc-hero__griglia { gap: var(--sc-sp-3); }
  .sc-hero__gufo { order: -1; }
  .sc-hero__gufo .sc-gufo { width: 124px; margin: 0; }
}

/* 8. CARD DELLE AREE E DEI SERVIZI ----------------------------- */
.sc-area {
  --colore: var(--sc-marrone);
  --tinta: var(--sc-sabbia);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sc-sp-3);
  border-radius: var(--sc-r-l);
  background: #fff;
  border: 1px solid var(--sc-bordo);
  color: inherit !important;
  text-decoration: none;
  transition: transform var(--sc-transizione), box-shadow var(--sc-transizione), border-color var(--sc-transizione);
}
.sc-area--supporto { --colore: var(--sc-terracotta-scura); --tinta: var(--sc-terracotta-tenue); }
.sc-area--presenza { --colore: var(--sc-marrone); --tinta: var(--sc-sabbia); }
.sc-area--online   { --colore: var(--sc-marrone-scuro); --tinta: var(--sc-rosa); }
.sc-area:hover { transform: translateY(-4px); box-shadow: var(--sc-ombra-2); border-color: transparent; }
.sc-area__icona {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sc-sp-2);
  border-radius: 18px;
  background: var(--tinta);
  color: var(--colore);
  font-size: 1.7rem;
  transition: transform var(--sc-transizione);
}
.sc-area:hover .sc-area__icona { transform: rotate(-6deg) scale(1.05); }
.sc-area h2, .sc-area h3 { margin: 0 0 .35em; font-size: 1.3rem; font-weight: 600; }
.sc-area p { color: var(--sc-testo-2); margin: 0 0 var(--sc-sp-2); }
.sc-area .sc-chip-fila { margin-bottom: var(--sc-sp-3); }
.sc-area__vai { margin-top: auto; color: var(--colore); }

/* Riga di servizio (supporto scolastico in home e altrove) */
.sc-servizi { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sc-servizio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--sc-r);
  background: #fff;
  border: 1px solid var(--sc-bordo);
  color: inherit !important;
  text-decoration: none;
  transition: border-color var(--sc-transizione), transform var(--sc-transizione), box-shadow var(--sc-transizione);
}
a.sc-servizio:hover { border-color: var(--sc-terracotta); transform: translateX(3px); box-shadow: var(--sc-ombra-1); }
.sc-servizio__icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--sc-terracotta-tenue); color: var(--sc-terracotta-scura); font-size: 1.35rem; }
.sc-servizio__nome { display: block; font-family: var(--sc-font-titoli); font-weight: 600; color: var(--sc-testo); }
.sc-servizio__testo { display: block; font-size: var(--sc-fs-piccolo); color: var(--sc-testo-2); line-height: 1.45; }
.sc-servizio__prezzo { font-family: var(--sc-font-titoli); font-size: .85rem; font-weight: 600; color: var(--sc-terracotta-scura); white-space: nowrap; }
@media (max-width: 479px) {
  .sc-servizio { grid-template-columns: auto 1fr; }
  .sc-servizio__prezzo { grid-column: 2; }
}

/* Scheda generica (passi, informazioni, contatti) */
.sc-scheda {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sc-sp-3);
  border: 1px solid var(--sc-bordo);
  border-radius: var(--sc-r);
  background: #fff;
}
a.sc-scheda { color: inherit !important; text-decoration: none; transition: border-color var(--sc-transizione), transform var(--sc-transizione), box-shadow var(--sc-transizione); }
a.sc-scheda:hover { border-color: var(--sc-terracotta); transform: translateY(-3px); box-shadow: var(--sc-ombra-1); }
.sc-scheda__icona { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 14px; background: var(--sc-panna); color: var(--sc-terracotta-scura); font-size: 1.35rem; }
.sc-scheda h3 { margin: 0 0 .35em; font-size: 1.1rem; }
.sc-scheda p { color: var(--sc-testo-2); margin: 0 0 .75em; font-size: .95rem; }
.sc-scheda p:last-child { margin-bottom: 0; }
.sc-scheda__coda { margin-top: auto; padding-top: var(--sc-sp-2); }
.sc-scheda__dati { list-style: none; margin: 0 0 var(--sc-sp-2); padding: 0; font-size: var(--sc-fs-piccolo); color: var(--sc-testo-2); }
.sc-scheda__dati li { padding: 3px 0; }
.sc-scheda__dati strong { color: var(--sc-testo); font-weight: 600; }

/* 9. CARD DEI CORSI -------------------------------------------- */
.sc-corso {
  --cat: var(--sc-marrone);
  --cat-tinta: var(--sc-sabbia);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sc-r-l);
  background: #fff;
  border: 1px solid var(--sc-bordo);
  color: inherit !important;
  text-decoration: none;
  transition: transform var(--sc-transizione), box-shadow var(--sc-transizione), border-color var(--sc-transizione);
}
.sc-corso--online { --cat: var(--sc-terracotta-scura); --cat-tinta: var(--sc-terracotta-tenue); }
.sc-corso:hover { transform: translateY(-4px); box-shadow: var(--sc-ombra-2); border-color: transparent; }

/* Copertina: la foto se c'e'; altrimenti un disegno del sistema Schola
   (colore di categoria, motivo, icona del corso), mai una foto generica. */
.sc-copertina {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--cat-tinta);
  color: var(--cat);
}
.sc-copertina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-copertina--disegno::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 16px 16px;
  opacity: .14;
}
.sc-copertina--disegno::after { /* grande cerchio, rimando al gufo */
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  right: -12%;
  top: -40%;
  border-radius: 50%;
  background: currentColor;
  opacity: .08;
}
.sc-copertina__icona {
  position: absolute;
  left: 20px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sc-ombra-1);
  font-size: 1.8rem;
  transition: transform var(--sc-transizione);
}
.sc-corso:hover .sc-copertina__icona { transform: translateY(-3px) rotate(-5deg); }
.sc-copertina__tipo {
  position: absolute;
  right: 16px;
  bottom: 18px;
  font-family: var(--sc-font-titoli);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sc-corso__corpo { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.sc-corso__corpo .sc-pastiglie { align-self: flex-start; margin-bottom: 10px; }
.sc-corso h3 { margin: 0 0 .2em; font-size: 1.15rem; }
.sc-corso__occhiello { margin: 0 0 .6em; font-size: .85rem; color: var(--sc-testo-3); }
.sc-corso__breve { margin: 0 0 1em; font-size: .93rem; color: var(--sc-testo-2); }
.sc-corso .sc-chip-fila { margin-bottom: 1em; }
.sc-corso__piede { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sc-panna); }
.sc-corso__prezzo { font-family: var(--sc-font-titoli); font-weight: 600; font-size: 1.1rem; color: var(--sc-testo); line-height: 1.2; }
.sc-corso__prezzo small { display: block; font-family: var(--sc-font-testo); font-weight: 400; font-size: .75rem; color: var(--sc-testo-3); }
.sc-corso__vai { color: var(--cat); white-space: nowrap; }

/* Prezzo generico */
.sc-prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 4px; }
.sc-prezzo__valore { font-family: var(--sc-font-titoli); font-size: 2rem; font-weight: 700; color: var(--sc-testo); line-height: 1; }
.sc-prezzo__unita { font-size: .9rem; color: var(--sc-testo-2); }
.sc-prezzo__pieno { font-size: .95rem; color: var(--sc-testo-3); text-decoration: line-through; }
.sc-prezzo__nota { margin: 0 0 12px; font-size: .82rem; color: var(--sc-testo-2); }

/* 10. PAGINA CORSO --------------------------------------------- */
/* Mobile: testata -> riepilogo (stato, prezzo, CTA) -> contenuto.
   Desktop: contenuto a sinistra, riepilogo sticky a destra. */
.sc-corso-pagina { display: grid; gap: var(--sc-sp-4); grid-template-areas: "riepilogo" "contenuto"; }
.sc-corso-pagina__riepilogo { grid-area: riepilogo; }
.sc-corso-pagina__contenuto { grid-area: contenuto; min-width: 0; }
@media (min-width: 992px) {
  .sc-corso-pagina { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "contenuto riepilogo"; gap: var(--sc-sp-5); align-items: start; }
  .sc-corso-pagina__riepilogo { position: sticky; top: calc(var(--sc-header-h) + 20px); margin-top: calc(-1 * clamp(4rem, 3rem + 3vw, 6.5rem)); }
}
.sc-testa-corso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sc-sp-3); }
.sc-testa-corso .sc-occhiello { margin: 0; }

.sc-riepilogo {
  padding: 22px;
  border-radius: var(--sc-r-l);
  background: #fff;
  border: 1px solid var(--sc-bordo);
  box-shadow: var(--sc-ombra-2);
}
.sc-riepilogo__stato { margin-bottom: 12px; }
.sc-riepilogo__avviso { margin: 12px 0 16px; padding: 12px 14px; border-radius: var(--sc-r); background: var(--sc-rosa); color: var(--sc-marrone-scuro); font-size: .88rem; line-height: 1.5; }
.sc-riepilogo__avviso strong { display: block; }
.sc-fatti { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 18px; font-size: .9rem; }
.sc-fatti dt { color: var(--sc-testo-3); font-weight: 400; display: flex; align-items: center; gap: 6px; }
.sc-fatti dd { margin: 0; color: var(--sc-testo); font-weight: 600; }
.sc-fatti .bx { color: var(--sc-terracotta-scura); }
.sc-riepilogo .sc-btn + .sc-btn { margin-top: 10px; }

/* Barra CTA mobile: compare solo quando il riepilogo e' fuori schermo. */
.sc-cta-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--sc-bordo);
  box-shadow: 0 -8px 24px -18px rgba(61, 56, 52, .5);
  transform: translateY(110%);
  transition: transform var(--sc-transizione);
}
.sc-cta-mobile.is-visibile { transform: none; }
.sc-cta-mobile__info { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.3; color: var(--sc-testo-2); }
.sc-cta-mobile__info strong { display: block; font-family: var(--sc-font-titoli); font-size: .92rem; color: var(--sc-testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cta-mobile .sc-btn { min-height: 42px; padding: 9px 16px; font-size: .88rem; }
@media (min-width: 992px) { .sc-cta-mobile { display: none; } }

/* Moduli del programma (fisarmonica) */
.sc-moduli { display: grid; gap: 10px; counter-reset: modulo; }
.sc-modulo { border: 1px solid var(--sc-bordo); border-radius: var(--sc-r); background: #fff; transition: border-color var(--sc-transizione), box-shadow var(--sc-transizione); }
.sc-modulo[open] { border-color: var(--sc-bordo-forte); box-shadow: var(--sc-ombra-1); }
.sc-modulo > summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.sc-modulo > summary::-webkit-details-marker { display: none; }
.sc-modulo__num { counter-increment: modulo; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--sc-panna); font-family: var(--sc-font-titoli); font-weight: 600; font-size: .9rem; color: var(--sc-marrone); }
.sc-modulo__num::before { content: counter(modulo); }
.sc-modulo__titolo { display: block; font-family: var(--sc-font-titoli); font-weight: 600; color: var(--sc-testo); line-height: 1.3; }
.sc-modulo__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; font-size: .8rem; color: var(--sc-testo-3); }
.sc-modulo__segno { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--sc-marrone); transition: transform var(--sc-transizione), background-color var(--sc-transizione); }
.sc-modulo[open] .sc-modulo__segno { transform: rotate(180deg); background: var(--sc-panna); }
.sc-modulo__lezioni { list-style: none; margin: 0; padding: 0 18px 16px 68px; }
.sc-modulo__lezioni li { position: relative; padding: 6px 0; font-size: .93rem; color: var(--sc-testo-2); border-top: 1px dashed var(--sc-bordo); }
.sc-modulo__lezioni li::before { content: ""; position: absolute; left: -18px; top: 1em; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-terracotta); }
@media (max-width: 479px) { .sc-modulo__lezioni { padding-left: 18px; } .sc-modulo__lezioni li { padding-left: 14px; } .sc-modulo__lezioni li::before { left: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sc-modulo[open] .sc-modulo__lezioni { animation: sc-apri .25s ease-out; }
}

/* Gruppi e orari di un corso in presenza */
.sc-orari { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.sc-orari li { display: flex; flex-direction: column; padding: 12px 16px; border-radius: var(--sc-r); background: var(--sc-panna); border-left: 3px solid var(--sc-terracotta); }
.sc-orari strong { font-family: var(--sc-font-titoli); font-weight: 600; color: var(--sc-testo); }
.sc-orari span { font-size: .9rem; color: var(--sc-testo-2); }
/* Calendario del singolo gruppo, quando i gruppi finiscono in date diverse:
   riga propria sotto all'orario, piu' discreta ma della stessa famiglia. */
.sc-orari__periodo { margin-top: 2px; font-size: .84rem; color: var(--sc-testo-3); }

.sc-testo .sc-passi { margin-bottom: 1em; }
.sc-passi--compatti { gap: 12px; }
.sc-passi--compatti li { padding: 16px 18px; }
.sc-passi--compatti li::before { width: 30px; height: 30px; margin-bottom: 8px; font-size: .85rem; }
.sc-testo .sc-passi h3 { margin: 0 0 .25em; font-size: 1rem; }
.sc-testo .sc-chip-fila { margin-bottom: 1em; }
.sc-testo .sc-nota { margin: 1.5em 0; }

/* Corso in preparazione: cosa si sa gia', senza riempitivi */
.sc-preparazione {
  display: grid;
  gap: 16px;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin: var(--sc-sp-4) 0;
  padding: 20px 22px;
  border-radius: var(--sc-r-l);
  background: var(--sc-panna);
  border: 1px dashed var(--sc-bordo-forte);
}
.sc-preparazione__icona { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: #fff; color: var(--sc-terracotta-scura); font-size: 1.5rem; }
.sc-preparazione h2, .sc-preparazione h3 { margin: 2px 0 .35em !important; font-size: 1.1rem !important; }
.sc-preparazione p { margin: 0; font-size: .95rem; color: var(--sc-testo-2); }

/* 11. LISTINO PREZZI ------------------------------------------- */
.sc-listino { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--sc-r-l); background: #fff; border: 1px solid var(--sc-bordo); }
.sc-listino__testa { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.sc-listino__testa h2 { margin: 0; font-size: 1.35rem; }
.sc-listino__desc { color: var(--sc-testo-2); margin-bottom: var(--sc-sp-3); }
.sc-tariffe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-bottom: var(--sc-sp-3); }
.sc-tariffa { position: relative; padding: 16px 18px; border-radius: var(--sc-r); background: var(--sc-panna); }
.sc-tariffa--agevolata { background: var(--sc-terracotta-tenue); }
.sc-tariffa__chi { display: block; font-size: .88rem; color: var(--sc-testo-2); line-height: 1.4; min-height: 2.8em; }
.sc-tariffa__requisito { display: block; font-size: .78rem; color: var(--sc-terracotta-scura); font-weight: 600; margin-top: 2px; }
.sc-tariffa .sc-prezzo { margin-top: 8px; }
.sc-tariffa .sc-prezzo__valore { font-size: 1.75rem; }
.sc-pacchetti { border-top: 1px solid var(--sc-bordo); padding-top: var(--sc-sp-2); }
.sc-pacchetti h3 { font-size: 1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.sc-pacchetti ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-pacchetti li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-bottom: 1px dashed var(--sc-bordo); font-size: .93rem; color: var(--sc-testo-2); }
.sc-pacchetti li:last-child { border-bottom: 0; }
.sc-pacchetti strong { font-family: var(--sc-font-titoli); color: var(--sc-testo); }
.sc-pacchetti s { color: var(--sc-testo-3); margin-right: 6px; font-size: .88rem; }
.sc-supplemento { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .9rem; color: var(--sc-testo-2); }
.sc-tariffa__nota { display: block; margin-top: 8px; font-weight: 600; color: var(--sc-terracotta-scura); }

/* Fasce di prezzo e pacchetti di ore ----------------------- */
.sc-nota-ore { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--sc-sp-3); padding: 8px 14px; border-radius: var(--sc-r-pillola); background: var(--sc-panna); color: var(--sc-testo-2); font-size: .92rem; }
/* Variante per una condizione che il cliente deve notare (es. la prenotazione
   obbligatoria del doposcuola): stessa forma, colore di categoria, nessuna
   tinta nuova fuori dal linguaggio Schola. Su telefono le due note vanno una
   sotto l'altra e l'icona resta in alto accanto alla prima riga. */
.sc-nota-ore--richiesta { background: var(--sc-sabbia); color: var(--sc-testo); align-items: flex-start; }
.sc-nota-ore--richiesta .bx { margin-top: 3px; flex: none; }
.sc-nota-ore--richiesta strong { color: var(--sc-terracotta-scura); }
/* Icona e testo sono due colonne: cosi' l'etichetta in grassetto puo' avere una
   riga propria senza che il resto della frase le scorra a fianco. */
.sc-nota-ore--richiesta span { display: block; }
@media (max-width: 575.98px) {
  .sc-nota-ore { display: flex; }
  .sc-nota-ore--richiesta strong { display: block; }
}
.sc-fascia { padding: clamp(1.1rem, .9rem + 1vw, 1.75rem); border-radius: var(--sc-r-l); background: #fff; border: 1px solid var(--sc-bordo); margin-bottom: var(--sc-sp-3); }
.sc-fascia__testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: var(--sc-sp-3); }
.sc-fascia__testa h3 { margin: 0; font-size: 1.2rem; }
.sc-fascia__ora { margin: 0; font-family: var(--sc-font-titoli); font-size: 1.5rem; font-weight: 700; color: var(--sc-terracotta-scura); }
/* Riga propria, non un frammento in riga di dimensione diversa dentro lo stesso
   paragrafo: e' la regola tipografica che vale in tutto il sito. */
.sc-fascia__ora span { display: block; font-family: var(--sc-font-testo); font-size: .92rem; font-weight: 400; line-height: 1.4; color: var(--sc-testo-2); }
@media (min-width: 576px) { .sc-fascia__ora { text-align: right; } }
.sc-ore { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.sc-ora { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: var(--sc-r); background: var(--sc-panna); border: 1px solid transparent; text-align: center; }
.sc-ora--evidenza { background: #fff; border-color: var(--sc-terracotta); box-shadow: var(--sc-ombra-1); padding-top: 26px; }
.sc-ora__etichetta { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 12px; border-radius: var(--sc-r-pillola); background: var(--sc-terracotta-scura); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sc-ora__quante { font-size: .9rem; color: var(--sc-testo-2); }
.sc-ora__prezzo { font-family: var(--sc-font-titoli); font-size: 1.6rem; font-weight: 700; color: var(--sc-testo); line-height: 1.1; }
.sc-ora__unitario { font-size: .82rem; color: var(--sc-testo-3); }

/* Lezioni di coppia: in evidenza il prezzo A PERSONA, sotto il totale della coppia */
.sc-coppia { padding: clamp(1.1rem, .9rem + 1vw, 1.75rem); border-radius: var(--sc-r-l); background: #fff; border: 1px solid var(--sc-bordo); }
.sc-coppia h3 { margin: 0 0 10px; font-size: 1.1rem; }
.sc-coppia__persona { margin: 0; font-family: var(--sc-font-titoli); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); font-weight: 700; color: var(--sc-terracotta-scura); line-height: 1.15; }
.sc-coppia__persona span { display: block; font-family: var(--sc-font-testo); font-size: .92rem; font-weight: 400; color: var(--sc-testo-2); }
.sc-coppia__totale { margin: 10px 0 0; font-size: .9rem; color: var(--sc-testo-3); }

/* Gli orari usano il componente .sc-orari gia' definito nella sezione 10:
   giorni su una riga, fascia oraria sotto. Qui serve solo che in colonna
   stretta non vada su due colonne. */
.sc-riquadro .sc-orari { grid-template-columns: 1fr; }

/* Tabella semplice (quote dei corsi) */
.sc-tabella-wrap { overflow-x: auto; }
.sc-tabella { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sc-tabella th, .sc-tabella td { padding: 12px 14px; border-bottom: 1px solid var(--sc-bordo); text-align: left; vertical-align: top; }
.sc-tabella th { font-family: var(--sc-font-titoli); font-weight: 600; color: var(--sc-testo); background: var(--sc-panna); }
.sc-tabella td:last-child { white-space: nowrap; font-weight: 600; color: var(--sc-testo); }

/* 12. CONTENUTI ------------------------------------------------ */
.sc-nota { padding: 18px 20px; border-radius: var(--sc-r); background: var(--sc-panna); border-left: 4px solid var(--sc-terracotta); color: var(--sc-testo-2); }
.sc-nota p { margin: 0 0 .5em; }
.sc-nota p:last-child { margin-bottom: 0; }
.sc-nota--evidenza { background: var(--sc-terracotta-tenue); }

.sc-riquadro { padding: 22px; border-radius: var(--sc-r-l); background: #fff; border: 1px solid var(--sc-bordo); box-shadow: var(--sc-ombra-1); }
.sc-riquadro h2, .sc-riquadro h3 { font-size: 1.1rem; margin: 0 0 12px; }
.sc-riquadro .sc-btn + .sc-btn { margin-top: 10px; }
.sc-riquadro hr { margin: 16px 0; border-color: var(--sc-bordo); opacity: 1; }

.sc-faq { display: grid; gap: 10px; max-width: 48rem; }
.sc-faq details { border: 1px solid var(--sc-bordo); border-radius: var(--sc-r); background: #fff; padding: 0 18px; }
.sc-faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--sc-font-titoli); font-weight: 500; color: var(--sc-testo); }
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sc-panna); font-size: 1.1rem; transition: transform var(--sc-transizione); }
.sc-faq details[open] summary::after { transform: rotate(45deg); }
.sc-faq details p { padding-bottom: 16px; margin: 0; color: var(--sc-testo-2); }

/* Passi numerati */
.sc-passi { display: grid; gap: var(--sc-sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.sc-passi li { position: relative; padding: 22px 22px 22px 22px; border-radius: var(--sc-r); background: #fff; border: 1px solid var(--sc-bordo); }
.sc-passi li::before { counter-increment: passo; content: counter(passo); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: var(--sc-marrone); color: #fff; font-family: var(--sc-font-titoli); font-weight: 600; }
.sc-passi h3 { font-size: 1.05rem; margin: 0 0 .35em; }
.sc-passi p { margin: 0; color: var(--sc-testo-2); font-size: .95rem; }

/* Valori (perche' Schola) */
.sc-valori { display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; }
.sc-valori li { display: flex; gap: 14px; align-items: flex-start; }
.sc-valori .bx { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #fff; color: var(--sc-terracotta-scura); font-size: 1.3rem; box-shadow: var(--sc-ombra-1); }
.sc-valori strong { display: block; font-family: var(--sc-font-titoli); font-weight: 600; color: var(--sc-testo); }
.sc-valori span { color: var(--sc-testo-2); font-size: .95rem; }

/* Citazione (lo slogan fuori dall'hero) */
.sc-citazione { margin: 0 0 var(--sc-sp-3); padding: 0; }
.sc-citazione .sc-hero__slogan-mano { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.sc-citazione .sc-hero__slogan-serif { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); }

/* Blocco scuro (collaborazioni, richiami) */
.sc-scuro { background: var(--sc-marrone-scuro); color: rgba(255, 255, 255, .86); }
.sc-scuro h1, .sc-scuro h2, .sc-scuro h3 { color: #fff; }
.sc-scuro .sc-occhiello { color: #e9b7a9; }
.sc-scuro .sc-lead, .sc-scuro .sc-testata p { color: rgba(255, 255, 255, .8); }
.sc-scuro .sc-briciole, .sc-scuro .sc-briciole a { color: rgba(255, 255, 255, .7); }
.sc-scuro a:not(.sc-btn) { color: #fff; }

/* 13. MODULO DI CONTATTO E MAPPA ------------------------------- */
.sc-contatti-rapidi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.sc-contatto-rapido { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--sc-r); background: #fff; border: 1px solid var(--sc-bordo); color: inherit !important; text-decoration: none; transition: border-color var(--sc-transizione), box-shadow var(--sc-transizione); }
a.sc-contatto-rapido:hover { border-color: var(--sc-terracotta); box-shadow: var(--sc-ombra-1); }
.sc-contatto-rapido .bx { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--sc-terracotta-tenue); color: var(--sc-terracotta-scura); font-size: 1.35rem; flex: 0 0 auto; }
.sc-contatto-rapido small { display: block; color: var(--sc-testo-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--sc-font-titoli); }
.sc-contatto-rapido span { color: var(--sc-testo); font-weight: 600; word-break: break-word; }

.sc-modulo-scheda { padding: clamp(1.25rem, .9rem + 1.8vw, 2.25rem); border-radius: var(--sc-r-l); background: #fff; border: 1px solid var(--sc-bordo); box-shadow: var(--sc-ombra-1); }
.sc-modulo-contatti label, .sc-modulo-gruppo legend { font-size: .93rem; font-weight: 600; color: var(--sc-testo); margin-bottom: 6px; }
.sc-modulo-contatti .form-check-label { font-weight: 400; }
/* Il rimando all'informativa dentro una casella di consenso deve essere
   riconoscibile come link anche da chi non distingue i colori: la sola tinta
   stacca poco dal testo attorno (circa 2:1, sotto il 3:1 richiesto), quindi
   qui il collegamento va sottolineato. Vale per tutte le caselle dei moduli. */
.form-check-label a { text-decoration: underline; text-underline-offset: 2px; }
.sc-modulo-contatti .form-control, .sc-modulo-contatti .form-select { min-height: 48px; border-radius: 12px; border-color: var(--sc-bordo-forte); font-size: 1rem; color: var(--sc-testo); }
.sc-modulo-contatti textarea.form-control { min-height: 110px; }
.sc-modulo-contatti .form-check-input { width: 1.2em; height: 1.2em; margin-top: .2em; border-color: var(--sc-bordo-forte); }
.sc-modulo-contatti .form-check-input:checked { background-color: var(--sc-marrone); border-color: var(--sc-marrone); }
.sc-modulo-contatti .form-check-input:focus, .sc-modulo-contatti .form-control:focus, .sc-modulo-contatti .form-select:focus { border-color: var(--sc-marrone); box-shadow: 0 0 0 .22rem rgba(89, 82, 76, .18); }
.sc-modulo-passo { margin: 0 0 var(--sc-sp-4); padding: 0; border: 0; min-width: 0; }
.sc-modulo-passo > legend { display: flex; align-items: center; gap: 10px; float: none; width: 100%; margin-bottom: 14px; font-family: var(--sc-font-titoli); font-size: 1.05rem; font-weight: 600; }
.sc-modulo-passo > legend span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sc-marrone); color: #fff; font-size: .82rem; }
.sc-modulo-gruppo { border: 0; margin: 0; padding: 0; min-width: 0; }
.sc-modulo-gruppo legend { float: none; width: auto; margin: 0 0 6px; }
.sc-modulo-nota, .sc-modulo-aiuto { font-size: .86rem; color: var(--sc-testo-2); margin: 0 0 10px; }
.sc-modulo-facoltativo { font-weight: 400; color: var(--sc-testo-3); }
.sc-modulo-canali { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-modulo-canali .form-check { margin: 0; padding: 0; }
.sc-modulo-canali .form-check-input { position: absolute; opacity: 0; }
.sc-modulo-canali .form-check-label { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1.5px solid var(--sc-bordo-forte); border-radius: var(--sc-r-pillola); cursor: pointer; font-size: .92rem; transition: border-color var(--sc-transizione), background-color var(--sc-transizione); }
.sc-modulo-canali .form-check-input:checked + .form-check-label { border-color: var(--sc-marrone); background: var(--sc-marrone); color: #fff; }
.sc-modulo-canali .form-check-input:focus-visible + .form-check-label { outline: 3px solid var(--sc-marrone); outline-offset: 2px; }
.sc-modulo-contesto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: var(--sc-sp-3); padding: 14px 16px; border-radius: var(--sc-r); background: var(--sc-panna); font-size: .95rem; }
.sc-modulo-contesto p { margin: 0; }
.sc-modulo-contesto__nota { flex: 1 1 100%; color: var(--sc-testo-2); font-size: .88rem; }
.sc-modulo-contesto a { font-size: .88rem; color: var(--sc-marrone); }
.sc-modulo-errori { margin-bottom: var(--sc-sp-3); padding: 14px 16px; border: 2px solid var(--sc-errore); border-radius: var(--sc-r); background: var(--sc-errore-bg); color: var(--sc-errore); }
.sc-modulo-errori:focus { outline: 3px solid var(--sc-marrone); outline-offset: 2px; }
.sc-modulo-errori__titolo { margin: 0 0 4px; font-weight: 700; }
.sc-modulo-errori ul { margin: 0; padding-left: 20px; }
.sc-modulo-errori a { color: var(--sc-errore); text-decoration: underline; }
.sc-modulo-errore { margin: 6px 0 0; font-size: .86rem; font-weight: 600; color: var(--sc-errore); }
.sc-modulo-contatti [aria-invalid="true"] { border-color: var(--sc-errore) !important; }
.sc-modulo-stato { min-height: 1.5em; margin: 10px 0 0; font-size: .9rem; color: var(--sc-testo-2); }
.sc-modulo-invio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sc-modulo-invio .sc-btn { min-width: 200px; }
.sc-modulo-esito { padding: var(--sc-sp-4); border-radius: var(--sc-r-l); background: #fff; border: 1px solid var(--sc-bordo); border-top: 5px solid var(--sc-ok); box-shadow: var(--sc-ombra-1); }
.sc-modulo-esito:focus { outline: 3px solid var(--sc-marrone); outline-offset: 2px; }
.sc-modulo-esito h3 { font-size: 1.35rem; margin: 0 0 8px; }
.sc-modulo-esito p { margin: 0 0 8px; color: var(--sc-testo-2); }
@media (prefers-reduced-motion: no-preference) { .sc-modulo-esito:not([hidden]) { animation: sc-apri .35s ease-out; } }

.sc-mappa { min-height: 280px; border: 1px solid var(--sc-bordo); border-radius: var(--sc-r-l); background: var(--sc-panna); overflow: hidden; }
.sc-mappa__segnaposto { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 280px; padding: var(--sc-sp-4); }
.sc-mappa__segnaposto::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(89, 82, 76, .1) 1.2px, transparent 1.3px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); pointer-events: none; }
.sc-mappa__segnaposto > * { position: relative; }
.sc-mappa__indirizzo { margin: 0 0 var(--sc-sp-2); font-size: 1rem; line-height: 1.6; color: var(--sc-testo); }
.sc-mappa__nota { max-width: 40rem; margin: var(--sc-sp-2) 0 0; font-size: .8rem; color: var(--sc-testo-2); }
.sc-mappa__frame { display: block; width: 100%; height: 380px; border: 0; }
.sc-mappa--caricata { background: #fff; }

/* 14. RICHIAMO FINALE E FOOTER --------------------------------- */
.sc-richiamo {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--sc-sp-3);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border-radius: var(--sc-r-l);
  background: var(--sc-marrone);
  color: rgba(255, 255, 255, .85);
}
@media (min-width: 768px) { .sc-richiamo { grid-template-columns: 1fr auto; } }
.sc-richiamo::after { content: ""; position: absolute; width: 320px; aspect-ratio: 1; right: -90px; top: -150px; border-radius: 50%; background: var(--sc-terracotta); opacity: .18; pointer-events: none; }
.sc-richiamo > * { position: relative; }
.sc-richiamo h2 { margin: 0 0 .3em; color: #fff; }
.sc-richiamo p { margin: 0; max-width: 36rem; }
.sc-richiamo .sc-btn--primario { background: #fff; color: var(--sc-marrone-scuro) !important; }
.sc-richiamo .sc-btn--primario:hover { background: var(--sc-rosa); }
.sc-richiamo .sc-btn--secondario { color: #fff !important; border-color: rgba(255, 255, 255, .5); }
.sc-richiamo .sc-btn--secondario:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
/* Su mobile il telefono passa davanti (specifica §4). */
@media (max-width: 767px) {
  .sc-richiamo .sc-btn-fila { flex-direction: column; }
  .sc-richiamo .sc-btn { width: 100%; }
  .sc-richiamo .sc-btn--mobile-primo { order: -1; background: #fff; color: var(--sc-marrone-scuro) !important; border-color: #fff; }
  .sc-richiamo .sc-btn--mobile-dopo { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .5); }
}

.sc-footer { background: var(--sc-panna); color: var(--sc-testo-2); font-size: .93rem; padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--sc-bordo); }
.sc-footer a { color: var(--sc-testo-2); text-decoration: none; }
.sc-footer a:hover { color: var(--sc-marrone-scuro); text-decoration: underline; }
.sc-footer__griglia { display: grid; gap: 28px 24px; grid-template-columns: 1fr 1fr; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sc-footer__marchio { grid-column: 1 / -1; }
@media (min-width: 992px) { .sc-footer__griglia { grid-template-columns: 1.6fr 1fr 1.1fr 1fr; } .sc-footer__marchio { grid-column: auto; } }
.sc-logo--footer { display: inline-block; font-size: 2.4rem; }
.sc-footer__motto { margin: 6px 0 12px; max-width: 22rem; }
.sc-footer__contatti { font-style: normal; line-height: 1.8; }
.sc-footer__contatti .bx { color: var(--sc-terracotta-scura); vertical-align: -2px; }
.sc-footer__titolo { font-family: var(--sc-font-titoli); font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-testo) !important; margin: 0 0 12px; }
.sc-footer ul { list-style: none; margin: 0; padding: 0; }
.sc-footer li { padding: 4px 0; }
.sc-footer__nota { margin: 12px 0 0; font-size: .86rem; }
.sc-social { display: flex; gap: 8px; }
.sc-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--sc-bordo); color: var(--sc-marrone); font-size: 1.15rem; transition: background-color var(--sc-transizione), color var(--sc-transizione), transform var(--sc-transizione); }
.sc-social a:hover { background: var(--sc-marrone); color: #fff; text-decoration: none; transform: translateY(-2px); }
.sc-footer__base { border-top: 1px solid var(--sc-bordo); padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); font-size: .82rem; }
.sc-footer__base-riga { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; }
/* Il credito di realizzazione sta sulla stessa riga della ragione sociale sui monitor
   larghi e va a capo da solo quando lo spazio finisce: stessa misura del testo attorno. */
.sc-footer__credito { display: inline-block; margin-left: 10px; }
@media (max-width: 575.98px) { .sc-footer__credito { display: block; margin-left: 0; } }
.sc-footer__base p { margin: 0; }
.sc-footer__legale { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sc-footer .sc-link-consenso { color: var(--sc-testo-2); text-decoration: none; }
.sc-footer .sc-link-consenso:hover { text-decoration: underline; }

/* 15. MOVIMENTO E PAGINE LEGACY -------------------------------- */
@keyframes sc-apri { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Comparsa allo scorrimento: solo con JavaScript attivo e senza
   preferenza per il movimento ridotto; il contenuto resta visibile
   in ogni altro caso. */
@media (prefers-reduced-motion: no-preference) {
  .sc-js [data-rivela] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .3, 1); transition-delay: var(--ritardo, 0s); }
  .sc-js [data-rivela].is-visibile { opacity: 1; transform: none; }
  .sc-hero .sc-gufo { animation: sc-gufo-entra .7s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes sc-gufo-entra { from { opacity: 0; transform: scale(.94) rotate(-4deg); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .sc *, .sc *::before, .sc *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Gli id storici della home (#services, #about, #pricing, #contact)
   restano per i vecchi link, ma il tema li stilizza: qui si annulla. */
.sc #contact.sc-sezione, .sc #about.sc-sezione, .sc #services.sc-sezione { padding: var(--sc-sezione) 0; }
.sc #contact.sc-sezione { background: transparent; }

/* Pagine legacy che usano ancora le sezioni del tema (login,
   informativa, 404, materiali): stessa gerarchia dei titoli. */
.sc section:not(.sc-sezione):not(.sc-hero):not(.sc-pagina-testa) { padding: var(--sc-sezione) 0; }
.sc .section-title { text-align: left; padding-bottom: var(--sc-sp-3); }
.sc .section-title h2 { display: inline-block; padding: 0; margin: 0 0 8px; background: none; color: var(--sc-terracotta-scura); font-size: var(--sc-fs-etichetta); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 0; }
.sc .section-title h1, .sc .section-title h3 { margin: 0; font-size: var(--sc-fs-h1); font-weight: 700; }
.sc .section-title p { font-weight: 400; color: var(--sc-testo-2); margin-left: 0; }
/* Pagine legali: testo lungo, da leggere davvero. Misura di lettura contenuta e
   gerarchia chiara; tutto con la stessa famiglia e la stessa dimensione del resto. */
.sc-legale { max-width: 68rem; }
.sc-legale h2 { margin: var(--sc-sp-5) 0 var(--sc-sp-2); font-size: 1.35rem; }
.sc-legale h2:first-child { margin-top: 0; }
.sc-legale h3 { margin: var(--sc-sp-4) 0 var(--sc-sp-1); font-size: 1.05rem; color: var(--sc-terracotta-scura); }
.sc-legale p, .sc-legale li { max-width: 64ch; }
.sc-legale ul { margin: 0 0 var(--sc-sp-2); padding-left: 1.2em; }
.sc-legale li { margin-bottom: 6px; }
.sc-legale code { font-size: .92em; padding: 1px 6px; border-radius: var(--sc-r-s); background: var(--sc-panna); }
.sc-legale .sc-tabella { margin: var(--sc-sp-2) 0 var(--sc-sp-3); }
/* Nelle tabelle del listino l'ultima colonna e' un importo breve e non va
   spezzato; qui invece contiene una frase intera, quindi deve andare a capo:
   senza questo la tabella dei tempi di conservazione diventa larga cinque
   volte lo schermo di un telefono. */
.sc-legale .sc-tabella td:last-child { white-space: normal; font-weight: 400; color: var(--sc-testo-2); }
.sc-legale .sc-tabella th:first-child, .sc-legale .sc-tabella td:first-child { width: 34%; }
.sc-legale .sc-piccolo { color: var(--sc-testo-2); }

@media print {
  .sc-topbar, .sc-header, .sc-consenso, .sc-cta-mobile, .sc-footer, .sc-salta { display: none !important; }
}

/* Blocco di servizio: introduzione, riquadro laterale, dettagli.
   Mobile: intro -> riquadro (prezzi e CTA) -> dettagli.
   Desktop: intro e dettagli a sinistra, riquadro sticky a destra. */
.sc-blocco { display: grid; gap: var(--sc-sp-4); grid-template-areas: "intro" "lato" "resto"; }
.sc-blocco__intro { grid-area: intro; }
.sc-blocco__intro .sc-testata { margin-bottom: 0; }
.sc-blocco__lato { grid-area: lato; }
.sc-blocco__resto { grid-area: resto; min-width: 0; }
@media (min-width: 992px) {
  .sc-blocco { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "intro lato" "resto lato"; grid-template-rows: auto 1fr; column-gap: var(--sc-sp-5); row-gap: var(--sc-sp-3); align-items: start; }
  .sc-blocco__lato { position: sticky; top: calc(var(--sc-header-h) + 20px); }
}
.sc-pagina-testa .sc-testa-corso + .sc-testata { margin-top: 14px; }
.sc-voci-prezzo { list-style: none; margin: 0 0 12px; padding: 0; }
.sc-voci-prezzo li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--sc-bordo); }
.sc-voci-prezzo li:last-child { border-bottom: 0; }
.sc-voci-prezzo span { font-size: .9rem; color: var(--sc-testo-2); line-height: 1.4; }
.sc-voci-prezzo small { display: block; color: var(--sc-terracotta-scura); font-weight: 600; font-size: .78rem; }
.sc-voci-prezzo strong { font-family: var(--sc-font-titoli); font-size: 1.05rem; color: var(--sc-testo); white-space: nowrap; }
.sc-voci-prezzo strong em { font-style: normal; font-family: var(--sc-font-testo); font-weight: 400; font-size: .78rem; color: var(--sc-testo-3); }
.sc-riquadro .sc-piccolo { margin: 0 0 8px; }

/* Testata scura (collaborazioni): distinta dal catalogo studenti */
.sc-pagina-testa--scura { position: relative; overflow: hidden; background: var(--sc-marrone-scuro); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.sc-pagina-testa--scura::after { content: ""; position: absolute; width: 420px; aspect-ratio: 1; right: -120px; bottom: -220px; border-radius: 50%; background: var(--sc-terracotta); opacity: .22; pointer-events: none; }
.sc-pagina-testa--scura > * { position: relative; z-index: 1; }
.sc-pagina-testa--scura .sc-briciole li::after { color: rgba(255, 255, 255, .35); }

.sc-gufo--medio { width: min(100%, 240px); }
@media (max-width: 767px) { .sc-pagina-testa .sc-hero__gufo { display: none; } }
.sc-pagina-testa .sc-hero__griglia { align-items: end; }

a.sc-chip { text-decoration: none; transition: border-color var(--sc-transizione), background-color var(--sc-transizione); }
a.sc-chip:hover { border-color: var(--sc-marrone); background: #fff; }
/* Sottotitoli delle pagine legacy (H2 semantico, aspetto da sottotitolo) */
.sc .section-title h2.sc-sottotitolo { display: block; margin: 8px 0 0; font-size: var(--sc-fs-h3); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sc-testo-2); }
.sc .section-title h2.sc-sottotitolo span { color: var(--sc-terracotta-scura); }
.sc-passi--compatti { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.sc #login .section-title { text-align: center; }

/* Tablet: nessuna card orfana nelle griglie da tre, copertine piu' basse,
   gufo proporzionato al titolo. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .sc-griglia--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-griglia--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
  .sc-hero .sc-gufo { width: min(100%, 250px); }
}
.sc-copertina { max-height: 180px; width: 100%; }
/* Link lunghi (URL nell'informativa) che andrebbero a capo male */
.sc main a { overflow-wrap: anywhere; }
/* Pulsante del login (tema): area di tocco di almeno 44 px */
.sc #login button[type="submit"] { min-height: 46px; padding-left: 28px; padding-right: 28px; border-radius: var(--sc-r-pillola); font-family: var(--sc-font-titoli); }
/* Utilita' di spaziatura (al posto degli stili in linea) */
.sc-mt-2 { margin-top: var(--sc-sp-2) !important; }
.sc-mt-3 { margin-top: var(--sc-sp-3) !important; }
.sc-mt-4 { margin-top: var(--sc-sp-4) !important; }
.sc-mb-0 { margin-bottom: 0 !important; }

/* Campo trappola anti-spam: fuori dallo schermo, mai annunciato dai lettori di schermo.
   Era uno stile inline nel markup: spostarlo qui toglie l'ultimo ostacolo a una CSP severa. */
.sc-trappola { position: absolute; left: -9999px; }