/* ==========================================================================
   GUIDA APP — slide "titolo + testo breve + immagine" tratte dalla guida
   operativa scaricabile (Guida app Be.go produttori, PDF). Stesso linguaggio
   visivo della sezione #tutorial (palco chiaro, timeline a capitoli,
   play/pausa), applicato a schermate reali alternate a testo invece che al
   mockup animato del telefono.
   File isolato: si tolgono i due <link>/<script> e la <section id="guida-app">
   e non resta nulla in giro.
   ========================================================================== */

.gd{
  padding:88px 0;
  background:var(--paper-warm);
  border-bottom:1px solid var(--line);
}
.gd .section-head{max-width:var(--wrap);margin:0 auto 34px;padding:0 var(--gut)}
.gd-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.gd-deck{position:relative}

/* ---- slide: immagine reale + testo, alternate a specchio -------------- */
.gd-slides{position:relative;min-height:400px}
.gd-slide{
  position:absolute;inset:0;display:flex;align-items:center;gap:clamp(28px,4vw,64px);
  opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.gd-slide.on{opacity:1;pointer-events:auto;transform:none}
.gd-slide:nth-child(even){flex-direction:row-reverse}

.gd-media{flex:0 0 auto;width:min(280px,38%)}
.gd-media img{
  display:block;width:100%;height:auto;border:1px solid var(--line);
  background:#fff;box-shadow:0 30px 64px rgba(11,27,42,.16);
}

.gd-copy{flex:1;min-width:0}
.gd-n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-dark);margin-bottom:12px}
.gd-n i{font-style:normal;color:var(--ink-faint)}
.gd-copy h3{margin:0 0 10px;font-size:clamp(20px,2.4vw,30px);font-weight:500;
  letter-spacing:-.03em;line-height:1.12;color:var(--ink);max-width:22ch}
.gd-copy p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-mute);max-width:44ch}
.gd-copy p strong{color:var(--ink);font-weight:600}

/* ---- barra comandi + timeline a capitoli: stesso linguaggio di #tutorial */
.gd-ctrl{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.gd-btn-c{width:40px;height:40px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:.2s}
.gd-btn-c:hover{border-color:var(--green);color:var(--green-dark)}
.gd-btn-c svg{width:14px;height:14px;fill:currentColor}
.gd-play .ic-pause{display:none}
.gd.is-playing .gd-play .ic-play{display:none}
.gd.is-playing .gd-play .ic-pause{display:block}

.gd-track{display:flex;gap:5px;flex:1;min-width:220px}
.gd-seg{position:relative;flex:1;height:4px;padding:0;border:0;background:#dbe4de;cursor:pointer;overflow:hidden}
.gd-seg:hover{background:var(--green-soft)}
.gd-seg i{position:absolute;inset:0;width:0;background:var(--green-dark);display:block}
.gd-seg.done i{width:100%}
.gd-seg.on i{animation:gd-fill var(--dur,4.2s) linear forwards}
@keyframes gd-fill{from{width:0}to{width:100%}}
.gd-time{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none;letter-spacing:.06em}

.gd.is-paused .gd-seg i{animation-play-state:paused}

.gd-note{margin-top:12px;font-size:12.5px;color:var(--ink-faint);line-height:1.5}

/* ---- responsive: sotto i 820px le slide si impilano, niente palco fisso */
@media(max-width:820px){
  .gd-slides{min-height:0}
  .gd-slide{position:relative;display:none;flex-direction:column;align-items:flex-start;
    gap:20px;opacity:1;transform:none;transition:none}
  .gd-slide:nth-child(even){flex-direction:column}
  .gd-slide.on{display:flex}
  .gd-media{width:100%;max-width:340px}
  .gd-copy h3,.gd-copy p{max-width:none}
}
@media(max-width:620px){
  .gd{padding:60px 0}
  .gd-copy h3{font-size:22px}
  .gd-track{order:3;flex-basis:100%}
}

/* chi ha chiesto meno animazioni: niente autoplay, niente transizioni */
@media(prefers-reduced-motion:reduce){
  .gd-slide{transition:none}
  .gd-seg.on i{width:100%}
}