:root{--bg:#071414;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.11);--text:#f3fbfb;--muted:#b8cccc;--teal:#14b8a6;--orange:#f59e0b;--max:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 8% 0%,rgba(20,184,166,.24),transparent 33%),linear-gradient(180deg,#061111 0%,#071414 44%,#040909 100%);line-height:1.55}
.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(18px);background:rgba(7,20,20,.78);border-bottom:1px solid var(--line)}.nav-inner{min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:850;color:var(--text)}.nav-links{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--muted)}.nav-links a{color:var(--muted);text-decoration:none}.btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:0 20px;border-radius:999px;text-decoration:none;font-weight:780;white-space:nowrap}.btn-primary{background:var(--teal);color:#031111}.btn-secondary{background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--text)}.lang{border:1px solid var(--line);border-radius:999px;padding:7px 10px}
.hero{padding:88px 0 66px}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(20,184,166,.28);background:rgba(20,184,166,.14);color:#c8fff7;font-size:14px;font-weight:760;margin-bottom:22px}h1{font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.065em;margin:0 0 24px}.hero-subtitle{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:700px;margin:0 0 32px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}.microcopy{color:#7f9999;font-size:14px}
section{padding:72px 0;border-top:1px solid rgba(255,255,255,.06)}.section-head{max-width:780px;margin-bottom:34px}h2{font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.045em;margin:0 0 16px}.section-head p,.card p,.cta-band p,details p{color:var(--muted)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{background:linear-gradient(180deg,var(--card),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:26px;padding:26px}.icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(20,184,166,.14);color:var(--teal);margin-bottom:16px;font-size:21px}.card h3{margin:0 0 8px;font-size:21px}.check-row{display:flex;gap:16px;align-items:flex-start}.check{width:26px;height:26px;min-width:26px;margin-top:2px;border-radius:999px;display:grid;place-items:center;background:var(--teal);color:#031111;font-size:14px;font-weight:900}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}.panel{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:30px;padding:30px}.list{display:grid;gap:16px;margin:0;padding:0;list-style:none}.list li{display:flex;gap:12px;color:var(--muted)}.list strong{color:var(--text)}.warning{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08)}.faq{display:grid;gap:14px}details{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;padding:18px 20px}summary{cursor:pointer;font-weight:820}.cta-band{text-align:center;padding:70px 28px;border-radius:36px;background:radial-gradient(circle at 30% 0%,rgba(20,184,166,.26),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid var(--line)}footer{padding:40px 0;color:#7f9999;font-size:14px;border-top:1px solid var(--line)}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand:visited{color:var(--text)}.nav-links a:visited{color:var(--muted)}.btn-primary:visited{color:#031111}.btn-secondary:visited{color:var(--text)}footer a{color:var(--muted);text-decoration:none}footer a:visited{color:var(--muted)}footer a:hover{color:var(--text)}
.brand-logo{width:38px;height:38px;border-radius:13px;object-fit:cover;display:block}
.nav-links a:hover{color:var(--text)}
.nav-hamburger{display:none;background:transparent;border:none;padding:8px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:8px;min-width:40px;min-height:40px}
.nav-hamburger:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav-hamburger-bar{display:block;width:22px;height:2px;background:var(--text);border-radius:1px;transition:transform .22s,opacity .22s}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---- Home: immagini e sezioni con immagine ------------------------------------------------
   Le immagini sono slot (Gui/Services/HomeShots.cs): compaiono solo se il file esiste. Sono scene 16:9;
   width/height nel markup danno le proporzioni prima del caricamento (niente spostamenti) e l'immagine
   non viene mai ritagliata: height:auto, nessun object-fit. Senza file la sezione resta a una colonna. */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.45);background:#030808}
/* «Quando ti serve davvero»: card 2x2 a sinistra, Madrid a destra. L'altezza la decide la griglia delle
   card; l'immagine la riempie (object-fit:cover, inquadratura centrata sul telefono), cosi' le due colonne
   finiscono insieme. Sotto i 1100 px le card si stringerebbero troppo: tutto torna in verticale e
   l'immagine riprende le sue proporzioni 16:9, senza ritaglio. */
.usecase-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px;align-items:stretch}
.usecase-media{display:flex;flex-direction:column;gap:14px}
.usecase-media .shot{position:relative;flex:1;min-height:280px}
.usecase-media .shot img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:36% 50%}
.usecase-note{margin:0;color:var(--muted);font-size:15px}.usecase-note strong{color:var(--text)}
@media(max-width:1100px){.usecase-layout{grid-template-columns:1fr;gap:28px}.usecase-media{max-width:760px}.usecase-media .shot{flex:none;min-height:0}.usecase-media .shot img{position:static;height:auto}}
.feature-split{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
/* Alternanza su desktop: l'immagine passa a sinistra. Su mobile l'ordine resta quello del markup. */
@media(min-width:901px){.feature-split-reverse{grid-template-columns:1.1fr 1fr}.feature-split-reverse>.shot{order:-1}}
.feature-split .section-head{margin-bottom:26px}
/* GeoFix Safety (#safety): testo sopra, in due colonne su desktop; sotto, tre screenshot reali verticali
   affiancati e interi (waypoint → report → mappa, il report al centro e più grande). Le larghezze
   sono quelle dichiarate nei sizes degli slot in HomeShots.cs: cambiarle insieme. Sotto i 600 px
   restano report e mappa; il waypoint, lazy, non viene nemmeno scaricato. */
.safety-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end}
.safety-intro .section-head{margin-bottom:0}
.safety-shots{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:48px}
.safety-shot{flex:0 1 290px;min-width:0}.safety-shot-waypoint{flex-basis:240px}.safety-shot-report{flex-basis:320px}
.safety-shots .shot img{border-radius:28px}
@media(max-width:900px){.safety-intro{grid-template-columns:1fr;gap:24px}.safety-shots{gap:14px;margin-top:36px}.safety-shots .shot img{border-radius:18px}}
@media(max-width:600px){.safety-shot-waypoint{display:none}.safety-shots{gap:10px}.safety-shots .shot img{border-radius:14px}}
.section-note{margin:24px 0 0;color:var(--muted);font-size:14px}
.section-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.tool-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px}
.tool-card .icon{font-size:24px;margin-bottom:10px}.tool-card h2{margin:0 0 8px}.tool-card p{margin:0;max-width:520px}.tool-card .btn{flex-shrink:0}
@media(max-width:900px){.hero-grid,.split,.grid-2,.grid-3,.feature-split{grid-template-columns:1fr}.feature-split{gap:28px}.nav-hamburger{display:flex}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:12px 20px 20px;gap:0;background:rgba(7,20,20,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:99}.nav-links.nav-open{display:flex}.nav-links a:not(.btn){padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;display:block;min-height:44px;border-radius:0;border-left:none;border-right:none;border-top:none}.nav-links .lang{border:none;border-bottom:1px solid rgba(255,255,255,.06);padding:14px 4px;border-radius:0}.nav-links .btn{margin-top:12px;width:100%;justify-content:center;border-radius:999px}}@media(max-width:560px){.container{width:min(100% - 28px,var(--max))}.btn{width:100%}.hero-actions{align-items:stretch}.card,.panel{padding:22px}section{padding:54px 0}}
.cta-mid{text-align:center}.privacy-data{border-color:rgba(20,184,166,.22);background:rgba(20,184,166,.07)}
/* Informativa AI Act art. 50 nel footer condiviso: discreta ma leggibile (--muted su --bg supera abbondantemente il 4.5:1 richiesto), senza bordo proprio per non raddoppiare quello del footer, e fluida su mobile grazie a .container. */
.ai-notice{padding:0 0 34px;color:var(--muted);font-size:13px;line-height:1.65}.ai-notice p{margin:0;max-width:900px}.ai-notice a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}.ai-notice a:hover,.ai-notice a:focus-visible{color:var(--text)}@media(max-width:640px){.ai-notice{padding-bottom:28px;font-size:12.5px}}
/* Focus da tastiera dei pulsanti: l'outline predefinito del browser è quasi nero e sul tema
   scuro del sito risulta poco distinguibile. Stesso trattamento già usato per .nav-hamburger. */
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---- Campi e form condivisi ------------------------------------------------------------------
   Classi nate con T-06 per sostituire gli stili inline ripetuti nelle pagine dell'area riservata.
   Quelle pagine sono state ritirate dallo STEP 5G, ma il blocco NON e' morto: l'editor delle
   fotografie (_ExperiencePhotoEditor) usa form-field, form-label, form-row, form-row-flat,
   form-alert e form-actions, ed e' incluso dal backoffice. Lo STEP 5H ha tolto le cinque rimaste
   senza alcun consumatore: form-narrow, -sm, -xs, form-stack e form-error. Il bordo dei campi usa
   --line come il resto del sito, al posto del vecchio #1f3a3a hardcoded; font:inherit evita che
   gli input adottino il font di sistema del browser. */
