/* =========================================================
   Guida IA – riquadro introduttivo (stile Ittica360)
   ========================================================= */
.gia-box{
  --g-ink:#0b1a24;--g-ink2:#12293a;--g-sea:#1d4a5c;--g-teal:#0b666b;--g-aqua:#4fb7b3;
  --g-gold:#d9a548;--g-gold2:#b8862e;--g-sand:#f3e6c8;--g-text:#1c2b35;--g-muted:#5b6b76;
  --g-line:rgba(11,26,36,.12);
  --g-f:var(--t-f,"Instrument Sans","Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif);
  --g-fs:var(--t-fs,"Newsreader",Georgia,"Times New Roman",serif);
  position:relative;margin:0 0 2em;padding:20px 22px 18px;border-radius:16px;
  background:
    radial-gradient(520px 160px at 0% 0%,rgba(79,183,179,.14),transparent 70%),
    radial-gradient(420px 160px at 100% 0%,rgba(243,230,200,.55),transparent 70%),
    #fff;
  border:1px solid var(--g-line);
  box-shadow:0 1px 2px rgba(11,26,36,.05),0 14px 34px -22px rgba(11,26,36,.45);
  font-family:var(--g-f);color:var(--g-text);line-height:1.55;
  animation:giaIn .6s cubic-bezier(.2,.7,.2,1) both;
}
.gia-box::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--g-aqua),var(--g-gold) 60%,transparent)}
.gia-box *{box-sizing:border-box}
@keyframes giaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.gia-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.gia-kicker{font:700 12px/1 var(--g-f);letter-spacing:.14em;text-transform:uppercase;color:var(--g-gold2)}
.gia-stella{color:var(--g-gold);margin-right:2px}

.gia-corpo{display:flex;gap:16px;align-items:flex-start}
.gia-testo{flex:1;min-width:0}

/* ---- Play ---- */
.gia-box .gia-play{position:relative;flex:none;width:52px;height:52px;border-radius:50%;border:0;padding:0;margin:0;cursor:pointer;
  display:grid;place-items:center;color:var(--g-gold);
  background:radial-gradient(circle at 30% 25%,#1b3a50,var(--g-ink) 70%);
  box-shadow:0 8px 20px -10px rgba(11,26,36,.9),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .15s ease,box-shadow .15s ease}
.gia-box .gia-play:hover{transform:scale(1.06);box-shadow:0 10px 24px -10px rgba(11,26,36,1),0 0 0 4px rgba(217,165,72,.18)}
.gia-play svg{width:22px;height:22px;fill:currentColor}
.gia-play .gia-i-play{margin-left:3px}
.gia-play .gia-i-pausa,.gia-box.gia-suona .gia-play .gia-i-play{display:none}
.gia-box.gia-suona .gia-play .gia-i-pausa{display:block}
.gia-play .gia-anello{position:absolute;inset:0;width:52px;height:52px;transform:rotate(-90deg);pointer-events:none}
.gia-play .gia-anello circle{fill:none;stroke:var(--g-gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:138.2;stroke-dashoffset:138.2;transition:stroke-dashoffset .25s linear}
.gia-box.gia-carica .gia-play{animation:giaPulsa 1.2s ease-in-out infinite}
@keyframes giaPulsa{50%{box-shadow:0 0 0 7px rgba(217,165,72,.22)}}

/* ---- Testo ---- */
.gia-box .gia-intro{margin:2px 0 6px;font:400 19px/1.5 var(--g-fs);color:var(--g-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gia-box.gia-aperta .gia-intro{-webkit-line-clamp:unset;display:block}

.gia-dettagli{padding-top:6px;animation:giaIn .35s ease both}
.gia-box .gia-dettagli h4{margin:14px 0 8px;font:700 12px/1.2 var(--g-f);letter-spacing:.12em;text-transform:uppercase;color:var(--g-teal)}
.gia-box .gia-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.gia-box .gia-lista li{position:relative;margin:0;padding-left:22px;font-size:15.5px;color:var(--g-text)}
.gia-box .gia-lista li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--g-aqua),var(--g-teal))}
.gia-box .gia-consigli{counter-reset:gia}
.gia-box .gia-consigli li{counter-increment:gia;padding-left:30px}
.gia-box .gia-consigli li::before{content:counter(gia);left:0;top:.1em;width:20px;height:20px;display:grid;place-items:center;
  font:700 11px/1 var(--g-f);color:var(--g-ink);background:linear-gradient(135deg,#e8bd66,var(--g-gold));border-radius:50%}

.gia-box .gia-continua{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;padding:4px 0;border:0;background:none;cursor:pointer;
  font:600 14.5px/1.2 var(--g-f);color:var(--g-sea);text-decoration:none;box-shadow:none}
.gia-box .gia-continua:hover{color:var(--g-gold2);background:none}
.gia-c-chiudi,.gia-box.gia-aperta .gia-c-apri{display:none}
.gia-box.gia-aperta .gia-c-chiudi{display:inline}
.gia-freccia{width:7px;height:7px;border-right:2px solid var(--g-gold);border-bottom:2px solid var(--g-gold);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.gia-box.gia-aperta .gia-freccia{transform:rotate(-135deg) translateY(-1px)}

/* ---- Strumenti per chi gestisce il sito ---- */
.gia-box .gia-rigenera{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(11,26,36,.18);background:#fff;color:var(--g-ink);font:600 13px/1 var(--g-f);box-shadow:none}
.gia-box .gia-rigenera:hover{border-color:var(--g-gold);color:var(--g-gold2);background:#fff}
.gia-rigenera svg{width:15px;height:15px;fill:currentColor}
.gia-box.gia-lavora .gia-rigenera svg{animation:giaGira 1s linear infinite}
.gia-box.gia-lavora .gia-rigenera{pointer-events:none;opacity:.75}
@keyframes giaGira{to{transform:rotate(360deg)}}
.gia-box .gia-nota-editor{margin:10px 0 0;font-size:12.5px;color:var(--g-muted)}
.gia-box .gia-stato-editor{padding-top:8px;border-top:1px dashed var(--g-line)}
.gia-box .gia-errore{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:#fbe4e2;color:#b3261e;font-size:13.5px}
.gia-vuota{background:#fbfaf6}

.gia-box :focus-visible{outline:3px solid var(--g-gold);outline-offset:2px;border-radius:8px}

@media (max-width:560px){
  .gia-box{padding:16px 16px 14px}
  .gia-box::before{left:16px;right:16px}
  .gia-corpo{gap:12px}
  .gia-box .gia-play{width:46px;height:46px}
  .gia-play .gia-anello{width:46px;height:46px}
  .gia-box .gia-intro{font-size:17.5px}
  .gia-rigenera span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gia-box,.gia-dettagli{animation:none}
  .gia-box.gia-carica .gia-play,.gia-box.gia-lavora .gia-rigenera svg{animation:none}
}
@media print{.gia-play,.gia-rigenera,.gia-continua,.gia-stato-editor{display:none!important}
  .gia-dettagli{display:block!important}.gia-box .gia-intro{-webkit-line-clamp:unset;display:block}}