/*
 * Studio Arfia · ecosistemi-metro.css · v0.113 · 05/11/2026
 * ECOSISTEMI, «Guarda un dato attraversare l'azienda.»: LA LINEA DELLA METRO (template-parts/site/ecosistemi-metro.php), scelta
 * da Rami il 05/11 tra le proposte. Regia a tempo (assets/js/ecosistemi-metro.js), niente pin.
 * Da computer: una mappa notturna della metropolitana dentro uno squircle; la telecamera (.as-ef4__cam, nata alla misura del primo
 * piano e rimpicciolita per il campo largo) segue IL GETTONE (.as-ef4-tok, fuori dalla telecamera: resta nitido); la schermata
 * della fermata sta sopra, a destra. Da telefono (v0.116): la mappa piccola, e sotto la schermata della fermata come un mazzo.
 * Senza JS (nessun .is-viva): la mappa intera e tutta accesa, i capitoli in fila.
 * Niente gialli: la linea dell'ordine è l'arancio del sito, le altre sono blu, verde, viola, azzurro, rosa.
 */

/* ══ LA SEZIONE ══ */
.as-ef4 { position: relative; padding: clamp(72px, 9vw, 140px) 0; overflow: hidden; overflow: clip; }
.as-ef4 :where(p, ol, li) { margin: 0; }
.as-ef4__titolo { max-width: 19ch; margin: 0 0 clamp(24px, 3vw, 40px); }
.as-ef4__titolo em { font-style: normal; color: var(--as-grigio-testo-inv, rgba(255, 255, 255, .5)); }
.as-ef4__nota { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .42); }

/* ══ IL PALCO: la mappa di notte ══ */
.as-ef4__palco { position: relative; width: 100%; aspect-ratio: 2 / 1; min-height: 380px; max-height: calc(100svh - 150px); }
.as-ef4__vista { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: calc(28px * var(--as-brm)); background: radial-gradient(45% 60% at 12% 88%, rgba(91, 134, 255, .13), transparent 70%), radial-gradient(40% 55% at 92% 12%, rgba(242, 96, 158, .11), transparent 70%), radial-gradient(40% 50% at 55% 40%, rgba(146, 119, 255, .07), transparent 70%), #0E0E13; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
@supports (corner-shape: squircle) { .as-ef4__vista { corner-shape: squircle; } }
.as-ef4__vista::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.3px); background-size: 26px 26px; }
.as-ef4__cam { position: absolute; inset: 4% 3%; z-index: 1; }
.as-ef4__mappa { display: block; width: 100%; height: 100%; overflow: visible; }
/* il velo: quando una schermata è aperta, la mappa dietro di lei si scurisce (niente nomi di stazione che spuntano dai bordi) */
.as-ef4__velo { position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none; background: linear-gradient(270deg, rgba(14, 14, 19, .92), rgba(14, 14, 19, .88) 35%, rgba(14, 14, 19, 0) 52%); opacity: var(--velo, 0); }
.as-ef4.is-viva .as-ef4__cam { inset: auto; left: 0; top: 0; width: var(--mw, 100%); height: var(--mh, 100%); transform-origin: 0 0; will-change: transform; }