.form-row{margin:14px 0 0}
.form-row-flat{margin:0}
.form-label{display:block;margin-bottom:6px}
.form-field{width:100%;min-height:44px;padding:10px;border-radius:6px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit}
.form-field:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.form-alert{color:#f59e0b;margin:0 0 16px}
.form-actions{margin:18px 0 0}
.form-note{margin-top:16px}
.form-note-sm{margin-top:8px}
.form-note-lg{margin-top:20px}
.access-code{font-size:20px;letter-spacing:1px}
/* Honeypot: fuori dallo schermo e fuori dal focus, non `display:none` — deve restare compilabile
   dai bot per svolgere la sua funzione. */
.offscreen{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.form-alert-text{margin:0}
.form-note-block{margin:12px 0}
.form-row-loose{margin:16px 0 0}

/* ---- Assistenza pubblica su WhatsApp -------------------------------------------------------
   Canale pubblico del supporto. Numero, URL e messaggio precompilato vivono in
   Site:SupportWhatsApp, non qui: queste classi si occupano solo della resa.
   Le email transazionali (registrazione, verifica, codice, recupero, moderazione) continuano a
   partire via SMTP e non dipendono da nulla di questo blocco. */
a.support-whatsapp,a.support-whatsapp:visited{color:var(--teal);font-weight:820;text-decoration:none}
a.support-whatsapp:hover{text-decoration:underline}
a.support-whatsapp:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wa-head{display:flex;gap:12px;align-items:center}
.wa-icon{width:26px;height:26px;min-width:26px;color:var(--teal);display:block}
.wa-lead{margin:0 0 18px}
.wa-actions{margin:0 0 18px}
.wa-number{margin:0 0 22px;font-size:18px}
.wa-number strong{color:var(--text);font-weight:820}
.wa-hint{color:var(--muted);margin:0 0 12px}
.wa-note{color:var(--muted);margin:18px 0 0}
.wa-note-sm{color:var(--muted);margin:12px 0 0;font-size:13px}
.wa-note-link,.wa-note-link:visited{color:var(--muted)}

/* Nome dell'autore nel footer: stesso trattamento degli altri link del footer, con in più un
   focus da tastiera visibile sul tema scuro (l'outline predefinito del browser è quasi nero).
   La regola è mirata a questo link e non tocca gli altri. */
.footer-owner,.footer-owner:visited{color:var(--muted);text-decoration:none}
.footer-owner:hover{color:var(--text)}
.footer-owner:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;color:var(--text)}

/* ------------------------------------------------------------------ link testuali condivisi

   Regola proprietaria dello stile di <a> su tutte le pagine GeoFix — IT, EN, moderazione ed
   Experiences: ogni pagina con _GeoFixLayout carica questo foglio.

   Prima non esisteva alcuna regola generica su `a`: c'erano solo quelle mirate ai componenti
   (.brand, .nav-links a, .btn, footer a, .ai-notice a, .support-whatsapp, .footer-owner). Un
   link testuale senza classe — allora erano le microcopy dell'area riservata, ritirata dallo
   STEP 5G, oggi quelle del catalogo e delle schede — cadeva quindi sui colori predefiniti del
   browser: azzurro da nuovo e soprattutto viola #551A8B una volta visitato. Fuori tema e, sul
   fondo scuro, poco leggibile.

   :visited è dichiarato esplicitamente, con lo stesso colore di :link. È l'unico modo di
   impedire il viola: senza una dichiarazione propria il browser riapplica il suo, e il difetto
   ricompare appena il visitatore ha aperto una volta la pagina di destinazione.

   Perché :where(). Azzera la specificità: queste regole pesano quanto il solo selettore di
   tipo `a`, così qualunque regola con una classe le scavalca senza !important e senza dover
   ripetere :visited componente per componente. Anche hover e focus stanno dentro :where(), e non
   è pignoleria: `a:visited:hover` vale 0-1-1 e batterebbe `.btn-primary` (0-1-0), facendo cambiare
   colore ai pulsanti al passaggio del mouse. Con :where() vincono sempre i componenti.

   La sottolineatura resta: in mezzo a un paragrafo è il segnale che distingue il link dal testo,
   e il colore da solo non basta a chi non percepisce il contrasto cromatico. Hover e focus
   passano all'accento GeoFix già in uso (--teal su --bg supera il 4.5:1), e il focus da tastiera
   aggiunge l'outline, perché il solo cambio di colore non è un indicatore di focus sufficiente. */
a:where(:link,:visited){color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:where(:link,:visited):where(:hover,:focus-visible){color:var(--teal);text-decoration-color:currentColor}
a:where(:link,:visited):where(:focus-visible){outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

/* ---- catalogo pubblico dei percorsi (STEP 5E) ------------------------------------------------
   Griglia di card fotografiche per /percorsi e /en/routes. Le classi sono proprie e non riusano
   .card: una card del catalogo ha una fotografia a pieno bordo e una gerarchia diversa, e
   allargare .card l'avrebbe cambiata ovunque nel sito.

   Una sola ancora per card, il titolo, estesa a tutto il riquadro con uno pseudo-elemento. E' il
   modo di rendere cliccabile l'intera superficie senza che un lettore di schermo legga due o tre
   collegamenti identici per ogni percorso. Il focus da tastiera arriva sul titolo e l'anello lo
   disegna la regola condivisa dei link, che e' gia' verificata: qui si aggiunge solo il bordo
   acceso sulla card, come indizio in piu' e mai come unico indicatore.

   Il testo non dipende mai dalla fotografia: titolo, localita' e dati stanno nel markup, e una
   card senza apertura e' completa come le altre. */
.cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.cat-card{
    position:relative;display:flex;flex-direction:column;overflow:hidden;
    border:1px solid var(--line);border-radius:22px;
    background:linear-gradient(180deg,var(--card),rgba(255,255,255,.035));
    transition:border-color .18s,transform .18s;
}
.cat-card:hover{border-color:rgba(20,184,166,.42);transform:translateY(-2px)}
/* Indizio in piu', non l'indicatore: l'anello resta quello della regola condivisa dei link. */
.cat-card:focus-within{border-color:var(--teal)}
@media(prefers-reduced-motion:reduce){.cat-card{transition:none}.cat-card:hover{transform:none}}

.cat-media{position:relative;aspect-ratio:16/10;background:rgba(255,255,255,.04);overflow:hidden}
.cat-photo{display:block;width:100%;height:100%;object-fit:cover}
/* Assenza di apertura: un riquadro decorativo, non un'immagine rotta. aria-hidden nel markup,
   perche' non aggiunge nulla a chi non lo vede. */
.cat-photo-empty{
    display:grid;place-items:center;
    background:radial-gradient(circle at 50% 35%,rgba(20,184,166,.20),transparent 60%),rgba(255,255,255,.045);
    color:rgba(200,255,247,.55);font-weight:850;letter-spacing:.14em;font-size:13px;text-transform:uppercase;
}

.cat-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.cat-title{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.cat-link:where(:link,:visited){color:var(--text);text-decoration:none}
.cat-link:where(:link,:visited):where(:hover){color:var(--teal)}
/* Estende l'unica ancora a tutta la card: clic ovunque, un solo collegamento nell'albero. */
.cat-link::after{content:"";position:absolute;inset:0}
.cat-place{margin:0;color:var(--muted);font-size:14px}

.cat-facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0}
.cat-facts li{
    font-size:12.5px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.04);
}
/* Attribuzione editoriale: presente e leggibile, ma non in concorrenza con il titolo. */
.cat-contributor{margin:4px 0 0;color:#7f9999;font-size:13px}
.cat-cta{margin-top:auto;padding-top:12px;color:var(--teal);font-size:14px;font-weight:780}

@media(max-width:560px){
    .cat-grid{grid-template-columns:1fr;gap:16px}
    .cat-body{padding:18px}
    .cat-title{font-size:19px}
}

/* Contatto WhatsApp flottante del layout pubblico (_GeoFixWhatsAppButton). Un link e basta:
   nessuna risorsa esterna. In basso a destra, ma alzato di quanto basta a lasciare libero
   l'angolo al pulsante delle preferenze cookie di Iubenda, che per impostazione predefinita sta
   proprio lì; sotto al menu mobile (z-index 99) e sotto al banner di consenso. */
.wa-float{
    position:fixed;z-index:50;
    right:max(16px,env(safe-area-inset-right));bottom:calc(88px + env(safe-area-inset-bottom));
    display:flex;align-items:center;justify-content:center;
    width:56px;height:56px;border-radius:50%;
    background:var(--teal);color:var(--bg);border:1px solid rgba(255,255,255,.18);
    box-shadow:0 6px 18px rgba(0,0,0,.35);text-decoration:none;
    transition:transform .15s ease,filter .15s ease;
}
.wa-float:visited{color:var(--bg)}
.wa-float:hover{transform:translateY(-2px);filter:brightness(1.08)}
.wa-float:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.wa-float svg{width:30px;height:30px;display:block}
/* A fine pagina l'ultimo testo deve restare sopra il pulsante, non sotto. */
.ai-notice{padding-bottom:160px}
@media(max-width:560px){
    .wa-float{width:52px;height:52px;right:max(12px,env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom))}
    .wa-float svg{width:28px;height:28px}
    .ai-notice{padding-bottom:148px}
}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}
@media print{.wa-float{display:none}}