/*stelle-v1*/:root{--stelle-giallo:#FFC400}
/* ==========================================================================
   app-banner.css — riquadri dell'app ti per /esercizi/ e /blog/
   usa i token già presenti (--primary, --gold, --radius, --surface, --border)
   ========================================================================== */

/* ---------- schermate a ventaglio (comuni) ------------------------------- */
.app-scatti{position:relative;flex:0 0 238px;width:238px;height:252px}
.app-scatti .app-scatto{position:absolute;top:50%;width:116px;display:block;margin:0}
.app-scatti .app-scatto img{
  width:100%;height:auto;display:block;border-radius:0;
  box-shadow:none;
}
.app-scatti .app-scatto:nth-of-type(1){left:0;transform:translateY(-50%) rotate(-4.5deg) scale(.94);z-index:1}
.app-scatti .app-scatto:nth-of-type(2){left:56px;transform:translateY(-50%);z-index:3}
.app-scatti .app-scatto:nth-of-type(3){left:114px;transform:translateY(-50%) rotate(4.5deg) scale(.94);z-index:2}

/* ---------- riga delle stelle ------------------------------------------- */
.app-stelle{display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font:600 .78rem/1 inherit;letter-spacing:.4px}
.app-stelle .app-stelle-ico{color:var(--stelle-giallo);font-size:.95rem;letter-spacing:1px}
.app-solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- esercizi: riquadro scuro già esistente ----------------------- */
.ex-app-promo--scatti{align-items:center;gap:28px}
.ex-app-promo--scatti .app-stelle{color:var(--stelle-giallo)}

/* ---------- blog: riquadro dentro l'articolo ----------------------------- */
.app-banner{
  margin:34px 0 0;padding:26px 30px;
  background:linear-gradient(160deg,#31394d 0%,#3f4a66 100%);
  border-radius:0;color:#fff;
  display:flex;align-items:center;gap:28px;
  box-shadow:0 12px 35px rgba(49,57,77,.18);
}
.app-banner-testo{flex:1;min-width:0}
.app-banner .app-stelle{color:var(--stelle-giallo)}
.app-banner h3{color:#fff;font-size:1.18rem;margin:0 0 7px;line-height:1.3}
.app-banner p{color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.55;margin:0 0 16px}
.app-banner strong{color:var(--gold,#f5b400)}
.app-banner .app-banner-cta{
  display:inline-flex;padding:13px 26px;border-radius:0;
  background:var(--gold,#f5b400);color:#31394d;font-weight:700;
  text-decoration:none;transition:.35s ease;
}
.app-banner .app-banner-cta:hover{transform:none;box-shadow:0 12px 28px rgba(245,180,0,.35)}

/* ---------- schermi stretti ---------------------------------------------- */
@media(max-width:720px){
  .app-banner,.ex-app-promo--scatti{flex-direction:column;text-align:center;gap:18px}
  .app-scatti{flex-basis:auto;width:212px;height:224px;margin:0 auto}
  .app-scatti .app-scatto{width:102px}
  .app-scatti .app-scatto:nth-of-type(2){left:50px}
  .app-scatti .app-scatto:nth-of-type(3){left:102px}
  .app-stelle{justify-content:center}
  .app-banner{padding:22px}
}

/* ---------- tutto il riquadro porta all'app ------------------------------
   prima si poteva cliccare solo il bottone: il link si allarga con un
   velo su tutto il riquadro. Un solo <a>, quindi niente link annidati. */
.ex-app-promo{position:relative}
/* le tre schermate sono sovrapposte con z-index 1-3: senza questo il velo
   resterebbe sotto e proprio la parte piu' vistosa non risponderebbe */
.ex-app-promo .ex-app-btn::after{content:"";position:absolute;inset:0;z-index:4}
.ex-app-promo:hover .ex-app-btn{filter:brightness(1.06)}

/* ---------- 262 · il ventaglio si misura da solo -------------------------
   La scatola fissa 238x252 di qui sopra veniva dai primi articoli: con
   immagini piu' larghe le foto uscivano dai bordi e non restavano
   centrate. Questa e' la stessa fila flex gia' collaudata nelle pagine di
   grammatica: nessuna misura fissa, niente overflow, e regge anche in RTL.
   Vale solo per .app-banner: gli esercizi usano .ex-app-promo--scatti e
   non vengono toccati. */
.app-banner .app-scatti{position:static;display:flex;
  justify-content:center;align-items:center;flex:0 0 auto;
  width:auto;height:auto;gap:0;margin:0 auto}
.app-banner .app-scatti .app-scatto{position:relative;top:auto;left:auto;
  width:auto;margin:0}
.app-banner .app-scatti .app-scatto img{width:116px;max-width:26vw;
  height:auto;display:block}
.app-banner .app-scatti .app-scatto:nth-of-type(1){z-index:1;
  transform:rotate(-4.5deg) scale(.94);margin-inline-end:-12px}
.app-banner .app-scatti .app-scatto:nth-of-type(2){z-index:3;transform:none}
.app-banner .app-scatti .app-scatto:nth-of-type(3){z-index:2;
  transform:rotate(4.5deg) scale(.94);margin-inline-start:-12px}