/* ─────────────────────────────────────────────────────────────────────────────
   studIAmo — stile del sito
   Riprende quello che c'era su studiamo.digital: barra scura #182327, titoli in
   Quicksand, fondo chiaro. È lo stesso #182327 che l'app usa già come colore
   primario, quindi sito e app non stonano quando si passa dall'uno all'altra.
   Questo foglio veste SOLO il sito: le pagine dentro /app hanno il loro
   global.css e non vanno toccate.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --scuro:#182327; --scuro-2:#22303a; --bianco:#fff; --sfondo:#f8f9ff;
  --testo:#182327; --testo-tenue:#6b7280; --bordo:#e5e7eb;
  --viola:#8b5cf6; --azzurro:#38bdf8;
  --barra:64px;
  /* La larghezza della pagina, dichiarata UNA volta e usata da tutti: elenchi,
     articoli, documenti e piede cominciano e finiscono nello stesso punto.
     Prima ognuno aveva la sua e passando da un elenco a un articolo il
     contenuto si spostava di lato. */
  --largo:1180px;
  /* Dentro un articolo il TESTO resta su una colonna più stretta: una riga di
     centocinquanta caratteri è faticosa da seguire, e si perde il segno andando
     a capo. Il titolo e tutto il resto restano allineati come nelle altre
     pagine — cambia la lunghezza della riga, non il punto in cui comincia. */
  --colonna-lettura:74ch;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* La pagina occupa almeno tutta la finestra e il piede si spinge in fondo: su
   una pagina corta restava a metà schermo, con una fascia bianca sotto che
   sembrava un errore di caricamento. */