/* la rete: le linee di interscambio, la linea dell'ordine, le stazioni */
.as-ef4__mappa text { font-family: var(--as-font, 'Archivo', system-ui, sans-serif); }
.as-ef4__ramo-base, .as-ef4__ramo-luce, .as-ef4__rotta, .as-ef4__rotta-alone, .as-ef4__rotta-luce { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.as-ef4__ramo-base { stroke: var(--c); stroke-width: 10; opacity: .26; }
.as-ef4__ramo-luce { stroke: var(--c); stroke-width: 10; }
.as-ef4.is-viva .as-ef4__ramo-luce { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.as-ef4__capo { fill: var(--c); opacity: .45; transition: opacity .4s ease; }
.as-ef4__capo-nome { font-size: 23px; font-weight: 500; fill: rgba(255, 255, 255, .38); transition: fill .4s ease; }
.as-ef4__capo-nome.is-tick { font-size: 21px; }
.as-ef4__ramo.is-on .as-ef4__capo, .as-ef4:not(.is-viva) .as-ef4__capo { opacity: 1; }
.as-ef4__ramo.is-on .as-ef4__capo-nome, .as-ef4:not(.is-viva) .as-ef4__capo-nome { fill: rgba(255, 255, 255, .86); }
.as-ef4__rotta { stroke: rgba(255, 255, 255, .15); stroke-width: 16; }
.as-ef4__rotta-alone { stroke: rgba(243, 112, 34, .075); stroke-width: 54; }
.as-ef4__rotta-alone.is-stretto { stroke: rgba(243, 112, 34, .16); stroke-width: 30; }
.as-ef4__rotta-luce { stroke: var(--as-arancio, #F37022); stroke-width: 16; }
.as-ef4__punto { fill: #0E0E13; stroke: rgba(255, 255, 255, .6); stroke-width: 6; transition: fill .3s ease, stroke .3s ease; }
.as-ef4__stazione.is-on .as-ef4__punto, .as-ef4:not(.is-viva) .as-ef4__punto { fill: #fff; stroke: var(--as-arancio, #F37022); }
.as-ef4__onda { fill: none; stroke: var(--as-arancio, #F37022); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.as-ef4__stazione.is-qui .as-ef4__onda { animation: as-ef4-onda 1.8s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes as-ef4-onda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.as-ef4__nome { font-size: 31px; font-weight: 600; letter-spacing: -.01em; fill: rgba(255, 255, 255, .46); transition: fill .3s ease; }
.as-ef4__stazione.is-on .as-ef4__nome, .as-ef4:not(.is-viva) .as-ef4__nome { fill: #fff; }
.as-ef4__quando { font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--as-arancio, #F37022); opacity: 0; transition: opacity .3s ease; }
.as-ef4__stazione.is-on .as-ef4__quando, .as-ef4:not(.is-viva) .as-ef4__quando { opacity: 1; }
/* la scia del gettone: tre tratti che finiscono dove è lui, lunghi quanto la sua velocità (fermo, spariscono) */
.as-ef4__scia { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.as-ef4__scia.is-larga { stroke: rgba(243, 112, 34, .2); stroke-width: 40; }
.as-ef4__scia.is-media { stroke: rgba(255, 150, 90, .5); stroke-width: 20; }
.as-ef4__scia.is-nucleo { stroke: rgba(255, 236, 222, .95); stroke-width: 6; }
.as-ef4:not(.is-viva) .as-ef4__scia { display: none; }
/* a rete accesa, un respiro sulla linea dell'ordine */
.as-ef4.is-tutta .as-ef4__rotta-alone:not(.is-stretto) { animation: as-ef4-respiro 2.4s ease-in-out infinite; }
@keyframes as-ef4-respiro { 50% { stroke: rgba(243, 112, 34, .2); } }

/* ══ IL TABELLONE: la fermata e il tempo, come il display sopra le porte ══ */
.as-ef4__tab { position: absolute; z-index: 4; left: clamp(14px, 1.5vw, 24px); top: clamp(14px, 1.5vw, 24px); display: flex; align-items: center; gap: 16px; margin: 0; padding: 10px 20px 10px 10px; border-radius: calc(18px * var(--as-brm)); background: rgba(18, 18, 24, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 44px -22px rgba(0, 0, 0, .7); color: #fff; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
@supports (corner-shape: squircle) { .as-ef4__tab { corner-shape: squircle; } }
/* da schermo largo il tabellone esce dalla mappa e si mette accanto al titolo: la telecamera ha la mappa tutta per sé */
@media (min-width: 1260px) {
	.as-ef4__tab { left: auto; right: 0; top: auto; bottom: calc(100% + clamp(24px, 3vw, 40px)); background: rgba(255, 255, 255, .055); }
}
@media (min-width: 700px) and (max-width: 1379px) {
	.as-ef4__tab { gap: 12px; padding: 8px 16px 8px 8px; }
	.as-ef4__tab-n { width: 52px; height: 48px; font-size: 20px; }
	.as-ef4__tab-ferma { min-width: 10.5em; }
	.as-ef4__tab-ferma b { font-size: 17px; }
	.as-ef4__tab-tempo { padding-left: 14px; }
	.as-ef4__tab-tempo b { font-size: 30px; }
}
@media (min-width: 700px) and (max-width: 1259px) {
	.as-ef4__tab-ferma { min-width: 9em; }
	.as-ef4__tab-tempo small { display: none; }
}
.as-ef4__tab p { margin: 0; }
.as-ef4__tab-n { flex: none; display: grid; place-items: center; align-content: center; gap: 3px; width: 60px; height: 56px; border-radius: calc(12px * var(--as-brm)); background: var(--as-arancio, #F37022); color: #fff; font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
@supports (corner-shape: squircle) { .as-ef4__tab-n { corner-shape: squircle; } }
.as-ef4__tab-n small { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.as-ef4__tab-ferma { display: grid; gap: 5px; min-width: 13.5em; }
.as-ef4__tab-ferma small { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.as-ef4__tab-ferma b { font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.as-ef4__tab-tempo { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 3px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .12); line-height: 1; }
.as-ef4__tab-tempo b { min-width: 2.3em; text-align: right; font-size: 36px; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--as-arancio, #F37022); }
.as-ef4__tab-tempo span { font-size: 16px; color: rgba(255, 255, 255, .6); }
.as-ef4__tab-tempo small { grid-column: 1 / -1; margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .5); }

/* ══ LE FERMATE: le schermate vere ══ */
.as-ef4__fermate { list-style: none; margin: 0; padding: 0; }
.as-ef4__fermata { position: relative; isolation: isolate; }
.as-ef4__fermata::after { content: ""; position: absolute; z-index: -1; inset: -22% -18%; pointer-events: none; background: radial-gradient(closest-side, var(--c), transparent); opacity: .5; }
.as-ef4__fermata p { margin: 0; }
.as-ef4__testa { display: none; }
.as-ef4-ic { display: block; flex: none; width: 1.15em; height: 1.15em; }
.as-ef4__app { position: relative; display: grid; gap: .7em; padding: 1.05em 1.15em 1.15em; border-radius: calc(1.3em * var(--as-brm)); background: rgba(255, 255, 255, .94); color: #1C1C1E; box-shadow: 0 2.2em 4.4em -2em rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .7); font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; line-height: 1.3; }
@supports (corner-shape: squircle) { .as-ef4__app { corner-shape: squircle; } }
.as-ef4__barra { display: flex; align-items: center; gap: .6em; padding-bottom: .7em; border-bottom: 1px solid rgba(28, 28, 30, .08); }
.as-ef4__barra b { font-size: 1.02em; font-weight: 600; }
.as-ef4__barra small { margin-left: auto; font-size: .8em; color: rgba(28, 28, 30, .5); font-variant-numeric: tabular-nums; }
.as-ef4__ico { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: .6em; background: var(--c); color: #fff; }
@supports (corner-shape: squircle) { .as-ef4__ico { corner-shape: squircle; border-radius: .95em; } }
.as-ef4__foto { display: block; flex: none; width: 4.4em; height: 4.4em; border-radius: .8em; background: #E9E1D6 50% 50% / cover no-repeat; }
.as-ef4__foto.is-piccola { width: 2.9em; height: 2.9em; border-radius: .65em; }
.as-ef4__voce { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; padding: .32em 0; border-bottom: 1px solid rgba(28, 28, 30, .07); font-size: .9em; }
.as-ef4__voce > span { display: grid; }
.as-ef4__voce small { font-size: .85em; color: rgba(28, 28, 30, .5); }
.as-ef4__voce b { font-weight: 500; font-variant-numeric: tabular-nums; }
.as-ef4__voce.is-chiara { color: rgba(28, 28, 30, .6); }
.as-ef4__voce.is-tot { border-bottom: 0; padding-bottom: 0; font-weight: 600; }
.as-ef4__voce.is-tot b { font-weight: 700; }
.as-ef4__ok { display: flex; align-items: center; gap: .45em; font-size: .86em; font-weight: 600; color: #1C8A4E; }
.as-ef4__pill { display: inline-flex; align-items: center; gap: .3em; padding: .28em .65em; border-radius: 2em; background: rgba(120, 120, 128, .14); color: rgba(28, 28, 30, .72); font-size: .8em; font-style: normal; font-weight: 600; white-space: nowrap; }
.as-ef4__pill .as-ef4-ic { width: 1em; height: 1em; }
.as-ef4__pill.is-ok { background: rgba(31, 157, 85, .13); color: #1C8A4E; }

/* Sito: la pagina di grazie del negozio, nei colori di Bottega Terra */
.as-ef4__app.is-negozio { background: rgba(251, 248, 245, .96); }
.as-ef4__negozio { display: flex; align-items: center; gap: .55em; padding-bottom: .7em; border-bottom: 1px solid rgba(122, 68, 48, .14); }
.as-ef4__negozio b { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 1.12em; font-weight: 600; color: #4A2A1E; }
.as-ef4__negozio small { display: flex; align-items: center; gap: .3em; margin-left: auto; font-size: .76em; color: rgba(28, 28, 30, .5); }
.as-ef4__negozio small .as-ef4-ic { width: 1em; height: 1em; }
.as-ef4__logo { flex: none; display: block; width: 2em; height: 2em; overflow: hidden; border-radius: .55em; }
.as-ef4__logo .as-lg, .as-ef4__logo svg { display: block; width: 100%; height: 100%; }
.as-ef4__grazie { display: flex; align-items: center; gap: .85em; }
.as-ef4__grazie p { display: grid; gap: .2em; }
.as-ef4__grazie b { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 1.5em; font-weight: 600; line-height: 1.05; color: #4A2A1E; letter-spacing: -.01em; }
.as-ef4__grazie span { font-size: .86em; color: rgba(28, 28, 30, .62); }

/* Magazzino: la giacenza scala, sotto la scorta parte il riordino */
.as-ef4__prod { display: flex; align-items: center; gap: .75em; }
.as-ef4__prod p:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.as-ef4__prod small { font-size: .82em; color: rgba(28, 28, 30, .5); }
.as-ef4__conta { display: flex; align-items: baseline; gap: .2em; font-size: 2.2em; font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.as-ef4__conta s { font-size: .5em; color: rgba(28, 28, 30, .35); transition: font-size .4s ease, color .4s ease, text-decoration-color .4s ease; }
.as-ef4__conta span { display: inline-block; max-width: 1em; overflow: hidden; transition: opacity .35s ease .1s, transform .45s cubic-bezier(.2, .8, .2, 1) .1s, max-width .4s ease; }
.as-ef4__scorta { position: relative; height: .45em; border-radius: 1em; background: rgba(120, 120, 128, .16); }
.as-ef4__scorta::after { content: ""; position: absolute; left: 25%; top: -.25em; bottom: -.25em; width: 2px; border-radius: 2px; background: rgba(28, 28, 30, .3); } /* la scorta minima: 6 pezzi */
.as-ef4__scorta i { display: block; width: 21%; height: 100%; border-radius: inherit; background: var(--c); transition: width .5s ease; }

/* Fattura */
.as-ef4__fatt { display: grid; gap: .1em; }
.as-ef4__fatt b { font-size: 1.15em; font-weight: 700; letter-spacing: -.01em; }
.as-ef4__fatt span { font-size: .86em; color: rgba(28, 28, 30, .55); }
.as-ef4__stati { display: flex; flex-wrap: wrap; gap: .4em; padding-top: .15em; }

/* Corriere: l'etichetta stampata e il ritiro */
.as-ef4__etichetta { display: grid; gap: .55em; padding: .75em .85em .7em; border: 1.5px solid #111; border-radius: .55em; background: #fff; }
.as-ef4__mitt { display: flex; justify-content: space-between; padding-bottom: .45em; border-bottom: 1px solid rgba(17, 17, 17, .18); font-size: .74em; letter-spacing: .02em; color: rgba(17, 17, 17, .6); }
.as-ef4__mitt b { font-weight: 600; color: #111; }
.as-ef4__dest { display: grid; gap: .1em; }
.as-ef4__dest small { font-size: .68em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(17, 17, 17, .5); }
.as-ef4__dest b { font-size: 1.12em; font-weight: 700; }
.as-ef4__dest span { font-size: .86em; }
.as-ef4__codice { display: grid; gap: .25em; }
.as-ef4__codice .as-fl-barre { display: block; width: 100%; height: 2.7em; margin: 0; fill: #111; }
.as-ef4__codice small { text-align: center; font-size: .7em; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.as-ef4__ritiro { display: flex; align-items: center; gap: .65em; }
.as-ef4__ritiro > span:last-child { display: grid; line-height: 1.25; }
.as-ef4__ritiro b { font-size: .95em; font-weight: 600; }
.as-ef4__ritiro small { font-size: .84em; color: rgba(28, 28, 30, .58); }

/* Telefono del titolare: la schermata di blocco di Anna */
.as-ef4__app.is-blocco { gap: 0; min-height: 19em; padding: .7em .8em 1em; align-content: start; overflow: hidden; border-radius: calc(2.3em * var(--as-brm)); background: radial-gradient(70% 55% at 18% 8%, rgba(158, 128, 255, .95), transparent 70%), radial-gradient(65% 60% at 95% 70%, rgba(242, 96, 158, .85), transparent 70%), radial-gradient(60% 50% at 20% 100%, rgba(31, 184, 204, .55), transparent 70%), #1B1830; color: #fff; box-shadow: 0 2.2em 4.4em -2em rgba(0, 0, 0, .85), inset 0 0 0 .3em #0B0B0F, inset 0 0 0 .38em rgba(255, 255, 255, .14); }
.as-ef4__isola { justify-self: center; width: 5.6em; height: 1.65em; margin-top: .35em !important; border-radius: 1em; background: #050507; }
.as-ef4__ora { display: grid; justify-items: center; margin-top: .9em !important; line-height: 1; }
.as-ef4__ora small { font-size: .86em; font-weight: 600; opacity: .92; }
.as-ef4__ora b { margin-top: .08em; font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; font-size: 4.1em; font-weight: 700; letter-spacing: -.03em; }
.as-ef4__notifiche { display: grid; margin-top: 1.1em; padding: 0 .25em; }
.as-ef4__notif { grid-area: 1 / 1; display: flex; align-items: center; gap: .65em; padding: .75em .85em; border-radius: 1.25em; background: rgba(248, 247, 250, .96); color: #1C1C1E; box-shadow: 0 .6em 1.4em -.6em rgba(0, 0, 0, .35); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.as-ef4__notif > span:nth-child(2) { display: grid; flex: 1; min-width: 0; font-size: .86em; line-height: 1.3; }
.as-ef4__notif small { color: rgba(28, 28, 30, .7); }
.as-ef4__notif em { align-self: start; font-style: normal; font-size: .72em; color: rgba(28, 28, 30, .45); }
.as-ef4__notif .as-ef4__logo { width: 2.3em; height: 2.3em; }
.as-ef4__notif .as-ef4__ico { width: 2.3em; height: 2.3em; --c: #27B877; }
.as-ef4__notif.is-dietro { z-index: 0; transform: translateY(.85em) scale(.93); opacity: .72; }
.as-ef4__fermata.is-fatto .as-ef4__notif.is-dietro > *, .as-ef4:not(.is-viva) .as-ef4__notif.is-dietro > * { visibility: hidden; } /* dietro la nuova resta solo il bordo, come nella pila vera */
.as-ef4__notif:not(.is-dietro) { z-index: 1; }
.as-ef4__tasti { display: flex; justify-content: space-between; margin-top: 2.4em !important; padding: 0 1.2em; }
.as-ef4__tasti i { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: rgba(10, 10, 14, .34); color: #fff; }

/* I passi dentro le schermate: con la scena viva aspettano la fermata (.is-fatto), senza JS sono già fatti */
.as-ef4__app .is-dopo { transition: opacity .4s ease .15s, transform .5s cubic-bezier(.2, .8, .2, 1) .15s; }
.as-ef4__app .is-dopo2 { transition-delay: .4s; }
.as-ef4.is-viva .as-ef4__fermata:not(.is-fatto) .is-dopo { opacity: 0; transform: translateY(.5em); }
.as-ef4.is-viva .as-ef4__fermata:not(.is-fatto) .as-ef4__conta s { font-size: 1em; color: #1C1C1E; text-decoration-color: transparent; }
.as-ef4.is-viva .as-ef4__fermata:not(.is-fatto) .as-ef4__conta span { max-width: 0; opacity: 0; transform: translateY(.5em); }
.as-ef4.is-viva .as-ef4__fermata:not(.is-fatto) .as-ef4__scorta i { width: 25%; }
.as-ef4.is-viva .as-ef4__fermata:not(.is-fatto) .as-ef4__notif:not(.is-dietro) { opacity: 0; transform: translateY(-1.2em) scale(.96); }
.as-ef4.is-viva .as-ef4__fermata:not(.is-fatto) .as-ef4__notif.is-dietro { transform: translateY(0) scale(1); opacity: 1; }

/* ══ DA COMPUTER: i pannelli sopra la mappa, a destra; la telecamera porta la stazione a sinistra ══ */
@media (min-width: 700px) {
	.as-ef4__fermate { display: none; }
	.as-ef4.is-viva .as-ef4__fermate { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; }
	.as-ef4.is-viva .as-ef4__fermata { position: absolute; right: 3.4%; top: 50%; width: min(35%, 24.5em); font-size: clamp(12px, 1.02vw, 15.5px); opacity: 0; visibility: hidden; transform: translate3d(0, -50%, 0); will-change: transform, opacity; }
	.as-ef4.is-viva .as-ef4__app:not(.is-blocco) { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
	.as-ef4.is-viva .as-ef4__app.is-negozio { background: rgba(251, 248, 245, .88); }
	.as-ef4.is-viva .as-ef4__fermata.is-telefono-del-titolare { width: min(31%, 21.5em); }
	.as-ef4.is-viva .as-ef4__velo { display: block; }
}

/* ══ IL GETTONE: l'ordine che viaggia ══
   Uno squircle bianco con la foto del Vaso Anfora, l'anello arancio, il numero sotto, l'alone che respira, la punta che dice dove
   va. In corsa si inclina nelle curve (--tilt); alla fermata frena (is-arriva) e si apre come una Live Activity (is-aperto): la
   voce della fermata (is-qui) dice cosa succede lì, col colore della sua linea. Sta fuori dalla telecamera: sempre nitido.
   Le misure in una variabile, --g = il lato del gettone chiuso. */
.as-ef4-tok { --g: 58px; --ga: 272px; --c: var(--as-arancio, #F37022); position: absolute; z-index: 4; left: 0; top: 0; display: none; width: 0; height: 0; pointer-events: none; will-change: transform; }
.as-ef4.is-viva .as-ef4-tok { display: block; }
.as-ef4-tok__alone, .as-ef4-tok__lampo { position: absolute; left: calc(var(--g) * -.95); top: calc(var(--g) * -.95); width: calc(var(--g) * 1.9); height: calc(var(--g) * 1.9); border-radius: 50%; }
.as-ef4-tok__alone { background: radial-gradient(closest-side, rgba(243, 112, 34, .55), rgba(243, 112, 34, .18) 55%, rgba(243, 112, 34, 0)); animation: as-ef4-tok-respiro 2.6s ease-in-out infinite; }
@keyframes as-ef4-tok-respiro { 50% { transform: scale(1.22); opacity: .65; } }
.as-ef4-tok__lampo { box-shadow: inset 0 0 0 2px var(--c), 0 0 18px 2px var(--c); opacity: 0; }
.as-ef4-tok.is-arriva .as-ef4-tok__lampo { animation: as-ef4-tok-lampo .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes as-ef4-tok-lampo { from { opacity: .95; transform: scale(.55); } to { opacity: 0; transform: scale(1.5); } }
/* la punta: dove sta andando (gira con il binario, si vede solo in corsa) */
.as-ef4-tok__punta { position: absolute; left: -7px; top: -8px; width: 14px; height: 16px; background: var(--as-arancio, #F37022); clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%); opacity: var(--vel, 0); transform: rotate(var(--dir, 0deg)) translateX(calc(var(--g) * .5 + 13px)); filter: drop-shadow(0 0 6px rgba(243, 112, 34, .8)); }
/* il corpo: chiuso è un quadrato squircle, aperto si allunga verso destra (la foto resta dov'è) */
.as-ef4-tok__corpo { position: absolute; left: calc(var(--g) / -2); top: calc(var(--g) / -2); display: block; width: var(--g); height: var(--g); box-sizing: border-box; overflow: hidden; border-radius: calc(var(--g) * .34); background: #fff; box-shadow: 0 0 0 3px var(--as-arancio, #F37022), 0 0 0 7px rgba(243, 112, 34, .22), 0 14px 30px -10px rgba(0, 0, 0, .75), 0 0 34px 4px rgba(243, 112, 34, .38); transform-origin: calc(var(--g) / 2) 50%; transform: rotate(var(--tilt, 0deg)); transition: width .62s cubic-bezier(.34, 1.22, .64, 1), box-shadow .5s ease; }
@supports (corner-shape: squircle) { .as-ef4-tok__corpo { corner-shape: squircle; border-radius: calc(var(--g) * .48); } }
.as-ef4-tok__foto { position: absolute; left: 5px; top: 5px; width: calc(var(--g) - 10px); height: calc(var(--g) - 10px); border-radius: calc(var(--g) * .25); background: #E9E1D6 50% 50% / cover no-repeat; }
@supports (corner-shape: squircle) { .as-ef4-tok__foto { corner-shape: squircle; border-radius: calc(var(--g) * .36); } }
.as-ef4-tok__info { position: absolute; left: calc(var(--g) + 4px); right: 10px; top: 0; bottom: 0; display: flex; align-items: center; gap: 12px; opacity: 0; visibility: hidden; transform: translateX(-10px); font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; color: #1C1C1E; white-space: nowrap; transition: opacity .2s ease, transform .3s ease, visibility 0s .3s; }
.as-ef4-tok__testo { display: grid; flex: 1; min-width: 0; gap: 2px; line-height: 1.15; }
.as-ef4-tok__testo b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.as-ef4-tok__testo small { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: rgba(28, 28, 30, .58); }
.as-ef4-tok__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--c); color: #fff; box-shadow: 0 6px 14px -6px var(--c); }
@supports (corner-shape: squircle) { .as-ef4-tok__ico { corner-shape: squircle; border-radius: 16px; } }
.as-ef4-tok__ico .as-ef4-ic { width: 19px; height: 19px; }
.as-ef4-tok.is-aperto .as-ef4-tok__corpo { width: var(--ga); box-shadow: 0 0 0 3px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 22%, transparent), 0 16px 34px -12px rgba(0, 0, 0, .8), 0 0 40px 6px color-mix(in srgb, var(--c) 34%, transparent); }
.as-ef4-tok.is-aperto .as-ef4-tok__info.is-qui { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .22s, transform .5s cubic-bezier(.2, .8, .2, 1) .22s, visibility 0s 0s; }
/* il numero: una capsula sotto, a cavallo del bordo (aperto non serve: lo dice la voce) */
.as-ef4-tok__n { position: absolute; left: 0; top: calc(var(--g) / 2 - 9px); padding: 3px 8px 3px; border-radius: 999px; background: var(--as-arancio, #F37022); color: #fff; box-shadow: 0 0 0 2.5px #0E0E13; font-family: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); transition: opacity .25s ease, transform .35s ease; }
.as-ef4-tok.is-aperto .as-ef4-tok__n { opacity: 0; transform: translate(-50%, -6px); }
/* la frenata alla fermata: un piccolo schiacciamento in avanti, poi fermo */
.as-ef4-tok.is-arriva .as-ef4-tok__corpo { animation: as-ef4-tok-frena .55s cubic-bezier(.3, .7, .3, 1); }
@keyframes as-ef4-tok-frena { 0% { transform: rotate(var(--tilt, 0deg)) scale(1.08, .92); } 55% { transform: rotate(var(--tilt, 0deg)) scale(.97, 1.03); } }
.as-ef4-tok__scia { display: none; }
/* fermo al capolinea, a scena finita: solo l'alone che respira */

/* ══ I CAPITOLI, sotto la scena ══ */
.as-ef4-cap { position: relative; margin-top: clamp(22px, 2.4vw, 32px); }
.as-ef4 .as-ef4-cap__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.as-ef4-cap__btn { appearance: none; display: grid; align-content: start; gap: 6px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.as-ef4-cap__btn:focus-visible { outline: 2px solid var(--as-arancio, #F37022); outline-offset: 6px; border-radius: 8px; }
.as-ef4-cap__barra { display: block; height: 3px; margin-bottom: 12px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.as-ef4-cap__barra i { display: block; height: 100%; border-radius: inherit; background: var(--as-arancio, #F37022); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.as-ef4-cap__n { font-size: 13px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; transition: color .35s ease; }
.as-ef4-cap__t { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.as-ef4-cap__r { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .6); text-wrap: pretty; }
.as-ef4-cap.is-viva .as-ef4-cap__btn { color: rgba(255, 255, 255, .36); transition: color .35s ease; }
.as-ef4-cap.is-viva .as-ef4-cap__r { color: inherit; }
.as-ef4-cap.is-viva .as-ef4-cap__voce.is-on .as-ef4-cap__btn { color: #fff; }
.as-ef4-cap.is-viva .as-ef4-cap__voce.is-on .as-ef4-cap__r { color: rgba(255, 255, 255, .62); }
.as-ef4-cap.is-viva .as-ef4-cap__voce:is(.is-on, .is-fatto) .as-ef4-cap__n { color: var(--as-arancio, #F37022); }
@media (hover: hover) { .as-ef4-cap.is-viva .as-ef4-cap__btn:hover { color: #fff; } }
.as-ef4-cap__rivedi { position: absolute; z-index: 3; right: 18px; top: -68px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: #fff; color: #0A0A0A; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.as-ef4-cap__rivedi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-ef4-cap.is-finito .as-ef4-cap__rivedi { opacity: 1; transform: none; pointer-events: auto; }
.as-ef4-cap:not(.is-viva) .as-ef4-cap__rivedi { display: none; }
/* il salto a un capitolo: tutto al suo posto in un istante */
.as-ef4.is-salto *, .as-ef4.is-salto *::before, .as-ef4.is-salto *::after { transition: none !important; animation: none !important; }

/* ══ DA SCHERMO MEDIO: gettone e voci un po' più piccoli ══ */
@media (min-width: 700px) and (max-width: 1259px) {
	.as-ef4-tok { --g: 50px; --ga: 248px; }
	.as-ef4-tok__testo b { font-size: 14px; }
	.as-ef4-tok__testo small { font-size: 12px; }
	.as-ef4-tok__ico { width: 30px; height: 30px; }
	.as-ef4 .as-ef4-cap__lista { gap: 20px; }
	.as-ef4-cap__t { font-size: 17px; }
	.as-ef4-cap__r { font-size: 14px; }
}

/* la mappa piccola è solo del telefono */
.as-ef4__mini { display: none; }

/* ══ DA TELEFONO (v0.116, Rami 05/11: «da mobile è orribile»): tutto in una schermata, niente scorrimento interno. In alto il
   tabellone; sotto LA MAPPA PICCOLA, disegnata per lo schermo stretto (la linea dell'ordine con le sue curve, le cinque stazioni coi
   nomi, le linee che incrociano e la legenda), dove corre il gettone; sotto UNA schermata grande, quella della fermata, che cambia a
   ogni fermata come un mazzo: la nuova sale davanti, la vecchia arretra dietro. Senza JS: la mappa tutta accesa e le schermate in
   colonna. ══ */
@media (max-width: 699px) {
	.as-ef4__titolo { max-width: 12ch; }
	.as-ef4__palco { aspect-ratio: auto; min-height: 0; max-height: none; }
	.as-ef4__vista { position: relative; display: grid; gap: 14px; overflow: visible; border-radius: 0; background: none; box-shadow: none; isolation: auto; }
	.as-ef4__vista::before, .as-ef4__cam, .as-ef4__velo { display: none !important; }
	.as-ef4__tab { position: relative; z-index: 5; left: auto; top: auto; gap: 12px; margin: 0 0 14px; padding: 8px 14px 8px 8px; background: rgba(22, 22, 28, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.as-ef4__tab-n { width: 50px; height: 48px; font-size: 20px; }
	.as-ef4__tab-n small { font-size: 9px; }
	.as-ef4__tab-ferma { flex: 1; min-width: 0; gap: 4px; }
	.as-ef4__tab-ferma small { font-size: 11px; }
	.as-ef4__tab-ferma b { font-size: 16.5px; white-space: normal; }
	.as-ef4__tab-tempo { padding-left: 12px; }
	.as-ef4__tab-tempo b { font-size: 28px; }
	.as-ef4__tab-tempo span { font-size: 14px; }
	.as-ef4__tab-tempo small { display: none; }

	/* la mappa piccola: lo squircle di notte col puntinato, come la grande */
	.as-ef4__mini { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: calc(24px * var(--as-brm)); background: radial-gradient(60% 50% at 8% 92%, rgba(91, 134, 255, .16), transparent 70%), radial-gradient(55% 50% at 96% 6%, rgba(242, 96, 158, .14), transparent 70%), radial-gradient(50% 45% at 55% 45%, rgba(146, 119, 255, .08), transparent 70%), #0E0E13; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
	@supports (corner-shape: squircle) { .as-ef4__mini { corner-shape: squircle; } }
	.as-ef4__mini::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px); background-size: 18px 18px; }
	.as-ef4__mmap { display: block; width: 100%; height: auto; overflow: hidden; }
	.as-ef4__mmap text { font-family: var(--as-font, 'Archivo', system-ui, sans-serif); }
	/* v0.117 (Rami: «è troppo zoommata»): la rete intera dentro, tratti e stazioni proporzionati, nomi ancora leggibili */
	.as-ef4__mmap .as-ef4__ramo-base, .as-ef4__mmap .as-ef4__ramo-luce { stroke-width: 3.5; }
	.as-ef4__mmap .as-ef4__ramo-base { opacity: .3; }
	.as-ef4__mmap .as-ef4__rotta, .as-ef4__mmap .as-ef4__rotta-luce { stroke-width: 5; }
	.as-ef4__mmap .as-ef4__rotta-alone { stroke-width: 17; }
	.as-ef4__mmap .as-ef4__rotta-alone.is-stretto { stroke-width: 10; }
	.as-ef4__mmap .as-ef4__scia.is-larga { stroke-width: 13; }
	.as-ef4__mmap .as-ef4__scia.is-media { stroke-width: 6.5; }
	.as-ef4__mmap .as-ef4__scia.is-nucleo { stroke-width: 2; }
	.as-ef4__mmap .as-ef4__punto { stroke-width: 2.5; }
	.as-ef4__mmap .as-ef4__onda { stroke-width: 1.5; }
	.as-ef4__mmap .as-ef4__nome { font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
	.as-ef4__mmap .as-ef4__quando { font-size: 10px; }
	/* la legenda delle linee: si accendono quando il gettone le incrocia */
	.as-ef4__legenda { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 7px 18px; margin: 0; padding: 0 16px 14px; font-size: 11.5px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, .86); }
	.as-ef4__legenda span { display: inline-flex; align-items: center; gap: 6px; transition: opacity .4s ease; }
	.as-ef4__legenda i { width: 14px; height: 5px; border-radius: 5px; background: var(--c); }
	.as-ef4.is-viva .as-ef4__legenda span:not(.is-on) { opacity: .4; }

	/* il gettone sulla mappa piccola: più piccolo, non si apre (la schermata sotto dice cosa succede), niente capsula (il numero
	   lo dice il tabellone) e niente punta */
	.as-ef4-tok { --g: 26px; }
	.as-ef4-tok__corpo { box-shadow: 0 0 0 2px var(--as-arancio, #F37022), 0 0 0 4.5px rgba(243, 112, 34, .22), 0 8px 16px -6px rgba(0, 0, 0, .75), 0 0 18px 2px rgba(243, 112, 34, .4); }
	.as-ef4-tok__foto { left: 2.5px; top: 2.5px; width: calc(var(--g) - 5px); height: calc(var(--g) - 5px); }
	.as-ef4-tok__info, .as-ef4-tok__n, .as-ef4-tok__punta, .as-ef4-tok__scia { display: none !important; }

	/* le schermate: senza JS in colonna; con la scena viva un mazzo, tutte nella stessa cella, alte uguali (--mz, dallo script) */
	.as-ef4 .as-ef4__fermate { display: grid; gap: 22px; padding: 0; } /* .as-ef4 davanti: base.css azzera ol[class] con più peso */
	.as-ef4__fermata { font-size: 14px; }
	.as-ef4__fermata::after { inset: 8% -10% -6% -10%; opacity: .36; transition: opacity .6s ease; }
	.as-ef4__testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px !important; color: #fff; }
	.as-ef4__testa b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
	.as-ef4__testa em { margin-left: auto; font-style: normal; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--as-arancio, #F37022); }
	.as-ef4__inter { order: 3; flex-basis: 100%; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
	.as-ef4__inter i { width: 18px; height: 6px; border-radius: 6px; background: var(--c); }
	.as-ef4__negozio small { display: none; } /* stretto: il nome del negozio su una riga sola */
	.as-ef4.is-viva .as-ef4__fermate { gap: 0; padding-top: 24px; }
	.as-ef4.is-viva .as-ef4__fermata { grid-area: 1 / 1; align-self: start; z-index: 1; transform-origin: 50% 0; opacity: 0; visibility: hidden; transform: translate3d(0, 46px, 0) scale(.96); transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, visibility 0s .75s; }
	.as-ef4.is-viva .as-ef4__testa { display: none; } /* la fermata la dice il tabellone */
	.as-ef4.is-viva .as-ef4__app { min-height: var(--mz, 0px); }
	.as-ef4.is-viva .as-ef4__fermata::after { opacity: 0; }
	.as-ef4.is-viva .as-ef4__fermata[data-pos="su"] { z-index: 4; opacity: 1; visibility: visible; transform: none; transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, visibility 0s; }
	.as-ef4.is-viva .as-ef4__fermata[data-pos="su"]::after { opacity: .34; }
	.as-ef4.is-viva .as-ef4__fermata[data-pos="d1"] { z-index: 3; opacity: .62; visibility: visible; transform: translate3d(0, -12px, 0) scale(.94); transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, visibility 0s; }
	.as-ef4.is-viva .as-ef4__fermata[data-pos="d2"] { z-index: 2; opacity: .3; visibility: visible; transform: translate3d(0, -22px, 0) scale(.88); transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, visibility 0s; }
	.as-ef4.is-viva .as-ef4__fermata[data-pos="via"] { z-index: 1; opacity: 0; visibility: hidden; transform: translate3d(0, -30px, 0) scale(.82); }
	/* le carte dietro: sono il bordo del mazzo, il contenuto non si legge e non distrae */
	.as-ef4.is-viva .as-ef4__fermata:is([data-pos="d1"], [data-pos="d2"]) .as-ef4__app > * { visibility: hidden; }
	/* schermi bassi (iPhone SE e simili): mappa e schermata più compatte, così la scena sta in una schermata */
	@media (max-height: 760px) {
		.as-ef4__tab { margin-bottom: 10px; padding-top: 6px; padding-bottom: 6px; }
		.as-ef4__tab-n { height: 44px; }
		.as-ef4__vista { gap: 10px; }
		.as-ef4__mmap { margin-bottom: -8px; }
		.as-ef4__legenda { display: none; } /* qui lo spazio va ai nomi delle stazioni, che restano grandi: le linee le dicono i colori */
		.as-ef4__fermata { font-size: 12.5px; }
		.as-ef4.is-viva .as-ef4__fermate { padding-top: 20px; }
	}

	/* i capitoli: le barre in fila come le storie, sotto un capitolo alla volta */
	.as-ef4 .as-ef4-cap__lista { position: relative; gap: 6px; padding-bottom: 104px; }
	.as-ef4-cap__barra { margin-bottom: 0; }
	.as-ef4-cap__btn { gap: 0; padding: 10px 0; margin: -10px 0; }
	.as-ef4-cap__voce :is(.as-ef4-cap__n, .as-ef4-cap__t, .as-ef4-cap__r) { position: absolute; visibility: hidden; opacity: 0; transform: translateY(-14px); transition: opacity .25s ease, transform .35s ease, visibility 0s .35s; }
	.as-ef4-cap__n { top: 26px; left: 0; width: 60px; font-size: 44px !important; font-weight: 300; line-height: 1; letter-spacing: -.045em; color: transparent !important; -webkit-text-stroke: 1px var(--as-arancio, #F37022); }
	.as-ef4-cap__t { top: 28px; left: 66px; right: 0; font-size: 18px; }
	.as-ef4-cap__r { top: 54px; left: 66px; right: 0; font-size: 14.5px; }
	.as-ef4-cap:not(.is-viva) .as-ef4-cap__lista { grid-template-columns: 1fr; gap: 18px; padding-bottom: 0; }
	.as-ef4-cap:not(.is-viva) .as-ef4-cap__voce :is(.as-ef4-cap__n, .as-ef4-cap__t, .as-ef4-cap__r) { position: static; visibility: visible; opacity: 1; transform: none; }
	.as-ef4-cap:not(.is-viva) .as-ef4-cap__n { width: auto; font-size: 13px !important; color: rgba(255, 255, 255, .5) !important; -webkit-text-stroke: 0; }
	.as-ef4-cap.is-viva .as-ef4-cap__voce.is-on :is(.as-ef4-cap__n, .as-ef4-cap__t, .as-ef4-cap__r) { visibility: visible; opacity: 1; transform: none; transition: none; animation: as-ef4-cap-sale .75s cubic-bezier(.2, .8, .2, 1) both; }
	.as-ef4-cap.is-viva .as-ef4-cap__voce.is-on .as-ef4-cap__t { animation-delay: .14s; }
	.as-ef4-cap.is-viva .as-ef4-cap__voce.is-on .as-ef4-cap__r { animation-delay: .28s; }
	.as-ef4-cap__rivedi { top: auto; bottom: -14px; right: 0; height: 36px; font-size: 13.5px; } /* in fondo al capitolo, a destra: sopra le barre lo coprirebbe la schermata */
}
@keyframes as-ef4-cap-sale { from { opacity: 0; transform: translateY(22px); } }