/* 132-uniforma
   ==========================================================================
   uniforme.css — una ricetta sola per le schede, e le rifiniture mobile
   che mancavano.

   Non introduce token nuovi: --radius, --border, --shadow, --transition e
   --primary erano gia' identici in style.css e in blog.css. Il problema
   non era la mancanza di un linguaggio, era che alcuni componenti lo
   ignoravano.

   LA RICETTA, presa dalle schede della home (.lesson-card, .footer-card):
       sfondo pieno, bordo 1px, raggio del sito,
       all'hover si solleva di 4px, prende l'ombra e il bordo vira al
       colore primario. Niente barra laterale: nel sito quel segno
       significa gia' citazione, e ci sono otto selettori che lo usano
       cosi'.
   ========================================================================== */

:root{ --u-lift: -4px; }

/* ---------- la scheda, ovunque ------------------------------------------ */
.u-card,
.ti-cta{
  display:block;
  background:var(--background,#fff);
  border:1px solid var(--border,#e6eaf2);
  border-radius:0;
  padding:24px 26px;
  transition:var(--transition,.35s ease);
}
.ti-cta{ margin:2.5rem 0 0; }

.ti-cta__t{
  margin:0 0 .45rem;
  font-size:1.06rem;line-height:1.3;font-weight:700;
  color:var(--primary,#31394d);
}
.ti-cta__d{
  margin:0 0 1rem;
  font-size:.95rem;line-height:1.55;
  color:var(--secondary,#667085);
}
.ti-cta__a{
  display:inline-block;font-weight:600;text-decoration:none;
  color:var(--primary,#31394d);
  border-bottom:2px solid currentColor;padding-bottom:1px;
}

/* il sollevamento solo dove il puntatore esiste davvero: sul telefono
   restava appiccicato dopo il tocco */
@media (hover:hover) and (pointer:fine){
  .u-card:hover,
  .ti-cta:hover{
    transform:translateY(var(--u-lift));
    box-shadow:none;
    border-color:var(--primary,#31394d);
  }
  .ti-cta__a:hover{ opacity:.72; }
}
@media (hover:none){
  .lesson-card:hover,.footer-card:hover,.review-card:hover,
  .mp-card:hover,.sidebar-card:hover,.u-card:hover,.ti-cta:hover{
    transform:none;box-shadow:none;
  }
  /* il tocco da una risposta immediata invece di uno stato che resta */
  .lesson-card:active,.footer-card:active,.u-card:active,.ti-cta:active{
    transform:scale(.985);
  }
}

/* ---------- si vede anche da tastiera ----------------------------------- */
.u-card:focus-visible,
.ti-cta:focus-visible,
.ti-cta__a:focus-visible,
.lesson-card:focus-visible,
.footer-card:focus-visible,
.u-piede a:focus-visible,
.u-lingue a:focus-visible{
  outline:2px solid var(--primary,#31394d);
  outline-offset:3px;
  border-radius:0;
}

/* ---------- bersagli grandi abbastanza da colpirli col pollice ---------- */
@media (max-width:720px){
  .u-piede a,
  .u-lingue a,
  .sidebar-links a{
    display:inline-flex;align-items:center;
    min-height:44px;padding:6px 2px;
  }
}

/* ---------- .lesson-card era definita due volte -------------------------- */
/* style.css diceva -6px e --background, supplemento.css -4px e --surface:
   vinceva l'ordine di caricamento, non una scelta. Qui decide una volta. */
.lesson-card{
  background:var(--background,#fff);
  border:1px solid var(--border,#e6eaf2);
  border-radius:0;
  transition:var(--transition,.35s ease);
}
@media (hover:hover) and (pointer:fine){
  .lesson-card:hover{
    transform:translateY(var(--u-lift));
    box-shadow:none;
    border-color:var(--primary,#31394d);
  }
}

/* ---------- il piede, uguale in tutte le sezioni ------------------------- */
.u-piede{
  margin-top:44px;padding-top:28px;
  border-top:1px solid var(--border,#e6eaf2);
}
.u-piede-griglia{
  display:grid;gap:26px 32px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.u-piede h4{
  margin:0 0 10px;font-size:.78rem;letter-spacing:.9px;
  text-transform:uppercase;color:var(--primary,#31394d);
}
.u-piede ul{ list-style:none;margin:0;padding:0; }
.u-piede li{ margin:0 0 7px; }
.u-piede a{
  color:var(--secondary,#667085);text-decoration:none;font-size:.92rem;
  transition:var(--transition,.35s ease);
}
@media (hover:hover){ .u-piede a:hover{ color:var(--primary,#31394d); } }

/* su schermo stretto una colonna sola, con respiro fra i gruppi */
@media (max-width:560px){
  .u-piede-griglia{ grid-template-columns:1fr;gap:22px; }
  .u-piede{ margin-top:34px;padding-top:22px; }
}

/* ---------- il selettore lingua, uno solo -------------------------------- */
.u-lingue{ margin:18px 0 0; }
.u-lingue-titolo{
  margin:0 0 8px;font-size:.78rem;letter-spacing:.9px;
  text-transform:uppercase;color:var(--primary,#31394d);
}
.u-lingue ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 8px;
}
.u-lingue a{
  display:inline-block;
  padding:6px 12px;
  font-size:.85rem;line-height:1.2;text-decoration:none;
  color:var(--secondary,#667085);
  border:1px solid var(--border,#e6eaf2);
  border-radius:0;
  transition:var(--transition,.35s ease);
}
.u-lingue a[aria-current="true"]{
  color:var(--primary,#31394d);
  border-color:var(--primary,#31394d);
  font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .u-lingue a:hover{
    border-color:var(--primary,#31394d);
    color:var(--primary,#31394d);
  }
}
@media (max-width:720px){
  .u-lingue a{ padding:10px 14px;font-size:.9rem; }
}

/* 133-rifiniture */
/* --------------------------------------------------------------------------
   Testo spento senza perdere leggibilita'.

   Dieci regole ottenevano il grigio con opacity su testo permanente.
   Misurato su fondo bianco: da 2,36:1 a 3,70:1, contro una soglia AA di
   4,50 per il testo piccolo. Il grigio non era il problema: --secondary
   da solo fa 4,97:1. Il problema era ricavarlo sbiadendo.

   Qui l'opacity torna a 1 e il colore lo dichiaro. Visivamente cambia
   pochissimo; a leggerlo su un telefono al sole cambia tutto.

   Restano attenuati, e devono restarlo, gli stati disabilitati e quelli
   di trascinamento: la norma li esenta e l'attenuazione e' il segnale.
   -------------------------------------------------------------------------- */
.blog-footer-license,
.blog-foto-credit,
.article-card-date,
.sidebar-eyebrow,
.sidebar-libro-liv,
.sidebar-libro-nota,
.sb-shots-hint,
.footer-lingue-tit,
.footer-lingue-lista a,
.barra-lingua-no{
  opacity:1;
  color:var(--secondary,#667085);
}

/* Il paragrafo di licenza: tre righe di testo legale centrate a 13,6px
   sono illeggibili su uno schermo stretto. Allineato, con una misura di
   riga che non superi le ~70 battute. */
.blog-footer-license{
  max-width:64ch;
  margin-left:auto;margin-right:auto;
  text-align:left;
  line-height:1.6;
}
@media (max-width:640px){
  .blog-footer{ text-align:left; }
  .blog-footer p{ font-size:.875rem; }
  .blog-footer-license{ font-size:.8125rem; }
}

/* --------------------------------------------------------------------------
   Chi ha chiesto meno movimento deve riceverne meno.
   Nei fogli c'erano 90 transizioni e 7 animazioni, e tre sole
   dichiarazioni di prefers-reduced-motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Wordwall: su schermo stretto 400px tagliano alcuni template. */
@media (max-width:640px){
  .embed-wordwall iframe,.embed-generic iframe{ height:min(78vh,520px); }
}

/* 134-fondamenta */
/* ==========================================================================
   Il pavimento: tastiera, tocco, orientamento.
   Caricato dopo gli altri fogli, quindi vince sulle regole che
   spengono l'outline senza rimpiazzarlo.
   ========================================================================== */

/* --- a) si vede sempre dove sei -----------------------------------------
   Sei outline:none contro cinque focus-visible: da tastiera si perdeva
   il segno. :focus-visible non disturba chi usa il mouse, perche' il
   browser lo attiva solo quando serve davvero. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--primary,#31394d);
  outline-offset:3px;
  border-radius:0;
}
/* sui fondi scuri l'anello scuro sparirebbe */
.app-banner a:focus-visible,
.sidebar-card-app a:focus-visible,
.ex-app-promo--scatti a:focus-visible{
  outline-color:var(--gold,#f5b400);
}

/* --- b) salta al contenuto -----------------------------------------------
   Invisibile finche' non lo metti a fuoco. Prima voce della pagina.

   Si nasconde ritagliandolo a un pixel, non spostandolo a -9999px: in
   arabo la pagina e' rtl, e quei diecimila pixel finivano fuori dal bordo
   dalla parte sbagliata. Ogni pagina araba risultava larga diecimila
   pixel, con la barra di scorrimento orizzontale sempre accesa. */
.u-salta{
  position:absolute;top:0;inset-inline-start:0;
  width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  z-index:9999;
  padding:0;
  background:var(--primary,#31394d);color:#fff;
  border-radius:0;
  text-decoration:none;font-weight:600;font-size:.95rem;
}
.u-salta:focus{
  width:auto;height:auto;overflow:visible;
  clip-path:none;padding:12px 18px;
}

/* --- c) dove sono gia' passato -------------------------------------------
   700 esercizi e 298 articoli: senza :visited chi studia rifa' le
   stesse pagine. Solo dove l'elenco e' lungo, non nei menu. */
.ex-lista a:visited,
.blog-grid a:visited,
.u-piede a:visited,
.sidebar-links a:visited,
.article-card a:visited{
  color:#6b5b8a;
}

/* --- d) il pollice non e' un puntatore -----------------------------------
   Nove padding sotto i 7px su elementi cliccabili. Invece di gonfiare
   la grafica allargo solo l'area che risponde, con uno pseudo-elemento
   che non si vede. */
@media (pointer:coarse){
  .ex-btn,.ex-chip,.word-chip,.letter-tile,
  .u-piede a,.u-lingue a,.sidebar-links a,
  .lang-switcher a{
    position:relative;
  }
  .ex-btn::after,.ex-chip::after,
  .u-piede a::after,.u-lingue a::after,.sidebar-links a::after,
  .lang-switcher a::after{
    content:"";position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:100%;height:100%;
    min-width:44px;min-height:44px;
  }
}

/* --- e) la scala tipografica, dichiarata ---------------------------------
   58 dimensioni distinte in 265 dichiarazioni, dodici delle quali
   ammassate fra .78 e 1.15rem. Questi sette passi sono la scala che il
   sito avrebbe dovuto avere: rapporto costante, ogni passo distinguibile.
   Non riscrivo le regole esistenti — lo decidi tu, con --scala vedi la
   mappa. Da qui in avanti i componenti nuovi pescano da questi. */
:root{
  --t-xs:  .75rem;   /* 12px  didascalie, crediti, licenze */
  --t-sm:  .875rem;  /* 14px  testo di servizio, piede */
  --t-md:  1rem;     /* 16px  corpo */
  --t-lg:  1.125rem; /* 18px  sottotitoli */
  --t-xl:  1.375rem; /* 22px  titoli di scheda */
  --t-2xl: 1.75rem;  /* 28px  titoli di sezione */
  --t-3xl: 2.25rem;  /* 36px  titolo di pagina */
}

/* --- stampa ---------------------------------------------------------------
   Chi stampa un esercizio non vuole il richiamo all'app in mezzo. */
@media print{
  .ti-cta,.app-banner,.sidebar-card-app,.u-lingue,
  .proposta-lingua,.u-salta{ display:none !important; }
  .u-piede{ border-top:1px solid #999; }
  a[href^="http"]::after{ content:" (" attr(href) ")";font-size:.75em; }
}
/* u-144 inizio */
/* u-144 ===================================================================
   Il componente unico: barra, piede, selettore di lingua, CTA.

   Una altezza di barra (64px) invece di tre: erano 82px sulla home,
   74px su blog ed esercizi, ~58px su lingue.
   Una taglia di bottone (11/22) invece di due: il .button di style.css
   era 16/30, il 45% piu' grande, proprio sulle pagine che avevano gia'
   la barra piu' alta e il menu piu' largo.

   Il colore lo porta la pagina in --u-sez, preso dal theme-color che
   avevi gia' deciso per ogni sezione e che finora viveva solo nella
   barra del browser su mobile.
   ==================================================================== */

:root{
  --u-h: 64px;
  --u-sez: #31394d;
  /* i bordi: si eredita il token del sito, non se ne inventa un altro.
     --border vale #e6eaf2 in style.css, blog.css, esercizi.css e
     lingue.css: erano gia' d'accordo, mancava solo chi lo usasse. */
  --u-bordo: var(--border, #e6eaf2);
  --u-testo: var(--primary, #31394d);
  --u-tenue: var(--secondary, #667085);
  --u-fondo: var(--background, #fff);
}

/* ---------- la barra --------------------------------------------------- */
.u-bar{
  /* incollata in alto ovunque. Su scuole il !important serve: cartoline.css
     imponeva il suo contenitore e la barra usciva piu' larga delle altre. */
  position:-webkit-sticky; position:sticky !important; top:0 !important; z-index:200;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--u-bordo);
}
.u-bar__in{
  box-sizing:border-box;
  max-width:1180px !important; width:100%; margin:0 auto; padding:0 20px !important;
  height:var(--u-h);
  display:flex; align-items:center; gap:18px;
}
/* a sinistra: logo della sezione + pulsante che apre le sezioni */
.u-sw{ position:relative; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.u-logo{ display:block; line-height:0; }
.u-logo img{ width:30px; height:30px; border-radius:0; display:block; }
.u-sw__b{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border:1px solid var(--u-bordo); border-radius:0;
  background:var(--u-fondo); color:var(--u-sez);
  font:inherit; font-size:.92rem; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:.2s ease;
}
.u-sw__b:hover{ border-color:var(--u-sez); }
.u-sw__b b{ font-weight:400; opacity:.6; }
.u-sw__l{
  position:absolute; left:0; top:calc(100% + 9px);
  min-width:230px; background:var(--u-fondo);
  border:1px solid var(--u-bordo); border-radius:0;
  box-shadow:0 16px 40px rgba(49,57,77,.14);
  padding:6px; margin:0; list-style:none; display:none; z-index:10;
}
.u-sw[data-aperto] .u-sw__l{ display:block; }
.u-sw__l a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:0;
  text-decoration:none; color:var(--u-testo); font-size:.92rem; font-weight:600;
}
.u-sw__l a::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--u-p, var(--u-sez)); flex:0 0 auto;
}
.u-sw__l a:hover{ background:#f5f7fb; }
.u-sw__l a[aria-current]{ color:var(--u-p, var(--u-sez)); }
.u-menu{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.u-menu a{
  text-decoration:none; color:var(--u-tenue);
  font-size:.92rem; font-weight:500; white-space:nowrap;
  padding:6px 0; border-bottom:2px solid transparent;
}
.u-menu a:hover, .u-menu a[aria-current]{ color:var(--u-sez); border-bottom-color:var(--u-sez); }

/* la CTA: una taglia sola, ovunque */
.u-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:0;
  background:var(--u-sez); color:#fff; text-decoration:none;
  font-weight:600; font-size:.9rem; white-space:nowrap;
  transition:.25s ease; flex:0 0 auto;
}
.u-cta:hover{ transform:none; box-shadow:none; }

/* ---------- selettore di lingua ---------------------------------------- */
.u-lang{ position:relative; flex:0 0 auto; }
.u-lang:empty{ display:none; }
.u-lang__b{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border:1px solid var(--u-bordo); border-radius:0;
  background:var(--u-fondo); color:var(--u-tenue);
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
}
.u-lang__b:hover{ border-color:var(--u-sez); color:var(--u-sez); }
.u-lang__l{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:190px; max-height:60vh; overflow:auto;
  background:var(--u-fondo); border:1px solid var(--u-bordo);
  border-radius:0; box-shadow:0 16px 40px rgba(49,57,77,.14);
  padding:6px; margin:0; list-style:none; display:none;
}
.u-lang[data-aperto] .u-lang__l{ display:block; }
.u-lang__l a{
  display:block; padding:8px 12px; border-radius:0;
  text-decoration:none; color:var(--u-testo); font-size:.9rem;
}
.u-lang__l a:hover{ background:#f5f7fb; }
.u-lang__l a[aria-current]{ color:var(--u-sez); font-weight:700; }

/* ---------- apertura su telefono --------------------------------------- */
.u-apri{
  display:none; width:40px; height:40px; margin-left:auto;
  border:1px solid var(--u-bordo); border-radius:0;
  background:var(--u-fondo); cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.u-apri span{ display:block; width:17px; height:2px; background:var(--u-testo); border-radius:0; }

@media (max-width:900px){
  .u-bar__in{ gap:12px; }
  .u-apri{ display:flex; }
  .u-menu{
    position:absolute; left:0; right:0; top:var(--u-h);
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--u-fondo); border-bottom:1px solid var(--u-bordo);
    padding:8px 20px 14px; display:none;
  }
  .u-bar[data-aperto] .u-menu{ display:flex; }
  .u-menu a{ padding:12px 0; border-bottom:1px solid var(--u-bordo); }
  .u-menu a:last-child{ border-bottom:0; }
  .u-marchio em{ display:none; }
  .u-cta{ padding:9px 16px; font-size:.85rem; }
}
@media (max-width:520px){
  .u-marchio span{ display:none; }
  .u-lang__b span{ display:none; }
}

/* ---------- il piede ---------------------------------------------------- */
.u-piede{
  margin-top:64px; padding:52px 0 0;
  border-top:1px solid var(--u-bordo);
  background:#fbfcfe; color:var(--u-tenue);
  font-size:.92rem; line-height:1.6;
}
.u-piede__in{
  box-sizing:border-box;
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 34px;
}
/* il <details> sta fuori dalle colonne, cosi' quando si apre usa tutta
   la larghezza del piede invece di stare stretto in un terzo */
.u-piu{
  box-sizing:border-box;
  max-width:1180px; margin:26px auto 0; padding:0 20px;
}
.u-col h2{
  margin:0 0 14px; font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--u-testo);
}
.u-col ul{ list-style:none; margin:0; padding:0; }
.u-col li{ margin:0 0 9px; }
.u-col a{ color:var(--u-tenue); text-decoration:none; }
.u-col a:hover{ color:var(--u-sez); }
.u-col--app a:first-child{ color:var(--u-sez); font-weight:600; }

/* le citta': tutti i link restano nell'HTML, chiusi in un dettaglio */
.u-piu summary{
  cursor:pointer; font-weight:600; color:var(--u-testo);
  font-size:.85rem; list-style:none;
}
.u-piu summary::-webkit-details-marker{ display:none; }
.u-piu summary::after{ content:" +"; color:var(--u-sez); }
.u-piu[open] summary::after{ content:" −"; }
/* si apre a colonne che si adattano alla larghezza invece di restare
   due in verticale: su schermo largo ne stanno cinque o sei */
.u-piu[open] > ul{
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--u-bordo);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:6px 24px;
  max-height:none; overflow:visible;
}
.u-piu[open]{
  grid-column:1 / -1;
}
.u-piu li{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 8px; }
.u-piu a{ font-size:.88rem; }

/* i distintivi esterni: una riga loro, con un'altezza sola. Nell'elenco
   uscivano a dimensione naturale, cioe' enormi. */
.u-badge{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:14px;
}
.u-badge a{ display:inline-flex; line-height:0; }
.u-badge img{ height:34px; width:auto; display:block; }

/* la riga di note: qui finiscono licenze, crediti e disclaimer */
.u-note{
  max-width:1180px; margin:40px auto 0; padding:20px 20px 30px;
  border-top:1px solid var(--u-bordo);
  font-size:.82rem; line-height:1.65; color:var(--u-tenue);
}
.u-note > * + *{ margin-top:10px; }
.u-note a{ color:var(--u-tenue); }
.u-note b{ color:var(--u-testo); }
.u-note ul{ padding-left:18px; }
/* La firma sta piu' sotto, nel blocco 348: qui basta il minimo. */
.u-firma{ display:flex; flex-wrap:wrap; align-items:baseline; }

@media (max-width:820px){
  .u-piede__in{ grid-template-columns:1fr; gap:26px; }
  .u-piu[open] > ul{ grid-template-columns:1fr 1fr; }
  .u-piede{ margin-top:44px; padding-top:38px; }
}

/* ---------- la CTA nel corpo, quella mirata ----------------------------
   Il rientro: questi blocchi finivano fuori dal contenitore della pagina e
   il testo toccava il bordo dello schermo. Su test, blog, esercizi e libri
   si vedeva a occhio. Qui rientrano come il resto del contenuto. */
.u-appcta,
.ti-cta{
  box-sizing:border-box;
  max-width:1140px;
  margin-left:auto !important; margin-right:auto !important;
}
@media (max-width:1180px){
  .u-appcta, .ti-cta{ width:calc(100% - 40px); }
}
.u-appcta{
  display:block; margin:2.5rem auto 0; padding:24px 26px;
  background:var(--u-fondo);
  border:1px solid var(--u-bordo); border-left:3px solid var(--u-sez);
  border-radius:0; text-decoration:none;
  transition:.3s ease;
}
.u-appcta b{ display:block; margin-bottom:.45rem; font-size:1.06rem; color:var(--u-testo); }
.u-appcta span{ display:block; margin-bottom:1rem; font-size:.95rem; color:var(--u-tenue); }
.u-appcta i{
  font-style:normal; font-weight:600; color:var(--u-sez);
  border-bottom:2px solid currentColor; padding-bottom:1px;
}
@media (hover:hover) and (pointer:fine){
  .u-appcta:hover{ transform:none; box-shadow:none; }
}

/* ---------- rifiniture del controllo a mano ---------------------------- */

/* position:sticky muore se un antenato ha overflow-x:hidden. style.css ce
   l'ha sull'elemento radice, ed e' per questo che su alcune sezioni la barra
   non restava in alto. clip taglia allo stesso modo ma non crea un
   contenitore di scorrimento, quindi sticky continua a funzionare. */
html, body{ overflow-x:clip !important; }

/* la barra non deve ereditare il corpo del testo della sezione: su scuole
   cartoline.css alza la base e la barra usciva piu' alta delle altre */
.u-bar{ font-size:16px; line-height:1.4; }
.u-bar *{ box-sizing:border-box; }

/* le due schede in fondo agli esercizi uscivano dal contenitore e il testo
   toccava il bordo dello schermo */
.ex-prossimo-passo,
.ex-back-wrap{
  box-sizing:border-box;
  max-width:1140px; margin-left:auto; margin-right:auto;
}
@media (max-width:1180px){
  .ex-prossimo-passo, .ex-back-wrap{ width:calc(100% - 40px); }
}

/* le briciole erano attaccate al bordo sul telefono */
.briciole{ padding-left:4vw; padding-right:4vw; }
@media (min-width:900px){ .briciole{ padding-left:0; padding-right:0; } }

/* nella riga delle note il testo di licenza del blog finiva spezzato in
   colonne, ereditate da una regola della sezione */
.u-note, .u-note *{
  columns:auto !important; column-count:auto !important;
  display:block;
}
.u-note a{ display:inline; }
.u-note b, .u-note strong, .u-note i, .u-note em{ display:inline; }
.u-note ul{ display:block; }
.u-note li{ display:list-item; }

/* la firma: su schermo stretto andava a capo lasciando il punto elenco a
   inizio riga */
@media (max-width:640px){
  .u-note{ padding-bottom:36px; }
  .u-piede{ padding-bottom:8px; }
}

/* il pannello aperto: sul desktop era un pasticcio. Le voci sono link
   semplici, non schede: qui si azzera tutto quello che le sezioni
   applicano ai link dentro un piede. */
.u-piu[open] > ul > li{ margin:0; padding:0; }
.u-piu[open] > ul > li > a{
  display:block; padding:4px 0;
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0!important; text-align:left; font-weight:400;
  font-size:.88rem; line-height:1.5; color:var(--u-tenue);
}
.u-piu[open] > ul > li > a:hover{ color:var(--u-sez); transform:none !important; }
.u-piu[open] > ul > li > a > span,
.u-piu[open] > ul > li > a > b,
.u-piu[open] > ul > li > a > em{ display:inline; font-weight:inherit; }

/* le schede (recensioni Google, distintivi) stanno in fondo, non
   nell'elenco */
.u-badge{ align-items:flex-start; }
.u-badge > a[class*="card"]{
  display:block; max-width:320px; line-height:1.45;
  padding:14px 16px; border:1px solid var(--u-bordo); border-radius:0;
  text-decoration:none; color:var(--u-tenue); font-size:.85rem;
}
.u-badge > a[class*="card"] span{ display:block; }


/* ---------- la larghezza, una sola ------------------------------------- */
/* Ho trovato perche' su scuole la barra sembrava piu' larga: quelle pagine
   hanno .contenitore{max-width:1100px} nello <style> in linea, mentre la
   barra stava a 1180. Non era piu' larga in assoluto: era piu' larga del
   contenuto sotto. Ora tutto il sito sta su 1100, barra e piede compresi. */
:root{ --u-max: 1100px; }
.u-bar__in,
.u-piede__in,
.u-piu,
.u-note{ max-width:var(--u-max) !important; }

/* e perche' su scuole non restava incollata: nello stesso <style> c'e'
   body{overflow-x:hidden!important}, che arriva dopo uniforme.css e vince.
   html body ha specificita' maggiore di body, quindi passa questa. */
html body{ overflow-x:clip !important; }

/* il logo: niente angoli tagliati sopra un'icona che ha gia' la sua forma */
.u-logo img{ border-radius:0; image-rendering:auto; }

/* ---------- il piede, desktop e telefono ------------------------------- */
.u-piede__in{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:40px 48px;
  padding-left:20px; padding-right:20px;
}
@media (max-width:900px){
  .u-piede__in{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 28px; }
}
@media (max-width:560px){
  .u-piede__in{ grid-template-columns:1fr; gap:26px; }
}

/* il pannello: colonne che si adattano davvero, e voci che restano voci */
.u-piu[open] > ul{
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:2px 32px;
}
@media (max-width:560px){
  .u-piu[open] > ul{ grid-template-columns:1fr; }
}
.u-piu[open] > ul > li > a{ padding:5px 0; }

/* le note: mai piu' strette del piede */
.u-note{ padding-left:20px; padding-right:20px; }


/* ---------- la firma (348) ----------------------------------------------
   Due gruppi, non piu' una fila sola di otto voci: a sinistra i dati di
   chi scrive (copyright, KVK, partita IVA), a destra i collegamenti.
   Prima erano tutti allo stesso livello, e quando la riga andava a capo
   il puntino di separazione restava all'inizio della riga nuova.

   Il puntino separa le voci DENTRO un gruppo, mai i due gruppi fra loro:
   a dividerli ci pensa lo spazio. */
.u-firma{
  display:flex !important; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:12px 30px; width:100%;
  padding-top:16px; margin-top:16px;
  border-top:1px solid var(--u-bordo);
  /* .u-firma e' un <p> dentro .u-note, e li' una regola stringe i
     paragrafi a 88ch per tenerli leggibili. Giusto per un testo, non per
     una riga che deve arrivare da un bordo all'altro: senza questo i due
     gruppi non ci stanno in riga e vanno a capo anche su schermo largo. */
  max-width:none !important;
}
.u-firma__dati,
.u-firma__link{
  display:flex; flex-wrap:wrap; align-items:baseline; min-width:0;
}
.u-firma__dati > *,
.u-firma__link > *{ display:inline-flex !important; align-items:baseline; }
.u-firma__dati > * + *::before,
.u-firma__link > * + *::before{
  content:"·"; margin:0 10px; color:var(--u-bordo);
}
.u-firma a{ color:var(--u-tenue); text-decoration:none; }
.u-firma a:hover{ color:var(--u-sez); text-decoration:underline; }

@media (max-width:820px){
  /* Due righe centrate. I collegamenti vanno sopra, perche' servono a
     qualcosa; i dati fiscali restano in fondo, dove ci si aspetta. */
  .u-firma{
    flex-direction:column-reverse; align-items:center;
    gap:12px 0; text-align:center;
  }
  .u-firma__dati, .u-firma__link{ justify-content:center; }
  .u-firma__dati{ opacity:.85; }
}
@media (max-width:560px){
  /* Stretto davvero: via i puntini e piu' aria. Un separatore che finisce
     a inizio riga si legge come un refuso. */
  .u-firma__dati > * + *::before,
  .u-firma__link > * + *::before{ content:none; }
  .u-firma__dati, .u-firma__link{ gap:4px 16px; }
}

/* I due cerchi che stanno fissi in basso a destra (la faccia e WhatsApp)
   coprivano proprio questa riga quando si arriva in fondo. Restano dove
   sono, che e' il posto dove la gente li cerca: e' il piede a farsi da
   parte. */
.u-piede{ padding-bottom:88px; }
@media (max-width:560px){ .u-piede{ padding-bottom:80px; } }


/* i distintivi esterni: centrati, sotto la firma, di un'altezza sola */
.u-badge{
  display:flex !important; flex-wrap:wrap; gap:14px;
  justify-content:center; align-items:center;
  margin:22px 0 0; padding-top:18px;
  border-top:1px solid var(--u-bordo);
}
.u-badge a{ display:inline-flex; line-height:0; opacity:.85; }
.u-badge a:hover{ opacity:1; }
.u-badge img{ height:36px; width:auto; display:block; }
.u-badge > a[class*="card"]{
  display:block; max-width:300px; line-height:1.45; opacity:1;
  padding:14px 16px; border:1px solid var(--u-bordo); border-radius:0;
  text-decoration:none; color:var(--u-tenue); font-size:.85rem; text-align:left;
}
.u-badge > a[class*="card"] span{ display:block; }

/* La firma occupa la riga, sempre. Da quando ha due gruppi (348) i dati
   vanno a sinistra e i collegamenti a destra, quindi space-between, non
   flex-start: questa riga vinceva su quella del blocco 348, che sta piu'
   sopra, e teneva i collegamenti attaccati ai dati. */
.u-firma{ justify-content:space-between; }
@media (max-width:640px){
  .u-badge img{ height:30px; }
}


/* i distintivi stanno fra le colonne e la firma: niente filetto sopra, che
   ce l'ha gia' .u-note, e un po' d'aria sotto */
.u-badge{
  margin:0 0 22px !important; padding-top:0 !important;
  border-top:0 !important;
}


/* la nota della collana: sta con gli altri blocchi di legge, ma il titolo
   dell'opera va staccato dal resto, altrimenti si legge come una frase sola */
.u-collana{ max-width:64ch; }
.u-collana p{ margin:0 0 8px; }
.u-collana p:first-child{ color:var(--u-testo, #31394d); font-weight:600; }
.u-collana__f{ margin-bottom:0 !important; opacity:.75; font-style:italic; }


/* TROVATO. Le pagine scuola hanno nello <style> in linea:
       header{padding:16px 0;border-bottom:1px solid var(--linea)}
   Io su .u-bar la proprieta' padding non la dichiaravo affatto, e una
   regola che non c'e' non vince per specificita': vinceva quella. Da qui
   i 32px in piu' di altezza, 64 che diventavano 96. Ora la dichiaro. */
.u-bar{ padding:0 !important; }
.u-bar__in{ min-height:var(--u-h); }

/* il disclaimer di sezione */
.u-disc{ max-width:70ch; }
.u-disc summary{ display:block; margin-bottom:5px; color:var(--u-testo, #31394d); cursor:pointer; list-style:none; }
.u-disc summary::-webkit-details-marker{ display:none; }
.u-disc summary::after{ content:" \25B8"; display:inline-block; transition:transform .15s ease; }
.u-disc[open] summary::after{ transform:rotate(90deg); }
.u-disc summary:hover{ text-decoration:underline; }
.u-disc p{ margin:0; }

/* fine u-144 ============================================================== */
/* u-144 fine */
/* u-150 inizio */
/* u-150 ===================================================================
   Le briciole. Stessa larghezza della barra e del piede, stesso rientro,
   stessi colori. Nessun bordo nuovo: stanno nell'aria fra la barra e il
   titolo, e quell'aria e' l'unico segno di cui hanno bisogno.
   ==================================================================== */

.u-briciole{
  box-sizing:border-box;
  max-width:var(--u-max, 1100px); margin:22px auto 0; padding:0 20px;
  font-size:.82rem; line-height:1.5; color:var(--u-tenue, #667085);
}
.u-briciole ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  margin:0; padding:0; list-style:none;
}
.u-briciole a{
  color:var(--u-tenue, #667085); text-decoration:none;
  padding:2px 0; border-bottom:1px solid transparent;
}
.u-briciole a:hover{
  color:var(--u-sez, #31394d); border-bottom-color:currentColor;
}
.u-briciole [aria-current]{ color:var(--u-sez, #31394d); font-weight:600; }
.u-bric__s{ margin:0 9px; color:var(--u-bordo, #e6eaf2); }

/* sul telefono scorrono invece di andare a capo: cosi' non spingono giu'
   il titolo, che e' la prima cosa che deve leggersi */
@media (max-width:640px){
  .u-briciole{
    margin-top:16px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .u-briciole::-webkit-scrollbar{ display:none; }
  .u-briciole ol{ flex-wrap:nowrap; white-space:nowrap; }
  .u-bric__s{ margin:0 7px; }
}

@media print{ .u-briciole{ display:none; } }
/* fine u-150 ============================================================== */
/* u-150 fine */
/* u-159 inizio */
/* u-159 — le pagine del test: aria dai bordi e crediti richiudibili
   ==================================================================== */

/* Tutto quello che sta fuori da .wrap prendeva zero rientro e toccava il
   bordo dello schermo: la corona, la scala, i numeri, il dialogo, le
   risposte. env(safe-area-inset) serve per la tacca dei telefoni. */
.corona, .scala, .numeri, .dialogo, .risposte, .domanda,
.crediti-foto, .pf-metodo, .sb-shots, .barra-avanzamento{
  box-sizing:border-box;
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
}
.wrap .corona, .wrap .scala, .wrap .numeri,
.wrap .dialogo, .wrap .risposte, .wrap .domanda,
.wrap .crediti-foto, .wrap .pf-metodo{
  padding-left:0; padding-right:0;   /* dentro .wrap il rientro c'e' gia' */
}
@media (max-width:520px){
  .corona, .scala, .numeri, .dialogo, .risposte, .domanda{
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px));
  }
}

/* i crediti: chiusi, e quando si aprono non diventano la pagina */
details.crediti-foto{ margin-top:28px; }
details.crediti-foto > summary{
  cursor:pointer; list-style:none;
  font-size:.84rem; font-weight:600; color:var(--secondario, #5A6B5C);
  padding:10px 0; border-top:1px solid var(--linea, #DCE7DC);
}
details.crediti-foto > summary::-webkit-details-marker{ display:none; }
details.crediti-foto > summary::after{ content:" +"; opacity:.6; }
details.crediti-foto[open] > summary::after{ content:" −"; }
details.crediti-foto ul{
  margin:10px 0 0; padding-left:18px;
  max-height:320px; overflow:auto;
  font-size:.78rem; line-height:1.55; color:var(--secondario, #5A6B5C);
}
details.crediti-foto li{ margin-bottom:7px; }
@media print{ details.crediti-foto{ display:none; } }
/* fine u-159 ============================================================== */
/* u-159 fine */


/* Il logo nella card di destra ripete il marchio che sta gia' nella barra
   e lascia il riquadro mezzo vuoto: restano stelle e link, che servono. */
.sidebar-card img.sidebar-logo{ display:none; }
/* 172-rifiniture inizio */
/* Il riquadro dell'app e' tarato su 1140px, la misura della colonna del
   blog e degli esercizi. Le pagine del test hanno una colonna da 720px, e
   li' dentro il riquadro sembrava sfondare la pagina: non era largo di
   suo, seguiva la misura di un'altra sezione del sito. Lo riconosco dal
   #motore, che esiste solo sulle pagine del test. */
body:has(#motore) .u-appcta,
body:has(#motore) .ti-cta{ max-width:720px; }

/* Sopra "Photo credits" comparivano due filetti a un millimetro l'uno
   dall'altro: uno e' il bordo della sezione, l'altro quello del riassunto
   pieghevole. Ne basta uno, e tengo quello della sezione, che e' il
   confine vero fra il contenuto e le note. */
.sezione > .crediti-foto > summary{ border-top:0; padding-top:0; }
/* 172-rifiniture fine */

/* 174-editoriale inizio */
/* ==========================================================================
   IMPIANTO EDITORIALE DEL BLOGtitoli a sinistra, corpo in serif.
   Agganciato a .article-layout / .article-main / .article-body, che stanno
   solo negli articoli: il resto del sito non si muove.
   ========================================================================== */

/* --- 1. i tre stilemi da tema, via ---------------------------------------
   Angoli tondi da 22px, sollevamento di 4px al passaggio del mouse e ombre
   a raggio negativo: nessuno li sceglie, si ereditano, e insieme fanno il
   rumore di fondo del web di adesso. */
.article-layout .sidebar-card,
.article-layout .app-banner,
.article-layout .nota,
.article-body .nota{ border-radius:0; box-shadow:none; }
.article-main .article-cat-badge,
.article-body .button{ border-radius:0; }
.article-layout .sidebar-card:hover,
.article-layout .app-banner:hover,
.article-body .button:hover{ transform:none; box-shadow:none; }
.article-card{ border-radius:0; }
.article-card:hover{ transform:none; box-shadow:none; }

/* --- 2. il serif nel corpo ------------------------------------------------
   Iowan Old Style e Georgia sono gia' sul dispositivo: nessun carattere da
   scaricare, nessun peso aggiunto alla pagina. */
.article-body{ font-family:"Iowan Old Style",Georgia,"Times New Roman",serif;
  font-size:1.16rem; line-height:1.72; }
.article-body p{ margin:0 0 1.15em; }
.article-body strong{ font-weight:650; }
.article-main h1,
.article-body h2,
.article-body h3{ font-family:"Iowan Old Style",Georgia,serif;
  letter-spacing:-.012em; }
.article-main h1{ line-height:1.12; }

/* --- 3. i titoli escono a sinistra ---------------------------------------
   La colonna rientra di 90px e i titoli tornano indietro della stessa
   misura: restano su una verticale loro, staccata dal corpo. E' la
   disposizione dei libri, e nessun tema la fa da solo.
   .article-main passa da 700 a 790px cosi' il testo, tolti i 90 di
   rientro, resta largo come prima. */
@media (min-width:1000px){
  .article-main{ max-width:790px; padding-left:90px; }
  .article-main > h1,
  .article-main > .article-cat-badge,
  .article-main > .article-meta,
  .article-body > h2,
  .article-body > .foto-meta{ margin-left:-90px; }
  .article-body > .foto-meta{ width:calc(100% + 90px); }
  .article-body > h2{ padding-right:90px; }
}
/* sotto i 1000px il rientro sparisce: su telefono 90px sarebbero un terzo
   dello schermo, e resterebbe una colonna di testo strizzata a destra */

/* --- 4. rifiniture coerenti ----------------------------------------------- */
.article-main .article-cat-badge{ background:none; border:1px solid var(--border);
  letter-spacing:.09em; }
.article-body .foto-meta img{ border-radius:0; }
.article-main .article-meta{ letter-spacing:.02em; }
/* 174-editoriale fine */

/* 175-editoriale-sito inizio */
/* ==========================================================================
   IMPIANTO EDITORIALE  il resto del sito.
   Il rientro dei titoli sta nel 174 e riguarda solo il blog: fuori di li'
   non c'e' una colonna di prosa a cui agganciarlo. Qui ci sono le due cose
   che valgono ovunque, piu' il serif nel corpo dove si legge davvero.

   Tutto e' dentro body:not(:has(#motore)): le pagine del test hanno un
   linguaggio visivo loro (post-it, Polaroid, telefono con gli angoli a
   34px) e arrotondarlo a 10px lo romperebbe.
   ========================================================================== */

body:not(:has(#motore)){

/* --- 1. angoli: le schede da 16-26px scendono a 10 ----------------------- */
  --radius:0;
}
body:not(:has(#motore)) .level-card,
body:not(:has(#motore)) .faq-item,
body:not(:has(#motore)) .challenge-list li,
body:not(:has(#motore)) .ti-showcase-card,
body:not(:has(#motore)) .feature-card,
body:not(:has(#motore)) .lang-hero .app-icon,
body:not(:has(#motore)) .ex-feedback,
body:not(:has(#motore)) .ex-card,
body:not(:has(#motore)) .match-card,
body:not(:has(#motore)) .ex-grammar-note,
body:not(:has(#motore)) .builder-answer,
body:not(:has(#motore)) .tf-reading,
body:not(:has(#motore)) .sort-bank,
body:not(:has(#motore)) .lesson-card,
body:not(:has(#motore)) .video-card,
body:not(:has(#motore)) .scheda,
body:not(:has(#motore)) .card{ border-radius:0; }

/* --- 2. pillole: da 999px a 4px ------------------------------------------
   E' la modifica piu' visibile di tutte. Una pillola perfettamente tonda e'
   la firma dell'interfaccia di prodotto; un rettangolo appena smussato e'
   la firma della stampa. Quattro pixel e non zero: lo spigolo vivo su un
   fondo pieno sembra un errore di rendering, quattro pixel si leggono come
   una scelta.
   Dentro ci sono anche i tre pulsanti della barra unificata (.u-sw__b,
   .u-lang__b, .u-cta) e le voci .u-lingue: erano rimasti tondi, ed essendo
   in cima a ogni pagina erano proprio quelli che si vedevano di piu'. */
body:not(:has(#motore)) .btn,
body:not(:has(#motore)) .button,
body:not(:has(#motore)) .cta-btn,
body:not(:has(#motore)) .ex-btn,
body:not(:has(#motore)) .ex-app-btn,
body:not(:has(#motore)) .ex-app-hero-btn,
body:not(:has(#motore)) .tf-btn,
body:not(:has(#motore)) .word-chip,
body:not(:has(#motore)) .ex-badge,
body:not(:has(#motore)) .ex-card-level,
body:not(:has(#motore)) .ex-card-tag,
body:not(:has(#motore)) .ex-filters a,
body:not(:has(#motore)) .ex-hero .section-tag,
body:not(:has(#motore)) .level-card .badge,
body:not(:has(#motore)) .btn-app-store,
body:not(:has(#motore)) .lp-cta,
body:not(:has(#motore)) .u-cta,
body:not(:has(#motore)) .article-container .article-cta a,
body:not(:has(#motore)) .u-sw__b,
body:not(:has(#motore)) .u-lang__b,
body:not(:has(#motore)) .u-lingue a,
body:not(:has(#motore)) .button-app,
body:not(:has(#motore)) .blog-topbar .button,
body:not(:has(#motore)) .pl-si,
body:not(:has(#motore)) .article-cat-badge,
body:not(:has(#motore)) .article-card-cat{ border-radius:0; }

/* --- 3. via il sollevamento e le ombre sfumate --------------------------- */
body:not(:has(#motore)) .lesson-card:hover,
body:not(:has(#motore)) .video-card:hover,
body:not(:has(#motore)) .feature-card:hover,
body:not(:has(#motore)) .lang-grid a:hover,
body:not(:has(#motore)) .ti-showcase-card:hover,
body:not(:has(#motore)) .ti-showcase-cta:hover,
body:not(:has(#motore)) .ex-card:hover,
body:not(:has(#motore)) .ex-btn-primary:hover,
body:not(:has(#motore)) .ex-topbar .button:hover,
body:not(:has(#motore)) .ex-end-cta .button:hover,
body:not(:has(#motore)) .ex-app-btn:hover,
body:not(:has(#motore)) .ex-app-hero-btn:hover,
body:not(:has(#motore)) .listen-btn:hover,
body:not(:has(#motore)) .lang-topbar .cta-btn:hover,
body:not(:has(#motore)) .btn-primary:hover,
body:not(:has(#motore)) .btn-gold:hover,
body:not(:has(#motore)) .btn-app-store:hover,
body:not(:has(#motore)) .lp-cta:hover,
body:not(:has(#motore)) .button:hover,
body:not(:has(#motore)) .article-container .article-cta a:hover,
body:not(:has(#motore)) .u-cta:hover{
  transform:none; box-shadow:none; }

/* --- 4. i titoli in serif -------------------------------------------------
   Iowan Old Style e Georgia sono gia' sul dispositivo: nessun carattere da
   scaricare. Restano in sans le scritte che sono etichette e non titoli. */
body:not(:has(#motore)) h1,
body:not(:has(#motore)) h2,
body:not(:has(#motore)) h3{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif;
  letter-spacing:-.012em; }
body:not(:has(#motore)) .u-piede h2,
body:not(:has(#motore)) .u-bar h1,
body:not(:has(#motore)) .u-bar h2,
body:not(:has(#motore)) .ex-card h3,
body:not(:has(#motore)) .ex-filters h2,
body:not(:has(#motore)) .sidebar-eyebrow,
body:not(:has(#motore)) .section-tag{
  font-family:inherit; letter-spacing:normal; }
body:not(:has(#motore)) h1{ line-height:1.14; }

/* --- 5. il corpo in serif dove si legge davvero --------------------------
   Home, pagine lezioni, it, en (.contenuto) e le pagine /lingue/
   (.article-container). Sugli esercizi no: li' il testo e' consegna e
   risposta, non lettura continuata, e il sans si scorre meglio. */
body:not(:has(#motore)) .contenuto p,
body:not(:has(#motore)) .contenuto li,
body:not(:has(#motore)) .article-container p,
body:not(:has(#motore)) .article-container li{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif;
  font-size:1.1rem; line-height:1.72; }
/* 175-editoriale-sito fine */

/* 176-carta inizio */
/* ==========================================================================
   PALETTE CARTA E RIFINITURE EDITORIALI
   Va dopo il 174 e il 175. Tutto dentro body:not(:has(#motore)): le pagine
   del test hanno una carta loro, gia' calibrata.
   ========================================================================== */

/* --- 1. la carta ---------------------------------------------------------
   Bianco pieno e nero pieno non esistono sulla pagina stampata, e accanto a
   un serif si notano. Fondo avorio, testo antracite caldo. */
body:not(:has(#motore)){
  --carta-fondo:#FBFAF7;
  --carta-testo:#1F2320;
  --carta-tenue:#5C6159;
  --carta-linea:#E3DFD5;
  --carta-riquadro:#F4F2EC;
  --primary:#1F2320;
  --secondary:#5C6159;
  --surface:#F4F2EC;
  --border:#E3DFD5;
  --u-fondo:#F4F2EC;
  --u-bordo:#E3DFD5;
  --u-testo:#1F2320;
  --u-tenue:#5C6159;
  background:#FBFAF7;
  color:#1F2320;
}
body:not(:has(#motore)) .u-bar,
body:not(:has(#motore)) .blog-topbar,
body:not(:has(#motore)) .lang-topbar,
body:not(:has(#motore)) .ex-topbar{
  background:#FBFAF7; border-bottom:1px solid #E3DFD5; }
body:not(:has(#motore)) .u-piede{
  background:#FBFAF7; border-top:1px solid #E3DFD5; }

/* --- 2. i titoli grandi e stretti ----------------------------------------
   Nei giornali il titolo e' grande e compatto, non grande e spaziato. */
body:not(:has(#motore)) h1{
  font-size:clamp(2.1rem,4.4vw,3.35rem); line-height:1.08;
  letter-spacing:-.022em; }
body:not(:has(#motore)) h2{
  font-size:clamp(1.45rem,2.5vw,1.95rem); line-height:1.16;
  letter-spacing:-.016em; }
/* Le tre colonne del piede sono <h2> ma sono etichette, non titoli: con la
   scala qui sopra diventavano enormi e andavano a capo. Nel 175 avevo
   escluso il carattere e non la misura. */
body:not(:has(#motore)) .u-piede h2,
body:not(:has(#motore)) .u-col h2,
body:not(:has(#motore)) .u-bar h2{
  font-size:.78rem; line-height:1.3; letter-spacing:.09em;
  text-transform:uppercase; }
body:not(:has(#motore)) h3{ letter-spacing:-.008em; }

/* --- 3. la misura della riga ---------------------------------------------
   68 caratteri: e' la larghezza su cui l'occhio torna a capo senza perdere
   la riga. Su schermo largo oggi la riga arriva oltre i 90. */
body:not(:has(#motore)) .article-body,
body:not(:has(#motore)) .contenuto p,
body:not(:has(#motore)) .article-container p{ max-width:68ch; }
body:not(:has(#motore)) .article-body > .foto-meta,
body:not(:has(#motore)) .article-body > figure{ max-width:none; }

/* --- 4. l'occhiello al posto della pillola ------------------------------- */
body:not(:has(#motore)) .article-cat-badge,
body:not(:has(#motore)) .occhiello,
body:not(:has(#motore)) .section-tag,
body:not(:has(#motore)) .sidebar-eyebrow{
  background:none; border:0; border-bottom:1px solid #1F2320;
  border-radius:0; padding:0 0 4px; color:#1F2320;
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; }

/* --- 5. filetti al posto degli sfondi pieni ------------------------------ */
body:not(:has(#motore)) .sidebar-card:not(.sidebar-card-app),
body:not(:has(#motore)) .u-appcta,
body:not(:has(#motore)) .ti-cta{
  background:none; border:0; border-top:1px solid #1F2320;
  border-radius:0; padding:20px 0 0; }
body:not(:has(#motore)) .u-appcta{ border-left:0; }
/* I richiami all'app hanno testo bianco su fondo scuro. Svuotarli lasciava
   il bianco sulla carta: invisibili. Restano pieni, ma il gradiente blu
   diventa l'antracite della palette: un blocco solido su avorio e' piu'
   editoriale del gradiente, e il contrasto resta oltre 14:1. */
body:not(:has(#motore)) .sidebar-card-app,
body:not(:has(#motore)) .app-banner,
body:not(:has(#motore)) .ex-app-promo,
body:not(:has(#motore)) .ex-app-promo-hero{
  background:#1F2320; border-color:#1F2320; border-radius:0; }

/* --- 5-bis. le note in fondo devono restare leggibili --------------------
   La nota sui marchi porta un colore in linea (#8a8f9c) deciso quando il
   fondo era bianco: sulla carta scende sotto il rapporto 3:1 e sparisce.
   Stessa cosa per il credito fotografico, che ha opacity .65. */
body:not(:has(#motore)) .tm-note,
body:not(:has(#motore)) .blog-footer-license,
body:not(:has(#motore)) .u-firma{ color:#5C6159 !important; }
body:not(:has(#motore)) .blog-foto-credit{ opacity:1; color:#5C6159; }

/* --- 5-ter. l'icona degli esercizi ---------------------------------------
   E' un SVG dimensionato in em: se per qualsiasi motivo quella misura non
   viene applicata, il disegno torna alla misura propria (300x150) e i tre
   cerchi diventano un disco nero grande mezza pagina. Succede in stampa.
   Una misura in pixel e il fill esplicito lo rendono impossibile. */
body:not(:has(#motore)) .blog-exercise-link .ico,
body:not(:has(#motore)) svg.ico{
  width:18px; height:18px; fill:none; stroke:currentColor; }

/* --- 6. il tono delle foto -----------------------------------------------
   Trecento foto Unsplash diverse smettono di sembrare trecento foto diverse.
   Non tocca copertine, loghi e screenshot: quelli sono il prodotto. */
body:not(:has(#motore)) .article-body img,
body:not(:has(#motore)) .foto-meta img,
body:not(:has(#motore)) .article-card-cover,
body:not(:has(#motore)) .post-img{
  filter:saturate(.82) sepia(.06) contrast(1.03); }
body:not(:has(#motore)) .sb-shot img,
body:not(:has(#motore)) .u-logo img,
body:not(:has(#motore)) img[src*="/assets/books/"],
body:not(:has(#motore)) img[src*="/assets/store/"],
body:not(:has(#motore)) img[src*="/assets/icons/"]{ filter:none; }
/* 176-carta fine */

/* 177-rifiniture-tipografiche inizio */
/* ==========================================================================
   RIFINITURE TIPOGRAFICHE  dopo 174, 175 e 176.
   ========================================================================== */

/* --- 1. i titoli non restano con una parola sola sull'ultima riga -------- */
body:not(:has(#motore)) h1,
body:not(:has(#motore)) h2,
body:not(:has(#motore)) h3,
body:not(:has(#motore)) .article-card-body h3{ text-wrap:balance; }
body:not(:has(#motore)) .article-body p,
body:not(:has(#motore)) .contenuto p{ text-wrap:pretty; }

/* --- 2. l'attacco -------------------------------------------------------
   Il primo paragrafo di un grado piu' grande: dice "da qui si comincia"
   senza bisogno di un sommario. */
body:not(:has(#motore)) .article-body > p:first-of-type,
body:not(:has(#motore)) .article-body > .has-text-align-center:first-of-type{
  font-size:1.26rem; line-height:1.6; color:#1F2320; }

/* --- 3. la sillabazione, solo su schermo stretto ------------------------
   Le parole italiane sono lunghe e in colonna stretta lasciano buchi
   bianchi in mezzo alla riga. Sopra i 700px non serve. */
@media (max-width:700px){
  body:not(:has(#motore)) .article-body p,
  body:not(:has(#motore)) .contenuto p,
  body:not(:has(#motore)) .article-container p{
    hyphens:auto; -webkit-hyphens:auto; }
}

/* --- 4. le sottolineature che non tagliano le discendenti ---------------- */
body:not(:has(#motore)) .article-body a,
body:not(:has(#motore)) .contenuto a,
body:not(:has(#motore)) .article-container a{
  text-decoration-thickness:1px; text-underline-offset:.18em;
  text-decoration-skip-ink:auto; }

/* --- 5. le cifre in stile antico nel corpo ------------------------------
   Stanno dentro la riga invece di sporgere. Nei titoli restano allineate:
   li' devono avere tutte la stessa altezza. */
body:not(:has(#motore)) .article-body,
body:not(:has(#motore)) .contenuto p{
  font-variant-numeric:oldstyle-num;
  font-feature-settings:"onum" 1; }
body:not(:has(#motore)) h1,
body:not(:has(#motore)) h2,
body:not(:has(#motore)) h3,
body:not(:has(#motore)) .article-meta{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1; }
/* 177-rifiniture-tipografiche fine */

/* 179-apparato inizio */
/* ==========================================================================
   L'APPARATO IN FONDO ALLA PAGINA, COME UN BLOCCO SOLO.
   Disclaimer, credito foto, firma, licenza, nota marchi e riga fiscale sono
   la stessa cosa: note. Erano scritti con tre grigi e due misure diverse,
   perche' arrivano da script scritti in momenti diversi.
   ========================================================================== */

body:not(:has(#motore)) .u-note{
  font-size:.83rem; line-height:1.62; color:#5C6159; }

/* Una misura sola, un grigio solo. Le trasparenze sparivano o annerivano a
   seconda del fondo: un colore dichiarato si misura, opacity no. */
body:not(:has(#motore)) .u-note p,
body:not(:has(#motore)) .u-disc p,
body:not(:has(#motore)) .blog-foto-credit,
body:not(:has(#motore)) .blog-footer-license,
body:not(:has(#motore)) .tm-note,
body:not(:has(#motore)) .u-firma,
body:not(:has(#motore)) .u-collana p{
  font-size:.83rem !important; line-height:1.62; opacity:1 !important;
  color:#5C6159 !important; letter-spacing:0; }

/* i link dentro le note: stesso grigio, sottolineati fini */
body:not(:has(#motore)) .u-note a{
  color:#5C6159; text-decoration-thickness:1px; text-underline-offset:.16em; }
body:not(:has(#motore)) .u-note a:hover{ color:#1F2320; }

/* --- il titolo di una nota non e' un titolo di paragrafo -----------------
   Maiuscoletto spaziato, come gli occhielli: si capisce a colpo d'occhio
   che apre una nota. */
body:not(:has(#motore)) .u-disc summary,
body:not(:has(#motore)) .u-collana p:first-child{
  font-size:.7rem !important; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#1F2320 !important;
  display:block; margin-bottom:6px; }

/* --- la firma dell'autore e' l'unica riga che deve pesare ----------------
   E' la credenziale: dentro un apparato tutto uguale sparirebbe. Resta
   della stessa misura, ma in nero e non in grigio. */
body:not(:has(#motore)) .blog-firma{ color:#1F2320 !important; }

/* --- misura della riga anche qui ---------------------------------------
   Le note vanno a tutta larghezza del piede, cioe' oltre 130 caratteri:
   sono le righe piu' lunghe della pagina proprio dove il testo e' piu'
   piccolo. */
body:not(:has(#motore)) .u-note > p,
body:not(:has(#motore)) .u-disc{ max-width:88ch; }
/* 179-apparato fine */

/* 185-barra-e-bordi inizio */
/* ==========================================================================
   PILLOLE RIMASTE, MARGINI, E LA BARRA
   ========================================================================== */

/* --- 1. le pillole di testo che il 175 non aveva preso ------------------- */
body:not(:has(#motore)) .hero-tag,
body:not(:has(#motore)) .section-tag,
body:not(:has(#motore)) .ex-hero .section-tag,
body:not(:has(#motore)) .filter-pill,
body:not(:has(#motore)) .listen-btn,
body:not(:has(#motore)) .solution-btn,
body:not(:has(#motore)) .sort-word,
body:not(:has(#motore)) .mp-btn,
body:not(:has(#motore)) .game-mode-bar,
body:not(:has(#motore)) .level-card .badge{ border-radius:0; }

/* Restano tondi, perche' li' il raggio e' geometria e non stile:
   .wheel .wheel-center .spider-center .spider-node .carousel-arrow
   .quiz-option-letter .num e i cursori delle barre. Non li tocco. */

/* --- 2. il margine dai bordi, dichiarato in pixel -----------------------
   min(92%) dava il 4% per lato: quindici pixel su un telefono. Ora il
   rientro e' fisso e non dipende piu' dalla larghezza dello schermo. */
body:not(:has(#motore)) .container{
  width:min(100%, var(--container, 1180px));
  box-sizing:border-box;
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px)); }
@media (max-width:420px){
  body:not(:has(#motore)) .container{
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px)); }
}
body:not(:has(#motore)){ overflow-x:clip; }

/* --- 3. la barra: piu' bassa e piu' stretta ------------------------------
   Il primo tentativo l'aveva alzata a 66px e aggiunto il nome del sito in
   serif accanto al marchio, togliendo la cornice al commutatore e al
   selettore lingua. Sbagliato in due modi: il nome ripeteva quello che il
   logo dice gia', e una barra alta occupa spazio senza dare niente in
   cambio. La cornice invece serve: dice che quelle due voci si aprono, e
   senza sembravano testo qualunque.

   Quindi qui il contrario: barra piu' bassa dell'originale, cornici al
   loro posto, e le due pillole rimpicciolite finche' non pesano piu'. Il
   carattere della barra viene dalla misura e dal maiuscoletto, non da un
   elemento in piu'. */

body:not(:has(#motore)) .u-bar{
  --u-h:46px; box-shadow:none; border-bottom:1px solid #E3DFD5; }
body:not(:has(#motore)) .u-bar__in{ gap:12px; }
body:not(:has(#motore)) .u-logo img{ width:22px; height:22px; border-radius:0; }

/* --- il carattere della barra -------------------------------------------
   Un terzo carattere, diverso sia dal serif dei titoli sia dal sans del
   corpo. Helvetica Neue e' un grottesco neutro, sta su ogni Mac e ogni
   iPhone, e su Windows ripiega su Arial che e' della stessa famiglia
   visiva. Costo: zero, perche' non si scarica niente.
   Perche' un terzo carattere e non uno dei due che ci sono: la barra non
   e' contenuto, e' orientamento. Nelle riviste la gabbia di navigazione
   ha quasi sempre una voce tipografica sua, piu' stretta e piu' neutra
   del testo, proprio perche' non deve competere con quello che si legge. */
body:not(:has(#motore)) .u-bar,
body:not(:has(#motore)) .u-bar button,
body:not(:has(#motore)) .u-bar a{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }

/* il commutatore e il selettore lingua: cornice sottile, angolo appena
   smussato, e un terzo di spazio in meno di prima */
body:not(:has(#motore)) .u-sw__b,
body:not(:has(#motore)) .u-lang__b{
  border:1px solid #E3DFD5; background:none; border-radius:0;
  padding:4px 9px; font-size:.68rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; line-height:1.25; }
body:not(:has(#motore)) .u-sw__b:hover,
body:not(:has(#motore)) .u-lang__b:hover{ border-color:#1F2320; }
body:not(:has(#motore)) .u-sw__b b{ margin-left:2px; }
body:not(:has(#motore)) .u-sw{ gap:10px; }

/* le voci in maiuscoletto spaziato: e' la firma delle testate, e nessun
   tema la usa perche' costa leggibilita' se le voci sono lunghe. Le tue
   sono corte. */
body:not(:has(#motore)) .u-menu a{
  font-size:.69rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; }
body:not(:has(#motore)) .u-menu{ gap:20px; }

/* la CTA resta l'unico elemento pieno: in una barra sobria e' quello che
   si vede, ed e' giusto che sia l'unica cosa da cliccare */
body:not(:has(#motore)) .u-cta{
  border-radius:0; font-size:.69rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:7px 13px; }

@media (max-width:640px){
  body:not(:has(#motore)) .u-bar{ --u-h:44px; }
  body:not(:has(#motore)) .u-sw__b,
  body:not(:has(#motore)) .u-lang__b{ padding:3px 7px; font-size:.64rem; }
  body:not(:has(#motore)) .u-cta{ padding:6px 10px; font-size:.64rem; }
}
/* 185-barra-e-bordi fine */

/* 191-tendine-e-scuole inizio */
/* ==========================================================================
   LE TENDINE DELLA BARRA E LA SEZIONE SCUOLE
   ========================================================================== */

/* --- 1. i pannelli che si aprono ----------------------------------------
   Il 185 aveva squadrato i pulsanti ma non le tendine: un bottone
   squadrato che apre un pannello tondo si nota piu' di due cose tonde. */
body:not(:has(#motore)) .u-sw__l,
body:not(:has(#motore)) .u-lang__l{ border-radius:0; }
body:not(:has(#motore)) .u-lingue a{ border-radius:0; }
body:not(:has(#motore)) .u-apri{ border-radius:0; }
body:not(:has(#motore)) .u-badge > a[class*="card"]{ border-radius:0; }
body:not(:has(#motore)) .u-card{ border-radius:0; }

/* --- 2. le scuole: le due variabili ---------------------------------------
   Nel foglio in linea delle schede scuola ci sono --r:0 e --r-s:0,
   usate da schede, pannelli, moduli, meteo, esiti e FAQ. Riscriverle qui
   sistema tutto quello che le usa senza toccare una regola per volta. */
body:not(:has(#motore)){ --r:0; --r-s:0; }

/* --- 3. le scuole: le pillole scritte a mano ------------------------------
   Queste hanno il 999px dentro la regola, e la regola sta in un <style> in
   linea nella pagina, che vince sul foglio esterno. Per queste serve
   !important: e' il secondo e ultimo posto dell'impianto dove lo uso, e
   come per il richiamo dell'app la ragione e' che il file dove andrebbero
   scritte non ce l'ho. */
body:not(:has(#motore)) .hl-chip,
body:not(:has(#motore)) .tag,
body:not(:has(#motore)) .chip,
body:not(:has(#motore)) .chip-mappa,
body:not(:has(#motore)) .app-cta,
body:not(:has(#motore)) .citta-altre a,
body:not(:has(#motore)) .mail-piede .bottone,
body:not(:has(#motore)) .pl-si,
body:not(:has(#motore)) .barra{ border-radius:0!important; }
body:not(:has(#motore)) .avviso-lingua,
body:not(:has(#motore)) .proposta-lingua{ border-radius:0; }

/* --- 4. i cerchi veri restano cerchi --------------------------------------
   Non li tocco, e li elenco perche' si veda che e' una scelta:
   .mail-pallini i, .guida ol li::before, .monitor-schermo, .monitor-base,
   .cart-bollo, .badge[data-tip]::after.
   Un francobollo squadrato non e' sobrio, e' un francobollo sbagliato. */

/* --- 5. i titoli delle scuole seguono il resto del sito -------------------
   Il 175 mette il serif su h1, h2 e h3 dappertutto, ma nelle schede scuola
   il nome della citta' e il nome della scuola sono in classi loro. */
body:not(:has(#motore)) .colh2,
body:not(:has(#motore)) .cart-testo h2{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif;
  letter-spacing:-.012em; }
/* 191-tendine-e-scuole fine */

/* 193-test inizio */
/* ==========================================================================
   LE PAGINE DEL TEST
   Dentro il test ci sono due cose diverse: la scenografia (post-it, foglietto,
   telefono, nuvolette, libro, diario, Polaroid) dove il raggio E' l'oggetto,
   e l'interfaccia (occhielli, pillole, bottoni, riquadri, schede) che e' la
   stessa del resto del sito. Qui si tocca la seconda e si protegge la prima.
   ========================================================================== */

/* --- 1. le tre variabili -------------------------------------------------
   --r, --r-s e --r-xs sono dichiarate nel <style> della pagina e usate da
   riquadri, schede, scelte, quadranti e moduli. Riscriverle sistema quasi
   tutto in tre righe. */
body:has(#motore){
  --r:0; --r-s:0; --r-xs:4px;
  --carta:#FBFAF7; --inchiostro:#1F2320; --secondario:#5C6159;
  --linea:#E3DFD5;
  background:#FBFAF7; }

/* --- 2. le pillole dell'interfaccia -------------------------------------- */
body:has(#motore) .occhiello,
body:has(#motore) .dati li,
body:has(#motore) .bottone,
body:has(#motore) .pill-app,
body:has(#motore) select#lingua,
body:has(#motore) .def-parola,
body:has(#motore) .pl-si,
body:has(#motore) .proposta-lingua,
body:has(#motore) .u-cta,
body:has(#motore) .u-sw__b,
body:has(#motore) .u-lang__b{ border-radius:0; }
body:has(#motore) .scelta .lettera,
body:has(#motore) .voce .segno{ border-radius:0; }
body:has(#motore) .u-sw__l,
body:has(#motore) .u-lang__l{ border-radius:0; }

/* --- 3. la barra come nelle altre pagine ---------------------------------
   Il pulsante saltava: il foglio del test gli da' transform:none
   al passaggio del mouse e scale(.98) alla pressione, e il 175 quell'effetto
   lo toglie solo alle pagine che NON sono il test. Qui restava, e su una
   barra ferma un elemento che si muove attira l'occhio piu' del contenuto.
   Via l'animazione, e misure identiche a quelle del 185. */
body:has(#motore) .u-cta,
body:has(#motore) .pill-app,
body:has(#motore) .bottone{ transition:none; }
body:has(#motore) .u-cta:hover,
body:has(#motore) .u-cta:focus-visible,
body:has(#motore) .pill-app:hover,
body:has(#motore) .bottone:hover,
body:has(#motore) .bottone:active,
body:has(#motore) .scelta:hover{ transform:none; box-shadow:none; }
body:has(#motore) .bottone{ box-shadow:none; }
body:has(#motore) .u-bar{
  --u-h:46px; box-shadow:none; border-bottom:1px solid #E3DFD5; }
body:has(#motore) .u-bar,
body:has(#motore) .u-bar a,
body:has(#motore) .u-bar button{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
body:has(#motore) .u-sw__b,
body:has(#motore) .u-lang__b{
  border:1px solid #E3DFD5; background:none; padding:4px 9px;
  font-size:.68rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; }
body:has(#motore) .u-menu a{
  font-size:.69rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; }
body:has(#motore) .u-cta{
  font-size:.69rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:7px 13px; }
body:has(#motore) .u-logo img{ width:22px; height:22px; border-radius:0; }

/* --- 4. gli occhielli come nel resto del sito ---------------------------- */
body:has(#motore) .occhiello,
body:has(#motore) .prova-eti,
body:has(#motore) .etichetta-prova span{
  background:none; border:0; border-bottom:1px solid var(--inchiostro);
  border-radius:0; padding:0 0 4px; color:var(--inchiostro);
  font-size:.7rem; letter-spacing:.16em; }
body:has(#motore) .prova-eti,
body:has(#motore) .etichetta-prova span{ border-bottom:0; padding:0; }

/* --- 5. QUELLO CHE RESTA COM'E', e perche' -------------------------------
   Le rimetto per nome dopo le variabili, cosi' se un giorno qualcuno cambia
   --r-s non se le porta dietro. Ognuna e' un oggetto, non uno stile.

     .postit          un foglietto adesivo
     .stampa          una stampa fotografica
     .foglietto       un foglio strappato
     .giornale        un ritaglio
     .libro           una pagina di dizionario
     .diario          una pagina di diario
     .bacheca         un avviso appeso
     .social          una scheda di social
     .chat.messaggi   un telefono: 34px sono la sua scocca
     .fumetto         una nuvoletta di fumetto
     .nuvola          una nuvoletta di pensiero
     .corona          il disco del livello: e' una medaglia
     .faccia .cifra   volti e numeri in cerchio
     .segmenti i      barre di avanzamento: la pillola e' la forma giusta
     .scala-anteprima span   idem
   Un telefono con gli angoli vivi non e' un telefono. */
body:has(#motore) .postit{ border-radius:0; }
body:has(#motore) .stampa{ border-radius:0; }
body:has(#motore) .foglietto{ border-radius:0; }
body:has(#motore) .scheda-carta{ border-radius:0; }
body:has(#motore) .giornale{ border-radius:0; }
body:has(#motore) .libro{ border-radius:0; }
body:has(#motore) .diario{ border-radius:0; }
body:has(#motore) .bacheca{ border-radius:0; }
body:has(#motore) .social{ border-radius:0; }
body:has(#motore) .chat.messaggi{ border-radius:0; }
body:has(#motore) .fumetto{ border-radius:0; }
body:has(#motore) .battuta.destra .fumetto{ border-radius:0; }
body:has(#motore) .chat.parlato .fumetto{ border-radius:0; }
body:has(#motore) .chat.parlato .battuta.destra .fumetto{
  border-radius:0; }
body:has(#motore) .chat.messaggi .fumetto{ border-radius:0; }
body:has(#motore) .chat.messaggi .battuta.destra .fumetto{
  border-radius:0; }
body:has(#motore) .nuvola{ border-radius:0; }
body:has(#motore) .corona,
body:has(#motore) .faccia,
body:has(#motore) .cifra,
body:has(#motore) .etichetta-prova .punto{ border-radius:50%; }
body:has(#motore) .segmenti i,
body:has(#motore) .scala-anteprima span,
body:has(#motore) .scala .barra-liv,
body:has(#motore) .pf-t,
body:has(#motore) .pf-riga .t{ border-radius:0; }

/* --- 6. il profilo in PDF non si tocca -----------------------------------
   E' un documento stampato, tarato riga per riga su due pagine A4. Cambiargli
   misure e colori qui vorrebbe dire rifare quel lavoro. */
body:has(#motore) #profilo,
body:has(#motore) #profilo *{ --r:0; }
@media print{
  body:has(#motore){ background:#fff; }
}
/* 193-test fine */

/* 194-proposta-lingua inizio */
/* ==========================================================================
   LA PROPOSTA DI LINGUA
   Fuori dalle pagine del test e dalle schede scuola questa classe non era
   definita da nessuna parte, e lo script non si inietta il CSS: il riquadro
   sarebbe comparso come un paragrafo in fondo al documento. Qui prende una
   forma, e la prende AL CENTRO: a destra ci sono gia' il pulsante WhatsApp
   e l'avatar dell'autore, e un terzo elemento nello stesso angolo li copre.
   ========================================================================== */
.proposta-lingua{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%, 14px);
  z-index:9999; width:min(430px, calc(100vw - 40px));
  background:#FBFAF7; border:1px solid #E3DFD5; border-radius:0;
  padding:16px 18px 14px;
  box-shadow:none;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  opacity:0; transition:opacity .3s ease, transform .3s ease; }
.proposta-lingua.entra{ opacity:1; transform:translate(-50%, 0); }
.proposta-lingua.va-via{ opacity:0; transform:translate(-50%, 10px); }
.proposta-lingua .pl-testo{ margin:0 0 12px; font-size:.92rem; line-height:1.45;
  padding-right:16px; color:#1F2320; }
.proposta-lingua .pl-azioni{ display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; }
.proposta-lingua .pl-si{ display:inline-block; background:#1F2320; color:#fff;
  text-decoration:none; border-radius:0; padding:8px 15px;
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; }
.proposta-lingua .pl-no{ background:none; border:0; color:#5C6159;
  font-size:.84rem; cursor:pointer; font-family:inherit; padding:4px 2px;
  text-decoration:underline; text-underline-offset:2px; }
.proposta-lingua .chiudi-x{ position:absolute; top:8px; right:10px;
  background:none; border:0; font-size:1.2rem; line-height:1; color:#5C6159;
  cursor:pointer; padding:2px 6px; border-radius:0; }
.proposta-lingua .chiudi-x:hover{ background:#F4F2EC; }
.proposta-lingua[dir="rtl"] .chiudi-x{ right:auto; left:10px; }

/* LA SOGLIA E' 714px, NON 560. Il riquadro e' largo 430 e sta al centro,
   quindi il suo bordo destro e' a meta' schermo piu' 215. L'avatar comincia
   a 142 dal bordo destro. I due si toccano quando 430 + 2x142 = 714px.
   Con WhatsApp la soglia sarebbe 582. Avevo messo 560 e fra i 560 e i 714
   il riquadro finiva sotto i pulsanti: sotto e non sopra, perche' quelli
   stanno a z-index 9998 e questo a 9997. Ora e' 9999, e comunque sotto gli
   820px passa al formato pieno che sale sopra i pulsanti, con un centinaio
   di pixel di margine invece di sfiorarli. */
@media (max-width:820px){
  .proposta-lingua{ left:12px; right:12px; width:auto; bottom:88px;
    transform:translate(0, 14px); padding:14px 16px 12px; }
  .proposta-lingua.entra{ transform:translate(0, 0); }
  .proposta-lingua.va-via{ transform:translate(0, 10px); }
}
/* durante il test la barra dei pulsanti sta in fondo */
body.in-prova .proposta-lingua{ bottom:96px; }
@media print{ .proposta-lingua{ display:none !important; } }
/* 194-proposta-lingua fine */

/*144*/ .u-appcta .u-abbo{display:block;margin:-.35rem 0 1rem;font-size:.85rem;color:var(--u-tenue)}
.u-appcta .u-abbo b{color:#1a7f4b;font-weight:800;white-space:nowrap}
.u-appcta .u-abbo .st{color:#FFC93C;letter-spacing:.05em}


/*153*/ /* diacritici (Á, Ă) alzavano la riga: altezze uguali per tutti */
.u-sw__b{line-height:1.15}
.u-sw__b b{line-height:1;align-self:center}


/*159*/ /* card u-appcta: testo a sinistra, ventaglio di telefoni a destra.
   Il centrale (la tappa) e' il primario: piu' grande e sopra gli altri. */
.u-appcta{display:grid;grid-template-columns:1fr auto;column-gap:20px;align-items:center}
.u-appcta > b,.u-appcta > span:not(.u-scatti),.u-appcta > i{grid-column:1}
.u-appcta .u-scatti{grid-column:2;grid-row:1/9;display:flex;align-items:center;margin:0;padding:6px 4px}
.u-appcta .u-scatti picture{display:block;flex:0 0 auto;width:58px;border-radius:0;
  overflow:hidden;box-shadow:none;background:#fff}
.u-appcta .u-scatti picture:nth-child(1){transform:rotate(-8deg) translateY(4px)}
.u-appcta .u-scatti picture:nth-child(2){transform:scale(1.18);z-index:2;
  margin:0 -14px;box-shadow:none}
.u-appcta .u-scatti picture:nth-child(3){transform:rotate(8deg) translateY(4px)}
.u-appcta .u-scatti img{display:block;width:100%;height:auto}
@media(max-width:560px){.u-appcta{grid-template-columns:1fr 96px;column-gap:12px}
  .u-appcta .u-scatti picture{width:44px}}

/*160*/ /* fondo scuro: il marchio e l'etichetta delle stelline in chiaro */
.ex-app-promo strong,.ex-app-promo b,
.app-banner-testo strong,.app-banner-testo b{color:#fff !important}
.ex-app-promo .app-stelle,.app-banner-testo .app-stelle{color:rgba(255,255,255,.85)}

/*168*/ /* badge di lingua sulle card del blog (vedi script 168) */
.article-card{position:relative}
.card-lang{position:absolute;top:10px;right:10px;z-index:2;
  font:700 .68rem/1 system-ui,-apple-system,sans-serif;letter-spacing:.07em;
  padding:5px 7px;border-radius:0;color:#fff;pointer-events:none;
  background:rgba(28,32,42,.74);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.article-card[data-lingua="it"] .card-lang{background:rgba(26,127,75,.92)}
.article-card[data-lingua="en"] .card-lang{background:rgba(43,74,122,.92)}
.article-card[data-lingua="nl"] .card-lang{background:rgba(188,85,51,.92)}
/* etichetta estesa: invisibile, ma letta dagli screen reader */
.u-solo-lettori{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:560px){.card-lang{top:7px;right:7px;font-size:.62rem;padding:4px 6px}}
@media (prefers-reduced-transparency:reduce){.card-lang{background:#1c202a}}
@media print{.card-lang{background:none;color:#000;box-shadow:none}}

/*170*/ /* card app della sidebar: stessa gerarchia dei banner grandi */
.sidebar-card-app .sb-stelle{margin:12px 0 6px;font-size:.82rem;
  color:var(--u-testo-soft,#5b6273);display:flex;align-items:center;gap:7px}
.sidebar-card-app .sb-stelle .stelle{color:#FFC93C;letter-spacing:1px}
.sidebar-card-app .sb-gratis{margin:0 0 6px;font-weight:700;font-size:.86rem;line-height:1.35}
.sidebar-card-app .sb-prezzo{margin:0 0 12px;font-size:.84rem;line-height:1.5}
.sidebar-card-app .sb-eq{display:inline-block;background:#1a7f4b;color:#fff;
  font-weight:700;padding:2px 9px;border-radius:0;white-space:nowrap}



/*173*/ /* stelline sempre accanto all'etichetta, CTA corta sul telefono */
.u-abbo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.u-abbo-prezzo{flex:1 1 auto}
.u-abbo-stelle{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.cta-corta{display:none}
@media (max-width:560px){
  .cta-lunga{display:none}
  .cta-corta{display:inline}
}

/*174*/ /* card u-appcta: blocco abbonamento in riga, ventaglio piu' grande.
   Serve la specificita' alta perche' .u-appcta b e .u-appcta span mettono
   display:block su tutto quello che sta dentro la card. */
.u-appcta .u-abbo{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 16px;margin:-.35rem 0 1rem;font-size:.85rem}
.u-appcta .u-abbo .u-abbo-prezzo,
.u-appcta .u-abbo .u-abbo-stelle{display:inline-flex;align-items:baseline;
  gap:7px;margin:0;flex:0 1 auto;white-space:nowrap}
.u-appcta .u-abbo .u-abbo-prezzo{white-space:normal}
.u-appcta .u-abbo b{display:inline;margin:0;font-size:inherit;
  color:#1a7f4b;font-weight:800;white-space:nowrap}
.u-appcta .u-abbo .st{display:inline;margin:0;color:#FFC93C;letter-spacing:.05em}
/* ventaglio: piu' grande e piu' vicino al testo */
.u-appcta{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;max-width:900px}
.u-appcta .u-scatti picture{width:84px}
.u-appcta .u-scatti picture:nth-child(2){transform:scale(1.22);margin:0 -20px}
@media(max-width:560px){
  .u-appcta{grid-template-columns:minmax(0,1fr) 132px;column-gap:10px}
  .u-appcta .u-scatti picture{width:60px}
  .u-appcta .u-scatti picture:nth-child(2){margin:0 -14px}
}

/*175*/ /* la cifra mensile e' verde ovunque, in pastiglia */
.app-banner-abbo b,.u-appcta .u-abbo b{display:inline-block;
  background:rgba(126,231,135,.16);border:1px solid rgba(126,231,135,.5);
  color:#7ee787;font-weight:800;padding:2px 10px;border-radius:0;
  white-space:nowrap;line-height:1.5}
/* su fondo chiaro (card libri, pagine lezioni) serve il verde pieno */
.u-appcta .u-abbo b{background:rgba(26,127,75,.10);border-color:rgba(26,127,75,.35);
  color:#1a7f4b}
/* scuole: il blocco si stringe, restano incluso + prezzo */
.sc-abb{margin-bottom:14px}
.sc-abb-incl{margin-bottom:8px}

/*178*/ /* un solo verde, un solo stile di bottone (modello: banner grammatica) */
/* --- pastiglia del prezzo: la versione chiara su fondo scuro --- */
.app-banner-abbo b,.sidebar-card-app .sb-eq,.app-banner-eq,
.ex-app-promo .gr-abb-eq,.app-banner-testo .sb-eq{
  display:inline-block;padding:4px 12px;border-radius:0;
  background:rgba(126,231,135,.16);border:1px solid rgba(126,231,135,.5);
  color:#7ee787 !important;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
/* --- occhiello: sempre giallo --- */
.sidebar-card-app .sb-gratis,.app-banner-testo .app-banner-gratis,
.app-banner-testo .sb-gratis{color:#FFC93C !important;font-weight:600}
/* --- bottoni rettangolari, come nel modello --- */
.app-banner-cta,.sidebar-card-app .button-app,.u-appcta i,
.app-cta,.button.ex-app-btn{border-radius:0}
.app-banner-cta,.sidebar-card-app .button-app{font-weight:700;padding:13px 20px}

/*179*/ /* la prova finale ha lo stesso vestito dei blocchi esercizio */
.gr-prova--fondo{margin:1.8rem 0 1.4rem;padding:16px 18px;
  border:1px solid var(--linea,#e6e1d8);border-radius:0;background:rgba(255,255,255,.5)}
.gr-prova--fondo h2{margin:0 0 .35rem;font-size:1.02rem}
.gr-prova--fondo ol{margin:.4rem 0 .8rem 1.1rem;padding:0}
.gr-prova--fondo li{margin:.45rem 0;line-height:1.9}
.gr-prova--fondo select{font:inherit;font-size:.95rem;padding:2px 6px;
  border:1px solid #b9b2a6;border-radius:0;background:#fff}
.gr-prova--fondo select.giusto{border-color:#1a7f4b;background:rgba(26,127,75,.10)}
.gr-prova--fondo select.sbagliato{border-color:#b3261e;background:rgba(179,38,30,.08)}
.gr-prova--fondo .gr-prova-tasti{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gr-prova--fondo button{font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  padding:8px 16px;border-radius:0;border:1px solid #1a7f4b;background:#1a7f4b;color:#fff}
.gr-prova--fondo button + button{background:transparent;color:#1a7f4b}

/*182*/ /* il prezzo delle scuole: la pastiglia verde su fondo chiaro.
   Stava solo negli stili scritti dentro le pagine, e in 622 non c'era. */
.sc-abb{margin:10px 0 12px}
.sc-abb-riga{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.sc-abb-eq{display:inline-block;padding:3px 11px;border-radius:0;
  background:#e9f7ee;border:1px solid #a9dcbd;color:#1a7f4b;
  font-weight:800;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.sc-abb-ann{font-size:.86rem;color:#3f4657}
/* la card della sidebar rovesciata: il bottone respira sopra gli scatti */
.sidebar-card-app .button-app{margin-bottom:14px}
.sidebar-card-app .sb-shots{margin-bottom:10px}
.sidebar-card-app h3{margin:2px 0 4px}

/*183*/ /* la card app della sidebar: meno aria, testo a sinistra */
.sidebar-card-app{text-align:left;padding-top:18px}
.sidebar-card-app .sidebar-eyebrow{margin:0 0 8px}
.sidebar-card-app .sb-gratis{margin:0 0 6px;line-height:1.35}
.sidebar-card-app .sb-prezzo{margin:0 0 10px;line-height:1.5}
.sidebar-card-app .sb-stelle{margin:0 0 8px}
.sidebar-card-app .button-app{margin:0 0 14px;justify-content:center}
.sidebar-card-app .sb-shots{margin:0 0 8px}
.sidebar-card-app .sb-shots-hint{margin:0 0 10px;font-size:.8rem;opacity:.75}
.sidebar-card-app h3{margin:0 0 2px}
.sidebar-card-app h3 + p{margin:0}

/*184*/ /* banner piccolo delle scuole: prezzo in pastiglia, stelline sul bottone */
.app-mini .sc-mini-abb{margin:6px 0 10px;font-size:.9rem}
.app-mini .sc-mini-abb .sc-abb-eq{font-size:1rem}
.app-mini .app-mini-stelle{margin:0 0 10px}
.app-mini .cta-occhiello{margin:0 0 6px}

/*185*/ /* card app della sidebar: testo un gradino piu' piccolo */
.sidebar-card-app{font-size:.94rem;line-height:1.45}
.sidebar-card-app .sb-gratis{font-size:.86rem}
.sidebar-card-app .sb-prezzo{font-size:.88rem}
.sidebar-card-app .sb-eq{font-size:.92rem;padding:2px 8px}
.sidebar-card-app .sb-stelle{font-size:.82rem}
.sidebar-card-app h3{font-size:1rem}
.sidebar-card-app h3 + p{font-size:.86rem}
.sidebar-card-app .button-app{font-size:.94rem;padding:12px 18px}

/*187*/ /* citta' vicine: le pillole anche fuori dalle pagine citta' */
.citta-altre{display:flex;flex-wrap:wrap;gap:10px 12px;line-height:1.9}
.citta-altre a{border:1px solid var(--linea,#e6e1d8);border-radius:0;
  padding:8px 15px;font-size:13.5px;text-decoration:none;
  color:var(--secondario,#4b5163);background:var(--card,#fff);
  transition:border-color .15s,color .15s}
.citta-altre a:hover{border-color:#6d4a7c;color:#6d4a7c}
.citta-altre-tit{font-size:1rem;margin:0 0 10px}
/* le due colonne finiscono pari: i pannelli restano in alto, non si stirano */
.colonne{align-items:start}
.colonne > div{align-self:start}

/*189*/ /* domande frequenti: si vedono in pagina, non solo nei dati */
.gr-faq{margin:2rem 0 1.2rem}
.gr-faq h2{margin:0 0 .6rem}
.gr-faq-v{border:1px solid var(--linea,#e6e1d8);border-radius:0;
  padding:10px 14px;margin:0 0 8px;background:rgba(255,255,255,.5)}
.gr-faq-v summary{cursor:pointer;font-weight:700;font-size:.98rem}
.gr-faq-v[open] summary{margin-bottom:6px}
.gr-faq-r{font-size:.95rem;line-height:1.6}
.gr-faq-r ul{margin:.4rem 0 0 1.1rem;padding:0}
.gr-faq-r li{margin:.25rem 0}

/*176*/ /* esercizi interattivi delle schede di grammatica */
.gr-eser{margin:2.2rem 0 1.4rem}
.gr-eser-intro{margin:.2rem 0 1.4rem;color:var(--u-tenue,#5b6273)}
.gr-eser-lista{list-style:none;margin:0;padding:0}
.gr-eser-blocco{margin:0 0 1.6rem;padding:16px 18px;border:1px solid var(--linea,#e6e1d8);
  border-radius:0;background:rgba(255,255,255,.5)}
.gr-eser-blocco h3{margin:0 0 .35rem;font-size:1.02rem;display:flex;align-items:baseline;gap:9px}
.gr-eser-num{font-variant-numeric:tabular-nums;font-weight:800;color:#1a7f4b;font-size:.9rem;
  border:1px solid rgba(26,127,75,.35);border-radius:0;padding:1px 6px}
.gr-eser-cons{margin:0 0 .5rem;font-size:.95rem}
.gr-eser-rip{margin:0 0 .6rem;font-size:.85rem;color:var(--u-tenue,#5b6273)}
.gr-eser-rip span{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem}
.gr-eser-item{margin:.2rem 0 .8rem 1.1rem;padding:0}
.gr-eser-item li{margin:.45rem 0;line-height:1.9}
.gr-gap{font:inherit;font-size:.95rem;padding:2px 8px;border:1px solid #b9b2a6;
  border-radius:0;background:#fff;min-width:64px;vertical-align:baseline;
  max-width:100%}
/* riscritture di frasi intere: la casella va a capo e prende tutta la riga,
   cosi' lo studente vede quello che scrive e capisce quanto deve scrivere */
.gr-gap--largo{display:block;width:100%;margin:.35rem 0 .1rem}
.gr-gap:focus{outline:2px solid #1a7f4b;outline-offset:1px;border-color:#1a7f4b}
.gr-gap.giusto{border-color:#1a7f4b;background:rgba(26,127,75,.10)}
.gr-gap.sbagliato{border-color:#b3261e;background:rgba(179,38,30,.08)}
.gr-eser-sol-inline{color:#1a7f4b;font-weight:700;margin-left:4px}
.gr-eser-nota{color:var(--u-tenue,#5b6273);font-size:.88rem}
.gr-eser-tasti{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:.4rem 0 0}
.gr-eser-b{font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  padding:8px 16px;border-radius:0;border:1px solid #1a7f4b;background:#1a7f4b;color:#fff}
.gr-eser-b--vuoto{background:transparent;color:#1a7f4b}
.gr-eser-b--esempio{background:rgba(26,127,75,.12);color:#1a7f4b;border-color:rgba(26,127,75,.45)}
.gr-gap.esempio{border-color:#1a7f4b;background:rgba(26,127,75,.10);font-weight:600}
.gr-eser-b:hover{filter:brightness(1.06)}
.gr-eser-esito{font-size:.9rem;color:var(--u-tenue,#5b6273)}
.gr-eser-esito.tutto{color:#1a7f4b;font-weight:700}
@media print{.gr-eser-tasti{display:none}.gr-gap{border-bottom:1px solid #999;border-radius:0;
  border-top:0;border-left:0;border-right:0;background:none}}

/*191*/ /* scheda d'apertura: tre numeri in fila e gli argomenti in pastiglie */
.gr-card{margin:1.1rem 0 1.5rem;padding:14px 16px;border:1px solid var(--linea,#e6e1d8);
  border-radius:0;background:rgba(255,255,255,.55)}
.gr-card-dati{display:flex;gap:26px;margin:0 0 12px;padding:0 0 12px;list-style:none;
  border-bottom:1px solid var(--linea,#e6e1d8);flex-wrap:wrap}
.gr-card-dati li{display:flex;flex-direction:column;line-height:1.2}
.gr-card-dati b{font-size:1.35rem;font-weight:800;color:#1a7f4b;letter-spacing:-.02em}
.gr-card-dati li:last-child b{color:#6d4a7c}
.gr-card-dati span{font-size:.76rem;color:#6b7280;text-transform:uppercase;letter-spacing:.06em}
.gr-card-tit{margin:0 0 7px;font-size:.76rem;font-weight:700;color:#6b7280;
  text-transform:uppercase;letter-spacing:.06em}
.gr-card-arg{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.gr-card-arg li{font-size:.88rem;padding:5px 11px;border-radius:0;
  border:1px solid var(--linea,#e6e1d8);background:#fff;color:#2b2b2b}
.gr-apertura{margin:1.2rem 0 1.5rem;padding:14px 16px;border-left:3px solid #6d4a7c;
  background:rgba(109,74,124,.06);border-radius:0}
.gr-apertura .gr-card{margin:0;background:rgba(255,255,255,.75)}
.gr-confronto-testo{margin:.9rem 0 0}
.gr-confronto-testo h2{margin:0 0 .4rem;font-size:1.02rem}
.gr-confronto-testo p{margin:0;line-height:1.65}
.gr-linea{margin:1.6rem 0;padding:14px 16px;border:1px solid var(--linea,#e6e1d8);
  border-radius:0;background:rgba(255,255,255,.55)}
.gr-linea figcaption{font-weight:700;font-size:1.02rem;margin:0 0 .5rem}
.gr-linea svg{width:100%;height:auto;max-width:640px}
.gr-linea-nota{margin:.5rem 0 0;font-size:.9rem;color:#6b7280;line-height:1.55}
@media(max-width:600px){.gr-card-dati{gap:18px}.gr-card-dati b{font-size:1.2rem}}
/* rete di sicurezza: se in qualche pagina resta la vecchia tabella, la seconda
   colonna non deve stare appiccicata al bordo */
.gr-scheda td{padding-left:14px}
.gr-scheda th{padding-right:14px}

/* 258-paragrafi-di-seguito ================================================
   Dentro .contenuto i paragrafi hanno margine zero. Nelle pagine dei prezzi
   non si vede, perche' ogni sezione ne ha uno solo e lo spazio lo da' il
   titolo; nelle pagine «perche'», dove ogni sezione ne ha due, il secondo si
   attaccava al primo e la sezione diventava un muro di testo.
   Solo i figli diretti del contenitore: dentro il riquadro delle recensioni
   i paragrafi sono in fila apposta, e hanno gia' i loro margini. */
.contenuto > .container-stretto > p + p,
.contenuto > .container > p + p{ margin-top:1.05em; }

/* 259-ponte-vivere =========================================================
   Il riquadro che dalla grammatica porta a «Vivere in Italia»: sulle pagine
   A1 e A2 al test A2 per il permesso di soggiorno, su quelle B1 all'esame
   per la cittadinanza. Prende il verde della sezione a cui manda, non il
   viola della grammatica: e' un rimando, non una parte del capitolo.
   Bordo logico e non a sinistra, perche' in arabo la pagina e' rtl. */
.gp-ponte{
  margin:2rem 0 1.6rem; padding:16px 18px;
  border:1px solid var(--linea,#e6e1d8);
  border-inline-start:3px solid #1a6b5a;
  border-radius:0;
  background:rgba(26,107,90,.05); }
[dir="rtl"] .gp-ponte{ border-radius:0; }
.gp-ponte .gp-eti{
  margin:0 0 6px; font-size:.7rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#1a6b5a; }
.gp-ponte .gp-testo{ margin:0; line-height:1.6; }
.gp-ponte .gp-cta{
  display:inline-block; margin-top:12px; font-weight:600; color:#1a6b5a;
  text-decoration-thickness:1px; text-underline-offset:.18em; }
.gp-ponte .gp-cta:hover{ color:#12503f; }
@media print{ .gp-ponte{ display:none } }

/* 262-verso-grammatica: la variante viola del ponte, per il verso opposto.
   Dall'esercizio si torna alla regola, e la regola sta in grammatica. */
.gp-ponte.gp--gram{ border-inline-start-color:#6d4a7c;
  background:rgba(109,74,124,.05); }
.gp-ponte.gp--gram .gp-eti,
.gp-ponte.gp--gram .gp-cta{ color:#6d4a7c; }
.gp-ponte.gp--gram .gp-cta:hover{ color:#513962; }

/* 264-tutti-gli-esercizi: in fondo ai cinque esercizi della pagina, la
   strada verso gli altri settecento. Un pulsante solo, e nella lingua della
   pagina: prima il menu mandava tutti all'indice italiano. */
.gr-tutti{ margin:26px 0 0; padding-top:18px;
  border-top:1px solid var(--linea,#e6e1d8);
  font-size:.95rem; line-height:1.55; }
.gr-tutti .gr-tutti-b{ display:inline-block; margin-inline-start:6px;
  font-weight:600; color:#6d4a7c; white-space:nowrap; }
.gr-tutti .gr-tutti-b:hover{ color:#513962; }
@media print{ .gr-tutti{ display:none } }

/* 267-due-pulsanti-tondi ===================================================
   Due sono sfuggiti al giro del 191, e si vedono perche' stanno in fondo
   alle guide di /lingue/, dove tutto il resto e' squadrato:

   - «Fai il test di livello» sta in `.article-cta`, e la regola che lo
     squadrava chiedeva un antenato `.article-container` che in quelle
     pagine non c'e': il riquadro sta dentro un `.container` normale;
   - «Scopri Ti» ha il suo raggio in un <style> dentro la pagina.

   Qui non serve l'antenato, e l'!important perche' quei raggi sono
   dichiarati in linea nella pagina, che vince sul foglio esterno. */
body:not(:has(#motore)) .article-cta a{ border-radius:0!important; }
body:not(:has(#motore)) .ti-showcase-cta{ border-radius:0!important; }

/* 273-ripara-grammatica
   L'elenco dei livelli richiudibile (era nel 272, che qui viene sostituito).
   Su schermo largo il riassunto sparisce e resta il titolo di sempre con
   l'elenco aperto; su telefono il titolo si nasconde e il riassunto diventa
   la riga da toccare. */
.gr-livelli > summary{ display:none; }
.gr-livelli{ display:contents; }
@media (max-width:820px){
  .gr-livelli{ display:block; }
  .gr-livelli > summary{ display:flex; align-items:center; gap:8px;
    cursor:pointer; list-style:none; padding:10px 2px; font-weight:700;
    font-size:.95rem; }
  .gr-livelli > summary::-webkit-details-marker{ display:none; }
  .gr-livelli > summary::after{ content:"\25be"; margin-inline-start:auto;
    transition:transform .2s ease; }
  .gr-livelli[open] > summary::after{ transform:rotate(180deg); }
  .gr-fianco > h2{ display:none; }
}

/* 276 · la colonna di sinistra non si riorganizza piu' da sola ===========
   Prima i livelli stavano nella riga 1 della griglia e la scheda dell'app
   nella riga 2. La riga 1 e' alta quanto tutta la lista dei livelli, quindi
   la scheda cominciava a 522 pixel, sotto la piega; e dopo 440 pixel di
   scorrimento i livelli uscivano dallo schermo mentre la scheda si piantava
   in alto. La barra laterale cambiava forma appena si toccava la rotella.

   Adesso il 276 le mette tutte e due dentro `.gr-lato`, un solo contenitore
   appiccicato: i livelli restano in alto, la scheda gli sta subito sotto e
   la colonna sale tutta insieme. Se lo schermo e' basso e non ci sta tutto,
   e' la lista dei livelli a scorrere dentro di se', cosi' la scheda resta
   comunque sotto gli occhi. L'`!important` sulla lista serve solo a battere
   quello che sta gia' nel <style> della pagina. */
.gr-corpo > .gr-lato{ grid-row:1 / span 2; grid-column:1; align-self:start;
  position:sticky; top:calc(var(--u-h,64px) + 16px);
  display:flex; flex-direction:column;
  max-height:calc(100dvh - var(--u-h,64px) - 32px); }
/* Tre classi, non due: nel <style> della pagina c'e' gia'
   `.gr-corpo .gr-fianco{overflow:visible !important}`, che a parita' di peso
   vince perche' viene dopo. Con due sole classi questa regola non entrava
   mai in vigore, e si vedeva: aperti i livelli, la lista diventava alta
   2.541 pixel dentro una scatola di 423 e il pezzo in piu' veniva dipinto
   sopra la scheda dell'app. */
.gr-corpo > .gr-lato > .gr-fianco{ flex:1 1 auto; min-height:0;
  overflow-y:auto !important; overflow-x:hidden !important;
  max-height:none !important;
  scrollbar-width:thin; overscroll-behavior:contain; }

/* Sulla finestra di un portatile la colonna ha 619 pixel e la scheda
   dell'app se ne prendeva 329: ai livelli ne restavano 274, cinque righe su
   55, con la sesta tagliata a meta' del titolo. Su schermo basso le tre
   schermate si stringono e la scheda scende da 329 a poco piu' di 250: lo
   spazio che libera va tutto alla lista, che e' la parte che serve per
   muoversi. Quanto ne prende ciascuno lo decide la colonna da se', cosi' la
   scheda resta sempre dentro la finestra. */
@media (max-height:820px){
  .gr-corpo .gr-lato > .gr-scheda-app .gsa-foto{ max-width:118px; }
  .gr-corpo .gr-lato > .gr-scheda-app{ padding:12px 14px 11px; }
}

/* Aperto il livello in cui si e', i suoi undici capitoli riempiono da soli
   tutta la lista e gli altri livelli spariscono: sembra che A1 abbia invaso
   il riquadro. Le intestazioni dei livelli restano quindi appiccicate in
   cima mentre i capitoli scorrono sotto, cosi' si vede sempre in che livello
   si e' e gli altri restano a portata. Lo sfondo va dichiarato o si legge in
   trasparenza quello che scorre sotto. */
.gr-corpo > .gr-lato > .gr-fianco details > summary{
  position:sticky; top:0; z-index:2; background:var(--carta,#fffdf9); }
.gr-corpo > .gr-lato > .gr-fianco details[open] > summary{
  background:var(--fondo,#f6f4ee); }

/* Quando la lista continua sotto il bordo, l'ultima riga si sfuma invece di
   restare tranciata: cosi' si legge come «c'e' dell'altro» e non come un
   difetto. La classe la mette il 278 in u-nav.js, solo se scorre davvero. */
.gr-corpo > .gr-lato > .gr-fianco.gr-sfuma{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent); }
.gr-corpo > .gr-lato > .gr-fianco.gr-sfuma.gr-in-fondo{
  -webkit-mask-image:none; mask-image:none; }
.gr-lato > .gr-scheda-app{ flex:none; position:static; margin:16px 0 0; }
.gr-art > .gr-scheda-app--mob{ display:none; }

/* Sul telefono la colonna diventa lineare: i livelli richiusi restano in
   cima, che occupano una riga sola e servono a orientarsi, e l'articolo
   comincia subito. La scheda dell'app non puo' restare in fondo al
   contenitore, se no finisce in fondo alla pagina: si nasconde quella e si
   mostra la copia che il 276 ha messo dentro l'articolo, subito prima del
   vocabolario. Le due copie non si vedono mai insieme. */
@media (max-width:820px){
  .gr-corpo > .gr-lato{ position:static; display:block; max-height:none; }
  .gr-corpo > .gr-lato > .gr-fianco{ overflow-y:visible !important; }
  .gr-lato > .gr-scheda-app{ display:none; }
  .gr-art > .gr-scheda-app--mob{ display:block; max-width:340px;
    margin:26px auto; }
}

/* Tre schermate al posto di una: in 220 pixel stanno affiancate e un po'
   sovrapposte, come un mazzo di carte aperto. I selettori ripetono
   `.gr-scheda-app` perche' la regola che sta nel <style> della pagina ha la
   stessa specificita' e viene dopo: serve un antenato in piu' per batterla
   senza ricorrere a !important. */
.gr-corpo .gr-scheda-app .gsa-foto{ display:flex; width:auto; justify-content:center;
  align-items:flex-end; margin:0 auto 10px; }
.gr-corpo .gr-scheda-app .gsa-foto .gsa-scatto{ display:block; width:44%; }
.gr-corpo .gr-scheda-app .gsa-foto .gsa-scatto img{ width:100%; height:auto;
  display:block; border-radius:0; border:1px solid #E7E0D2;
  box-shadow:0 2px 8px -2px rgba(34,29,22,.28); }
.gr-corpo .gr-scheda-app .gsa-foto .gsa-scatto:nth-child(1){ transform:rotate(-5deg); }
.gr-corpo .gr-scheda-app .gsa-foto .gsa-scatto:nth-child(2){ margin:0 -8%; z-index:2;
  width:48%; }
.gr-corpo .gr-scheda-app .gsa-foto .gsa-scatto:nth-child(3){ transform:rotate(5deg); }

@media (max-width:820px){
  /* a tutta larghezza le tre schermate diventavano alte quasi novecento
     pixel: qui la scheda resta della misura della colonna. */
  .gr-corpo .gr-scheda-app .gsa-foto{ max-width:230px; }
}

/* 277 · «Prova ancora» come tutte le altre sezioni ======================
   Le sezioni della grammatica hanno il titolo e la consegna sulla pagina e
   dentro il riquadro solo la roba da fare: «Esercizi» e' cosi', e dal 270 lo
   e' anche il vocabolario. L'ultima prova del capitolo aveva titolo e
   consegna dentro la cornice, col titolo per giunta rimpicciolito a 1,02rem
   da `.gr-prova--fondo h2`: non sembrava un titolo di sezione. Il 277 lo
   porta fuori, qui si allineano i margini a quelli di `.gr-eser`. */
.gr-prova-sez{ margin:2.2rem 0 1.4rem; }
.gr-prova-sez > h2{ margin:0 0 .2rem; }
.gr-prova-sez > .gr-prova-cons{ margin:.2rem 0 1.1rem;
  color:var(--u-tenue,#5b6273); }
.gr-prova-sez > .gr-prova--fondo{ margin:0; }

/* ============================================================
   RIFINITURA, 16 agosto 2026. Stessa mano di style.css, qui per le
   5.500 pagine che usano questo foglio. Si toglie cancellando da
   questa riga in giu'.
   ============================================================ */
:root{
  --radius:0;
  --shadow:none;
  --transition:.14s ease;
  --u-lift:0px;
}

.u-lingue a,
.u-sw__b,
.u-cta,
.u-lang__b{ border-radius:0; }

.u-card:hover,
.ti-cta:hover,
.lesson-card:hover{ transform:none; border-color:var(--u-testo); }

/* ------------------------------------------------------------
   GRUPPO 2, seguito (selettore piu' preciso: .lessons-grid davanti,
   se no vince la regola generica delle schede piu' su). Le stesse righe delle lezioni vanno ripetute
   qui: uniforme.css vince perche' e' l'ultimo foglio caricato, e
   la sua regola generica delle schede rimetterebbe lo sfondo
   bianco sotto .lesson-card.
   ------------------------------------------------------------ */
.lessons-grid .lesson-card,
a.lesson-card{
  display:block;
  position:relative;
  background-color:transparent;
  background:none;
  border:none;
  border-bottom:1px solid var(--u-bordo);
  padding:17px 0 17px 34px;
  transition:padding-left .13s ease;
}
.lessons-grid .lesson-card .lesson-icon,
a.lesson-card .lesson-icon{ position:absolute;left:0;top:20px;width:21px;height:21px;margin:0;opacity:.5; }
.lessons-grid .lesson-card h3,
a.lesson-card h3{ font-size:1.06rem;line-height:1.3;margin-bottom:4px; }
.lessons-grid .lesson-card p,
a.lesson-card p{ font-size:.9rem;color:var(--u-tenue);margin:0; }
.lessons-grid .lesson-card:hover,
a.lesson-card:hover{
  padding-left:45px;
  background-color:transparent;
  box-shadow:inset 2px 0 0 var(--u-testo);
  background:none;
  border-color:var(--u-bordo);
}

.lessons-grid{ align-items:start; }

/* ------------------------------------------------------------
   GRUPPO 5, 16 agosto 2026: le pagine delle lezioni, 105 in tutto
   fra citta' e servizi.

   Due cose non andavano.

   1. L'occhiello. Una regola piu' su lo trasforma in etichetta
      maiuscola da 11px con il filo sotto, e va benissimo quando
      contiene una parola sola («GRAMMATICA»). Qui pero' contiene
      una frase intera, e una frase di due righe in maiuscoletto
      spaziato non la legge nessuno. Torna una sottotitolo vero.
   2. L'intestazione centrata sopra un testo allineato a sinistra.
      Il titolo, il sottotitolo e il pulsante vanno a sinistra come
      tutto il resto della pagina, e sotto ci si mette un filo.
   ------------------------------------------------------------ */
.hero-compatto{
  text-align:left;
  padding:64px 0 34px;
}
.hero-compatto .container{
  border-bottom:1px solid var(--u-bordo);
  padding-bottom:34px;
}
.hero-compatto h1{ margin-bottom:14px; }

body:not(:has(#motore)) .hero-compatto .occhiello,
body:has(#motore) .hero-compatto .occhiello,
.hero-compatto .occhiello{
  background:none;
  border:0;
  padding:0;
  margin:0 0 26px;
  max-width:38em;
  font-size:1.14rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  text-transform:none;
  color:var(--u-tenue);
}

/* ------------------------------------------------------------
   Le schede senza icona.

   Due casi diversi, e la prima versione li trattava uguale.

   a) Le schede in fondo alle quindici home hanno SOLO il titolo:
      niente icona, niente spiegazione, nessuna freccia. Restavano
      34 px vuoti a sinistra, tenuti per un'icona che non arriva
      mai, e quattro titoli soli in mezzo al bianco. Vanno a filo,
      con la freccia a destra che dice che si cliccano.

   b) Le schede delle lezioni hanno titolo, spiegazione e una
      freccia loro, dentro uno span. Li' la freccia in piu' faceva
      due frecce. Prendono solo il ritiro dei 34 px.
   ------------------------------------------------------------ */
.lessons-grid .lesson-card:not(:has(.lesson-icon)),
a.lesson-card:not(:has(.lesson-icon)){
  padding-left:0;
}
.lessons-grid .lesson-card:not(:has(.lesson-icon)):not(:has(p)):not(:has(.lesson-meer)),
a.lesson-card:not(:has(.lesson-icon)):not(:has(p)):not(:has(.lesson-meer)){
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.lessons-grid .lesson-card:not(:has(.lesson-icon)):not(:has(p)):not(:has(.lesson-meer)) h3{
  margin-bottom:0;
}
.lessons-grid .lesson-card:not(:has(.lesson-icon)):not(:has(p)):not(:has(.lesson-meer))::after{
  content:"\2192";
  flex:0 0 auto;
  color:var(--u-tenue);
  font-size:1rem;
  line-height:1;
}
.lessons-grid .lesson-card:not(:has(.lesson-icon)):hover{
  padding-left:11px;
}
.lessons-grid .lesson-card:not(:has(.lesson-icon)):hover::after{
  color:var(--u-testo);
}

/* 312-qcer =================================================================
   Sugli hub di livello della grammatica: il riquadro sul QCER, la nota di
   contrasto con la lingua di partenza e la FAQ.

   La griglia di .gr-corpo ha due colonne (fianco 220px + contenuto). Le due
   sezioni nuove sono figlie della griglia come .gr-liv, quindi senza una
   regola esplicita finivano nella prima colonna e spingevano la barra
   laterale in fondo alla pagina. Si ancora il fianco alla prima riga e si
   manda tutto il resto nella seconda colonna. */
.gr-corpo > .gr-fianco{ grid-column:1; grid-row:1 }
.gr-corpo > .gr-liv,
.gr-corpo > .gr-qcer,
.gr-corpo > .gr-faq{ grid-column:2 }

.gr-qcer{ margin:34px 0 0; padding-top:22px;
  border-top:1px solid var(--bordo,#e5e0d4) }
.gr-qcer h2{ font-family:Georgia,serif; font-size:1.3rem; margin:0 0 10px }
.gr-qcer h3{ font-size:1rem; margin:20px 0 4px }
.gr-qcer p{ max-width:70ch; margin:0 0 10px }
.gr-qcer .gr-fonte{ font-size:.85rem; color:var(--tenue,#6b6259) }
.gr-qcer .gr-fonte a{ color:inherit }

.gr-faq{ margin:30px 0 0 }
.gr-faq h2{ font-family:Georgia,serif; font-size:1.3rem; margin:0 0 12px }
.gr-faq details{ border:1px solid var(--bordo,#e5e0d4);
  background:var(--carta,#fffdf9); padding:12px 16px; margin:0 0 8px }
.gr-faq summary{ cursor:pointer; font-weight:600; list-style:none }
.gr-faq summary::-webkit-details-marker{ display:none }
.gr-faq summary::after{ content:"\002B"; float:inline-end;
  color:var(--tenue,#6b6259); font-weight:400 }
.gr-faq details[open] summary::after{ content:"\2212" }
.gr-faq details p{ margin:10px 0 0; max-width:70ch }

@media (max-width:820px){
  .gr-corpo > .gr-fianco,
  .gr-corpo > .gr-liv,
  .gr-corpo > .gr-qcer,
  .gr-corpo > .gr-faq{ grid-column:auto; grid-row:auto }
}
@media print{ .gr-faq details{ border:0; padding:0 } }

/* 313-blu-di-default =======================================================
   I collegamenti che ho aggiunto (il titolo di livello negli indici, il
   selettore di livello sugli hub, la fonte del QCER) non avevano colore e
   uscivano nel blu di default del browser, rgb(0,0,238), che su questo sito
   non compare da nessun'altra parte.

   Il titolo di livello prende il viola della sezione solo al passaggio del
   mouse: da fermo resta nero come tutti gli altri titoli, perche' e' un
   titolo prima che un collegamento. */
.gr-liv h2 a,
.gr-testa h1 a{ color:inherit; text-decoration:none }
.gr-liv h2 a:hover,
.gr-testa h1 a:hover{ color:var(--vino,#6d4a7c); text-decoration:underline }

.gr-cambio-liv{ margin:10px 0 0; font-size:.95rem; color:var(--tenue,#6b6259) }
.gr-cambio-liv a{ color:var(--vino,#6d4a7c); text-decoration:none;
  font-weight:600 }
.gr-cambio-liv a:hover{ text-decoration:underline }
.gr-cambio-liv strong{ color:var(--inchiostro,#2b2620) }

.gr-qcer .gr-fonte a{ color:inherit; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.18em }
.gr-qcer .gr-fonte a:hover{ color:var(--vino,#6d4a7c) }

/* La nota di servizio sotto i moduli (.sc-mini) contiene il collegamento
   alla privacy e l'indirizzo di posta, e non aveva regola di colore: usciva
   nel blu di default del browser. Si trova in grammatica/schede/ e in tutte
   le pagine delle scuole, quindi la regola sta qui e non nel foglio di
   sezione, cosi' vale per entrambe. */
.sc-mini a{ color:inherit; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.18em }
.sc-mini a:hover{ color:var(--vino,#6d4a7c) }

/* I tre collegamenti fatti di sola immagine (il logo nella barra, il tondo
   di WhatsApp, la foto di Alessio) non hanno colore perche' il testo non si
   vede mai. Ma se l'immagine non carica esce il testo alternativo, e allora
   si vede eccome. Costa una riga chiuderlo. */
a.u-logo, a.wa-flt, a.au-flt{ color:inherit }

/* 314-fianco-in-fondo ======================================================
   Sugli hub di livello la colonna «Livelli» sta in fondo, dopo le domande
   frequenti, e chiusa: in cima rubava spazio all'elenco degli argomenti, che
   e' quello che chi arriva sta cercando. Senza il fianco la griglia resta a
   una colonna sola, se no avanzano i 220px vuoti. */
.gr-corpo--pieno{ grid-template-columns:1fr }
.gr-corpo--pieno > .gr-liv,
.gr-corpo--pieno > .gr-qcer,
.gr-corpo--pieno > .gr-faq,
.gr-corpo--pieno > .gr-fianco--fondo{ grid-column:1 }
.gr-fianco--fondo{ position:static; max-height:none; margin:30px 0 0 }
.gr-fianco--fondo h2{ font-size:1.3rem; font-family:Georgia,serif;
  letter-spacing:0; text-transform:none; color:var(--inchiostro,#2b2620);
  margin:0 0 10px }

/* 315-foto-e-scala =========================================================
   La foto del livello in cima all'elenco argomenti, e la scala dei sei
   livelli dentro il blocco QCER (sull'indice di sezione, in cima). */
.gr-foto-liv{ margin:0 0 22px }
.gr-foto-liv img{ width:100%; height:auto; display:block;
  border:1px solid var(--bordo,#e5e0d4) }
.gr-foto-liv figcaption{ font-size:.85rem; color:var(--tenue,#6b6259);
  margin-top:6px; line-height:1.5 }
.gr-scala{ width:100%; height:auto; display:block; max-width:720px;
  margin:16px 0 6px }
.gr-scala-riep{ padding:4px 0 10px }
@media print{ .gr-foto-liv{ display:none } }

/* rec-originale-v1: il testo vero della recensione, sotto la traduzione */
.review-orig{margin:12px 0 0}
.review-orig>summary{cursor:pointer;list-style:none;font-size:.85rem;opacity:.62;display:inline-flex;align-items:center;gap:6px}
.review-orig>summary::-webkit-details-marker{display:none}
.review-orig>summary::after{content:"+";font-size:.95rem;line-height:1}
.review-orig[open]>summary::after{content:"\2212"}
.review-orig>summary:hover{opacity:.92}
.review-orig>summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.review-orig p{margin:10px 0 0;font-size:.93rem;line-height:1.55;opacity:.75;border-left:2px solid rgba(49,57,77,.2);padding-left:12px}
[dir="rtl"] .review-orig p{border-left:0;border-right:2px solid rgba(49,57,77,.2);padding-left:0;padding-right:12px}

/* ---------- piede-pieghevole-v1 -----------------------------------------
   Sotto i 560 pixel la griglia del piede va a una colonna sola e le tre
   liste diventano un muro di quindici link. Ora il titolo di ogni colonna
   e' un <summary> e la lista ci sta dentro: sul telefono il piede e' tre
   righe da toccare.

   L'HTML nasce con `open`. A chiudere e' js/u-nav.js, solo su schermo
   stretto e solo al caricamento: senza JavaScript il piede resta come
   prima, aperto. Da qui in su il dettaglio non deve sembrare un dettaglio. */
.u-col__d{ margin:0 }
.u-col__d > summary{
  display:block; list-style:none;
  /* Safari vecchio non capisce ::marker */
}
.u-col__d > summary::-webkit-details-marker{ display:none }
.u-col__d > summary::marker{ content:"" }
.u-col__d > summary > h2{ margin:0 0 14px }

@media (min-width:561px){
  /* sopra il telefono la colonna e' una colonna: non si chiude nemmeno
     per sbaglio, e il cursore non promette un pulsante che non c'e' */
  .u-col__d > summary{ cursor:default; pointer-events:none }
}

@media (max-width:560px){
  .u-piede__in{ gap:0 }
  .u-piede__in > .u-col{
    border-top:1px solid var(--u-bordo);
    padding:2px 0 4px;
  }
  .u-piede__in > .u-col:first-child{ border-top:0 }
  .u-col__d > summary{
    cursor:pointer; position:relative;
    padding:11px 26px 11px 0;
    -webkit-tap-highlight-color:transparent;
  }
  [dir="rtl"] .u-col__d > summary{ padding:11px 0 11px 26px }
  .u-col__d > summary > h2{ margin:0 }
  .u-col__d > summary::after{
    content:"+"; position:absolute; inset-inline-end:2px; top:50%;
    transform:translateY(-50%);
    font-size:1.05rem; line-height:1; font-weight:400;
    color:var(--u-sez); opacity:.75;
  }
  .u-col__d[open] > summary::after{ content:"\2212" }
  .u-col__d > ul{ padding-bottom:10px }
  .u-col__d > ul > li{ margin:0 0 2px }
  .u-col__d > ul > li > a{ display:inline-block; padding:7px 0 }
  .u-col__d > summary:focus-visible{ outline:2px solid currentColor; outline-offset:2px }
}

/* ---------- il pannello delle citta' (319) -------------------------------
   Stessa scatola del <details> che la home usa gia', ma con un elenco
   lungo: qui le voci sono 54, e senza un passo di riga in piu' sul
   telefono diventano illeggibili. */
.u-piu--les summary{ padding:6px 0 }
.u-piu--les[open] > ul{ margin-top:10px }
@media (max-width:560px){
  .u-piu--les{ border-top:1px solid var(--u-bordo); margin-top:0; padding-top:2px }
  /* il «+» va all'estremita' della riga come quello delle tre colonne, se no
     i quattro pulsanti del piede hanno due allineamenti diversi */
  .u-piu--les > summary{ display:block; position:relative; padding:11px 26px 11px 0 }
  [dir="rtl"] .u-piu--les > summary{ padding:11px 0 11px 26px }
  .u-piu--les > summary::after{
    position:absolute; inset-inline-end:2px; top:50%; transform:translateY(-50%);
    font-size:1.05rem; line-height:1; opacity:.75;
  }
  .u-piu--les[open] > ul > li > a{ display:inline-block; padding:7px 0 }
}

/* 343-esercizi-argomento ==================================================
   Dalla regola all'esercizio giusto. Sta in fondo a `section.gr-eser`, prima
   della riga del 264, quindi eredita da li' il nascondersi in stampa.
   Niente pulsante: sono link di testo, perche' il richiamo dell'app resta il
   richiamo principale della pagina e non deve avere concorrenza.
   Il bordo e' `inline-start`, cosi' in arabo si gira da solo. */
.gr-altri{ margin:26px 0 0; padding:14px 16px;
  border:1px solid var(--linea,#e6e1d8);
  border-inline-start:3px solid #6d4a7c;
  background:rgba(109,74,124,.05); }
.gr-altri .gr-altri-eti{
  margin:0 0 6px; font-size:.7rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#6d4a7c; }
.gr-altri .gr-altri-intro{ margin:0 0 10px; font-size:.95rem; line-height:1.55; }
.gr-altri ul{ margin:0; padding:0; list-style:none; }
.gr-altri li{ margin:0; }
.gr-altri li + li{ border-top:1px solid var(--linea,#e6e1d8); }
/* Senza `text-decoration:none` sono sei link sottolineati in fila, badge
   compreso, e l'elenco diventa una macchia: qui a separare le righe basta il
   filetto, e la sottolineatura torna al passaggio del mouse. */
.gr-altri li a{ display:flex; gap:10px; align-items:baseline;
  padding:8px 0; font-size:.97rem; line-height:1.45; color:inherit;
  text-decoration:none; }
.gr-altri li a:hover{ color:#6d4a7c;
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.18em; }
.gr-altri li a:hover .gr-altri-liv{ text-decoration:none; }
.gr-altri .gr-altri-liv{
  flex:none; min-width:2.1em; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; color:#6d4a7c; }
@media print{ .gr-altri{ display:none } }

/* ============================================================
   346 · La scala dei livelli: leggibile sul telefono, e accanto
   alla colonna LIVELLI sul desktop invece che sopra.
   La scala sta in 105 pagine: i 15 indici di lingua (che hanno
   .gr-scala-riep) e i 90 hub di livello (dove sta dentro .gr-qcer).
   Le regole del testo valgono per tutte, quelle di impaginazione
   solo per gli indici.
   ============================================================ */

/* La scala non si ferma piu' a 720px: riempie la colonna che ha.
   Solo negli indici: negli hub di livello il contenitore e' largo
   1080 e la scala diventerebbe enorme. */
.gr-max:has(> .gr-scala-riep) .gr-scala{ max-width:none }

/* Telefono e schermi stretti. A 375px la scala e' larga 335, cioe'
   rimpicciolita a 0,465: le didascalie, disegnate a 11,5 unita'
   dentro il viewBox, finivano rese a 5,4 pixel e non si leggevano.
   Si tolgono, e restano i gradini con la sigla portata a 14 pixel.
   Non si perde niente: quelle stesse parole sono i titoli di
   sezione subito sotto ("A1 · Le fondamenta").
   La soglia e' 760 e non 640 perche' e' li' che la scala arriva a
   720 pixel, cioe' la sua misura naturale: sotto, le didascalie
   scendono sotto gli 11,5 pixel (a 700 sono 10,5, a 641 sono 9,6).
   Il margine negativo recupera la fascia che le didascalie
   lasciano vuota, perche' nel viewBox il loro spazio resta. */
@media (max-width:760px){
  .gr-scala text[font-size="11.5"]{ display:none }
  /* La fascia lasciata vuota e' 54 unita' su 720, cioe' il 7,5% della
     larghezza. In percentuale si accorcia da sola a ogni misura: un
     valore fisso andava bene a 375 e sbagliava di trenta pixel a 760. */
  .gr-scala{ margin-bottom:-7.5% }
}

/* La sigla del livello va ingrandita solo sotto i 480, dove a 19
   unita' scenderebbe sotto i 12 pixel (a 375 sono 8,8). Sopra non
   serve, e anzi un valore fisso qui cresceva troppo: a 700 pixel di
   schermo la sigla a 30 unita' veniva resa a 27,5. */
@media (max-width:480px){
  .gr-scala text[font-size="19"]{ font-size:26px }
}

/* Da 1000px: LIVELLI a sinistra e la scala accanto.
   Prima la scala stava sopra, larga 720 dentro un contenitore da
   1120, con 380 pixel di vuoto a destra.
   Sotto i 1000px si resta incolonnati: affiancare li' stringerebbe
   la scala a 530 e le didascalie tornerebbero a 8 pixel.
   Il :has() tiene fuori i 90 hub di livello, che .gr-scala-riep non
   ce l'hanno. In arabo la griglia si specchia da sola: LIVELLI
   finisce a destra, verificato. */
@media (min-width:1000px){
  .gr-max:has(> .gr-scala-riep){
    display:grid;
    grid-template-columns:220px minmax(0,830px);
    column-gap:30px;
    align-items:start; }
  .gr-max:has(> .gr-scala-riep) > .gr-briciole,
  .gr-max:has(> .gr-scala-riep) > .gr-testa{ grid-column:1 / -1 }
  /* display:contents scioglie la griglia interna di .gr-corpo, cosi'
     LIVELLI e la scala cadono nella stessa riga. La spaziatura che
     .gr-corpo dava (26 sopra, 40 sotto) va rimessa a mano. */
  .gr-max:has(> .gr-scala-riep) > .gr-corpo{ display:contents }
  .gr-max:has(> .gr-scala-riep) .gr-fianco{
    grid-column:1; grid-row:3; padding-top:14px }
  .gr-max:has(> .gr-scala-riep) > .gr-scala-riep{
    grid-column:2; grid-row:3; padding-top:20px }
  .gr-max:has(> .gr-scala-riep) > .gr-corpo > main{
    grid-column:2; grid-row:4; padding-bottom:40px }
}

/*stelle-colonna-v1*/
/* Le cinque stelle accanto al nome dell'app, nel piede. Disegnate, non
   scritte: il carattere ★ in giallo non passa il controllo di contrasto,
   e aria-hidden non lo esclude da quel controllo. */
.u-col__d > summary h2 .u-stelle{
  display:inline-block; vertical-align:middle;
  margin-inline-start:8px; position:relative; top:-1px;
}

/*badge-app-store-v1*/
/* Il distintivo ufficiale «Download on the App Store». E' artwork di Apple:
   non si ridisegna, non si inclina, non si anima, non si ricolora.
   Altezza minima 40px e spazio libero attorno pari a un quarto
   dell'altezza: sono le linee guida di Apple, non una scelta di stile. */
.u-appstore{ display:inline-flex; flex:0 0 auto;
             line-height:0; text-decoration:none; }
.u-appstore img{ height:40px; width:auto; display:block; }

/* ---- nella barra --------------------------------------------------------
   Il distintivo prende il posto del pulsante dell'app e la barra cresce per
   fargli lo spazio libero. I selettori lunghi non sono ridondanti:
   `#motore` dentro `:has()` porta la specificita' di un id, quindi
   `.u-bar:has(.u-appstore)` da solo perderebbe contro la regola che abbassa
   la barra a 46px. Niente margine automatico sul distintivo: `.u-menu` ha
   gia' `margin-left:auto` e spinge a destra quello che viene dopo, un
   secondo margine sposterebbe il menu. */
body:not(:has(#motore)) .u-bar:has(.u-appstore),
body:has(#motore) .u-bar:has(.u-appstore),
.u-bar:has(.u-appstore){ --u-h:60px; }
.u-bar__in > .u-cta--app{ display:none; }

@media (max-width:640px){
  /* «very limited layout space»: li' Apple ammette spazio libero a un
     decimo dell'altezza, 4px. 40 + 4 + 4 = 48. */
  body:not(:has(#motore)) .u-bar:has(.u-appstore),
  body:has(#motore) .u-bar:has(.u-appstore),
  .u-bar:has(.u-appstore){ --u-h:48px; }
}

/* ---- nel piede ----------------------------------------------------------
   Dentro il summary, sotto il titolo e le cinque stelle: cosi' resta
   visibile anche quando sul telefono la colonna e' chiusa. */
.u-col__d > summary > .u-appstore{ margin:2px 0 12px; }

@media (min-width:561px){
  /* qui il summary ha `pointer-events:none` per non far chiudere le
     colonne. Al distintivo il clic va ridato, se no e' un'immagine morta. */
  .u-col__d > summary > .u-appstore{ pointer-events:auto; }
}

@media (max-width:560px){
  /* il «+» del pieghevole e' ancorato a meta' del summary: col distintivo
     dentro, quella meta' cade sul distintivo invece che sul titolo. */
  .u-col__d > summary:has(> .u-appstore)::after{ top:19px; transform:none; }
  .u-col__d > summary > .u-appstore{ margin:10px 0 4px; }
}

/* nome-app-v1 -------------------------------------------------------------
   Il titolo nell'App Store cambia, il nome dell'app no: accanto alle stelle
   sta il nome da cercare. Eredita il colore dalla riga che lo contiene, cosi'
   funziona sia sul riquadro scuro sia sulle pagine chiare. */
.app-zoek{opacity:.92}
.app-zoek::before{content:"\00B7";margin-inline-end:6px;opacity:.55}
.app-zoek b{font-weight:700}

/* ---------- badge-partner-v1 -------------------------------------------
   La riga dei tre distintivi dei partner (Product Hunt, LaunchZone,
   ScrollLaunch) nel piede delle pagine dell'app.

   IL DIFETTO ERA UNA REGOLA SCRITTA PER IL TESTO. `.u-note > p` ha
   `max-width:88ch` per tenere leggibili i paragrafi. La riga dei
   distintivi e' un `<p>` anche lei, quindi ereditava quel limite: larga
   581px dentro un piede da 1100, e `justify-content:center` la centrava
   dentro quei 581. Risultato: tre pulsanti centrati nella meta' sinistra
   della pagina, che e' esattamente come si vedevano.

   Il `!important` non e' pigrizia: piu' avanti in questo stesso foglio
   c'e' gia' un blocco che spegne bordo e spaziatura con `!important`, e
   senza vincerlo il divisorio non comparirebbe.

   Il divisorio sotto lega i distintivi alla nota legale che segue: sopra
   c'e' gia' il bordo di `.u-note`, quindi i tre pulsanti diventano una
   fascia sua, invece di galleggiare fra due blocchi di testo. E' anche
   dove Apple vuole le righe di credito, «wherever you provide legal
   notification».

   L'altezza fissa sui link pareggia otticamente tre disegni di terzi che
   hanno proporzioni diverse (250x54, 154x54, 220x48). */
.u-note > p.u-badge{
  max-width:none !important;
  justify-content:center; align-items:center;
  gap:18px 30px;
  margin:2px 0 0 !important;
  padding:0 0 20px !important;
  border-top:0 !important;
  border-bottom:1px solid var(--u-bordo);
}
.u-note > p.u-badge a{ display:inline-flex; align-items:center; height:34px; }
.u-note > p.u-badge img{ height:30px; width:auto; display:block; }
.u-note > p.u-badge + .u-disc{ margin-top:20px !important; }

@media (max-width:560px){
  /* sul telefono vanno a capo: gap piu' stretto e disegni piu' piccoli,
     cosi' stanno in due righe invece di tre */
  .u-note > p.u-badge{ gap:14px 20px; padding-bottom:16px !important; }
  .u-note > p.u-badge a{ height:30px; }
  .u-note > p.u-badge img{ height:26px; }
}

/* fiducia-app-v1 ---------------------------------------------------------
   La riga di fiducia dei banner dell'app: «★★★★★ (7)» e sotto
   «150+ download». I numeri sono gli stessi di aggregateRating nel JSON-LD:
   Google mostra un voto solo se il lettore lo vede scritto in pagina.

   NIENTE COLORE PROPRIO e NIENTE OPACITA'. Questi banner stanno su fondo
   scuro (grammatica, esercizi, blog), su fondo chiaro (scuole) e nel piede,
   dove il colore cambia sezione per sezione: l'unica cosa che regge
   dappertutto e' ereditare. L'opacita' abbasserebbe il contrasto, e le
   stelle gialle #FFC400 il controllo lo passano gia' a fatica. La gerarchia
   la fa la dimensione, non il grigio. */
/* i contenitori delle stelle sono quasi tutti flex con nowrap: senza
   flex-wrap il «display:block» dei download non manda niente a capo, e le
   tre cose restano appiccicate su una riga sola. E' il difetto da cui
   siamo partiti, e si ripara qui una volta per tutte e sei le famiglie. */
.app-stelle,.ti-hero-stelle,.app-mini-stelle,.app-promo-stelle,
.u-abbo-stelle{ flex-wrap:wrap; }
.app-voto{
  margin-inline-start:4px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.app-scarichi{
  display:block; flex:0 0 100%; margin-top:3px; font-size:.9em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* «Cerca amo Italiano» sotto il pulsante, non sopra: serve a chi ha gia'
   deciso e sta per aprire l'App Store. Il punto separatore che ha
   .app-zoek qui non serve piu', perche' non e' piu' in coda a una riga. */
.app-zoek--sotto{ margin:8px 0 0; font-size:.9em; }
.app-zoek--sotto::before{ content:none; }

/* la fascia con il prezzo: le stelle e il conteggio restano in riga, i
   download vanno a capo. Senza flex-wrap il nowrap ereditato li spingeva
   fuori dalla scatola sullo stretto. */
.u-abbo-stelle{ white-space:normal; }
.u-abbo-stelle .app-scarichi{ margin-top:2px; }
.u-appcta .u-abbo .u-abbo-stelle{ white-space:normal; flex-wrap:wrap; }

/* nel piede la riga sta sotto il nome della colonna: il titolo e' gia'
   lungo in sedici lingue e le stelle sono un disegno, non testo */
.u-col__d > summary h2 .u-voto{
  margin-inline-start:6px; font-weight:600; font-variant-numeric:tabular-nums;
}
.u-col__d > summary h2 .u-scarichi{
  display:block; margin-top:3px;
  font-size:.72rem; font-weight:500; font-variant-numeric:tabular-nums;
}

/* le stelle vicine al pulsante: erano staccate di un blocco intero e il
   legame fra la prova e il gesto si perdeva */
.ex-app-promo .app-stelle,
.app-banner-testo .app-stelle,
.app-mini .app-mini-stelle,
.app-testo .app-promo-stelle{ margin:0 0 10px; }
.ti-hero-stelle{ margin-top:10px; }

/* ---------- fiducia-piede-v1 -------------------------------------------
   Nel piede, sotto il nome dell'app, ci sono «(7)» e «150+ downloads».
   Le classi `.u-voto` e `.u-scarichi` vengono da un altro copione e
   compaiono anche altrove (banner della grammatica, esercizi, blog), su
   fondi chiari e scuri: li' ereditano il colore apposta, e **il colore
   qui non si tocca**, se no si rompe quel calcolo.

   Quello che si tocca e' solo il carattere, e solo dentro il piede.
   Il problema: le due scritte stavano dentro l'<h2> della colonna, che
   nel piede e' maiuscoletto spaziato in neretto. Ereditandolo,
   «150+ DOWNLOADS» finiva su una riga sua a tutta colonna e si leggeva
   come un secondo titolo, in gara con «DE APP TI». Sono un dato, non
   un'intestazione: minuscolo, peso normale, niente spaziatura. */
.u-col__d > summary > h2 .u-voto,
.u-col__d > summary > h2 .u-scarichi{
  text-transform:none; letter-spacing:0; font-weight:400;
}
.u-col__d > summary > h2 .u-voto{ font-size:.8rem; }
.u-col__d > summary > h2 .u-scarichi{ font-size:.78rem; margin-top:1px; }

/* ---------- fiducia-resto-v1 -------------------------------------------
   «(7)» e «150+ download» negli ultimi quattro contenitori con le stelle.
   Il colore e' l'unica cosa che cambia da uno all'altro, e non e' un
   dettaglio: `.stelline` e' tutto oro #FFC93C, che su fondo chiaro sta
   sotto 2:1. Le due scritte nuove non devono ereditarlo. */
.stelline .app-voto,
.stelline .app-scarichi{ color:var(--u-testo,#1F2320); }

/* L'eroe della landing e' una riga flex: senza wrap la scritta dei
   download, che e' `flex:0 0 100%`, schiaccerebbe le stelle.
   L'ordine conta: in HTML il «(7)» viene dopo il <p> che dice «App
   Store», e senza `order` si leggeva «★★★★★ App Store (7)», dove il
   numero sembrava riferito al negozio invece che alle stelle. */
.hero-rating{ flex-wrap:wrap; gap:10px; }
.hero-rating .stars{ order:0; }
.hero-rating .app-voto{ order:1; margin-inline-start:0; }
.hero-rating p{ order:2; }
.hero-rating .app-scarichi{ order:3; width:100%; margin-top:2px; }

/* nella scheda della grammatica le stelle stanno in una colonna stretta:
   il numero resta sulla riga delle stelle, i download vanno sotto */
.gsa-stelle .app-voto{ font-weight:600; }
.gsa-stelle .app-scarichi{ font-size:12px; margin-top:1px; }

/* la striscia di Ciao tutti: distintivo, stelle e numeri su una riga
   sola, e a capo ordinato sul telefono */
/* gap 12 e non 8: lo spazio libero attorno al distintivo dev'essere
   almeno un quarto della sua altezza, cioe' 10px. */
.ti-proef{ flex-wrap:wrap; gap:12px; }
.ti-proef .app-scarichi{ margin-inline-start:0; }
.ti-proef .ti-badge{ display:inline-flex; line-height:0; flex:0 0 auto; }
.ti-proef .ti-badge img{ height:40px; width:auto; display:block; }

/* ---------- fiducia-banner-v1 ------------------------------------------
   Dentro la fascia dell'abbonamento le stelle, il numero e i download
   stanno in riga. `.app-scarichi` e' `flex:0 0 100%` perche' nei riquadri
   grandi deve andare a capo: qui quel 100% dentro un inline-flex faceva
   una riga staccata e il numero dei download galleggiava per conto suo. */
.u-abbo-stelle .app-scarichi{
  flex:0 1 auto; display:inline; width:auto; margin-top:0;
}

/* ---------- recensioni-carte-v1 ----------------------------------------
   Le recensioni scritte a mano erano paragrafi in colonne strette. Qui
   diventano carte: si vede che sono parole di qualcuno, non testo nostro.

   Colonne da 260 e non da 190: sotto i 250px una riga tiene sei o sette
   parole e la citazione si spezza in venti righe. Con 260 ne stanno tre
   su schermo largo, che e' anche il numero che si legge davvero. */
.rec-lato .rl-griglia{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.rec-lato .rl-uno{
  display:flex; flex-direction:column;
  background:rgba(0,0,0,.022);
  border:1px solid rgba(0,0,0,.07);
  padding:16px 18px 14px;
  height:100%;
}
/* l'ordine del racconto: stelle, citazione, chi e quando, e in fondo la
   verifica. In HTML «Vedi l'originale» sta in mezzo, fra la citazione e
   il nome: li' interrompe proprio dove il lettore sta decidendo. */
.rec-lato .rl-uno > .stars{ order:0; }
.rec-lato .rl-uno > p{ order:1; }
.rec-lato .rl-uno > .rl-chi{ order:2; }
.rec-lato .rl-uno > .review-orig{ order:3; }

.rec-lato .rl-uno > p{ margin:8px 0 0; font-size:14px; line-height:1.6; }
.rec-lato .rl-chi{
  margin-top:auto; padding-top:12px;
  font-size:13px; font-weight:700; opacity:1;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
}
.rec-lato .rl-quando{ font-weight:400; opacity:.6; font-size:12.5px; }
.rec-lato .review-orig{ margin-top:10px; font-size:12.5px; opacity:.65; }
.rec-lato .review-orig summary{ cursor:pointer; }

/* rec-app-v2 -------------------------------------------------------------
   Le tre recensioni dell'App Store, con la stessa forma delle recensioni
   delle lezioni (.rec-lato + .rl-uno): stessa griglia, stesso posto per il
   nome e la data, stesso bottone «vedi l'originale». Prima erano <figure>
   inventate li' per li' e si leggevano male.

   Il blocco sta fuori da .container perche' e' fratello delle <section>,
   quindi si ridà da solo la stessa larghezza. Colore ereditato, come tutto
   il resto: queste pagine hanno fondi chiari e scuri.

   La griglia parte da 250px e non da 190 come quella delle lezioni: qui le
   recensioni sono tre e una e' lunga il triplo delle altre, e in colonne
   strette diventava un filo di testo alto mezzo schermo. */
.rec-lato--app{
  width:min(92%,var(--container)); margin:0 auto; padding:8px 0 46px;
  border:0;
}
.rec-lato--app h3{ margin:0 0 3px; font-size:19px; font-weight:700; }
.rec-lato--app .rl-conta{ margin:0 0 22px; font-size:13px; }
.rec-lato--app .rl-conta [role="img"]{ letter-spacing:.05em; }
.rec-lato--app .rl-griglia{
  display:grid; gap:26px 30px; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.rec-lato--app .rl-uno{
  display:flex; flex-direction:column; border:0; padding:0; margin:0;
}
.rec-lato--app .rl-uno > .stars{ order:0; letter-spacing:.05em; line-height:1; }
.rec-lato--app .rl-uno > p{
  order:1; margin:9px 0 0; font-size:14.5px; line-height:1.62;
}
.rec-lato--app .rl-chi{
  order:2; margin-top:11px; font-size:12.5px; font-weight:600;
  display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline;
}
.rec-lato--app .rl-quando{ font-weight:400; font-size:12px; opacity:.88; }

/* il paese da cui arriva la recensione, accanto al nome. Piu' chiaro di
   una bandiera, che su schermo stretto e' un quadratino e per chi usa un
   lettore di schermo non e' niente. Grigio ma leggibile: .78 sul nero del
   nome da' circa 9 di contrasto, cioe' secondario all'occhio e comunque
   sopra la soglia. NON dice «App Store italiano»: le linee guida Apple
   vietano i descrittori sul nome, e il titolo del riquadro dice gia'
   «App Store». */
.rec-lato--app .rl-dove{ font-weight:400; font-size:12px; opacity:.78; }
.rec-lato--app .review-orig{ order:3; margin-top:12px; opacity:1; }

/* NIENTE OPACITA' IN QUESTO BLOCCO. Misurato sulla pagina: il grigio del
   testo su fondo crema da' 6,1 di contrasto, che va bene; lo stesso grigio
   al 70% ne da' 3,2 e non passa piu'. Il bottone «vedi l'originale» eredita
   dalle recensioni delle lezioni un `opacity:.62` che lo porta a 2,6: qui
   si annulla, perche' e' un comando e non una didascalia. Sulle 131 pagine
   delle recensioni delle lezioni resta com'e', che non e' roba di questo
   copione. */
.rec-lato--app .review-orig > summary{ opacity:1; font-size:12.5px; }
.rec-lato--app .review-orig > summary::after{ opacity:.7; }
.rec-lato--app .review-orig p{
  margin:10px 0 0; font-size:13.5px; line-height:1.55; opacity:1;
  border-left:2px solid rgba(128,128,128,.38); padding-left:12px;
}
[dir="rtl"] .rec-lato--app .review-orig p{
  border-left:0; border-right:2px solid rgba(128,128,128,.38);
  padding-left:0; padding-right:12px;
}
@media (max-width:700px){
  .rec-lato--app{ padding-bottom:34px; }
  .rec-lato--app .rl-griglia{ grid-template-columns:1fr; gap:22px; }
}

/* ---------- rec-banner-v1 ----------------------------------------------
   Una frase di una recensione vera dentro il banner dell'app, fra i
   numeri e il pulsante: e' l'ultima cosa letta prima di cliccare.

   I due span sono annidati apposta e non e' un vezzo: piu' su in questo
   foglio c'e' `.u-appcta span{display:block;margin-bottom:1rem}`, che
   prende tutti gli span dentro la card. Un `<b>` per il nome diventerebbe
   grande come il titolo del banner. */
.u-appcta .u-rec{
  margin:0 0 1rem !important;
  font-size:.92rem; line-height:1.5;
  color:var(--u-testo);
  border-inline-start:2px solid var(--u-bordo);
  padding-inline-start:12px;
}
.u-appcta .u-rec-chi{
  margin:2px 0 0 !important;
  font-size:.8rem; color:var(--u-tenue);
}
@media (max-width:640px){
  /* Sul telefono la griglia tiene 132px per le schermate e alla colonna
     del testo ne restano 193: la citazione ci finiva in otto righe
     strettissime, alta 173px. A tutta larghezza sono tre righe e 87px,
     e il banner si accorcia di 85.

     Il selettore e' `> span.u-rec` e non `.u-rec` perche' piu' su c'e'
     gia' `.u-appcta > span:not(.u-scatti){grid-column:1}`, che ha
     specificita' maggiore e vincerebbe. */
  .u-appcta > span.u-rec{ grid-column:1 / -1; }
}