/* =========================================================
   VISTE.CSS — LA PIRAMIDE E LE QUATTRO VISTE DI SERVIZI (30-10, ultimo giro)
   ========================================================= */
.viste-testa { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 8px; text-align: center; }
.viste-testa .hero-campo { z-index: 0; }
.viste-dentro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; }
/* 31-10: i nomi dei servizi che passano dietro il titolo ora si cliccano, e il blocco del titolo, largo quanto la pagina,
   li copriva: lascia passare il clic, tranne sui suoi link e pulsanti */
.viste-testa .viste-dentro { pointer-events: none; }
.viste-testa .viste-dentro :is(a, button, input, select, summary) { pointer-events: auto; }

/* la piramide: «Tutto il sito» sopra, le tre parti sotto */
.piramide { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.piramide a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 14px; padding: 10px 18px; background: rgba(255, 255, 255, 0.025); transition: border-color .15s, background .15s; }
.piramide a strong { color: var(--text-primary); font-weight: 600; font-size: 0.95rem; }
.piramide a small { color: var(--text-muted); font-size: 0.78rem; }
.piramide a:hover { border-color: var(--border-strong); }
.piramide a[aria-current] { border-color: var(--accent-2); background: rgba(45, 212, 191, 0.10); box-shadow: 0 0 0 1px var(--accent-2) inset; }
.piramide-tutto { min-width: min(320px, 90vw); }
.piramide-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 10px; }
@media (max-width: 620px) { .piramide-tre { grid-template-columns: 1fr; width: 100%; } .piramide-tre a { width: 100%; } }

/* l'intestazione della vista scelta */
.vista-testa { display: none; flex-direction: column; align-items: center; gap: 12px; }
body[data-vista="tutto"] .vista-testa[data-per="tutto"],
body[data-vista="capire"] .vista-testa[data-per="capire"],
body[data-vista="scegliere"] .vista-testa[data-per="scegliere"],
body[data-vista="personalizzare"] .vista-testa[data-per="personalizzare"] { display: flex; }
.vista-testa h1 { margin: 0; }
.vista-testa[data-per="tutto"] h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.05; }
.vista-riga { margin: 0; color: var(--text-secondary); max-width: 62ch; }

/* le parti della pagina: nella vista «tutto» tutte, nelle altre solo la sua */
body[data-vista="capire"] [data-vista]:not([data-vista="capire"]),
body[data-vista="scegliere"] [data-vista]:not([data-vista="scegliere"]),
body[data-vista="personalizzare"] [data-vista]:not([data-vista="personalizzare"]) { display: none !important; }
/* nella vista singola il titolo interno della parte si nasconde: lo dice già l'intestazione in alto */
body:not([data-vista="tutto"]) [data-vista] > .gradino-titolo { display: none; }

/* le azioni del percorso guidato: solo in guida, solo nella sua vista */
.guida { display: none; }
body.in-guida[data-vista="capire"] [data-guida="capire"],
body.in-guida[data-vista="scegliere"] [data-guida="scegliere"],
body.in-guida[data-vista="personalizzare"] [data-guida="personalizzare"] { display: block; }
.guida-azioni { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 8px; }
/* in guida la piramide resta, più discreta */
body.in-guida .piramide { opacity: 0.75; }

/* l'animazione della vista, la prima volta: la frase lettera per lettera (intro.css), la linea, la riga, poi la parte */
.vista-testa .intro-nome span:not(.intro-parola) { animation: none; opacity: 1; filter: none; transform: none; }
.vista-testa .intro-linea { animation: none; transform: scaleX(1); }
body.vista-anima .vista-testa .intro-nome span:not(.intro-parola) { opacity: 0; filter: blur(10px); transform: translateY(18px) scale(1.1);
  animation: intro-lettera 0.6s cubic-bezier(.2, .7, .2, 1) calc(0.15s + var(--i) * 0.05s) forwards; }
body.vista-anima .vista-testa .intro-linea { transform: scaleX(0); animation: intro-linea 0.7s cubic-bezier(.6, 0, .2, 1) 1s forwards; }
body.vista-anima .vista-riga { opacity: 0; animation: intro-entra 0.6s ease 1.4s forwards; }
body.vista-anima [data-vista] .card { opacity: 0; transform: translateY(24px) scale(0.98); animation: palco-scheda 0.8s cubic-bezier(.2, .8, .2, 1) forwards; }
body.vista-anima [data-vista] .card:nth-child(1) { animation-delay: 1.8s; }
body.vista-anima [data-vista] .card:nth-child(2) { animation-delay: 2.0s; }
body.vista-anima [data-vista] .card:nth-child(3) { animation-delay: 2.2s; }
body.vista-anima [data-vista="personalizzare"] .scorrimento, body.vista-anima [data-vista="personalizzare"] .negozio-pulsante { opacity: 0; animation: intro-entra 0.7s ease 1.8s forwards; }
body.vista-anima .guida-azioni { opacity: 0; animation: intro-entra 0.6s ease 2.6s forwards; }