/* Guida parte 2 · usa i token e gli elementi di ../assets/style.css */

.gd { flex: 1 0 auto; }
.segnaposto { background: repeating-linear-gradient(-45deg, rgba(242,208,107,.18) 0 8px, rgba(242,208,107,.08) 8px 16px); outline: 1px dashed rgba(181,96,60,.35); border-radius: 4px; }

/* barra in alto: esercizi fatti */
.gd-barra { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 20; background: var(--bosco-10); }
.gd-barra i { display: block; height: 100%; width: 0; background: var(--oliva); transition: width .4s ease; }

/* apertura */
.gd-hero { padding: 48px 0 40px; text-align: center; }
.gd-hero h1 { font-size: clamp(34px, 9vw, 56px); margin: 6px 0 16px; }
.gd-sotto { font-size: 18px; color: var(--bosco-70); max-width: 34em; margin: 0 auto 14px; }
.gd-durata { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--sans); color: var(--bosco-70); margin: 0 0 26px; }
.gd-durata svg { width: 18px; height: 18px; }
.gd-durata circle, .gd-durata path { fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-linecap: round; }
.gd-foto { position: relative; aspect-ratio: 16/10; border-radius: 20px; overflow: hidden; background: var(--salvia); display: flex; align-items: center; justify-content: center; box-shadow: 12px 12px 0 var(--argilla), var(--ombra); color: var(--bosco-70); font-size: 15px; }
.gd-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* sezioni */
.gd-sez { padding: 56px 0; }
.gd-sez h2 { font-size: clamp(30px, 7.6vw, 42px); margin: 0 0 18px; }
.gd-sez .kicker { color: var(--terracotta-scuro); }
.gd-bianco { background: #fff; box-shadow: 0 1px 0 var(--bosco-10), 0 -1px 0 var(--bosco-10); }
.gd-tinta { background: linear-gradient(120deg, rgba(221,227,207,.7), #F4EFE3 40%, rgba(221,227,207,.55) 70%, #F1EBDD); background-size: 260% 260%; animation: respira 18s ease-in-out infinite; }
.gd-nota { display: flex; align-items: flex-end; gap: 4px; margin: -6px 0 14px; }
.gd-nota .mano { font-size: 27px; }
.gd-nota .freccia { width: 36px; height: 30px; transform: rotate(14deg) translateY(8px); }

/* spunte */
.gd-check { display: grid; gap: 10px; }
.gd-voce { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; background: var(--bianco-caldo); border: 1.5px solid var(--bosco-10); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.gd-voce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gd-segno { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid rgba(46,56,38,.3); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.gd-segno svg { width: 14px; height: 14px; opacity: 0; }
.gd-segno path { fill: none; stroke: var(--bianco-caldo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gd-voce input:checked + .gd-segno { background: var(--oliva); border-color: var(--oliva); }
.gd-voce input:checked + .gd-segno svg { opacity: 1; }
.gd-voce input:focus-visible + .gd-segno { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.gd-voce:has(input:checked) { border-color: var(--oliva); background: #fff; }
.gd-voce-testo { font-size: 17px; line-height: 1.5; padding-top: 2px; }
.gd-lei { margin-top: 24px; padding: 20px 20px 8px; border-left: 4px solid var(--terracotta); background: var(--bianco-caldo); border-radius: 0 14px 14px 0; }
.gd-lei-kicker { font: 900 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta-scuro); margin: 0 0 10px; }

/* confronto */
.gd-tabella-wrap { overflow-x: auto; margin: 0 -4px 18px; padding: 4px; }
.gd-tabella { width: 100%; min-width: 480px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.gd-tabella th, .gd-tabella td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--bosco-10); vertical-align: top; }
.gd-tabella thead th { font: 900 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--bosco-50); }
.gd-tabella tbody th { font-weight: 700; }
.gd-ugc th, .gd-ugc td { background: #fff; font-weight: 700; color: var(--bosco); }
.gd-ugc th { border-left: 4px solid var(--terracotta); border-radius: 10px 0 0 10px; }
.gd-ugc td:last-child { border-radius: 0 10px 10px 0; }
.gd-chiusura { font: 700 19px/1.45 var(--sans); }

/* lezioni */
.gd-progresso { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.gd-progresso-linea { flex: 1; height: 6px; border-radius: 3px; background: var(--bosco-10); overflow: hidden; }
.gd-progresso-linea i { display: block; height: 100%; width: 0; background: var(--oliva); border-radius: 3px; transition: width .4s ease; }
#gdEsNum { font: 900 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bosco-50); white-space: nowrap; }
.gd-lezione { background: #fff; border-radius: 18px; padding: 26px 20px 22px; margin-bottom: 18px; box-shadow: 10px 10px 0 var(--argilla), var(--ombra); }
.gd-lezione-n { font: 900 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta-scuro); margin: 0 0 6px; }
.gd-lezione h3 { font-size: clamp(24px, 6vw, 30px); margin: 0 0 18px; }
.gd-parte { margin-bottom: 16px; }
.gd-etichetta { font: 900 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bosco-50); margin: 0 0 6px; }
.gd-parte p:not(.gd-etichetta) { margin: 0 0 8px; }
.gd-esercizio { margin: 20px 0 16px; padding: 16px; border-radius: 14px; background: rgba(242,208,107,.16); border: 1.5px dashed rgba(226,178,58,.6); }
.gd-esercizio .gd-etichetta { color: var(--bosco); }
.gd-esercizio .gd-voce { background: #fff; }
.gd-blocco { padding-top: 14px; border-top: 1px dashed rgba(46,56,38,.18); margin-bottom: 0; }

/* citazione */
.gd-citazione { margin: 22px 0 0; padding: 0 0 0 18px; border-left: 4px solid var(--burro); font: 700 20px/1.45 var(--sans); color: var(--bosco); }

/* strade */
.gd-strade { display: grid; gap: 16px; }
@media (min-width: 760px) { .gd-strade { grid-template-columns: 1fr 1fr; } }
.gd-strada { border: 1.5px solid var(--bosco-10); border-radius: 18px; padding: 22px 20px; background: var(--bianco-caldo); }
.gd-strada h3 { font-family: var(--sans); font-weight: 900; font-size: 18px; margin: 0 0 10px; }
.gd-strada-2 { background: #fff; border-color: var(--terracotta); box-shadow: 10px 10px 0 var(--argilla), var(--ombra); }
.gd-strada-2 .btn { margin-top: 10px; width: 100%; }

/* Intro come lettera di Noemi, mappa del gradino e indice (22/10) */
.gd-hero { text-align: left; }
.gd-hero .kicker, .gd-hero h1 { text-align: center; }
.gd-lettera { position: relative; background: #fff; border-radius: 18px; padding: 26px 22px 20px; margin: 8px 0 28px; box-shadow: 10px 10px 0 var(--salvia), var(--ombra); transform: rotate(-.6deg); }
.gd-lettera p { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.gd-firma { width: 110px; height: auto; margin-top: 4px; }
.gd-mappa { display: grid; gap: 22px; }
.gd-mini-scala { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; height: 170px; padding-top: 34px; }
.gd-mg { position: relative; height: var(--h); border-radius: 10px 10px 4px 4px; border: 1.5px dashed rgba(46,56,38,.2); padding: 8px 7px; display: flex; flex-direction: column; gap: 2px; }
.gd-mg b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; color: var(--bosco-50); }
.gd-mg span { font: 700 11px/1.25 var(--sans); color: var(--bosco-70); }
.gd-mg.attivo { border: 0; background: var(--terracotta); box-shadow: 0 10px 24px rgba(181,96,60,.25); animation: fluttua 2.4s ease-in-out infinite; }
.gd-mg.attivo b, .gd-mg.attivo span { color: var(--bianco-caldo); }
.gd-mg em { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-style: normal; font-size: 22px; white-space: nowrap; }
.gd-indice { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 16px; box-shadow: var(--ombra); }
.gd-indice li + li { border-top: 1px solid var(--bosco-10); }
.gd-indice a { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; padding: 13px 16px; text-decoration: none; }
.gd-indice .n { font-family: var(--serif); font-size: 22px; color: var(--terracotta); }
.gd-indice .t { font-weight: 700; }
.gd-indice a:hover .t { color: var(--terracotta-scuro); }
@media (min-width: 760px) { .gd-mappa { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .gd-mg.attivo { animation: none; } }
.gd-video { aspect-ratio: 9/16; max-width: 340px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--bosco); color: rgba(255,254,251,.8); display: flex; align-items: center; justify-content: center; font-size: 15px; text-align: center; padding: 20px; box-shadow: 10px 10px 0 var(--argilla), var(--ombra); }
.gd-video video { width: 100%; height: 100%; object-fit: cover; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }

/* =========================================================
   Alleggerimento (22/10): meno ombre, meno riquadri, più aria
   ========================================================= */
.gd-sez { padding: 64px 0; }
.gd-sez h2 { font-size: clamp(28px, 7vw, 38px); }
.gd-bianco { background: #fff; box-shadow: none; }
.gd-tinta { background: var(--bianco-caldo); animation: none; }

/* intro: testo libero con la firma, niente card */
.gd-lettera { background: none; box-shadow: none; transform: none; padding: 0; margin: 18px 0 34px; }
.gd-lettera p { font-size: 18px; }

/* scala + ritratto */
.gd-mappa { grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: end; }
.gd-mini-scala { height: 230px; padding-top: 30px; gap: 6px; }
.gd-mg { padding: 7px 6px; border-width: 1px; border-color: rgba(46,56,38,.16); }
.gd-mg b { font-size: 20px; }
.gd-mg span { font-size: 10.5px; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
.gd-mg.attivo { box-shadow: 0 8px 18px rgba(181,96,60,.2); }
.gd-mg em { top: -28px; font-size: 21px; }
.gd-ritratto { margin: 0; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: var(--salvia); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-size: 13px; color: var(--bosco-70); position: relative; }
.gd-ritratto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-ritratto figcaption { position: absolute; left: 10px; bottom: 10px; font-family: var(--mano); font-size: 26px; color: var(--bianco-caldo); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
@media (min-width: 760px) { .gd-mappa { grid-template-columns: 1.5fr 1fr; gap: 28px; } .gd-mg span { font-size: 12px; } }

/* spunte più leggere */
.gd-voce { background: none; border: 1px solid var(--bosco-10); padding: 12px 14px; }
.gd-voce:has(input:checked) { background: rgba(221,227,207,.25); }
.gd-segno { width: 24px; height: 24px; border-radius: 7px; border-width: 1.5px; }
.gd-lei { background: none; padding: 4px 0 0 18px; border-left-width: 3px; border-radius: 0; }

/* lezioni: niente card pesanti, separatori sottili */
.gd-lezione { background: none; box-shadow: none; border-radius: 0; padding: 26px 0 8px; margin: 0; border-top: 1px solid var(--bosco-10); }
.gd-lezione:first-of-type { border-top: 0; padding-top: 4px; }
.gd-esercizio { background: rgba(242,208,107,.12); border: 0; border-left: 3px solid var(--burro); border-radius: 0 12px 12px 0; }
.gd-esercizio .gd-voce { background: #fff; border-color: transparent; }
.gd-blocco { border-top: 0; padding-top: 0; }

/* strade e video più leggeri */
.gd-strada { background: none; }
.gd-strada-2 { box-shadow: none; border-width: 1.5px; }
.gd-video { box-shadow: none; }
.gd-tabella .gd-ugc th, .gd-tabella .gd-ugc td { background: rgba(221,227,207,.3); }

/* segnaposto più discreti */
.segnaposto { background: none; outline: 1px dashed rgba(181,96,60,.4); outline-offset: 2px; }
/* mobile: scala a tutta larghezza, foto sotto; desktop affiancate */
.gd-mappa { grid-template-columns: 1fr; gap: 22px; }
.gd-mg span { hyphens: none; overflow-wrap: normal; font-size: 11px; }
.gd-ritratto { width: 100%; max-width: 280px; margin: 0 auto; }
@media (min-width: 760px) { .gd-mappa { grid-template-columns: 1.5fr 1fr; gap: 28px; } .gd-ritratto { max-width: none; } .gd-mg span { font-size: 12px; } }

/* Sfondo più chiaro: niente grana, bianco caldo quasi bianco (mai bianco puro sul fondo) */
.grana { display: none; }
body { background: #FFFFFD; }
.gd-tinta { background: #FFFFFD; }
/* linea di lettura sempre visibile in alto */
.gd-barra { height: 5px; background: rgba(46,56,38,.08); }
.gd-barra i { background: var(--terracotta); transition: width .12s linear; border-radius: 0 3px 3px 0; }

/* "anche Rubina era qui": più grande, con la freccia verso la foto.
   Mobile: foto sopra la scala, freccia in su. Desktop: foto a sinistra, freccia a sinistra. */
.gd-ritratto { order: -1; max-width: 230px; }
.gd-mini-scala { height: 250px; padding-top: 52px; }
.gd-mg em { display: none; }
.gd-mg .gd-anche { display: flex; align-items: flex-end; gap: 2px; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); font-style: normal; white-space: nowrap; }
.gd-mg .gd-anche.pos0 { left: 0; transform: none; }
.gd-mg .gd-anche.pos2, .gd-mg .gd-anche.pos3 { left: auto; right: 0; transform: none; }
.gd-anche .mano { font-size: 30px; color: var(--terracotta); line-height: 1; order: 1; }
.gd-anche svg { flex: none; overflow: visible; }
.gd-anche path { fill: none; stroke: var(--terracotta); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.gd-anche .fr-su { width: 30px; height: 36px; order: 2; transform: translateY(-14px); }
.gd-anche .fr-sx { display: none; width: 46px; height: 26px; order: 0; }
@media (min-width: 760px) {
  .gd-mappa { grid-template-columns: 1fr 1.6fr; }
  .gd-ritratto { max-width: none; }
  .gd-anche .mano { font-size: 34px; }
  .gd-anche .fr-su { display: none; }
  .gd-anche .fr-sx { display: block; transform: translateY(-6px); }
  .gd-mg .gd-anche.pos1, .gd-mg .gd-anche.pos2, .gd-mg .gd-anche.pos3 { left: auto; right: 0; transform: none; }
  .gd-mg .gd-anche.pos0 { left: -10px; }
}
.gd-mg.attivo .gd-anche .mano { color: var(--terracotta); font: 400 30px/1 var(--mano); }
@media (min-width: 760px) { .gd-mg.attivo .gd-anche .mano { font-size: 34px; } }
/* etichetta fuori dai gradini: niente sovrapposizioni */
.gd-mg .gd-anche { display: none; }
.gd-mini-scala { padding-top: 6px; height: 200px; }
.gd-anche { display: flex; align-items: flex-end; gap: 4px; margin: 0 0 12px; position: static; transform: none; }
.gd-anche .mano { font: 400 30px/1 var(--mano); color: var(--terracotta); order: 1; }
.gd-anche .fr-su { display: block; width: 30px; height: 36px; order: 0; transform: scaleX(-1) translateY(-10px); }
.gd-anche .fr-sx { display: none; }
@media (min-width: 760px) {
  .gd-mappa { align-items: center; }
  .gd-anche .mano { font-size: 34px; }
  .gd-anche .fr-su { display: none; }
  .gd-anche .fr-sx { display: block; width: 46px; height: 26px; transform: translateY(-6px); }
}

/* Scala a sinistra, foto SEMPRE a destra (anche su telefono). La scritta sta sopra la colonna attiva,
   una freccia a mano la collega alla foto (22/10). */
.gd-mappa { position: relative; display: grid; grid-template-columns: 1fr 34%; gap: 14px; align-items: end; }
.gd-ritratto { order: 2; max-width: none; width: 100%; margin: 0; }
.gd-scala-box { position: relative; padding-top: 44px; }
.gd-anche { position: absolute; top: 0; left: 0; margin: 0; white-space: nowrap; }
.gd-anche .mano { font: 400 24px/1 var(--mano); color: var(--terracotta); }
.gd-mini-scala { height: 190px; padding-top: 0; gap: 5px; }
.gd-mg { padding: 6px 5px; }
.gd-mg span { display: none; }
.gd-mg.attivo span { display: block; font-size: 10px; }
.gd-freccia-foto { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.gd-freccia-foto path { fill: none; stroke: var(--terracotta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 760px) {
  .gd-mappa { grid-template-columns: 1.6fr 1fr; gap: 40px; }
  .gd-anche .mano { font-size: 32px; }
  .gd-scala-box { padding-top: 54px; }
  .gd-mini-scala { height: 230px; gap: 8px; }
  .gd-mg span { display: block; font-size: 12px; }
}
/* mobile: scritta su due righe, così sta sopra la sua colonna */
.gd-anche { white-space: normal; width: 104px; text-align: center; }
.gd-anche .mano { font-size: 23px; line-height: .95; }
.gd-scala-box { padding-top: 56px; }
@media (min-width: 760px) { .gd-anche { white-space: nowrap; width: auto; text-align: left; } .gd-scala-box { padding-top: 58px; } }
.gd-anche { width: 128px; }
@media (min-width: 760px) { .gd-anche { width: auto; } }

/* Revisione di Alessandro (22/10) */
/* nota stile iPhone, minimal */
.gd-nota-video { display: inline-block; margin: 2px 0 18px; padding: 10px 16px; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(46,56,38,.10); font: 400 15.5px/1.5 var(--sans); color: var(--bosco); transform: rotate(-1deg); }
.gd-lei { margin-top: 26px; }
.gd-intro-perche p { font-size: 17px; margin: 0 0 12px; }
/* tabella con spunte */
.gd-tabella { min-width: 560px; }
.gd-tabella thead th { font-size: 10.5px; line-height: 1.35; text-align: center; vertical-align: bottom; }
.gd-tabella thead th:first-child { text-align: left; }
.gd-tabella td { text-align: center; vertical-align: middle; }
.gd-si, .gd-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.gd-si { background: var(--oliva); }
.gd-si svg, .gd-no svg { width: 14px; height: 14px; }
.gd-si path { fill: none; stroke: var(--bianco-caldo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gd-no { background: rgba(46,56,38,.07); }
.gd-no path { fill: none; stroke: rgba(46,56,38,.45); stroke-width: 2.4; stroke-linecap: round; }
.gd-parte-s { font: 700 11px/1.2 var(--sans); color: var(--bosco-50); }
.gd-ugc th { color: var(--terracotta-scuro); }
.gd-chiusura p { font: 700 18px/1.5 var(--sans); margin: 0 0 10px; }
/* nota "Importante" sotto l'esercizio */
.gd-importante { margin: 12px 2px 0; font-size: 15.5px; line-height: 1.5; font-style: italic; color: var(--bosco); }
.gd-importante strong { font-style: normal; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; margin-right: 4px; color: var(--terracotta-scuro); }
/* tabella tutta nello schermo anche su telefono */
.gd-tabella { min-width: 0; table-layout: fixed; }
.gd-tabella th:first-child { width: 27%; }
.gd-tabella th, .gd-tabella td { padding: 10px 4px; }
.gd-tabella thead th { font-size: 9.5px; letter-spacing: .04em; hyphens: auto; }
.gd-tabella tbody th { font-size: 13.5px; line-height: 1.3; }
.gd-si, .gd-no { width: 24px; height: 24px; }
.gd-parte-s { font-size: 10px; }
@media (min-width: 640px) { .gd-tabella th, .gd-tabella td { padding: 13px 10px; } .gd-tabella thead th { font-size: 11px; letter-spacing: .08em; } .gd-tabella tbody th { font-size: 15px; } }
.gd-tabella thead th { hyphens: none; letter-spacing: .02em; font-size: 9px; }
@media (min-width: 640px) { .gd-tabella thead th { font-size: 11px; letter-spacing: .06em; } }

/* Apertura nuova (22/10): titolo grande, riga a mano, intro */
.gd-hero { padding-top: 56px; }
.gd-hero h1 { font-size: clamp(40px, 11vw, 68px); line-height: 1.02; margin: 0 0 8px; }
.gd-sotto-titolo { text-align: center; font-size: 30px; color: var(--terracotta); margin: 0 0 26px; transform: rotate(-1.5deg); }
.gd-lettera p { font-size: 18px; }

/* =========================================================
   v5 (22/10): specchio con risposte, come ti senti, metodo, ponti
   ========================================================= */
.gd-specchi { gap: 14px; }
.gd-specchio { border: 1px solid var(--bosco-10); border-radius: 14px; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.gd-specchio .gd-voce { border: 0; border-radius: 0; }
.gd-risposta { padding: 0 16px 14px 56px; opacity: .32; filter: saturate(.2); transition: opacity .45s ease, filter .45s ease; }
.gd-risposta p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.55; color: var(--bosco); }
.gd-rimando { font: 700 13px var(--sans); color: var(--terracotta-scuro); text-decoration: none; }
.gd-specchio.acceso { border-color: var(--oliva); box-shadow: 0 8px 22px rgba(95,107,71,.12); }
.gd-specchio.acceso .gd-risposta { opacity: 1; filter: none; }
.gd-specchio.acceso .gd-voce { background: rgba(221,227,207,.3); }
.gd-specchio.acceso .gd-risposta { background: rgba(221,227,207,.3); }

/* come ti senti */
.gd-sentimenti { display: grid; gap: 12px; margin: 6px 0 26px; }
.gd-sentimento { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--bosco-10); }
.gd-sentimento .n { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--terracotta); }
.gd-sentimento h3 { font: 700 18px/1.3 var(--sans); margin: 0 0 4px; }
.gd-sentimento p { margin: 0; font-size: 16px; color: var(--bosco-70); }
.gd-frasi-tit { font: 900 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bosco-50); margin: 0 0 10px; }
.gd-frasi-vere { display: grid; gap: 10px; margin-bottom: 18px; }
.gd-frasi-vere blockquote { margin: 0; padding: 12px 16px; background: #fff; border-radius: 4px 14px 14px 14px; box-shadow: 0 4px 14px rgba(46,56,38,.07); font: 400 italic 16px/1.5 var(--sans); color: var(--bosco); }
.gd-chiusura-sent { font: 700 17px/1.5 var(--sans); }

/* metodo */
.gd-focus-nota { font: 700 16px/1.5 var(--sans); color: var(--terracotta-scuro); margin: 4px 0 18px; }
.gd-metodo { display: grid; gap: 14px; }
.gd-step { border: 1px solid var(--bosco-10); border-radius: 16px; padding: 18px 18px 14px; background: #fff; opacity: .78; }
.gd-step.focus { opacity: 1; border-color: var(--terracotta); box-shadow: 0 8px 22px rgba(181,96,60,.10); }
.gd-step-testa { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.gd-step-testa .n { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--terracotta); }
.gd-step-testa h3 { font-size: 24px; margin: 0; }
.gd-step-focus { font-size: 22px; color: var(--terracotta); }
.gd-step-testo { font-size: 16px; color: var(--bosco-70); margin: 0 0 12px; }
.gd-step-domande { display: grid; gap: 8px; }
.gd-step .gd-voce { padding: 10px 12px; }
.gd-step .gd-voce-testo { font-size: 15px; }

/* lezioni: step di riferimento */
.gd-lezione-n span { color: var(--bosco-50); }

/* righe di passaggio */
.gd-ponte { margin: 34px 0 0; font-family: var(--mano); font-size: 27px; line-height: 1.15; color: var(--terracotta); text-align: right; }
.gd-ponte::after { content: " ↓"; font-family: var(--sans); font-size: 18px; }
/* risposte ancora più nascoste finché non si spunta: più trasparenti e leggermente sfocate */
.gd-risposta { opacity: .18; filter: blur(2.5px) saturate(.2); transition: opacity .5s ease, filter .5s ease; user-select: none; }
.gd-specchio.acceso .gd-risposta { opacity: 1; filter: none; user-select: auto; }
/* firma un po' più distanziata dal testo (Alessandro, 22/10) */
.gd-firma { margin-top: 22px; }

/* Foto della creator dentro l'intro, con nota a mano e freccia (22/10). Sotto resta solo la scala. */
.gd-presenta { position: relative; margin: 8px 0 26px; display: grid; justify-items: center; }
.gd-presenta-nota { display: flex; align-items: flex-end; gap: 4px; margin: 0 0 6px; max-width: 320px; align-self: start; justify-self: start; }
.gd-presenta-nota .mano { font-size: 27px; line-height: 1.05; }
.gd-presenta-nota .freccia { width: 44px; height: 38px; flex: none; transform: rotate(10deg) translateY(10px); }
.gd-presenta .gd-ritratto { width: 70%; max-width: 280px; aspect-ratio: 4/5; order: 0; background: var(--salvia); border-radius: 18px 18px 18px 18px; }
@media (min-width: 760px) { .gd-presenta { grid-template-columns: 1fr 260px; align-items: end; gap: 20px; } .gd-presenta-nota { justify-self: end; margin-bottom: 120px; } .gd-presenta .gd-ritratto { width: 100%; } }
.gd-mappa { grid-template-columns: 1fr; max-width: 520px; margin: 10px auto 0; }
.gd-freccia-foto { display: none; }
@media (min-width: 760px) { .gd-mappa { grid-template-columns: 1fr; } }
/* "anche {nome} era qui" sopra la scala: tolto (Alessandro, 22/10) */
.gd-anche { display: none !important; }
.gd-scala-box { padding-top: 12px; }
@media (min-width: 760px) { .gd-scala-box { padding-top: 12px; } }
/* scala tolta del tutto dalla guida (Alessandro, 22/10) */
.gd-mappa { display: none !important; }

/* icone dei 4 step (22/10) */
.gd-step-testa { align-items: center; }
.gd-step-testa .gd-icona { width: 52px; height: 52px; flex: none; margin-right: 2px; }
.gd-step:not(.focus) .gd-icona { filter: saturate(.6); }
.gd-icona-mini { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
.gd-icona-mini { width: 34px; height: 34px; vertical-align: middle; margin: -6px 8px -4px 0; }
.gd-lezione-n { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; } .gd-lezione-n .gd-icona-mini { display: inline-block; margin: 0 10px 0 0; } .gd-lezione-n span { margin-left: .4em; }