/* ─────────────────────────────────────────────────────────────────────────────
   studIAmo — sito, versione RAGAZZI (pop, design system «studIAmo Pop»)
   Classe «sito-ragazzo» su <html>. Fondo lilla #f4f1ff, card bianche con bordo
   nero 2px e ombra piena sfalsata, barra nera, hero in gradiente blu-pop →
   viola-pop con testo NERO e adesivo giallo ruotato, bottoni neri con ombra blu
   o gialli. Il bottone premuto scende di 2px e perde l'ombra.
   ───────────────────────────────────────────────────────────────────────────── */

html.sito-ragazzo {
  --scuro:#182327; --scuro-2:#22303a; --bianco:#fff; --sfondo:#ece2ff;
  --testo:#182327; --testo-tenue:#4b5563; --bordo:#182327;
  --viola:#6d3fd6; --azzurro:#6f9bff;
  --r-blu:#6f9bff; --r-viola:#b48aff; --r-giallo:#ffd43b; --r-tinta:#fff3bf;
  --r-bordo:2px solid #182327;
  background:#f4f1ff;
}
.sito-ragazzo *, .sito-ragazzo *::before, .sito-ragazzo *::after { border-radius:0 !important; }
.sito-ragazzo body { background:#f4f1ff; color:#182327; font-weight:500; }
.sito-ragazzo :focus-visible { outline:3px solid #5b8bff; outline-offset:2px; }

/* Barra nera, logo scritto bianco con «IA» in gradiente */
.sito-ragazzo .barra { background:#182327; }
.sito-ragazzo .barra-btn { width:44px; height:44px; }
.sito-ragazzo .barra-logo, .sito-ragazzo .menu-testa img { display:none; }
.sito-ragazzo .logo-testo { display:inline-block; color:#fff; }

/* Menu bianco con bordo nero; «Entra» giallo, voce attiva blu-pop */
.sito-ragazzo .menu { background:#fff; border-right:var(--r-bordo); }
.sito-ragazzo .menu-testa { background:#182327; border-bottom:var(--r-bordo); }
.sito-ragazzo .menu a { color:#182327; border-bottom:2px solid #182327; }
.sito-ragazzo .menu a:active { background:#ece2ff; }
.sito-ragazzo .menu a.evidenza { background:#ffd43b; color:#182327; }
.sito-ragazzo .menu a.attiva { background:#6f9bff; color:#182327; }
.sito-ragazzo .menu-gruppo { color:#4b5563; }
.sito-ragazzo .menu .chi-riga { color:#4b5563; background:#f4f1ff; border-bottom:var(--r-bordo); }
.sito-ragazzo .menu .chi-riga b, .sito-ragazzo .menu .chi-cambia { color:#182327; }

/* Hero: riquadro in gradiente, bordo nero, ombra 6px, testo nero, adesivo */
.sito-ragazzo .hero { min-height:0; width:calc(100% - 48px); max-width:calc(var(--largo) - 48px);
  margin:28px auto 6px; background:linear-gradient(120deg,#6f9bff,#b48aff) !important;
  border:var(--r-bordo); box-shadow:6px 6px 0 #182327; }
.sito-ragazzo .hero::after { display:none; }
.sito-ragazzo .hero-dentro { padding:36px 28px 40px; }
.sito-ragazzo .hero-occhiello { display:inline-block; background:#ffd43b; color:#182327; border:var(--r-bordo);
  padding:3px 10px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transform:rotate(-3deg); margin-bottom:18px; }
.sito-ragazzo .hero h1 { color:#182327; }
.sito-ragazzo .hero p { color:#182327; }
.sito-ragazzo .hero .grad { background:#ffd43b; color:#182327; -webkit-background-clip:border-box;
  background-clip:border-box; padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
@media (max-width:560px) {
  .sito-ragazzo .hero { width:calc(100% - 32px); margin-top:18px; }
  .sito-ragazzo .hero-dentro { padding:26px 18px 28px; }
}

/* Bottoni: neri con ombra blu, oppure gialli; premuti scendono di 2px */
.sito-ragazzo .btn { border:var(--r-bordo); min-height:48px; transition:transform .08s, box-shadow .08s; }
.sito-ragazzo .btn:hover { filter:none; }
.sito-ragazzo .btn:active { transform:translate(2px,2px); box-shadow:none !important; }
.sito-ragazzo .btn-primo { background:#182327; color:#fff; box-shadow:3px 3px 0 #6f9bff; }
.sito-ragazzo .btn-scuro { background:#ffd43b; color:#182327; box-shadow:3px 3px 0 #182327; }
.sito-ragazzo .btn-chiaro { background:#fff; color:#182327; box-shadow:3px 3px 0 #182327; }
.sito-ragazzo .hero .btn-primo { box-shadow:3px 3px 0 #ffd43b; }

/* Sezioni e schede */
.sito-ragazzo .sezione.grigia { background:#ece2ff; border-top:var(--r-bordo); border-bottom:var(--r-bordo); }
.sito-ragazzo .sez-occhiello { display:inline-block; background:#b48aff; color:#182327; border:var(--r-bordo);
  padding:2px 9px; font-weight:700; transform:rotate(-2deg); }
.sito-ragazzo .scheda { background:#fff; border:var(--r-bordo); box-shadow:4px 4px 0 #182327;
  transition:transform .08s, box-shadow .08s; }
.sito-ragazzo a.scheda:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #182327; }
.sito-ragazzo a.scheda:active { transform:translate(2px,2px); box-shadow:none; }
.sito-ragazzo div.scheda { background:#fff; color:#182327; border-color:#182327; }
.sito-ragazzo div.scheda:hover { transform:none; box-shadow:4px 4px 0 #182327; }
.sito-ragazzo div.scheda:nth-child(3n+1) { border-top:10px solid #6f9bff; }
.sito-ragazzo div.scheda:nth-child(3n+2) { border-top:10px solid #b48aff; }
.sito-ragazzo div.scheda:nth-child(3n)   { border-top:10px solid #ffd43b; }
.sito-ragazzo div.scheda h3 { color:#182327; }
.sito-ragazzo div.scheda p { color:#4b5563; }
.sito-ragazzo .scheda-eti { color:#4b5563; }
.sito-ragazzo .scheda-cat { background:#ffd43b; color:#182327; border:var(--r-bordo); padding:1px 7px; }
.sito-ragazzo .scheda-vai { color:#182327; }
.sito-ragazzo .griglia { gap:22px; }
.sito-ragazzo .sn-card { background:#fff; border:var(--r-bordo); box-shadow:4px 4px 0 #182327; overflow:visible; }
.sito-ragazzo .sn-card:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #182327; }
.sito-ragazzo .sn-img { border-bottom:var(--r-bordo); }
.sito-ragazzo .sn-noimg { background:linear-gradient(120deg,#6f9bff,#b48aff); }
.sito-ragazzo .slider-notizie { padding:4px 8px 16px 2px; }

.sito-ragazzo .torna { background:#fff; border:var(--r-bordo); color:#182327; box-shadow:3px 3px 0 #182327; min-height:44px; }
.sito-ragazzo .torna:hover { background:#ffd43b; border-color:#182327; color:#182327; }
.sito-ragazzo .torna:active { transform:translate(2px,2px); box-shadow:none; }

.sito-ragazzo .riquadro { background:#fff3bf; border:var(--r-bordo); box-shadow:4px 4px 0 #182327; }
.sito-ragazzo .riquadro.scuro { background:#182327; border:var(--r-bordo); box-shadow:4px 4px 0 #6f9bff; }
.sito-ragazzo .riquadro-titolo { display:inline-block; background:#ffd43b; color:#182327 !important; border:var(--r-bordo);
  padding:2px 8px; transform:rotate(-2deg); }
.sito-ragazzo .materia-chip { background:#dbe6ff; color:#182327; border:var(--r-bordo); }
.sito-ragazzo .guida-link { background:#fff; border:var(--r-bordo); color:#182327; box-shadow:3px 3px 0 #182327; min-height:44px; }

.sito-ragazzo .chiedi, .sito-ragazzo .chiedi.evidenza { background:#ffd43b; color:#182327; border:var(--r-bordo); box-shadow:6px 6px 0 #182327; }
.sito-ragazzo .chiedi h2 { color:#182327; }
.sito-ragazzo .chiedi p { color:#182327; }

/* Filtri: scelta blu-pop */
.sito-ragazzo .filtro { border:var(--r-bordo); background:#fff; color:#182327; min-height:44px; }
.sito-ragazzo .filtro:hover { background:#ece2ff; }
.sito-ragazzo .filtro.on { background:#6f9bff; border-color:#182327; color:#182327; box-shadow:3px 3px 0 #182327; }

/* Ricerca strumenti e finestra di richiesta */
.sito-ragazzo .cerca-box input, .sito-ragazzo .cerca-riga select { border:var(--r-bordo); box-shadow:3px 3px 0 #182327; }
.sito-ragazzo .cerca-box input:focus, .sito-ragazzo .cerca-riga select:focus { border-color:#182327; }
.sito-ragazzo .mod-foglio { border:var(--r-bordo); box-shadow:8px 8px 0 #182327; }
.sito-ragazzo .campo input, .sito-ragazzo .campo textarea { border:var(--r-bordo); }

/* Documenti */
.sito-ragazzo .doc a:not(.torna) { color:#6d3fd6; }
.sito-ragazzo .doc hr { border-top:2px solid #182327; }
.sito-ragazzo .doc blockquote { background:#fff3bf; border:var(--r-bordo); }

.sito-ragazzo .attesa span { border-radius:0; width:9px; height:9px; }
.sito-ragazzo .attesa span:nth-child(1) { background:#6f9bff; }
.sito-ragazzo .attesa span:nth-child(2) { background:#b48aff; }
.sito-ragazzo .attesa span:nth-child(3) { background:#182327; }

/* Piede nero con bordo */
.sito-ragazzo .piede { background:#182327; border-top:var(--r-bordo); color:#c9d1d9; }
.sito-ragazzo .piede a { color:#c9d1d9; }
.sito-ragazzo .piede b { color:#ffd43b; }
.sito-ragazzo .piede .chi-riga b { color:#fff; }

/* Selettore della versione: bordo nero e ombra piena */
.sito-ragazzo .chi-sel-btn { border:2px solid #fff; }
.sito-ragazzo .chi-sel-btn[aria-expanded="true"] { background:#ffd43b; color:#182327; border-color:#182327; }
.sito-ragazzo .chi-sel-lista { border:var(--r-bordo); box-shadow:6px 6px 0 #182327; }
.sito-ragazzo .chi-sel-voce { border-bottom:2px solid #f0ebff; }
.sito-ragazzo .chi-sel-voce:hover { background:#f4f1ff; }
.sito-ragazzo .chi-sel-voce[aria-current="true"] { background:#fff3bf; box-shadow:inset 4px 0 0 #182327; }
.sito-ragazzo .chi-sel-spunta { color:#182327; }

/* Banner delle statistiche */
.sito-ragazzo #cc-banner { background:#fff; color:#182327; border-top:var(--r-bordo); box-shadow:none; }
.sito-ragazzo #cc-banner p { color:#4b5563; }
.sito-ragazzo #cc-banner a { color:#6d3fd6; }
.sito-ragazzo #cc-banner button { min-height:44px; border:var(--r-bordo); }
.sito-ragazzo #cc-banner .cc-si { background:#182327; color:#fff; box-shadow:3px 3px 0 #6f9bff; }
.sito-ragazzo #cc-banner .cc-no { background:#fff; color:#182327; box-shadow:3px 3px 0 #182327; }
.sito-ragazzo #cc-banner button:active { transform:translate(2px,2px); box-shadow:none; }