/* Bandy – pagina principale, versione grafica (si aggiunge a style.css, che resta per la privacy) */
:root {
  --crema: #F5F5F6;
  --pietra: #E3E3E1;
  --inchiostro: #1E0C24;
  --ombra: 0 30px 60px -26px rgba(30, 12, 36, .3);
  --ombra-carta: 0 14px 34px -14px rgba(30, 12, 36, .22);
  --sf-1: #F5F5F6;
  --sf-2: #F5F5F6;
  --sf-3: #F5F5F6;
  --sf-forte: #A3127A;
  --titoli: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --orizzonte: #A3127A;
}

body { font-size: 17px; color: var(--inchiostro); overflow-x: hidden; }
.wrap { max-width: 1120px; }
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding-top: 16px; padding-bottom: 16px; }

.top .logo { width: 100px; }
.top-destra { display: flex; align-items: center; gap: 10px; }
.top-cleaner { font-size: 15px; font-weight: 500; color: var(--inchiostro); text-decoration: none; padding: 10px 4px; white-space: nowrap; }
.top-cleaner:hover { text-decoration: underline; }

h1, h2 { font-family: var(--titoli); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; margin: 0; text-wrap: balance; }
.accento { font-style: normal; color: var(--fucsia); }
h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }

/* Pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--inchiostro); color: #fff; font-weight: 600; font-size: 17px;
  text-decoration: none; transition: background .15s ease;
}
.btn:hover { background: #3A2442; }
.btn.bianco { background: #fff; color: var(--fucsia); }
.btn.chiaro { background: var(--fucsia); color: #fff; }
.btn.chiaro:hover { background: var(--fucsia-scuro); }
.btn.vuoto { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--pietra); }
.btn.vuoto:hover { background: var(--crema); }
.btn.bianco:hover { background: #F7ECF5; }

/* Apertura */
.palco { padding-bottom: 60px; }
.apertura { text-align: center; padding: 116px 20px 0; max-width: 980px; margin: 0 auto; }
.apertura h1 { font-size: clamp(42px, 6.3vw, 80px); }
.apertura .sotto { font-size: clamp(18px, 1.6vw, 20px); color: var(--testo-2); margin: 20px auto 28px; max-width: 30em; line-height: 1.4; text-wrap: balance; }
.pulsanti { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

.foglio { position: relative; z-index: 1; }

/* Scena: tre foto dietro il telefono */
.scena { position: relative; max-width: 1120px; margin: 56px auto 0; padding: 0 20px; --sposta: 0px; }
.stanza { position: relative; height: clamp(420px, 46vw, 540px); display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 12px;  }
.foto { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--crema); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { position: absolute; left: 14px; top: 14px; background: #fff; border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 500; }
.scena .telefono { --w: clamp(232px, 21vw, 252px); position: absolute; left: 50%; bottom: -70px; translate: -50% var(--sposta); z-index: 3; }
.scena .schermo { aspect-ratio: 9 / 17.6; }
.etichetta { margin: 0 auto; padding-top: 14px; text-align: center; font-size: 12px; color: var(--testo-2); }
.avviso { flex-basis: 100%; font-size: 11.5px; line-height: 1.4; }

/* Telefono disegnato: tutto è in em, così si ingrandisce insieme */
.telefono {
  --w: 260px;
  width: var(--w); font-size: calc(var(--w) / 19);
  background: #17121C; padding: .42em; border-radius: 2.9em;
  box-shadow: var(--ombra); line-height: 1.25; text-align: left;
}
.schermo {
  position: relative; background: #fff; border-radius: 2.5em; aspect-ratio: 9 / 18.6;
  padding: .8em 1.15em 1.15em; display: flex; flex-direction: column; overflow: hidden;
}
.schermo::before {
  content: ""; position: absolute; top: .7em; left: 50%; transform: translateX(-50%);
  width: 4.9em; height: 1.4em; background: #15101A; border-radius: 1em;
}
.s-stato { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .84em; padding: 0 .5em; height: 1.9em; margin-bottom: 1.1em; }
.s-stato i { display: block; width: 1.9em; height: .85em; border: .12em solid var(--inchiostro); border-radius: .28em; position: relative; }
.s-stato i::after { content: ""; position: absolute; inset: .1em .45em .1em .1em; background: var(--inchiostro); border-radius: .08em; }
.s-titolo em { font-style: normal; color: #1E7A4C; }
.s-titolo { font-weight: 750; font-size: 1.62em; letter-spacing: -.03em; line-height: 1.08; margin: .15em 0 .62em; }
.s-persona { display: flex; align-items: center; gap: .65em; }
.s-volto { width: 3em; height: 3em; border-radius: 50%; flex: none; display: block; object-fit: cover; }
.s-nome { font-weight: 700; font-size: 1.05em; }
.s-mini { font-size: .84em; color: var(--testo-2); }
.s-spunte { margin: 0; padding: 0; list-style: none; font-size: .95em; }
.s-spunte li { display: flex; align-items: center; gap: .55em; padding: .55em 0; font-weight: 600; border-bottom: 1px solid var(--crema); }
.s-spunte li:last-child { border-bottom: 0; }
.s-spunte li::before {
  content: "✓"; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: #E2F0E7; color: #1E7A4C; display: grid; place-items: center; font-size: .8em; font-weight: 800;
}
.s-griglia { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35em; }
.s-giorno { text-align: center; padding: .55em 0; border-radius: .95em; background: var(--crema); font-weight: 700; font-size: .92em; line-height: 1.15; }
.s-giorno small { display: block; font-size: .8em; font-weight: 500; opacity: .75; }
.s-giorno.si { background: var(--sf-forte); color: #fff; }
.s-sezione { font-weight: 700; font-size: .92em; margin: 1em 0 .5em; }

/* Schermata: pulizia in corso */
.s-diretta { display: flex; align-items: center; gap: .5em; font-size: .92em; font-weight: 700; color: var(--fucsia); }
.s-diretta b { width: .62em; height: .62em; border-radius: 50%; background: #1FA463; animation: battito 1.6s ease-in-out infinite; }
.s-barra { height: .62em; background: var(--crema); border-radius: 9em; overflow: hidden; margin-bottom: .75em; }
.s-barra i { display: block; height: 100%; width: 68%; border-radius: 9em; background: var(--sf-forte); animation: riempi 2.2s cubic-bezier(.3, .7, .2, 1); }
.s-stanze { list-style: none; margin: 0; padding: 0; }
.s-stanze li { display: flex; align-items: center; gap: .65em; padding: .58em 0; font-weight: 650; font-size: 1.02em; border-bottom: 1px solid var(--crema); }
.s-stanze li:last-child { border-bottom: 0; }
.s-stanze li > span { flex: 1; }
.s-stanze small { font-size: .8em; font-weight: 700; color: var(--fucsia); }
.s-stanze i { flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; box-sizing: border-box; }
.s-stanze .fatta i::before { content: "✓"; display: grid; place-items: center; height: 100%; color: #fff; font-size: .78em; font-weight: 800; font-style: normal; }
.s-stanze .fatta i { background: var(--sf-forte); animation: spunta .45s cubic-bezier(.3, 1.6, .5, 1) var(--d) both; }
.s-stanze .fatta small { display: none; }
.s-stanze .ora i { border: .2em solid var(--pietra); border-top-color: var(--fucsia); animation: gira .9s linear infinite; }
.s-stanze .dopo { color: #A79DAB; }
.s-stanze .dopo i { border: .15em solid var(--pietra); }
.s-cleaner { display: flex; align-items: center; gap: .55em; margin-top: auto; background: var(--crema); border-radius: 1.3em; padding: .6em; }
.s-cleaner .s-volto { width: 2.5em; height: 2.5em; }
.s-cresce { flex: 1; min-width: 0; white-space: nowrap; }
.s-cresce .s-stelle { display: block; font-size: .78em; letter-spacing: .04em; }
.s-tondo { flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; color: var(--fucsia); display: grid; place-items: center; }
.s-tondo svg { width: 1.15em; height: 1.15em; }

/* Schermata: la tua casa */
.s-segmento { display: grid; grid-template-columns: 1fr 1fr; background: var(--crema); border-radius: 9em; padding: .25em; font-weight: 700; font-size: .92em; text-align: center; }
.s-segmento > span { padding: .55em 0; border-radius: 9em; color: var(--testo-2); }
.s-segmento .si { background: #fff; color: var(--inchiostro); box-shadow: 0 .2em .6em rgba(30, 12, 36, .14); }
.s-riquadro { display: flex; justify-content: space-between; border: 1px solid var(--pietra); border-radius: 1em; padding: .75em .9em; margin-top: .7em; font-weight: 650; }
.s-riquadro b { font-weight: 700; color: var(--fucsia); }
.s-extra { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.s-extra div { background: var(--crema); border-radius: 1em; padding: .65em .2em .55em; text-align: center; font-weight: 700; font-size: .84em; }
.s-extra svg { display: block; width: 1.75em; height: 1.75em; margin: 0 auto .3em; }
.s-extra .si { background: var(--sf-forte); color: #fff; }

/* Schermata: chi viene */
.schermo.s-pieno { padding: 0; }
.s-testata { height: 8.2em; padding: .8em 1.15em 0; background: var(--sf-forte); color: #fff; flex: none; }
.s-testata .s-stato i { border-color: #fff; }
.s-testata .s-stato i::after { background: #fff; }
.s-profilo { text-align: center; padding: 0 1.15em; margin-top: -3em; }
.s-stelle { color: #F2A91E; letter-spacing: .08em; font-size: 1.2em; line-height: 1.2; }
.s-stelle.piccole { display: inline-block; font-size: .68em; letter-spacing: 0; vertical-align: .1em; }
.s-recensita { font-size: .86em; font-weight: 650; color: var(--testo-2); display: flex; justify-content: center; align-items: center; gap: .45em; }
.s-esempio { background: var(--crema); color: var(--testo-2); border-radius: 9em; padding: .15em .6em; font-size: .85em; font-weight: 700; }
.s-ritratto { position: relative; width: 6em; margin: 0 auto .5em; }
.s-ritratto b { position: absolute; right: .05em; bottom: .2em; width: 1.7em; height: 1.7em; border-radius: 50%; background: #1E9A5B; color: #fff; border: .18em solid #fff; box-sizing: border-box; display: grid; place-items: center; font-size: .9em; }
.s-profilo .s-volto { width: 6em; height: 6em; margin: 0; border: .28em solid #fff; box-sizing: border-box; }
.s-profilo .s-nome { font-size: 1.6em; font-weight: 750; letter-spacing: -.03em; }
.s-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; margin-top: .85em; font-weight: 700; }
.s-azioni > span { display: flex; align-items: center; justify-content: center; gap: .4em; background: var(--crema); border-radius: 1em; padding: .75em 0; color: var(--fucsia); }
.s-azioni svg { width: 1.2em; height: 1.2em; }

/* Schermata: prima e dopo */
.s-confronto { position: relative; flex: 1; min-height: 15em; border-radius: 1.3em; overflow: hidden; }
.s-confronto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-confronto .s-prima { filter: grayscale(.75) brightness(.62) contrast(.9); clip-path: inset(0 50% 0 0); animation: passa 4.5s ease-in-out infinite alternate; }
.s-lama { position: absolute; top: 0; bottom: 0; left: 50%; width: .18em; margin-left: -.09em; background: #fff; animation: lama 4.5s ease-in-out infinite alternate; }
.s-lama::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; color: var(--fucsia); display: grid; place-items: center; font-weight: 800; font-style: normal; }
.s-confronto > span { position: absolute; top: .7em; background: rgba(255, 255, 255, .92); border-radius: 9em; padding: .25em .7em; font-size: .84em; font-weight: 700; }
.s-confronto .p { left: .7em; }
.s-confronto .d { right: .7em; }

/* Nastro: cosa puliamo */
.nastro { margin-top: 56px; text-align: center; }
.nastro .occhiello { margin-bottom: 14px; }
.scorre { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fila { display: flex; width: max-content; animation: nastro 32s linear infinite; }
.fila > span { font-size: clamp(18px, 1.9vw, 23px); font-weight: 450; color: var(--testo-2); white-space: nowrap; display: inline-flex; align-items: center; }
.fila > span::after { content: "·"; margin: 0 1em; color: var(--pietra); }

/* Verifica nel profilo */
.s-verifiche { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; margin-top: .8em; text-align: left; }
.s-verifiche div { background: #E9F6EE; color: #17693F; border-radius: 1em; padding: .6em .7em; }
.s-verifiche svg { width: 1.45em; height: 1.45em; display: block; margin-bottom: .25em; }
.s-verifiche b { display: block; font-size: .92em; font-weight: 700; }
.s-verifiche small { font-size: .78em; }

/* Scheda di verifica */
.verifica { width: min(100%, 330px); }
.documento { position: relative; background: #fff; border-radius: 18px; padding: 16px 18px 20px; box-shadow: var(--ombra-carta); overflow: hidden; }
.doc-testa { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.doc-testa b { font-weight: 650; }
.doc-corpo { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.doc-corpo .s-volto { width: 72px; height: 72px; border-radius: 12px; }
.doc-righe { flex: 1; display: grid; gap: 9px; }
.doc-righe i { height: 9px; border-radius: 9px; background: var(--crema); }
.doc-righe i:nth-child(1) { width: 78%; }
.doc-righe i:nth-child(3) { width: 54%; }
.doc-raggio { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--fucsia); box-shadow: 0 0 18px 5px rgba(163, 18, 122, .28); animation: scansiona 3.4s ease-in-out infinite alternate; }
.timbro { position: absolute; right: 12px; bottom: 10px; background: #1E9A5B; color: #fff; font-size: 13px; font-weight: 650; padding: 4px 11px; border-radius: 99px; rotate: -5deg; }
.controlli { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.controlli li { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 22px 1fr 76px; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; box-shadow: var(--ombra-carta); }
.controlli svg { width: 22px; height: 22px; color: #1E9A5B; }
.controlli i { display: block; height: 6px; border-radius: 9px; background: var(--crema); overflow: hidden; }
.controlli b { display: block; height: 100%; width: 100%; background: #1E9A5B; border-radius: 9px; transform-origin: left; }

/* Pagina cleaner: i due telefoni collegati */
.duo-fuori { margin-top: 48px; }
.duo { display: grid; grid-template-columns: auto 90px auto; justify-content: center; align-items: center; background: var(--crema); border-radius: 20px; padding: 34px 20px 0; height: 610px; overflow: hidden; }
.duo figure { margin: 0; }
.duo figcaption { text-align: center; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.duo .telefono { --w: 262px; }
.ponte { position: relative; height: 2px; background: var(--pietra); }
.ponte i { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--fucsia); animation: ponte 12s linear infinite; }
.pz small { color: var(--testo-2); font-weight: 600; }
.pz i::before { content: "✓"; display: grid; place-items: center; height: 100%; font-size: .78em; font-weight: 800; font-style: normal; }
.pz i { background: var(--fucsia); color: #fff; animation: 12s linear infinite; }
.pz.r1 i { animation-name: t1; } .pz.r2 i { animation-name: t2; } .pz.r3 i { animation-name: t3; } .pz.r4 i { animation-name: t4; }
.s-barra.anima i { width: 100%; animation: avanza 12s linear infinite; }
.s-azione { margin-top: auto; background: var(--crema); color: var(--testo-2); text-align: center; font-weight: 700; padding: .8em; border-radius: 9em; }
.tempo { width: min(100%, 340px); }
.t-riga { display: flex; justify-content: space-between; font-size: 15px; margin-top: 14px; }
.t-riga b { font-weight: 650; }
.t-barra { position: relative; height: 26px; background: var(--crema); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.t-barra i { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: left; }
.t-barra .scuro { width: 100%; background: var(--inchiostro); }
.t-barra .fatto { width: 87.5%; background: var(--fucsia); }
.t-barra em { position: absolute; right: 0; top: 100%; font-style: normal; }
.tempo .t-barra:last-child { overflow: visible; margin-bottom: 26px; }
.tempo em { font-size: 13px; font-weight: 650; color: #17693F; margin-top: 5px; white-space: nowrap; }
.anim .svela.vista .t-barra i { animation: cresce 1.1s cubic-bezier(.3, .7, .2, 1) .3s both; }
@keyframes t1 { 0%, 10% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } 12%, 92% { background: var(--fucsia); color: #fff; box-shadow: none; } 96%, 100% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } }
@keyframes t2 { 0%, 30% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } 32%, 92% { background: var(--fucsia); color: #fff; box-shadow: none; } 96%, 100% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } }
@keyframes t3 { 0%, 50% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } 52%, 92% { background: var(--fucsia); color: #fff; box-shadow: none; } 96%, 100% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } }
@keyframes t4 { 0%, 70% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } 72%, 92% { background: var(--fucsia); color: #fff; box-shadow: none; } 96%, 100% { background: transparent; color: transparent; box-shadow: inset 0 0 0 .15em var(--pietra); } }
@keyframes avanza { 0%, 11% { width: 6%; } 13%, 31% { width: 25%; } 33%, 51% { width: 50%; } 53%, 71% { width: 75%; } 73%, 92% { width: 100%; } 96%, 100% { width: 6%; } }
@keyframes ponte { 0%, 9% { left: 0; opacity: 0; } 10% { left: 0; opacity: 1; } 14% { left: calc(100% - 12px); opacity: 1; } 15%, 29% { left: 0; opacity: 0; } 30% { left: 0; opacity: 1; } 34% { left: calc(100% - 12px); opacity: 1; } 35%, 49% { left: 0; opacity: 0; } 50% { left: 0; opacity: 1; } 54% { left: calc(100% - 12px); opacity: 1; } 55%, 69% { left: 0; opacity: 0; } 70% { left: 0; opacity: 1; } 74% { left: calc(100% - 12px); opacity: 1; } 75%, 100% { left: 0; opacity: 0; } }

/* Copertina: una foto e una frase */
.copertina { position: relative; height: min(100vh, 780px); min-height: 560px; background: url(img/casa-appartamento.jpg) center / cover; color: #fff; display: flex; align-items: flex-end; }
.copertina::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(15, 6, 20, .22), transparent 28%, transparent 40%, rgba(15, 6, 20, .72)); }
.copertina-testo { position: relative; padding: 0 clamp(20px, 5vw, 64px) clamp(30px, 5vw, 60px); max-width: 860px; }
.copertina h1 { font-size: clamp(42px, 6.6vw, 84px); }
.copertina p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.35; margin: 16px 0 22px; max-width: 26em; }
.foto-top .top .logo { filter: brightness(0) invert(1); }
.foto-top .top-cleaner { color: #fff; }
.foto-top .lang-switch { background: transparent; border-color: rgba(255, 255, 255, .45); }
.foto-top .lang-switch button { color: #fff; }
.foto-top .lang-switch button[aria-pressed="true"] { background: #fff; color: var(--inchiostro); }

/* Apertura: prenota */
.prenota { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(24px, 4vw, 56px); padding: 84px 16px 16px clamp(20px, 5vw, 64px); min-height: min(100vh, 800px); }
.prenota-sx { align-self: center; max-width: 520px; padding: 12px 0; }
.prenota .occhiello { margin-bottom: 12px; }
.prenota h1 { font-size: clamp(42px, 5.4vw, 72px); }
.lancio { font-size: clamp(18px, 1.6vw, 21px); color: var(--testo-2); line-height: 1.35; margin: 16px 0 0; }
.scheda { margin-top: 28px; border: 1px solid var(--pietra); border-radius: 14px; overflow: hidden; }
.campo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 16px; min-height: 58px; border-bottom: 1px solid var(--pietra); font-size: 17px; }
.campo > span { color: var(--testo-2); flex: none; }
.campo b { font-weight: 600; text-align: right; }
.invia { display: flex; align-items: center; justify-content: center; min-height: 58px; background: var(--fucsia); color: #fff; font-weight: 600; font-size: 18px; text-decoration: none; transition: background .15s ease; }
.invia:hover { background: var(--fucsia-scuro); }
.spiega { font-size: 15px; color: var(--testo-2); margin: 12px 0 0; line-height: 1.4; }
.prenota-dx { position: relative; border-radius: 20px; background: url(img/casa-appartamento.jpg) center / cover; min-height: 520px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 20px 0 50px; }
.prenota-dx .telefono { --w: clamp(220px, 20vw, 256px); }
.prenota-dx .schermo { aspect-ratio: 9 / 17.6; }
.prova { position: absolute; left: 12px; bottom: 12px; background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 12px; }

/* Case e uffici */
.tipi { padding-top: 70px; }
.spazi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px 14px; }
.tipo { margin: 0; }
.tipo:nth-child(1), .tipo:nth-child(4) { grid-column: span 7; }
.tipo:nth-child(2), .tipo:nth-child(3) { grid-column: span 5; }
.tipo > div { height: clamp(190px, 31vw, 400px); border-radius: 14px; overflow: hidden; background: var(--crema); }
.tipo img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.tipo:hover img { scale: 1.04; }
.tipo figcaption { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.015em; margin-top: 10px; }

/* I vantaggi */
.vantaggi-sezione { padding-top: 90px; }
.perche { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px 40px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--pietra); }
.perche h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.025em; }
.perche p { margin: 0; font-size: 18px; color: var(--testo-2); line-height: 1.4; }
.fonte-dato { font-size: 13px; color: var(--testo-2); line-height: 1.45; margin: 16px 0 0; max-width: 52em; }
.cleaner.semplice { display: block; }
.cleaner.semplice .legale { margin: 12px 0 22px; font-size: 15px; }

/* Blocchi */
.blocco { padding-top: 130px; }
.titolo-b { font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 30px; }
.occhiello { font-size: 15px; font-weight: 650; color: var(--testo-2); margin: 0 0 10px; }

/* Tre passi */
.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passo { background: var(--sf-1); border-radius: 20px; padding: 26px 26px 0; height: 430px; overflow: hidden; display: flex; flex-direction: column; }
.passo h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.passo .telefono { --w: 244px; margin: 22px auto 0; flex: none; }

.passo:nth-child(2) { background: var(--sf-2); }
.passo:nth-child(3) { background: var(--sf-3); }

/* Righe racconto */
.righe { display: grid; gap: 84px; margin-top: 110px; }
.riga { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.riga:nth-child(even) .quadro { order: 2; }
.riga h2 { font-size: clamp(28px, 3.2vw, 40px); }
.riga > div > p { font-size: 19px; color: var(--testo-2); line-height: 1.4; margin: 14px 0 0; max-width: 25em; }
.quadro { background: var(--sf-1); border-radius: 20px; min-height: 360px; display: grid; place-items: center; padding: 30px; position: relative; overflow: hidden; }
.riga:nth-child(2) .quadro { background: var(--sf-2); }
.riga:nth-child(3) .quadro { background: var(--sf-3); }
.carta { background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: var(--ombra-carta); width: min(100%, 320px); }
.carta h3 { font-size: 18px; margin-bottom: 8px; }
.carta .s-spunte { font-size: 16px; }
.carta .s-volto { width: 46px; height: 46px; }
.carta .s-nome { font-size: 17px; }
.carta .s-mini { font-size: 14px; }
.carta + .carta { margin-top: 12px; }
.pila { width: min(100%, 320px); }
.pila .carta { width: 100%; }
.carta.spenta { opacity: .62; box-shadow: none; }
.carta .azione { display: block; text-align: center; background: var(--fucsia); color: #fff; font-weight: 650; font-size: 15px; border-radius: 999px; padding: 10px; margin-top: 14px; }
.voce { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 16px; border-bottom: 1px solid var(--crema); }
.voce b { font-weight: 650; }
.voce:last-of-type { border-bottom: 0; }
.dato { margin-top: 22px; font-size: 16px; line-height: 1.35; max-width: 25em; color: var(--inchiostro); }
.dato b { font-weight: 750; }
.fonte { display: block; font-size: 12px; color: var(--testo-2); line-height: 1.35; margin-top: 5px; }
.garanzia { font-size: 13px; color: var(--testo-2); line-height: 1.45; margin: 40px 0 0; max-width: 48em; }
.garanzia b { color: var(--inchiostro); font-weight: 650; }

/* Cleaner */
.cleaner { background: var(--orizzonte); color: #fff; border-radius: 24px; padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; scroll-margin-top: 20px; }
.cleaner h2 { font-size: clamp(36px, 4.6vw, 58px); }
.cleaner .intro { font-size: 19px; line-height: 1.4; margin: 16px 0 24px; max-width: 27em; }
.cleaner .legale { font-size: 13px; line-height: 1.45; color: #F4E8F6; margin: 16px 0 0; max-width: 34em; }
.vantaggi { list-style: none; margin: 0; padding: 0; }
.vantaggi li { border-top: 1px solid rgba(255, 255, 255, .4); padding: 16px 0; font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }

/* Chiusura */
.chiusura { text-align: center; padding: 120px 20px 70px; }
.chiusura h2 { font-size: clamp(32px, 4.2vw, 52px); }
.chiusura p { font-size: 19px; color: var(--testo-2); margin: 14px auto 24px; max-width: 28em; line-height: 1.35; text-wrap: balance; }
.fondatrice { text-align: center; font-size: 15px; color: var(--testo-2); padding: 0 20px 36px; margin: 0; }
.fondatrice a { color: var(--inchiostro); font-weight: 650; }
.piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 18px 20px 26px; font-size: 14px; color: var(--testo-2); border-top: 1px solid var(--pietra); }
.piede p { margin: 0; }
.piede a { color: inherit; }

/* Le animazioni continue si fermano quando il telefono non si vede */
.fermo, .fermo * { animation-play-state: paused !important; }

/* Animazioni */
.p { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.p > i { display: inline-block; font-style: normal; }
.anim .parole .p > i { transform: translateY(112%); transition: transform .85s cubic-bezier(.16, .8, .24, 1) calc(var(--i) * 55ms); }
.anim .parole.on .p > i { transform: none; }
.anim .apertura h1 { animation: none; }
.palco .telefono { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.anim .scena .telefono { animation: compare .9s cubic-bezier(.16, .8, .24, 1) .35s both; }
.foto { translate: 0 calc(var(--sposta) * var(--pv, 0)); }
.btn { transition: background .15s ease, scale .2s ease; }
.btn:hover { scale: 1.03; }
.s-extra div:nth-child(2) { position: relative; animation: accende 6s ease-in-out infinite; }
.s-extra div:nth-child(2)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3em; height: 3em; margin: -1.5em; border-radius: 50%; background: rgba(30, 12, 36, .22); opacity: 0; animation: tocco 6s ease-out infinite; }
.anim .svela.vista .s-verifiche > div { animation: sale .55s cubic-bezier(.2, .7, .2, 1) both; }
.anim .svela.vista .s-verifiche > div:nth-child(1) { animation-delay: .35s; }
.anim .svela.vista .s-verifiche > div:nth-child(2) { animation-delay: .5s; }
.anim .svela.vista .timbro { animation: timbra .5s cubic-bezier(.3, 1.6, .5, 1) .7s both; }
.anim .svela.vista .controlli b { animation: cresce 1.3s cubic-bezier(.3, .7, .2, 1) both; }
.anim .svela.vista .controlli li:nth-child(1) b { animation-delay: .35s; }
.anim .svela.vista .controlli li:nth-child(2) b { animation-delay: .75s; }
.anim .svela.vista .carta.spenta { animation: spegni .6s ease .55s both; }
.anim .svela.vista .pila .carta:nth-child(2) { animation: sale .7s cubic-bezier(.2, .7, .2, 1) .9s both; }
.anim .svela.vista .voce { animation: sale .5s cubic-bezier(.2, .7, .2, 1) both; }
.anim .svela.vista .voce:nth-of-type(2) { animation-delay: .3s; }
.anim .svela.vista .voce:nth-of-type(3) { animation-delay: .45s; }
.anim .svela.vista .voce:nth-of-type(4) { animation-delay: .6s; }
.anim .svela.vista .azione { animation: premi .5s ease 1.2s both; }
.cleaner { scale: var(--sc, 1); }
.anim .vantaggi li { opacity: 0; translate: 30px 0; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
.anim .vantaggi.on li { opacity: 1; translate: 0 0; }
.anim .vantaggi.on li:nth-child(2) { transition-delay: .12s; }
.anim .vantaggi.on li:nth-child(3) { transition-delay: .24s; }
.scorre:hover .fila { animation-play-state: paused; }
@media (min-width: 821px) {
  .foto:nth-child(1), .foto:nth-child(3) { --pv: .55; }
  .anim .foto:nth-child(1) { animation: apri-s 1s cubic-bezier(.16, .8, .24, 1) .15s both; }
  .anim .foto:nth-child(3) { animation: apri-d 1s cubic-bezier(.16, .8, .24, 1) .15s both; }
}
@keyframes compare { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes apri-s { from { opacity: 0; transform: translateX(34%) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes apri-d { from { opacity: 0; transform: translateX(-34%) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes scansiona { from { top: 0; } to { top: 100%; } }
@keyframes timbra { from { opacity: 0; scale: 1.7; } to { opacity: 1; scale: 1; } }
@keyframes cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spegni { from { opacity: 1; } to { opacity: .55; } }
@keyframes premi { 0%, 100% { scale: 1; } 50% { scale: .96; } }
@keyframes accende { 0%, 40% { background: var(--crema); color: inherit; } 46%, 88% { background: var(--fucsia); color: #fff; } 94%, 100% { background: var(--crema); color: inherit; } }
@keyframes tocco { 0%, 38% { opacity: 0; transform: scale(.4); } 42% { opacity: 1; transform: scale(.7); } 52%, 100% { opacity: 0; transform: scale(1.5); } }
.apertura > * { animation: sale .8s cubic-bezier(.2, .7, .2, 1) both; }
.apertura > :nth-child(2) { animation-delay: .1s; }
.apertura > :nth-child(3) { animation-delay: .2s; }
.apertura > :nth-child(4) { animation-delay: .3s; }
.anim .svela { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--ritardo, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--ritardo, 0ms); }
.anim .svela.vista { opacity: 1; transform: none; }
.anim .svela.vista .s-spunte li::before { animation: spunta .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--ritardo, 0ms) + .25s); }
@keyframes battito { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 164, 99, .5); } 50% { box-shadow: 0 0 0 .4em rgba(31, 164, 99, 0); } }
@keyframes riempi { from { width: 18%; } to { width: 68%; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes passa { from { clip-path: inset(0 80% 0 0); } to { clip-path: inset(0 20% 0 0); } }
@keyframes lama { from { left: 20%; } to { left: 80%; } }
@keyframes dissolvi-nome { 0%, 28% { opacity: 1; } 30%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes nastro { to { transform: translateX(-50%); } }
@keyframes sale { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes spunta { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dissolvi { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }

/* Sul telefono le tre foto si alternano, così ognuna si vede intera */
@media (max-width: 720px) {
  .duo { grid-template-columns: auto 18px auto; padding: 24px 6px 0; height: 400px; border-radius: 16px; }
  .duo .telefono { --w: 158px; }
  .duo figcaption { font-size: 13px; margin-bottom: 8px; }
}
@media (max-width: 820px) {
  .prenota { grid-template-columns: 1fr; padding: 80px 16px 16px; min-height: 0; }
  .prenota-sx { max-width: none; }
  .prenota-dx { min-height: 460px; }
  .prenota-dx .telefono { --w: 210px; }
}
@media (max-width: 820px) {
  .spazi { gap: 18px 10px; }
}
@media (max-width: 720px) {
  .perche { grid-template-columns: 1fr; padding: 20px 0; }
}
@media (max-width: 820px) {
  .stanza { display: block; height: 400px; }
  .foto { position: absolute; inset: 0; animation: dissolvi 15s linear infinite; }
  .foto:nth-child(2) { animation-delay: -5s; z-index: 0; }
  .foto:nth-child(3) { animation-delay: -10s; }
  .foto:nth-child(1) { animation-delay: 0s; }
  .foto figcaption { animation: dissolvi-nome 15s linear infinite; animation-delay: inherit; }
  .scena .telefono { --w: 200px; bottom: -70px; }
}
@media (max-width: 820px) {
  .passi { grid-template-columns: 1fr; }
  .passo { height: 400px; }
  .riga, .cleaner { grid-template-columns: 1fr; gap: 26px; }
  .riga .quadro, .riga:nth-child(even) .quadro { order: 2; }
  .righe { gap: 64px; margin-top: 84px; }
  .blocco { padding-top: 110px; }
}
@media (max-width: 520px) {
  .top .logo { width: 86px; }
  .top-cleaner { font-size: 14px; }
  .apertura { padding-top: 92px; }
  .scena { padding: 0 12px; margin-top: 30px; }
  .quadro { min-height: 300px; padding: 22px; }
}
@media (max-width: 360px) {
  .top-cleaner { display: none; }
}
/* Sezione: una richiesta, poi vedi chi ha accettato (ciclo di 10 secondi) */
.richiesta { padding-top: 90px; }
.richiesta .quadro { min-height: 0; padding: 40px 30px 52px; }
.richiesta .telefono { --w: clamp(220px, 21vw, 250px); }
.richiesta .schermo { aspect-ratio: 9 / 17.6; }
.s-fasi { position: relative; flex: 1; }
.s-fase { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.s-fase.f3 { opacity: 1; align-items: center; justify-content: center; text-align: center; }
.s-fase.f1 { animation: fase-1 10s ease infinite both; }
.s-fase.f2 { animation: fase-2 10s ease infinite both; align-items: center; text-align: center; justify-content: center; }
.s-fase.f3 { animation: fase-3 10s ease infinite both; }
.s-voce { display: flex; justify-content: space-between; gap: .6em; padding: .72em 0; border-bottom: 1px solid var(--crema); font-size: .95em; }
.s-voce > span { color: var(--testo-2); }
.s-voce b { font-weight: 700; text-align: right; }
.s-invia { margin-top: auto; background: var(--fucsia); color: #fff; text-align: center; font-weight: 700; border-radius: 9em; padding: .85em 0; }
.s-cerca { width: 3.6em; height: 3.6em; margin-bottom: 1em; }
.s-cerca i { display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: .3em solid var(--pietra); border-top-color: var(--fucsia); animation: gira .9s linear infinite; }
.s-criteri { list-style: none; margin: .4em 0 0; padding: 0; font-size: .95em; font-weight: 600; color: var(--testo-2); }
.s-criteri li { padding: .3em 0; animation: criterio 10s ease infinite both; }
.s-criteri li:nth-child(2) { animation-delay: .5s; }
.s-criteri li:nth-child(3) { animation-delay: 1s; }
.s-fase.f3 .s-ritratto { margin-bottom: .7em; }
.s-fase.f3 .s-volto { width: 6em; height: 6em; }
.s-fase.f3 .s-titolo { margin: 0 0 .3em; }
.s-fase.f3 .s-recensita { margin-top: .5em; }
.s-fase.f3 .s-azioni { width: 100%; margin-top: 1.2em; }
.tappe { list-style: none; margin: 26px 0 0; padding: 0; font-size: 18px; font-weight: 500; }
.tappe li { padding: 10px 0 10px 16px; border-left: 2px solid var(--pietra); color: var(--inchiostro); }
.tappe .t1 { animation: tappa-1 10s ease infinite both; }
.tappe .t2 { animation: tappa-2 10s ease infinite both; }
.tappe .t3 { animation: tappa-3 10s ease infinite both; }
.richiesta:has(.telefono.fermo) .tappe li { animation-play-state: paused; }
@keyframes fase-1 { 0%, 28% { opacity: 1; } 33%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fase-2 { 0%, 28% { opacity: 0; } 33%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes fase-3 { 0%, 61% { opacity: 0; } 66%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes criterio { 0%, 33% { opacity: .3; } 38%, 66% { opacity: 1; } 70%, 100% { opacity: .3; } }
@keyframes tappa-1 { 0%, 29% { color: var(--inchiostro); border-left-color: var(--fucsia); } 33%, 96% { color: var(--testo-2); border-left-color: var(--pietra); } 100% { color: var(--inchiostro); border-left-color: var(--fucsia); } }
@keyframes tappa-2 { 0%, 29% { color: var(--testo-2); border-left-color: var(--pietra); } 33%, 62% { color: var(--inchiostro); border-left-color: var(--fucsia); } 66%, 100% { color: var(--testo-2); border-left-color: var(--pietra); } }
@keyframes tappa-3 { 0%, 62% { color: var(--testo-2); border-left-color: var(--pietra); } 66%, 95% { color: var(--inchiostro); border-left-color: var(--fucsia); } 100% { color: var(--testo-2); border-left-color: var(--pietra); } }
@media (max-width: 820px) { .richiesta { padding-top: 64px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .foto { opacity: 1; }
}