/* GeoFix AR (/ar, /en/ar) — componenti della sola pagina AR, caricati dopo geofix.css.

   Nessuna regola su `a` nudi (la regola condivisa dei link resta in geofix.css) e nessuna
   modifica a .container, .hero o al design system: qui ci sono solo la gerarchia editoriale della
   pagina e gli slot degli screenshot reali (ArShots), che compaiono soltanto quando il file esiste.
   Senza screenshot ogni sezione resta a una colonna: le classi a due colonne (.hero-grid,
   .ar-split) le aggiunge la pagina solo quando c'è l'immagine. */

/* Fasi nella hero: tre ancore verso le sezioni, non una seconda navigazione. */
.ar-roles{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ar-roles a:where(:link,:visited){display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-size:14px;font-weight:780;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.ar-roles a:where(:link,:visited):where(:hover,:focus-visible){color:var(--text);border-color:rgba(20,184,166,.5)}

/* Capitoli Esplora / Naviga / Ritorna: ruolo, frase portante, testo. */
.ar-role{margin:0 0 14px;color:var(--teal);font-size:14px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.ar-statement{margin:0 0 20px;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.05em;font-weight:850}
.ar-statement-xl{font-size:clamp(38px,6.4vw,76px);max-width:15ch}
.ar-lead{margin:0 0 26px;max-width:680px;color:var(--muted);font-size:clamp(17px,1.6vw,20px);line-height:1.55}
.ar-copy .list{max-width:680px}
.ar-copy-wide{margin-bottom:38px}

/* Testo + screenshot verticale, solo quando lo screenshot c'è. */
.ar-split,.ar-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center}
@media(min-width:901px){.ar-split-reverse{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}.ar-split-reverse>.ar-media{order:-1}}
.ar-media{justify-self:center;width:100%;max-width:320px}
.ar-media .shot img,.ar-mode-media .shot img{border-radius:28px}

/* Naviga: due modalità, affiancate da 901 px; ciascuna porta il proprio screenshot. */
.ar-modes{align-items:stretch}
.ar-mode h3{font-size:22px}
.ar-mode-media{max-width:290px;margin:0 auto 22px}

/* Mappa ↔ AR: un passaggio breve, non una sezione di spiegazione. */
.ar-band{border-color:rgba(20,184,166,.28);background:linear-gradient(135deg,rgba(20,184,166,.12),rgba(255,255,255,.03))}
.ar-band h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:12px;max-width:24ch}
.ar-band p{margin:0;max-width:760px}

/* Ecosistema: le fasi come punti d'ingresso, non come sequenza (E3-B: nessuna freccia, il ciclo non è un
   percorso obbligatorio — AI/web/geofix-ecosystem.md §2.1). */
.ar-cycle-note{margin:0 0 12px;color:var(--teal);font-size:14px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.ar-cycle{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px;padding:0;list-style:none}
.ar-cycle li{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:780}

@media(max-width:900px){
    .ar-split,.ar-hero-grid{grid-template-columns:1fr;gap:32px}
    .ar-media{max-width:280px}
    .ar-mode-media{max-width:240px}
}
@media(max-width:560px){
    .ar-statement-xl{max-width:none}
    .ar-media{max-width:240px}
    .ar-media .shot img,.ar-mode-media .shot img{border-radius:20px}
}