/*
 * Studio Arfia — soluzioni.css · v0.1.0 · 17/08/2026
 * Landing soluzioni (template condiviso) + vetrina "problemi risolti".
 */

.as-soluzione__lede { margin-top: var(--as-sp-5); }
.as-soluzione__vetrina .as-card--tipografica { min-height: 240px; }
.as-soluzione__vetrina .as-pill { align-self: flex-start; }
/* 4 soluzioni: 2×2 anche sul desktop largo — niente orfani (§8.4). */
@media (min-width: 1400px) {
	.as-soluzione__vetrina .as-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.as-soluzione__passi .as-metodo__lista {
	list-style: none;
	padding: 0;
	margin-top: var(--as-sp-7);
}
.as-soluzione__passi .as-metodo__passo {
	display: grid;
	grid-template-columns: 64px minmax(180px, 28ch) 1fr;
	gap: var(--as-sp-5);
	align-items: baseline;
	padding-block: var(--as-sp-5);
	border-bottom: 1px solid var(--as-line);
}
.as-soluzione__passi .as-metodo__passo:first-child { border-top: 1px solid var(--as-line); }
@media (max-width: 768px) {
	.as-soluzione__passi .as-metodo__passo { grid-template-columns: 48px 1fr; }
	.as-soluzione__passi .as-metodo__passo .as-body { grid-column: 2; }
}

/* ══ SOLUZIONI · I CASI: LA SCELTA (v0.93.0, 03/11/2026) ══════════════════════
   Rami, 03/11: fra tre layout ha scelto la 3 («ok, ma leva il testo sotto il titolo, mettici le tab in due file al
   massimo, e leva le frecce da dentro le card»). Il titolo a sinistra e i problemi per nome (le tab) a destra; sotto una
   scena sola con la frase del cliente, la soluzione e la schermata su una luce che cambia col caso (site/casi.php,
   motion.js «I CASI · LA SCELTA»). Le schermate sono quelle di sempre dentro .as-caso__demo (le misure curate in demo.css
   restano); lo zoom che le fa stare nella scatola lo mette motion.js (cpAdatta). Senza JavaScript: niente tab, i casi
   in colonna, ognuno intero. Da rifare con Rami: la versione da telefono e i mockup interni.
   Prima: lista di frasi + pannello col mouse (fino a `bb334d8`); il mazzo in riserva (risorse-tecniche/riserva/). */
.as-ps .as-finestra__foto img { object-position: 50% 40%; }
.as-casi__testa { display: grid; gap: var(--as-sp-5); margin-bottom: clamp(32px, 4vw, 56px); }
.as-casi__titolo { margin: 0; max-width: 13ch; }
.as-casi__titolo em { font-style: normal; color: var(--as-grigio-display); }
.as-casi__nota { margin: var(--as-sp-5) 0 0; color: var(--as-muted); }

/* La luce: cinque colori a giro (pesca, rosa, cielo, lavanda, menta; niente gialli), su un fondo chiaro. */
.is-luce-1 { --l1: 255 158 127; --l2: 255 146 200; --l3: 141 180 255; }
.is-luce-2 { --l1: 255 146 200; --l2: 169 140 255; --l3: 134 224 189; }
.is-luce-3 { --l1: 141 180 255; --l2: 134 224 189; --l3: 255 158 127; }
.is-luce-4 { --l1: 169 140 255; --l2: 255 158 127; --l3: 141 180 255; }
.is-luce-5 { --l1: 134 224 189; --l2: 141 180 255; --l3: 255 146 200; }
.as-cp-luce {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 58% at 74% 34%, rgb(var(--l1) / .6) 0, rgb(var(--l1) / 0) 72%),
		radial-gradient(44% 52% at 20% 88%, rgb(var(--l2) / .46) 0, rgb(var(--l2) / 0) 72%),
		radial-gradient(40% 48% at 102% 102%, rgb(var(--l3) / .44) 0, rgb(var(--l3) / 0) 72%),
		#F4F4F2;
}