body { margin:0; background:var(--bianco); color:var(--testo);
       font-family:Quicksand,'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
       -webkit-font-smoothing:antialiased;
       min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.piede { margin-top:auto; }
img { max-width:100%; display:block; }
a { color:inherit; }

/* ── Barra in alto ────────────────────────────────────────────────────────── */
.barra { position:sticky; top:0; z-index:120; height:var(--barra); background:var(--scuro);
         display:flex; align-items:center; padding:0 14px; gap:12px; }
/* Il «margin:0 auto» stava sull'immagine, ma a centrarsi doveva essere il link
   che la contiene: senza, il logo restava appiccicato all'hamburger. */
.barra-link-logo { flex:1; display:flex; justify-content:center; align-items:center; text-decoration:none; }
.barra-logo { height:26px; width:auto; display:block; }
.barra-btn { width:40px; height:40px; flex:0 0 auto; border:none; background:none; color:#fff;
             display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.barra-btn svg { width:24px; height:24px; }
.barra-spazio { width:40px; flex:0 0 auto; }   /* tiene il logo davvero centrato */

/* ── Menu che entra da sinistra ───────────────────────────────────────────── */
.menu-velo { position:fixed; inset:0; background:rgba(24,35,39,.5); z-index:130;
             opacity:0; pointer-events:none; transition:opacity .22s; }
.menu-velo.aperto { opacity:1; pointer-events:auto; }
.menu { position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; background:var(--scuro);
        z-index:140; transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
        overflow-y:auto; padding-bottom:30px; }
.menu.aperto { transform:none; }
.menu-testa { height:var(--barra); display:flex; align-items:center; padding:0 16px;
              border-bottom:1px solid rgba(255,255,255,.1); }
.menu-testa img { height:24px; }
.menu a { display:flex; align-items:center; gap:12px; min-height:52px; padding:0 20px;
          color:#fff; text-decoration:none; font-size:.97rem; font-weight:600;
          border-bottom:1px solid rgba(255,255,255,.07); }
.menu a:active { background:rgba(255,255,255,.08); }
.menu a.evidenza { background:linear-gradient(90deg,var(--viola),var(--azzurro)); font-weight:700; }
.menu a.attiva { color:var(--azzurro); }
.menu-gruppo { padding:18px 20px 8px; font-size:.68rem; font-weight:800; letter-spacing:.08em;
               text-transform:uppercase; color:#6b7c88; }

/* ── Testata grande della home ────────────────────────────────────────────── */
.hero { position:relative; min-height:64vh; display:flex; align-items:center;
        background:var(--scuro) center/cover no-repeat; }
.hero::after { content:''; position:absolute; inset:0;
               background:linear-gradient(180deg,rgba(24,35,39,.35),rgba(24,35,39,.85)); }
.hero-dentro { position:relative; z-index:1; padding:52px 24px 58px; max-width:var(--largo); margin:0 auto; width:100%; }
.hero h1 { font-size:clamp(2rem,7vw,3.4rem); line-height:1.1; font-weight:700; color:#fff; margin:0 0 14px; }
.hero p { font-size:clamp(1rem,2.6vw,1.15rem); line-height:1.6; color:rgba(255,255,255,.9); margin:0 0 24px; max-width:560px; }
.hero .grad { background:linear-gradient(90deg,var(--viola),var(--azzurro));
              -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── Bottoni ──────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
       padding:13px 26px; border:none; border-radius:0; font-family:inherit; font-size:1rem;
       font-weight:700; cursor:pointer; text-decoration:none; transition:filter .15s, transform .08s; }
.btn:active { transform:scale(.98); }
.btn-primo { background:linear-gradient(90deg,var(--viola),var(--azzurro)); color:#fff; }
.btn-primo:hover { filter:brightness(1.07); }
.btn-chiaro { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn-scuro { background:var(--scuro); color:#fff; }
.btn-riga { display:flex; gap:12px; flex-wrap:wrap; }
/* Sul telefono i bottoni si impilano: a larghezza automatica ognuno prendeva la
   misura del suo testo, e «Come funziona» finiva più stretto di «Entra». Quando
   vanno uno sotto l'altro si mettono a piena larghezza, così restano uguali. */
@media (max-width:560px) {
  .btn-riga { flex-direction:column; align-items:stretch; }
  .btn-riga .btn { width:100%; }
}
/* Invito alla registrazione sotto le CTA dell'hero. */
.hero-reg { margin-top:18px; color:rgba(255,255,255,.88); font-size:.95rem; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-reg .btn-sm-hero { min-height:40px; padding:8px 18px; font-size:.9rem; }
@media (max-width:560px) { .hero-reg { flex-direction:column; align-items:stretch; text-align:center; }
  .hero-reg .btn-sm-hero { width:100%; } }
/* Installa l'app: pulsante discreto, in linea, sotto le CTA. */
.hero-installa { margin-top:14px; }
.hero-installa-btn { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.1);
  color:#fff; border:1px solid rgba(255,255,255,.28); padding:10px 18px; font-family:inherit;
  font-size:.9rem; font-weight:700; cursor:pointer; transition:background .15s; }
.hero-installa-btn:hover { background:rgba(255,255,255,.18); }
.hero-installa-btn svg { width:18px; height:18px; }
@media (max-width:560px) { .hero-installa-btn { width:100%; justify-content:center; } }

/* ── Blocchi di contenuto ─────────────────────────────────────────────────── */
.sezione { width:100%; max-width:var(--largo); margin:0 auto; padding:52px 24px; }
/* La sezione a fondo grigio deve colorare tutta la larghezza, ma il testo resta
   incolonnato con le altre. Il centraggio sta su un contenitore interno e non
   sui singoli figli: affidarlo ai figli non reggeva, perché a chi dichiara un
   «margin» abbreviato (come .intro) i margini laterali venivano azzerati e il
   testo scappava a sinistra. */
.sezione.grigia { background:var(--sfondo); max-width:none; padding-left:0; padding-right:0; }
.sezione.grigia > .sez-dentro { max-width:var(--largo); margin:0 auto; padding:0 24px; }
.sez-occhiello { font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
                 color:var(--testo-tenue); margin-bottom:10px; }
.sezione h2 { font-size:clamp(1.5rem,4.5vw,2.1rem); font-weight:700; line-height:1.2; margin:0 0 12px; }
.sezione .intro { font-size:1.02rem; line-height:1.65; color:var(--testo-tenue); margin:0 0 26px;
                  max-width:var(--colonna-lettura); }
/* Un titolo lunghissimo su una riga sola si legge male quanto un paragrafo:
   anche le intestazioni si fermano prima. */
.sezione h2 { max-width:var(--colonna-lettura); }
.sezione .testo p, .sezione .testo li, .sezione .testo h3 { max-width:var(--colonna-lettura); }

/* Le schede: una per riga sul telefono, due sul tablet, TRE sul computer.
   Lasciando decidere alla larghezza minima se ne ottenevano due anche su
   schermi grandi, con mezza pagina vuota ai lati. */
.griglia { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px)  { .griglia { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .griglia { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1500px) { .griglia { grid-template-columns:repeat(4,1fr); } }

.scheda { background:var(--bianco); border:1px solid var(--bordo); text-decoration:none; color:inherit;
          display:flex; flex-direction:column; transition:transform .12s, box-shadow .15s; }
.scheda:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(24,35,39,.10); }
.scheda-corpo { padding:16px 16px 18px; flex:1; display:flex; flex-direction:column; }
.scheda-eti { font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
              color:var(--viola); margin-bottom:7px; }
.scheda h3 { font-size:1.04rem; font-weight:700; line-height:1.3; margin:0 0 7px; }
.scheda p { font-size:.9rem; line-height:1.55; color:var(--testo-tenue); margin:0; flex:1; }
.scheda-vai { margin-top:12px; font-size:.84rem; font-weight:700; color:var(--testo); }

/* I box di contenuto — quelli che spiegano e basta — sono scuri col testo
   bianco: pesano quanto meritano nella pagina e si distinguono subito dalle
   schede che invece si possono aprire.
   Il selettore è «div.scheda» apposta: le schede-link sono <a>, e devono
   restare chiare perché il bianco su cui si passa il dito dice «qui si tocca». */
div.scheda { background:#182327; border-color:#182327; color:#fff; }
div.scheda:hover { transform:none; box-shadow:none; }
div.scheda h3 { color:#fff; }
div.scheda p { color:rgba(255,255,255,.78); }
div.scheda .scheda-eti { color:rgba(255,255,255,.55); }

/* Il ritorno all'elenco: una pastiglia discreta, non un link nudo. Sta sopra il
   titolo e non deve rubargli l'occhio, ma deve sembrare qualcosa su cui si
   preme. */
.torna { display:inline-flex; align-items:center; gap:6px; padding:8px 15px 8px 11px;
         background:var(--sfondo); border:1px solid var(--bordo); border-radius:0;
         color:var(--testo-tenue); text-decoration:none; font-size:.82rem; font-weight:700;
         margin-bottom:22px; transition:background .15s, color .15s, border-color .15s; }
.torna:hover { background:var(--scuro); border-color:var(--scuro); color:#fff; }
.torna svg { width:15px; height:15px; flex:0 0 auto; }

/* ── Testo lungo (articoli, manuale) ──────────────────────────────────────── */
/* «width:100%» non è di troppo: il corpo della pagina è un contenitore flex, e
   lì dentro un margine automatico fa perdere l'allargamento — il riquadro si
   stringeva sul testo (704px invece di 1180) e, restando centrato, faceva
   partire l'articolo duecento pixel più a destra dell'elenco da cui si veniva. */
.testo { width:100%; max-width:var(--largo); margin:0 auto; padding:52px 24px 70px; }
/* Il corpo del testo, non il contenitore: comincia dove cominciano i titoli
   delle altre pagine, ma va a capo prima. */
.testo p, .testo li, .testo .sommario, .testo blockquote, .testo h2, .testo h3 { max-width:var(--colonna-lettura); }
/* Le immagini seguono la colonna del testo: se fossero più larghe sporgerebbero
   e il margine sinistro sembrerebbe cambiare da una pagina all'altra. */
.testo img { width:100%; max-width:var(--colonna-lettura); height:auto; }
.testo h1 { font-size:clamp(1.7rem,5vw,2.4rem); line-height:1.2; margin:0 0 10px; }
.testo .sommario { font-size:1.05rem; line-height:1.6; color:var(--testo-tenue); margin:0 0 26px; }
.testo h2 { font-size:1.25rem; margin:32px 0 12px; }
.testo p { font-size:1rem; line-height:1.75; margin:0 0 16px; }
.testo ul { padding-left:20px; margin:0 0 18px; }
.testo li { font-size:1rem; line-height:1.7; margin-bottom:8px; }
/* Anche il riquadro segue la colonna di lettura: prima il testo qui dentro
   correva per tutta la larghezza mentre il paragrafo sopra si fermava a metà,
   e la pagina sembrava fatta di pezzi presi da due posti diversi. */
.riquadro { background:var(--sfondo); border-left:3px solid var(--viola); padding:18px 20px;
            margin:22px 0; max-width:var(--colonna-lettura); }
.riquadro p:last-child { margin-bottom:0; }
.riquadro.scuro { background:var(--scuro-2); border-left-color:var(--azzurro); }
.riquadro.scuro p { color:#eaf0f4; }

/* Richiamo in fondo a una pagina: sta nella colonna come tutto il resto. */
.chiedi { background:var(--scuro); color:#fff; padding:32px 28px; margin:36px -28px 0; width:calc(100% + 56px); }
@media (max-width:700px) { .chiedi { margin-left:0; margin-right:0; width:100%; padding:26px 20px; } }
.chiedi h2 { font-size:1.3rem; margin:0 0 8px; color:#fff; max-width:none; }
.chiedi p { color:rgba(255,255,255,.8); font-size:.95rem; line-height:1.6; margin:0 0 22px;
            max-width:var(--colonna-lettura); }

/* ── Piede ────────────────────────────────────────────────────────────────── */
.piede { background:var(--scuro); color:rgba(255,255,255,.72); padding:36px 20px 40px; font-size:.88rem; }
.piede-dentro { max-width:var(--largo); margin:0 auto; display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; }
.piede a { color:rgba(255,255,255,.72); text-decoration:none; display:block; padding:5px 0; }
.piede a:hover { color:#fff; }
.piede b { color:#fff; display:block; margin-bottom:8px; font-size:.72rem;
           letter-spacing:.07em; text-transform:uppercase; }

/* ── Attesa ───────────────────────────────────────────────────────────────── */
.attesa { display:flex; gap:6px; justify-content:center; padding:44px 0; }
.attesa span { width:7px; height:7px; border-radius:50%; background:var(--testo-tenue); animation:att 1s infinite; }
.attesa span:nth-child(2){animation-delay:.15s} .attesa span:nth-child(3){animation-delay:.3s}
@keyframes att { 0%,60%,100%{opacity:.25} 30%{opacity:1} }

/* Schermi molto larghi: si concede altro spazio, ma non all'infinito. */
@media (min-width:1500px) {
  :root { --largo:1320px; }
}

@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* Niente scorrimento orizzontale: un solo elemento troppo largo faceva
   ballare di lato l'intera pagina. Quello che deve scorrere (tabelle, codice,
   barre di filtri) lo fa dentro il proprio contenitore, non trascinandosi
   dietro tutto il resto. */
/* Il taglio sta su html e NON su body: con overflow-x sul body, il body
   diventa il contenitore di scorrimento, e le barre fisse in cima si sfalsano
   lasciando una striscia bianca quando si risale. «clip» non crea nessun
   contenitore di scorrimento — «hidden» resta come ripiego per i browser che
   non lo conoscono. */
html { max-width:100%; overflow-x:hidden; overflow-x:clip; }
body { max-width:100%; }
img, video, svg, table { max-width:100%; }

/* ── Solo verticale su smartphone ────────────────────────────────────────────
   In orizzontale il telefono rompe il layout: barre fisse, colonne pensate per
   una mano sola, tastiere che coprono mezzo schermo. Invece di adattare tutto a
   una modalità che nessuno usa per studiare, si chiede di rimettere dritto il
   telefono.
   Telefono e non tablet: in orizzontale il lato CORTO (max-height) di un
   telefono sta sotto i ~500px, quello di un tablet no. `pointer: coarse` esclude
   la finestra del desktop rimpicciolita, che non è un touch. Tutto in CSS, senza
   coprire nulla di ciò che serve a chi è già in verticale. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body::before {
    content: "\21BB  Ruota il dispositivo in verticale per usare studIAmo";
    position: fixed; inset: 0; z-index: 99999;
    background: #182327; color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 32px;
    font-size: 1.05rem; font-weight: 600; line-height: 1.5;
    font-family: inherit; letter-spacing: .01em;
  }
  body { overflow: hidden !important; }
}

/* ── Filtri categoria (pagina «Notizie e idee» unificata) ─────────────────── */
.filtri { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.filtro { border:1.5px solid var(--bordo); background:var(--bianco); color:var(--testo-tenue);
  font-family:inherit; font-weight:700; font-size:.86rem; padding:8px 16px; border-radius:999px;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.filtro:hover { border-color:var(--testo); color:var(--testo); }
.filtro.on { background:var(--testo); border-color:var(--testo); color:#fff; }
.scheda-eti { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;
  font-size:.72rem; color:var(--testo-tenue); }
.scheda-cat { font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--viola); background:rgba(139,92,246,.12); padding:2px 8px; border-radius:999px; }

/* ── Slider «Ultime notizie» in home ──────────────────────────────────────── */
.slider-notizie { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px 14px; margin:0 -2px; -webkit-overflow-scrolling:touch; }
.slider-notizie::-webkit-scrollbar { height:8px; }
.slider-notizie::-webkit-scrollbar-thumb { background:var(--bordo); border-radius:999px; }
.sn-card { flex:0 0 280px; max-width:280px; scroll-snap-align:start; background:var(--bianco);
  border:1px solid var(--bordo); text-decoration:none; color:inherit; display:flex; flex-direction:column;
  overflow:hidden; transition:transform .15s, box-shadow .15s; }
.sn-card:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(24,35,39,.10); }
.sn-img { height:150px; background-size:cover; background-position:center; background-color:var(--sfondo); }
.sn-noimg { background:linear-gradient(135deg,var(--viola),var(--azzurro)); }
.sn-corpo { padding:14px 16px 16px; }
.sn-data { font-size:.72rem; color:var(--testo-tenue); margin-bottom:5px; }
.sn-titolo { font-size:1rem; font-weight:700; line-height:1.3; margin-bottom:6px; color:var(--testo); }
.sn-somm { font-size:.88rem; line-height:1.5; color:var(--testo-tenue);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sn-tutte { margin-top:18px; }
.sn-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.sn-meta .sn-data { margin:0; }