/* La scatola della schermata: la schermata di sempre, rimpicciolita con lo zoom finché ci sta (motion.js). */
.as-cp-demo { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; padding: clamp(18px, 3vw, 44px); }
.as-cp-demo > .as-caso__demo { position: relative; z-index: 1; display: flex; flex: none; align-items: center; justify-content: center; margin: 0; padding: 0; overflow: visible; }
/* Senza JavaScript la larghezza non la dà cpAdatta: la schermata prende quella della scatola (le radici in % misuravano 0). */
html:not(.as-js) .as-cp-demo > .as-caso__demo { width: 100%; }
/* Più alta della scatola anche al minimo dello zoom: si vede dall'alto e sfuma in basso. */
.as-cp-demo.is-taglio { align-items: flex-start; }
.as-cp-demo > .as-caso__demo.is-tagliata { align-items: flex-start; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent 98%); mask-image: linear-gradient(#000 72%, transparent 98%); }
/* v0.95: la scena fuori dallo schermo si ferma dov'è (motion.js, cpPausa): riparte da lì, non da capo. */
.as-demo-pausa, .as-demo-pausa * { animation-play-state: paused !important; }
/* Le schermate prendono vita quando il loro caso è in scena. */
.as-scelta__quadro.is-attivo .as-demo-vivo .as-demo > * { animation: as-su .45s var(--as-ease-out) both; }
.as-scelta__quadro.is-attivo .as-demo-vivo .as-demo > :nth-child(2) { animation-delay: .12s; }
.as-scelta__quadro.is-attivo .as-demo-vivo .as-demo > :nth-child(3) { animation-delay: .24s; }
.as-scelta__quadro.is-attivo .as-demo-vivo .as-demo > :nth-child(4) { animation-delay: .36s; }

/* Le tab: i problemi per nome. Senza JavaScript non servono (i casi sono tutti in colonna). */
.as-scelta__nomi { display: none; }
.as-scelta--viva .as-scelta__nomi { display: flex; flex-wrap: wrap; gap: 8px; }
.as-scelta__nome { margin: 0; padding: 9px 15px; border: 0; border-radius: var(--as-r-pill); background: none; box-shadow: inset 0 0 0 1px var(--as-line); font: inherit; font-size: 14px; line-height: 1.2; color: var(--as-ink); white-space: nowrap; cursor: pointer; transition: background-color .35s var(--as-ease-out), color .35s var(--as-ease-out), box-shadow .35s var(--as-ease-out); }
@media (hover: hover) {
	.as-scelta__nome:not(.is-attivo):hover { box-shadow: inset 0 0 0 1px var(--as-ink); }
}
.as-scelta__nome.is-attivo { background: var(--as-ink); color: #fff; box-shadow: none; }
.as-scelta__nome:focus-visible { outline: 2px solid var(--as-arancio); outline-offset: 3px; }
/* Da computer il titolo a sinistra e le tab a destra, al posto della riga che c'era: al massimo due file
   (motion.js controlla, e se a una larghezza non ci stanno le porta sotto il titolo, sempre in due file). */
@media (min-width: 1000px) {
	/* la colonna del titolo la stringe motion.js sulla larghezza vera delle sue righe (--as-tit-w) */
	.as-scelta--viva .as-casi__testa { grid-template-columns: var(--as-tit-w, max-content) minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 2.4vw, 40px); }
	.as-scelta--viva .as-scelta__nomi { justify-content: flex-end; gap: 8px 7px; padding-bottom: .7em; }
	.as-scelta--viva .as-scelta__nome { padding: 9px 13px; font-size: 13px; }
	.as-scelta--viva.is-nomi-sotto .as-casi__testa { grid-template-columns: minmax(0, 1fr); }
	.as-scelta--viva.is-nomi-sotto .as-scelta__nomi { justify-content: flex-start; padding-bottom: 0; }
}

/* La scena */
.as-scelta__palco { position: relative; isolation: isolate; overflow: hidden; border-radius: calc(32px * var(--as-brm)); background: #F4F4F2; touch-action: pan-y; }
@supports (corner-shape: squircle) { .as-scelta__palco { corner-shape: squircle; } }
.as-scelta__luci > i { opacity: 0; transition: opacity .9s var(--as-ease-out); }
.as-scelta__luci > i.is-attiva { opacity: 1; }
.as-scelta__quadro { position: relative; z-index: 1; display: grid; }
.as-scelta__quadro + .as-scelta__quadro { border-top: 1px solid rgba(10, 10, 10, .08); }
.as-scelta__testi { display: grid; align-content: start; gap: 12px; padding: 26px 24px 4px; }
.as-scelta__n { margin: 0; color: var(--as-muted); font-variant-numeric: tabular-nums; }
.as-scelta__n b { font-weight: 500; color: var(--as-arancio); }
.as-scelta__frase { margin: 0; font-size: clamp(22px, 2.4vw, 38px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; }
.as-scelta__sol { margin: 0; font-size: clamp(17px, 1.5vw, 23px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
/* v0.100 (Rami, 04/11: «la freccia dovrebbe puntare a destra, anche su desktop»): la freccia chiude la riga, dopo il testo,
   attaccata all'ultima parola (.as-scelta__coda) perché non resti mai da sola a capo. */
.as-scelta__coda { white-space: nowrap; }
.as-scelta__freccia { display: inline-block; width: .9em; height: .9em; margin-left: .4em; vertical-align: -.1em; color: var(--as-arancio); }
.as-scelta__per { margin: 0; color: rgba(10, 10, 10, .62); }
.as-scelta--viva .as-scelta__quadro { position: absolute; inset: 0; visibility: hidden; border-top: 0; }
.as-scelta--viva .as-scelta__quadro.is-attivo { visibility: visible; }
/* v0.97: nelle scene chiuse niente resta visibile, nemmeno un pezzo che si dichiara visibile da sé (un'animazione o una regola
   con visibility: visible): le scene stanno una sopra l'altra e i bollini dell'agenda di «Rispondo tardi» bucavano Google. */
.as-scelta--viva .as-scelta__quadro:not(.is-attivo) * { visibility: hidden !important; }
/* DA TELEFONO E TABLET (v0.99, Rami 04/11: «il layout da mobile è orribile, i mockup interni giganteschi, enormi; lavora su tutto
   da mobile, da desktop ok»). Sotto i 1000px, con lo script (.as-scelta--fila): niente tab e niente scena unica, i casi sono una FILA
   di card che scorre col dito (la pagina non scorre mai di lato: scorre la fila), come «4 casi da vicino» subito sotto. In ogni card
   in alto la scena del caso rimpicciolita come una foto (intera, mai tagliata: motion.js la impagina come da computer e la riduce),
   sulla sua luce; sotto la frase del cliente e la soluzione. In testa il contatore con la barra. Senza script: i casi in colonna. */
@media (max-width: 999px) {
	.as-scelta--fila .as-casi__testa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: var(--as-sp-5); }
	.as-scelta__guida { justify-self: end; display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .06em; color: var(--as-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
	.as-scelta__guida b { font-weight: 500; color: var(--as-ink); }
	.as-scelta__barra { position: relative; width: 44px; height: 2px; border-radius: 2px; background: var(--as-line); overflow: hidden; }
	.as-scelta__barra i { position: absolute; inset: 0; background: var(--as-arancio); transform-origin: 0 50%; transform: scaleX(var(--p, .111)); transition: transform .45s var(--as-ease-out); }
	.as-scelta--fila .as-scelta__palco { display: flex; align-items: stretch; gap: 12px; height: auto !important; margin-inline: calc(-1 * var(--as-gutter)); padding: 0 var(--as-gutter) 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--as-gutter); scrollbar-width: none; border-radius: 0; background: none; touch-action: auto; isolation: auto; }
	.as-scelta--fila .as-scelta__palco::-webkit-scrollbar { display: none; }
	.as-scelta--fila .as-scelta__luci { display: none; }
	.as-scelta--fila .as-scelta__quadro { position: relative; z-index: auto; flex: 0 0 min(84vw, 360px); display: flex; flex-direction: column; border-top: 0; overflow: hidden; scroll-snap-align: start; border-radius: calc(24px * var(--as-brm)); background: var(--as-sup); }
	@supports (corner-shape: squircle) { .as-scelta--fila .as-scelta__quadro { corner-shape: squircle; } }
	/* v0.100 (Rami, 04/11: «nell'area del testo c'è molto spazio libero; la scritta con la freccia dovrebbe restare fissa in basso»):
	   le card sono alte uguali, e l'altezza in più la prende la scena (almeno 268px), non il testo. Così il testo sta stretto in fondo
	   alla card, la soluzione con la freccia è sempre l'ultima riga, alla stessa distanza dal bordo in tutte le card. */
	.as-scelta--fila .as-cp-demo { order: -1; flex: 1 0 268px; height: auto; min-height: 268px; padding: 14px 14px 10px; background:
		radial-gradient(62% 70% at 72% 30%, rgb(var(--l1) / .5) 0, rgb(var(--l1) / 0) 72%),
		radial-gradient(52% 62% at 14% 92%, rgb(var(--l2) / .4) 0, rgb(var(--l2) / 0) 72%),
		radial-gradient(44% 52% at 100% 100%, rgb(var(--l3) / .36) 0, rgb(var(--l3) / 0) 72%),
		#EFEFEC; }
	.as-scelta--fila .as-scelta__testi { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 20px; }
	.as-scelta--fila .as-scelta__n { display: none; }
	.as-scelta--fila .as-scelta__frase { font-size: 18px; line-height: 1.28; letter-spacing: -.015em; }
	.as-scelta--fila .as-scelta__sol { font-size: 15px; line-height: 1.3; }
	.as-scelta--fila .as-scelta__per { display: none; }
	/* La scena è una foto: nessun tocco la ferma o la apre. */
	.as-scelta--fila .as-cp-demo { pointer-events: none; }
	/* Senza script, da telefono: i casi in colonna, ognuno con la sua scena intera sopra il testo. */
	.as-scelta:not(.as-scelta--fila):not(.as-scelta--viva) .as-scelta__quadro { display: flex; flex-direction: column; }
	.as-scelta:not(.as-scelta--fila):not(.as-scelta--viva) .as-cp-demo { order: -1; }
}
@media (min-width: 1000px) {
	.as-scelta__quadro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); min-height: clamp(560px, 70vh, 700px); }
	.as-scelta__testi { display: flex; flex-direction: column; gap: 20px; padding: clamp(32px, 3.4vw, 56px); }
	.as-scelta__sol { margin-top: auto; }
	.as-scelta .as-cp-demo { padding: 44px 44px 44px 8px; }
	.as-scelta--viva .as-scelta__palco { height: clamp(560px, 70vh, 700px); }
}

/* ══ 4 CASI DA VICINO: IL PALCO (v0.93.0, 03/11/2026) ═════════════════════════
   Rami: «la proposta 1 riciclala per la sezione 4 casi da vicino, ma da mobile deve rimanere com'è ora». Solo con un
   puntatore (.as-sfoglio--viva, motion.js «IL PALCO» nello sfoglio): il titolo sopra, le voci a sinistra con aria (quella a
   metà schermo si accende: nome pieno, riga, freccia verso la pagina), le foto in una scena ferma a destra che cambiano a
   sipario. Da telefono e senza JavaScript: la fila e la colonna di sempre (base.css), non si tocca nulla. */
.as-sfoglio__scena { display: none; }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__griglia { min-height: 0; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); grid-template-rows: auto auto; column-gap: clamp(40px, 5vw, 88px); row-gap: clamp(28px, 3.4vw, 48px); align-items: start; }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__testa { grid-column: 1 / -1; grid-row: 1; }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__lista { grid-column: 1; grid-row: 2; align-self: start; gap: 0; padding-bottom: 16vh; }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__voce { display: grid; align-content: center; min-height: clamp(260px, 40vh, 400px); }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__n { color: #C2C2C2; transition: color .45s var(--as-ease-out); }
.as-sfoglio--palco.as-sfoglio--viva .is-attiva .as-sfoglio__n { color: var(--as-arancio); }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__nome { color: #C2C2C2; }
.as-sfoglio--palco.as-sfoglio--viva .is-attiva .as-sfoglio__nome { color: var(--as-ink); }
@media (hover: hover) {
	.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__voce:not(.is-attiva) .as-sfoglio__link:hover .as-sfoglio__nome { color: var(--as-grigio-display); }
}
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__riga { max-height: none; overflow: visible; margin-block: var(--as-sp-3) 0; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .4s var(--as-ease-out), transform .6s var(--as-ease-out); }
.as-sfoglio--palco.as-sfoglio--viva .is-attiva .as-sfoglio__riga { opacity: 1; transform: none; transition-delay: .08s; }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__vai { display: inline-flex; grid-column: 2; margin-top: var(--as-sp-5); opacity: 0; transform: translate3d(-8px, 0, 0); transition: opacity .4s var(--as-ease-out), transform .6s var(--as-ease-out), background-color .35s var(--as-ease-out), color .35s var(--as-ease-out), box-shadow .35s var(--as-ease-out); }
.as-sfoglio--palco.as-sfoglio--viva .is-attiva .as-sfoglio__vai { opacity: 1; transform: none; transition-delay: .16s, .16s, 0s, 0s, 0s; }
@media (hover: hover) {
	.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__link:hover .as-sfoglio__vai { background: var(--as-ink); color: #fff; box-shadow: none; }
}
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__scena { display: block; grid-column: 2; grid-row: 2; position: relative; overflow: hidden; isolation: isolate; height: calc(100vh - var(--as-header-h) - 72px); min-height: 520px; max-height: 820px; border-radius: calc(32px * var(--as-brm)); background: var(--as-sup); }
@supports (corner-shape: squircle) { .as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__scena { corner-shape: squircle; } }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__scena .as-sfoglio__foto { position: absolute; inset: 0; width: auto; height: auto; margin: 0; aspect-ratio: auto; border-radius: 0; clip-path: none; visibility: hidden; }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__scena .as-sfoglio__foto.is-su { z-index: 2; visibility: visible; }
.as-sfoglio--palco.as-sfoglio--viva .as-sfoglio__scena .as-sfoglio__foto.is-sotto { z-index: 1; visibility: visible; }