/* ===== Home: le sezioni sotto la hero (la hero e i blocchi comuni stanno in sito.css) ===== */

/* la riga sopra il titolo della hero: una frase, non un'etichetta */
.hero__sopra { font-size: clamp(14px, 1.1vw, 16px); font-weight: 500; color: var(--lp-azzurrino); letter-spacing: .01em; margin-bottom: 14px; }

/* ===== IL PROBLEMA: il disordine si ricompone dentro Looply (scena ferma, legata allo scorrimento) ===== */
.caos { background: var(--lp-perla); color: var(--lp-navy); }
.caos__palco { position: relative; height: 100svh; min-height: 640px; overflow: hidden; padding: clamp(72px, 10vh, 120px) var(--gutter) 0; }
.caos__testo { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; text-align: center; }
.caos__titolo { margin: 0; font-weight: 600; font-size: clamp(30px, 4vw, 54px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.caos__sotto { margin: 18px auto 0; max-width: 56ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; }

/* i pezzi: ogni "carta" ha la sua posizione (--x/--y) e la sua inclinazione (--r); ondeggiano piano finché lo scorrimento non le raccoglie */
.caos__pezzi { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pezzo { position: absolute; left: var(--x); top: var(--y); rotate: var(--r); width: 230px; font-size: 13px; line-height: 1.4; color: var(--lp-navy);
    background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 14px 30px -14px rgba(22, 52, 89, .35);
    animation: galleggia 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
@keyframes galleggia { 50% { translate: 0 -8px; } }
.pezzo b { display: block; font-weight: 600; font-size: 12.5px; }
.pezzo span { display: block; }
.pezzo--excel { width: 260px; padding: 0; overflow: hidden; border-radius: 6px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.pezzo__nome { display: block; padding: 7px 10px; background: #1d6f42; color: #fff; font: 600 11.5px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pezzo__griglia { display: grid; grid-template-columns: repeat(3, 1fr); }
.pezzo__griglia i { font-style: normal; padding: 6px 8px; border: 1px solid #d7dde3; border-width: 0 1px 1px 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pezzo__griglia i:nth-child(3), .pezzo__griglia i:nth-child(7) { background: #fff3cd; color: #8a5a00; }
.pezzo--wa { width: 220px; border-radius: 12px 12px 12px 4px; background: #e9fbe5; box-shadow: 0 0 0 1px rgba(22, 52, 89, .06), 0 14px 30px -14px rgba(22, 52, 89, .35); }
.pezzo--wa b { color: #0a7f4c; }
.pezzo--mail { width: 250px; }
.pezzo--mail b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pezzo--mail span { color: var(--lp-grigio); font-size: 12.5px; }
.pezzo--post { width: 170px; min-height: 120px; padding: 16px 14px; background: #fff2a8; box-shadow: 0 10px 24px -12px rgba(22, 52, 89, .4); font-weight: 500; border-radius: 2px; }
.pezzo--gialla { background: #ffd6a8; }
.pezzo--scontrino { width: 190px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; border-radius: 2px; padding: 14px 14px 18px;
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 100% / 12px 6px repeat-x;
            mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 100% / 12px 6px repeat-x; }
.pezzo--scontrino b { margin-top: 6px; border-top: 1px dashed #c9d3dc; padding-top: 6px; }

/* la finestra di Looply: compare al centro e riceve i pezzi riga per riga */
.caos__app { position: absolute; z-index: 1; left: 50%; top: 47%; translate: -50% -50%; width: min(640px, calc(100vw - 2 * var(--gutter)));
    background: #fff; color: var(--lp-navy); border-radius: 14px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .1), 0 30px 60px -24px rgba(22, 52, 89, .45), 0 2px 6px rgba(22, 52, 89, .06); }
.js .caos__app { opacity: 0; }
.caos__app-testa { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--lp-navy); color: var(--lp-perla); font-size: 14px; }
.caos__app-testa b { font-weight: 600; }
.caos__app-testa span { margin-left: auto; color: var(--lp-schiuma); font-size: 13px; }
.caos__righe { list-style: none; margin: 0; padding: 6px 18px 8px; }
.caos__righe li { position: relative; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(22, 52, 89, .1); font-size: 15px; min-height: 58px; }
.caos__righe li:last-child { border-bottom: 0; }
.caos__righe b { font-weight: 600; }
.caos__prima { color: var(--lp-grigio); }
.caos__dopo { position: absolute; left: 126px; right: 0; display: flex; align-items: center; gap: 8px; opacity: 0; translate: 0 8px; transition: opacity .35s var(--uscita), translate .4s var(--uscita); }
.caos__dopo::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--lp-azzurro);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(#000, #000);
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z' fill='%23000'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(#000, #000);
    -webkit-mask-composite: xor; mask-composite: exclude; }
.caos__righe li.is-fatta .caos__prima { opacity: 0; transition: opacity .25s; }
.caos__righe li.is-fatta .caos__dopo { opacity: 1; translate: 0 0; }
.caos__fine { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 6vh, 56px); margin: 0; text-align: center;
    font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.02em; text-wrap: balance; }
.js .caos__fine { opacity: 0; }
/* senza JS: niente scena, tutto già in ordine */
html:not(.js) .caos__palco { height: auto; min-height: 0; padding-bottom: 64px; }
html:not(.js) .caos__pezzi { display: none; }
html:not(.js) .caos__app { position: static; translate: 0; margin: 40px auto 0; }
html:not(.js) .caos__righe li .caos__prima { display: none; }
html:not(.js) .caos__dopo { position: static; opacity: 1; translate: 0; }
html:not(.js) .caos__fine { position: static; margin-top: 32px; }

/* ===== I NUMERI: un dato alla volta, il punto corre sull'arco ===== */
.numeri { background: #eef8fc; color: var(--lp-navy); }
.numeri__palco { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: clamp(64px, 10vh, 110px) var(--gutter) 0; }
.numeri__titolo { margin: 0; font-weight: 500; font-size: clamp(17px, 1.4vw, 20px); color: var(--lp-grigio); }
.numeri__arco { position: absolute; left: 50%; top: 22%; translate: -50% 0; width: min(1100px, 94vw); height: auto; overflow: visible; }
.numeri__centro { position: absolute; left: var(--gutter); right: var(--gutter); top: 44%; display: grid; justify-items: center; text-align: center; }
.numeri__grande { font-weight: 600; font-size: clamp(80px, 13vw, 180px); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numeri__grande small { font-size: .42em; font-weight: 600; letter-spacing: -.02em; margin-left: .08em; }
.numeri__dida { margin: 14px 0 0; max-width: 36ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; text-wrap: balance; }
.numeri__punti { display: flex; gap: 6px; margin-top: 22px; }
.numeri__punti i { width: 6px; height: 6px; border-radius: 99px; background: #c3d3df; transition: width .4s var(--uscita), background-color .4s; }
.numeri__punti i.is-on { width: 24px; background: var(--lp-azzurro); }
.numeri__nota { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(20px, 4vh, 40px); margin: 0; text-align: center; font-size: 13px; color: var(--lp-grigio); text-wrap: balance; }
html:not(.js) .numeri__palco { height: auto; min-height: 0; padding-bottom: 80px; }
html:not(.js) .numeri__arco, html:not(.js) .numeri__punti { display: none; }
html:not(.js) .numeri__centro { position: static; margin-top: 32px; }
html:not(.js) .numeri__nota { position: static; margin-top: 32px; }

/* ===== FUNZIONI: tessere di misure diverse con pezzi dell'app che si muovono da soli ===== */
.funzioni { background: var(--lp-perla); color: var(--lp-navy); padding: clamp(72px, 10vw, 140px) var(--gutter); }
.funzioni__in { max-width: 1180px; margin: 0 auto; }
.funzioni__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 24ch; }
.funzioni__sotto { margin: 18px 0 0; max-width: 58ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; }
.tessere { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.tessera { position: relative; overflow: hidden; border-radius: 16px; background: #fff; min-width: 0;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 18px 40px -22px rgba(22, 52, 89, .3), 0 2px 6px rgba(22, 52, 89, .05); }
.tessera__testo { padding: 24px 24px 0; }
.tessera__testo h3 { margin: 0; font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.tessera__testo p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--lp-grigio); text-wrap: pretty; }
.tessera--prenota { grid-column: span 3; grid-row: span 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; padding-bottom: 0; }
.tessera--prenota .tessera__testo { padding-bottom: 24px; align-self: start; }
.tessera--firma { grid-column: span 3; display: grid; grid-template-rows: auto 1fr; }
.tessera--zoom { grid-column: span 2; display: grid; grid-template-rows: 200px auto; }
.tessera--zoom .tessera__testo { padding-bottom: 22px; }
.tessera--vento { grid-column: span 2; }
.tessera--lingue { grid-column: span 2; }
.tessera--lingue .tessera__testo, .tessera--vento .tessera__testo { padding-bottom: 24px; }   /* come le altre: l'ultima riga non tocca il bordo */

/* telefono: cornice navy, schermo bianco */
.telefono { width: 230px; aspect-ratio: 9 / 18.4; padding: 8px; border-radius: 30px; background: var(--lp-abisso);
    box-shadow: 0 0 0 1px rgba(145, 220, 245, .3), 0 28px 56px -22px rgba(2, 10, 24, .7); }
.telefono__schermo { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 22px; background: #fff; }
.telefono--piccolo { width: 210px; margin: 0 22px -40px 0; }
.modulo { padding: 16px 14px; display: grid; gap: 10px; align-content: start; font-size: 11px; color: var(--lp-navy); }
.modulo__testa { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lp-tenue); }
.modulo label { display: grid; gap: 3px; font-size: 10.5px; color: var(--lp-grigio); }
.modulo__campo { display: block; min-height: 26px; padding: 5px 8px; border-radius: 6px; border: 1px solid #d5e3ec; color: var(--lp-navy); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.modulo__campo.is-attivo { border-color: var(--lp-azzurro); box-shadow: 0 0 0 2px rgba(7, 188, 231, .2); }
.modulo__campo.is-attivo::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 1px; vertical-align: -2px; background: var(--lp-navy); animation: lampeggia 1s steps(2) infinite; }
@keyframes lampeggia { 50% { opacity: 0; } }
.modulo__bottone { display: block; margin-top: 4px; padding: 8px; border-radius: 999px; text-align: center; background: var(--lp-azzurro); color: var(--lp-navy-profondo); font-weight: 600; font-size: 11.5px; transition: scale .15s; }
.modulo__bottone.is-premuto { scale: .96; background: var(--lp-azzurro-hover); }
.modulo__fatto { display: block; margin-top: 2px; padding: 8px 10px; border-radius: 8px; background: #e9fbe5; color: #0a7f4c; font-weight: 500; font-size: 11px; line-height: 1.4; opacity: 0; translate: 0 6px; transition: opacity .35s, translate .4s var(--uscita); }
.modulo__fatto.is-visibile { opacity: 1; translate: 0 0; }

/* la firma: il tratto si disegna quando la tessera arriva a video */
.firma { padding: 8px 24px 24px; display: grid; gap: 10px; }
.firma__svg { width: 100%; max-width: 320px; height: auto; }
.firma__tratto { stroke-dasharray: 900; stroke-dashoffset: 900; }
.is-visto .firma__tratto { animation: firma 2.2s var(--uscita) .3s forwards; }
@keyframes firma { to { stroke-dashoffset: 0; } }
.firma__dati { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--lp-grigio); }
.firma__stato { font-weight: 600; color: #0a7f4c; opacity: 0; transition: opacity .4s 2.3s; }
.is-visto .firma__stato { opacity: 1; }

/* zoom: la schermata vera ingrandita, inquadra un dettaglio e scorre piano verso un altro */
.zoom { position: relative; overflow: hidden; background: #f2f7fb; }
.zoom img { position: absolute; left: 0; top: 0; width: 230%; height: auto; max-width: none; transform-origin: 0 0;
    translate: calc(var(--zx) * -1) calc(var(--zy) * -1); animation: panora 16s ease-in-out infinite alternate; }
@keyframes panora { to { translate: calc(var(--zx2) * -1) calc(var(--zy2) * -1); } }
.zoom::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -30px 30px -30px rgba(22, 52, 89, .12); pointer-events: none; }

/* vento: barre per ora, la finestra buona è azzurra */
.vento { padding: 18px 24px 22px; }
.vento__barre { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; align-items: end; height: 96px; }
.vento__barre i { display: block; height: var(--h); border-radius: 4px 4px 2px 2px; background: #c9e6f4; transform-origin: bottom; scale: 1 0; transition: scale .7s var(--uscita); transition-delay: calc(var(--i) * 60ms); }
.vento__barre i.is-buona { background: var(--lp-azzurro); }
.is-visto .vento__barre i { scale: 1 1; }
.vento__ore { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--lp-grigio); font-variant-numeric: tabular-nums; }
.vento__finestra { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; }
.vento__finestra b { font-weight: 600; color: var(--lp-azzurro-ink); }
.vento__finestra span { color: var(--lp-grigio); }

/* cinque lingue: la stessa frase cambia lingua */
.lingue-giro { padding: 16px 24px 24px; }
.lingue-giro__chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--lp-tenue); color: var(--lp-azzurro-ink); font-size: 12.5px; font-weight: 600; }
.lingue-giro__frase { margin: 12px 0 0; min-height: 3.2em; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #e9fbe5; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.lingue-giro.is-cambia .lingue-giro__frase, .lingue-giro.is-cambia .lingue-giro__chip { animation: cambia .5s var(--uscita); }
@keyframes cambia { from { opacity: 0; translate: 0 6px; } }

.funzioni__epoi { margin: clamp(32px, 4vw, 48px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--lp-grigio); text-wrap: pretty; max-width: 80ch; }
.funzioni__epoi b { font-weight: 600; color: var(--lp-navy); }

/* ===== BARCHE E SHUTTLE ===== */
.barche { background: #eef8fc; color: var(--lp-navy); padding: clamp(72px, 10vw, 140px) var(--gutter); }
.barche__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 11fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.barche__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.barche__sotto { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; max-width: 40ch; }
.barche__shuttle { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(22, 52, 89, .13); font-size: 15px; line-height: 1.6; color: var(--lp-navy); text-wrap: pretty; max-width: 40ch; }
.barche__schermata { min-width: 0; }

/* ===== PER CHI: fila di schede che scorre da sola, si trascina ===== */
.scuole { background: var(--lp-perla); color: var(--lp-navy); padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.scuole__in { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.scuole__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 22ch; }
.scuole__sotto { margin: 18px 0 0; max-width: 58ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; }
.fila__maschera { margin-top: clamp(36px, 4vw, 56px); overflow: hidden; padding: 6px 0 24px; }
.fila { display: flex; gap: 18px; width: max-content; padding-left: max(var(--gutter), calc((100vw - 1180px) / 2)); cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform; }
.fila:active { cursor: grabbing; }
.js .fila { touch-action: pan-y; }   /* da telefono il dito in orizzontale trascina la fila, in verticale scorre la pagina */
.scuola { flex: 0 0 auto; width: 300px; min-height: 230px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: #fff; color: var(--lp-navy);
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 18px 40px -22px rgba(22, 52, 89, .3); }
.scuola:first-child { background: var(--lp-navy); color: var(--lp-perla); box-shadow: 0 18px 40px -22px rgba(22, 52, 89, .6); }
.scuola h3 { margin: 0; font-weight: 600; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.scuola p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lp-grigio); text-wrap: pretty; }
.scuola:first-child p { color: var(--lp-schiuma); }
.scuola__chip { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.scuola__chip span { padding: 5px 10px; border-radius: 999px; background: var(--lp-tenue); color: var(--lp-azzurro-ink); font-size: 12.5px; font-weight: 500; }
.scuola:first-child .scuola__chip span { background: rgba(145, 220, 245, .18); color: var(--lp-azzurrino); }
.fila__barra { position: relative; width: 200px; height: 2px; margin: 0 auto; border-radius: 2px; background: rgba(22, 52, 89, .12); overflow: hidden; }
.fila__barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: 2px; background: var(--lp-navy); }
html:not(.js) .fila__maschera { overflow-x: auto; }

/* ===== PERCHÉ È DIVERSO: cinque righe grandi, senza schede ===== */
.perche { background: var(--lp-perla); color: var(--lp-navy); }
.perche__in { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(72px, 10vw, 140px); }
.perche__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 22ch; }
.motivi { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; counter-reset: motivo; }
.motivi li { counter-increment: motivo; display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(20px, 3vw, 48px); align-items: baseline; padding: 26px 0; border-top: 1px solid rgba(22, 52, 89, .13); }
.motivi li:last-child { border-bottom: 1px solid rgba(22, 52, 89, .13); }
.motivi li::before { content: counter(motivo, decimal-leading-zero); font-weight: 600; font-size: 14px; color: var(--lp-azzurro-ink); font-variant-numeric: tabular-nums; }
.motivi h3 { margin: 0; font-weight: 600; font-size: clamp(20px, 2vw, 27px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.motivi p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; max-width: 52ch; }
/* "nato in una scuola vera" sta in sito.css (.nato): qui solo la foto nuova dal drone, 16:9 */
.perche .nato__foto { aspect-ratio: 16 / 10; }

/* ===== TRE PASSI + IL TELEFONO CHE SCORRE DA SOLO ===== */
.passi { background: var(--lp-perla); color: var(--lp-navy); padding: clamp(72px, 10vw, 140px) var(--gutter); }
.passi__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 96px); align-items: center; }
.passi__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.passi__lista { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; counter-reset: passo; display: grid; gap: 22px; }
.passi__lista li { counter-increment: passo; position: relative; padding-left: 58px; }
.passi__lista li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--lp-azzurro); color: var(--lp-navy-profondo); font-weight: 600; font-size: 17px; }
.passi__lista h3 { margin: 6px 0 0; font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.015em; }
.passi__lista p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; max-width: 48ch; }
.passi__azioni { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 12px; }
.passi__nota { font-weight: 500; }
.passi__nota { margin: 12px 0 0; font-size: 13.5px; color: var(--lp-grigio); }
.passi__telefono { display: grid; justify-items: center; gap: 16px; }
.passi__telefono .telefono { width: min(290px, 100%); }
.telefono__schermo--scorre img { width: 100%; height: auto; translate: 0 0; animation: scorre-tel 14s ease-in-out infinite alternate; animation-delay: 1.5s; }
@keyframes scorre-tel { to { translate: 0 var(--scorri, -40%); } }
.passi__dida { margin: 0; max-width: 32ch; text-align: center; font-size: 14px; line-height: 1.5; color: var(--lp-grigio); text-wrap: balance; }

/* ===== prezzi: quattro aggiunte invece di tre, link alla pagina intera ===== */
.aggiunte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prezzi__nota a { color: var(--lp-azzurro-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ===== INTRO: lo stormo arriva a spirale, gira (antiorario, 2,4 s come da marchio), poi un cerchio si apre sulla hero ===== */
@property --foro { syntax: "<length>"; inherits: false; initial-value: 0px; }
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--lp-perla);
    -webkit-mask: radial-gradient(circle at 50% 47%, transparent var(--foro), #000 calc(var(--foro) + 1px));
            mask: radial-gradient(circle at 50% 47%, transparent var(--foro), #000 calc(var(--foro) + 1px));
    animation: intro-apre 1s cubic-bezier(.7, 0, .2, 1) 2.05s forwards; }
@keyframes intro-apre { to { --foro: 150vmax; } }
html.intro-in-corso { overflow: hidden; }
.intro__marchio { display: grid; justify-items: center; animation: intro-marchio .45s ease-in 1.8s forwards; }
@keyframes intro-marchio { to { scale: .86; opacity: 0; } }
.intro .stormo { width: 128px; height: 128px; overflow: visible; }
.intro .stormo path { fill: var(--lp-azzurro); }
.intro .stormo__giro { transform-box: view-box; transform-origin: 0px 0px; animation: intro-giro 2.4s linear infinite; }
@keyframes intro-giro { to { rotate: -360deg; } }
.intro .kite { transform-box: view-box; transform-origin: 0px 0px; opacity: 0; animation: intro-kite .95s cubic-bezier(.16, 1, .3, 1) forwards; }
.intro .k1 { animation-delay: .05s; } .intro .k2 { animation-delay: .11s; } .intro .k3 { animation-delay: .17s; } .intro .k4 { animation-delay: .23s; }
.intro .k5 { animation-delay: .29s; } .intro .k6 { animation-delay: .35s; } .intro .k7 { animation-delay: .41s; } .intro .k8 { animation-delay: .47s; }
@keyframes intro-kite { from { opacity: 0; scale: .15; rotate: 150deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
.intro__nome { margin-top: 18px; font: 600 34px/1 var(--sans); letter-spacing: -.03em; color: var(--lp-navy); opacity: 0; translate: 0 10px; animation: intro-testo .7s var(--uscita) .75s forwards; }
.intro__sotto { margin-top: 7px; font: 600 10px/1 var(--sans); letter-spacing: .42em; padding-left: .42em; color: var(--lp-azzurro-ink); opacity: 0; translate: 0 8px; animation: intro-testo .7s var(--uscita) .9s forwards; }
@keyframes intro-testo { to { opacity: 1; translate: 0 0; } }


/* ===== LA GIORNATA: card che si impilano sopra il mare in video ===== */
.giornata.giornata--pila { position: relative; isolation: isolate; background: var(--lp-abisso); color: var(--lp-perla);
    padding: clamp(84px, 10vw, 140px) var(--gutter) clamp(64px, 8vw, 110px); }
.giornata__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.giornata__fondo video { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100svh; object-fit: cover; opacity: .3; filter: saturate(.85); }
.giornata__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--lp-abisso) 0%, transparent 18%, transparent 82%, var(--lp-abisso) 100%); }
.giornata--pila .giornata__intro { max-width: 1240px; text-align: left; }
.giornata--pila .giornata__titolo { color: var(--lp-perla); }
.giornata--pila .giornata__sotto { color: var(--lp-schiuma); }
.momenti.momenti--pila { list-style: none; display: block; max-width: 1240px; margin: clamp(44px, 6vw, 80px) auto 0; padding: 0; }
.momenti--pila::before { display: none; }
.momenti--pila .momento { display: block; position: sticky; top: var(--top, 88px); margin-bottom: 9vh; }
.momenti--pila .momento:last-child { margin-bottom: 0; }
.momento__carta { position: relative; display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 9fr); gap: clamp(22px, 3vw, 44px); align-items: start;
    padding: clamp(20px, 2.4vw, 32px); border-radius: 26px; background: var(--lp-perla); color: var(--lp-navy); transform-origin: 50% 0;
    box-shadow: 0 0 0 1px rgba(145, 220, 245, .16), 0 40px 90px -36px rgba(0, 0, 0, .75); }
/* la card coperta dalla successiva si scurisce un poco (lo script porta --ombra da 0 a .45) */
.momento__carta::after { content: ""; position: absolute; inset: 0; z-index: 7; border-radius: inherit; background: #061527; opacity: var(--ombra, 0); pointer-events: none; }
.momento__lato { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.momenti--pila .momento__ora { display: inline-flex; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--lp-tenue); font-size: 14px; }
.momenti--pila .momento__ora::before { display: none; }
.momenti--pila .momento__sotto { max-width: none; font-size: 15.5px; }
.momento__foto { position: relative; margin: auto 0 0; padding-top: 22px; }
.momento__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; transition: scale .7s var(--uscita); }
.momento__foto { overflow: hidden; border-radius: 16px; }
.momento__foto:hover img { scale: 1.05; }
.momento__foto figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(11, 31, 58, .72); color: var(--lp-perla); font-size: 12px; font-weight: 500; }
.momenti--pila .momento__schermata { align-self: start; }
.giornata--pila .giornata__nota { position: relative; max-width: 1240px; margin-top: 28px; text-align: center; color: var(--lp-fondale); }

/* i popup attorno alla card: escono quando la card arriva e seguono il mouse a profondità diverse (--k), come nella hero */
.pop { position: absolute; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; align-items: center; max-width: 270px;
    padding: 11px 16px 11px 11px; border-radius: 16px; background: #fff; color: var(--lp-navy);
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .07), 0 24px 48px -18px rgba(11, 31, 58, .55), 0 4px 12px rgba(11, 31, 58, .12);
    opacity: 0; scale: .9; translate: calc(var(--mx, 0px) * var(--k, 1)) calc(var(--my, 0px) * var(--k, 1) + 14px);
    transition: opacity .5s var(--uscita), scale .6s var(--uscita), translate .9s var(--uscita); pointer-events: none; }
.pop b { grid-column: 2; font-weight: 600; font-size: 14px; line-height: 1.25; }
.pop small { grid-column: 2; font-size: 12.5px; line-height: 1.35; color: var(--lp-grigio); }
.pop__ico { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--lp-tenue); color: var(--lp-azzurro-ink); }
.pop__ico svg { width: 20px; height: 20px; }
.pop--wa .pop__ico { background: #e9fbe5; color: #0a7f4c; }
.pop--ok .pop__ico { background: #ecfdf5; color: #059669; }
.pop--a { top: 26px; right: -28px; --k: -1.3; }
.pop--b { bottom: -24px; left: 30%; --k: 1.7; transition-delay: .12s; }
.momento.is-dentro .pop { opacity: 1; scale: 1; translate: calc(var(--mx, 0px) * var(--k, 1)) calc(var(--my, 0px) * var(--k, 1)); }

/* ===== I NUMERI: più piccoli, ai lati due foto vere e due notifiche che si muovono con lo scorrimento ===== */
.numeri__grande { font-size: clamp(56px, 8vw, 116px); }
.numeri__grande small { font-size: .45em; }
.numeri__arco { width: min(820px, 80vw); top: 26%; }
.numeri__foto { position: absolute; z-index: 1; margin: 0; width: clamp(150px, 15vw, 230px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 30px 60px -26px rgba(22, 52, 89, .55); }
.numeri__foto img { width: 100%; height: 100%; object-fit: cover; }
.numeri__foto--sx { left: max(var(--gutter), 5vw); top: 24%; rotate: -5deg; }
.numeri__foto--dx { right: max(var(--gutter), 5vw); top: 18%; rotate: 4deg; }
.numeri__chip { position: absolute; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 14px 10px 10px;
    border-radius: 14px; background: #fff; color: var(--lp-navy); box-shadow: 0 20px 40px -18px rgba(22, 52, 89, .5); max-width: 240px; }
.numeri__chip b { grid-column: 2; font-size: 13.5px; font-weight: 600; }
.numeri__chip small { grid-column: 2; font-size: 12px; color: var(--lp-grigio); }
.numeri__chip--sx { left: calc(max(var(--gutter), 5vw) + 90px); top: 62%; }
.numeri__chip--dx { right: calc(max(var(--gutter), 5vw) + 70px); top: 56%; }
.numeri__chip--dx .pop__ico { background: #ecfdf5; color: #059669; }

/* ===== FUNZIONI: fascia scura con foto in alto, le tessere la scavalcano ===== */
.funzioni.fascia { position: relative; isolation: isolate; background: var(--lp-perla); }
.funzioni__fondo { position: absolute; left: 0; right: 0; top: 0; height: clamp(440px, 52%, 620px); z-index: -1; overflow: hidden; background: var(--lp-navy-profondo); }
.funzioni__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .26; filter: saturate(.7); }
.funzioni__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(16, 42, 73, .65)); }
.funzioni.fascia .funzioni__titolo { color: var(--lp-perla); }
.funzioni.fascia .funzioni__sotto { color: var(--lp-schiuma); }
.tessere { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tessera { display: flex; flex-direction: column; }
.tessera__testo { padding: 22px 24px 24px; }
.tessera__media { position: relative; height: 210px; overflow: hidden; background: #f2f7fb; flex: 0 0 auto; }
.tessera__media > * { transition: scale .7s var(--uscita); }
.tessera:hover .tessera__media > * { scale: 1.06; }   /* al passaggio del mouse si ingrandisce solo l'immagine */
.tessera--firma { grid-column: span 3; }
.tessera--foto { grid-column: span 3; }
.tessera--foto .tessera__media img { width: 100%; height: 100%; object-fit: cover; }
.tessera--vento, .tessera--lingue { grid-column: span 2; }
.tessera--foto:nth-of-type(4) { grid-column: span 2; }
.tessera--prenota { grid-column: span 4; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
    background: linear-gradient(135deg, var(--lp-tenue), #c8eefa); }
.tessera--prenota .tessera__testo { align-self: center; padding: 28px 8px 28px 30px; }
.tessera--prenota .tessera__testo h3 { font-size: 23px; }
.prenota__media { height: 300px; background: none; padding: 26px 34px 0 8px; display: flex; align-items: flex-start; }
.tessera--prenota .telefono--piccolo { width: 200px; margin: 0; }
.tessera--epoi { grid-column: span 2; padding: 28px; background: var(--lp-navy); color: var(--lp-perla); justify-content: center; }
.tessera--epoi h3 { margin: 0; font-weight: 600; font-size: 20px; }
.tessera--epoi p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--lp-schiuma); text-wrap: pretty; }
.firma.tessera__media { padding: 26px 28px 20px; background: linear-gradient(180deg, #fff, #f2f7fb); display: grid; align-content: center; gap: 10px; }
.vento.tessera__media { padding: 22px 24px 16px; background: linear-gradient(180deg, #fff, #f2f7fb); }
.vento.tessera__media .vento__barre { height: 104px; }
.lingue-giro.tessera__media { padding: 26px 24px 18px; background: linear-gradient(180deg, #fff, #f2f7fb); display: grid; align-content: start; gap: 14px; }
.lingue-giro .lingue-giro__frase { margin: 0; }
.lingue-giro .lingue-giro__chip { justify-self: start; }
.bandiere { display: flex; gap: 10px; }
.bandiere span { width: 40px; height: 27px; border-radius: 5px; overflow: hidden; opacity: .42; box-shadow: 0 0 0 1px rgba(22, 52, 89, .12);
    transition: opacity .3s, scale .4s var(--uscita), box-shadow .3s; }
.bandiere svg { display: block; width: 100%; height: 100%; }
.bandiere span.is-on { opacity: 1; scale: 1.14; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lp-azzurro); }

/* ===== BARCHE E SHUTTLE: fascia scura con il lago, icona della barca che dondola ===== */
.barche.fascia { position: relative; isolation: isolate; background: var(--lp-navy-profondo); color: var(--lp-perla); padding: clamp(80px, 9vw, 130px) var(--gutter) clamp(64px, 7vw, 100px); }
.barche__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.barche__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .24; filter: saturate(.75); }
.barche__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 42, 73, .92) 0%, rgba(16, 42, 73, .55) 45%, rgba(16, 42, 73, .3)); }
.barche.fascia .barche__titolo { color: var(--lp-perla); }
.barche.fascia .barche__sotto { color: var(--lp-schiuma); }
.barche.fascia .barche__shuttle { color: var(--lp-perla); border-top-color: rgba(145, 220, 245, .25); }
.barche__icona { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 18px; background: rgba(7, 188, 231, .16); color: var(--lp-azzurrino);
    box-shadow: inset 0 0 0 1px rgba(145, 220, 245, .3); }
.barche__icona svg { width: 30px; height: 30px; animation: dondola 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes dondola { 0%, 100% { rotate: -5deg; translate: 0 0; } 50% { rotate: 5deg; translate: 0 -2px; } }
.scuole { padding-top: clamp(56px, 7vw, 96px); }

/* ===== PER CHI: card con la foto della disciplina (si ingrandisce solo la foto) ===== */
.scuola { padding: 0; overflow: hidden; width: 300px; min-height: 0; gap: 0; }
.scuola__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--lp-tenue); }
.scuola__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--uscita); pointer-events: none; }
.scuola:hover .scuola__foto img { scale: 1.07; }
.scuola__testo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }

/* ===== PERCHÉ LOOPLY: righe con icona; la linea si disegna, l'icona entra; al passaggio del mouse la riga si accende ===== */
.motivi li { position: relative; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); border-top: 0; align-items: center;
    transition: background-color .3s, padding-left .4s var(--uscita); border-radius: 14px; }
.motivi li:last-child { border-bottom: 0; }
.motivi li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(22, 52, 89, .16); transform-origin: 0 50%; }
.motivi li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(22, 52, 89, .16); }
.motivo__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--lp-tenue); color: var(--lp-azzurro-ink);
    transition: background-color .3s, color .3s, rotate .5s var(--uscita), scale .5s var(--uscita); }
.motivo__ico svg { width: 24px; height: 24px; }
.motivi li:hover { background: #fff; padding-left: 14px; }
.motivi li:hover .motivo__ico { background: var(--lp-azzurro); color: var(--lp-navy-profondo); rotate: -8deg; scale: 1.06; }
.motivi li:hover h3 { color: var(--lp-azzurro-ink); }
.motivi h3 { transition: color .3s; }
.js .motivi li:not(.is-visto)::before { scale: 0 1; }
.js .motivi li:not(.is-visto) .motivo__ico { scale: .5; opacity: 0; }
.js .motivi li:not(.is-visto) h3, .js .motivi li:not(.is-visto) p { opacity: 0; translate: 0 14px; }
.motivi li::before, .motivi li .motivo__ico, .motivi li h3, .motivi li p { transition-property: scale, opacity, translate, background-color, color, rotate; transition-duration: .9s, .6s, .8s, .3s, .3s, .5s;
    transition-timing-function: var(--uscita); transition-delay: calc(var(--i, 0) * 90ms); }
.motivi li:hover .motivo__ico, .motivi li:hover h3 { transition-delay: 0s; }

/* ===== NATO: foto più grande, pulsante vero ===== */
.nato.fascia .nato__in { max-width: 1280px; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
.nato.fascia .nato__foto { aspect-ratio: 4 / 3; }
.nato.fascia .nato__foto img { transition: scale .9s var(--uscita); }
.nato.fascia .nato__foto:hover img { scale: 1.04; }
.nato__bottone { margin-top: 30px; padding: 17px 32px; font-size: 16px; }

/* ===== TRE PASSI: il telefono entra ruotando in 3D (lo script lo guida scorrendo), poi resta e scorre da solo ===== */
.passi__scena { perspective: 1300px; display: grid; justify-items: center; }
.passi__scena .telefono { position: relative; transform-style: preserve-3d; will-change: transform; }
.passi__scena .telefono::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) calc(30% + var(--lucido, 0) * 40%), transparent calc(42% + var(--lucido, 0) * 40%)); }

/* ===== entrate dei testi: le parole dei titoli salgono da una maschera (lo script aggiunge .parole) ===== */
.parole .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.parole .w > span { display: inline-block; }

/* ===== passaggi del mouse ===== */
.bottone { transition-property: background-color, color, border-color, scale, translate, box-shadow; }
.bottone:hover { translate: 0 -2px; box-shadow: 0 12px 24px -12px rgba(7, 188, 231, .7); }
.bottone--onda:hover { box-shadow: inset 0 0 0 1px rgba(145, 220, 245, .6); }
.scuola, .tessera { transition: translate .5s var(--uscita), box-shadow .5s var(--uscita); }
.scuola:hover, .tessera:hover { translate: 0 -4px; }

/* ===== prezzi: quattro aggiunte invece di tre, link alla pagina intera ===== */
.aggiunte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prezzi__nota a { color: var(--lp-azzurro-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ===== telefono ===== */
@media (max-width: 760px) {
    .caos__palco { min-height: 600px; padding-top: 72px; }
    .pezzo { width: 150px; font-size: 11px; padding: 9px 10px; left: min(var(--x), calc(100% - 178px)); }
    .pezzo--excel { width: 170px; }
    .pezzo__griglia i { padding: 4px 5px; font-size: 10px; }
    .pezzo--wa { width: 150px; }
    .pezzo--mail { width: 160px; }
    .pezzo--post { width: 120px; min-height: 84px; padding: 10px; }
    .pezzo--scontrino { width: 130px; font-size: 10.5px; }
    .caos__pezzi { top: 36%; }
    .caos__app { top: 44%; translate: -50% -50%; }
    .caos__righe li { grid-template-columns: 82px 1fr; font-size: 13.5px; padding: 12px 0; min-height: 50px; }
    .caos__dopo { left: 98px; }

    .momento__carta { grid-template-columns: 1fr; border-radius: 20px; padding: 18px 14px 22px; }
    .momenti--pila .momento { margin-bottom: 5vh; }
    .momento__foto { display: none; }   /* da telefono la card resta corta: la foto la vedi già nelle fasce */
    .pop { max-width: 200px; padding: 8px 12px 8px 8px; }
    .pop__ico { width: 30px; height: 30px; border-radius: 9px; }
    .pop b { font-size: 12.5px; } .pop small { font-size: 11px; }
    .pop--a { top: -16px; right: 10px; }
    .pop--b { bottom: -16px; left: 12px; }
    .numeri__palco { min-height: 560px; }
    .numeri__arco { top: 30%; width: 92vw; }
    .numeri__centro { top: 42%; }
    .numeri__foto { width: 92px; top: auto; bottom: 74px; }
    .numeri__foto--sx { left: 14px; } .numeri__foto--dx { right: 14px; }
    .numeri__chip { display: none; }
    .funzioni__fondo { height: 360px; }
    .tessere { grid-template-columns: 1fr; }
    .tessera, .tessera--foto:nth-of-type(4) { grid-column: auto; }
    .tessera--prenota { grid-template-columns: 1fr; }
    .tessera--prenota .tessera__testo { padding: 24px 22px 0; }
    .prenota__media { height: 260px; justify-content: center; padding: 20px 0 0; }
    .tessera__media { height: 190px; }
    .barche__in { grid-template-columns: 1fr; row-gap: 24px; }
    .barche__fondo::after { background: rgba(16, 42, 73, .82); }
    .scuola { width: 250px; }
    .motivi li { grid-template-columns: 48px 1fr; }
    .motivi p { grid-column: 2; }
    .nato.fascia .nato__in { grid-template-columns: 1fr; }
    .passi__in { grid-template-columns: 1fr; row-gap: 40px; }
    .passi__testo .bottone { width: 100%; justify-content: center; }
    .aggiunte--4 { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) and (min-width: 761px) {
    .momento__carta { grid-template-columns: 1fr; }
    .momento__lato { display: grid; grid-template-columns: 1fr 220px; column-gap: 24px; }
    .momento__lato .momento__foto { grid-column: 2; grid-row: 1 / span 3; padding-top: 0; }
    .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tessera, .tessera--foto:nth-of-type(4) { grid-column: auto; }
    .tessera--prenota { grid-column: 1 / -1; }
    .numeri__chip { display: none; }
    .aggiunte--4 { grid-template-columns: 1fr 1fr; gap: 16px 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .pezzo, .telefono__schermo--scorre img, .barche__icona svg { animation: none; }
    .pop { opacity: 1; scale: 1; translate: 0 0; transition: none; }
    .firma__tratto { stroke-dashoffset: 0; animation: none; }
    .firma__stato { opacity: 1; transition: none; }
    .vento__barre i { scale: 1 1; transition: none; }
    .js .motivi li:not(.is-visto)::before { scale: 1 1; }
    .js .motivi li:not(.is-visto) .motivo__ico, .js .motivi li:not(.is-visto) h3, .js .motivi li:not(.is-visto) p { opacity: 1; scale: 1; translate: 0 0; }
    .tessera__media > *, .scuola__foto img, .momento__foto img { transition: none; }
}

/* ===== le demo dentro le card impilate: più corte (le versioni intere restano nell'app vera) ===== */
.momenti--pila .pl-tabs, .momenti--pila .pl-card { display: none; }                 /* Plan: niente schede in fondo */
.momenti--pila .ch-seg, .momenti--pila .ch-riep-giorno, .momenti--pila .ch-kpis { display: none; }   /* Chiusura: niente filtri, contatori e riepilogo doppio (resta "Conferma tutte") */
.momenti--pila .ch-barra { justify-content: flex-end; min-height: 0; }
.momenti--pila .ch-riga { padding: 9px 12px; }
.momenti--pila .ch-verdetto { margin-top: 4px; padding: 6px 10px; }
.momenti--pila .ch-azioni { margin-top: 6px; }
.momenti--pila .ch-gruppo { gap: 6px; }
.momenti--pila .ch-gruppi { gap: 10px; }
.momento__foto img { aspect-ratio: 16 / 10; }
.momento__foto img { height: auto; }
/* schermate ferme nelle tessere: ingrandite su un dettaglio (--o punto, --z ingrandimento); al passaggio del mouse crescono ancora un poco */
.tessera--foto .tessera__media img { object-position: var(--o, 50% 50%); transform-origin: var(--o, 50% 50%); transform: scale(var(--z, 1)); }
.funzioni__fondo img { object-position: 50% 60%; opacity: .32; }

/* ======================================================================================================
   REVISIONE 2 (25 ott): il mare dietro tutto il sito, card della giornata uguali, funzioni riordinate,
   barche compatte, "perché" a riquadri sul mare, storia con foto sovrapposte
   ====================================================================================================== */


/* hero: la foto dell'attrezzatura (quadrata) e il telefono più grande, più in alto, non tagliato */
.app__scheda--foto img { aspect-ratio: 1 / 1; }
.app__scheda--tel { right: -4%; bottom: 14%; width: clamp(140px, 13vw, 184px); rotate: 4deg; }

/* giornata: il video del mare si vede di più, sfumato in alto e in basso invece del bordo scuro */
.giornata__fondo video { opacity: .5; -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.giornata__fondo::after { display: none; }

/* card della giornata: una frase, tre punti con icona e grassetto, testo giustificato, foto grande che riempie lo spazio */
.momento__lead { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--lp-grigio); text-align: justify; hyphens: auto; text-wrap: pretty; }
.momento__punti { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.momento__punti li, .barche__punti li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 11px; align-items: start; font-size: 14.5px; line-height: 1.45; text-align: justify; hyphens: auto; }
.momento__punti b, .barche__punti b { font-weight: 600; }
.momento__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--lp-tenue); color: var(--lp-azzurro-ink); }
.momento__ico svg { width: 17px; height: 17px; }
.momento__punti li > span:last-child, .barche__punti li > span:last-child { padding-top: 5px; }
.momenti--pila .momento__foto { flex: 1 1 auto; min-height: 150px; margin-top: 18px; padding-top: 0; }
.momenti--pila .momento__foto img { width: 100%; height: 100%; min-height: 150px; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 1001px) {
    /* tutte le card alte uguali (--h-carta, da home.js); la demo si rimpicciolisce quanto serve per starci */
    .momenti--pila .momento__carta { height: var(--h-carta, auto); grid-template-rows: minmax(0, 1fr); }
    .momenti--pila .momento__lato { min-height: 0; }
    .momenti--pila .momento__schermata { height: 100%; overflow: hidden; }
}
.momento__schermata > [style*="scale"], [data-adatta] > [style*="scale"] { transform-origin: 0 0; transition: transform .35s var(--uscita); }

/* funzioni: in testa le prenotazioni (vendono) accanto ai tesseramenti, poi noleggi e paghe a metà, poi vento, lingue, "e poi" */
@media (min-width: 1001px) {
    .tessere > .tessera--prenota { grid-column: span 4; }
    .tessere > .tessera--firma { grid-column: span 2; }
    .tessere > .tessera--inv, .tessere > .tessera--pers { grid-column: span 3; }
    .tessere > .tessera--vento, .tessere > .tessera--lingue, .tessere > .tessera--epoi { grid-column: span 2; }
    .tessera--prenota .prenota__media { height: 330px; }
}

/* barche: il lago si vede, testo a punti, demo rimpicciolita */
.barche.fascia { padding: clamp(64px, 7vw, 104px) var(--gutter); }
.barche__fondo img { opacity: .5; filter: saturate(.9); }
.barche__fondo::after { background: linear-gradient(90deg, rgba(16, 42, 73, .94) 0%, rgba(16, 42, 73, .7) 42%, rgba(16, 42, 73, .2)); }
.barche.fascia .barche__in { grid-template-columns: minmax(280px, 5fr) minmax(0, 8fr); align-items: center; }
.barche__lead { margin: 16px 0 0; max-width: 40ch; font-size: 17px; line-height: 1.55; color: var(--lp-schiuma); text-wrap: pretty; }
.barche__punti { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 46ch; color: var(--lp-perla); }
.barche__punti .momento__ico { background: rgba(7, 188, 231, .16); color: var(--lp-azzurrino); }
.barche__punti b { color: #fff; }
.barche__schermata { overflow: hidden; }

/* perché Looply: riquadri sul mare profondo; il primo, grande, con la foto del fondatore */
.perche--mare { background: transparent; color: var(--lp-perla); }
.perche--mare .perche__titolo { color: var(--lp-perla); }
.perche--mare .motivi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.perche--mare .motivi li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 26px; overflow: hidden; border-radius: 22px;
    background: rgba(16, 42, 73, .66); box-shadow: inset 0 0 0 1px rgba(145, 220, 245, .16); transition: translate .5s var(--uscita), box-shadow .4s, background-color .4s; }
.perche--mare .motivi li::before, .perche--mare .motivi li:last-child::after { display: none; }
.perche--mare .motivi li:hover { padding-left: 26px; translate: 0 -4px; background: rgba(16, 42, 73, .82); box-shadow: inset 0 0 0 1px rgba(7, 188, 231, .5), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.perche--mare .motivi h3 { color: var(--lp-perla); font-size: 22px; }
.perche--mare .motivi li:hover h3 { color: var(--lp-azzurrino); }
.perche--mare .motivi p { color: var(--lp-schiuma); font-size: 15px; max-width: none; }
.perche--mare .motivo__ico { margin-bottom: auto; background: rgba(7, 188, 231, .16); color: var(--lp-azzurrino); }
.perche--mare .motivi li.motivo--foto { grid-row: span 2; min-height: 430px; }
.motivo__foto { position: absolute; inset: 0; z-index: -1; margin: 0; }
.motivo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: scale .9s var(--uscita); }
.motivo__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 58, .15) 30%, rgba(11, 31, 58, .92)); }
.motivo--foto { isolation: isolate; }
.motivo--foto:hover .motivo__foto img { scale: 1.05; }

/* nato in una scuola vera: due foto sovrapposte e una nota che galleggia, sul mare */
.nato__foto-gruppo { position: relative; }
.nato__foto2 { position: absolute; right: -5%; bottom: -14%; width: 40%; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 18px; rotate: 4deg;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -24px rgba(0, 0, 0, .8); }
.nato__foto2 img { width: 100%; height: 100%; object-fit: cover; }
.nato__pop { left: -5%; top: 9%; opacity: 1; scale: 1; translate: 0 0; }
.nato.fascia .nato__in { padding-bottom: clamp(90px, 10vw, 140px); }

@media (max-width: 1000px) {
    .barche.fascia .barche__in { grid-template-columns: 1fr; row-gap: 28px; }
    .perche--mare .motivi { grid-template-columns: 1fr 1fr; }
    .perche--mare .motivi li.motivo--foto { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
}
@media (max-width: 760px) {
    .app__scheda--tel { display: none; }
    .momenti--pila .momento__foto { display: block; min-height: 0; }
    .momenti--pila .momento__foto img { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
    .perche--mare .motivi { grid-template-columns: 1fr; }
    .nato__foto2 { width: 44%; right: -2%; bottom: -10%; }
    .nato__pop { left: 8px; top: -18px; }
}
.perche--mare .motivi li { align-items: flex-start; }
/* nessuna sezione può allargare la pagina (foto ruotate, popup): clip non crea uno scorrimento, quindi le card sticky funzionano */
main > section { overflow-x: clip; }
@media (max-width: 760px) {
    .momenti--pila .momento__foto { display: none; }   /* da telefono la card resta corta: niente foto nella giornata */
    .nato__foto2 { right: 4px; }
}
@media (max-width: 760px) { .momento__lead, .momento__punti li, .barche__punti li { text-align: left; } }

/* logo e menu sulla superficie chiara della hero: un'ombra navy morbida li stacca dall'acqua senza cambiare il colore */
.hero .nav__logo img { filter: drop-shadow(0 1px 1.5px rgba(11, 31, 58, .55)) drop-shadow(0 3px 12px rgba(11, 31, 58, .5)); }
.hero .nav__link a, .hero .lingua summary { text-shadow: 0 1px 2px rgba(11, 31, 58, .5), 0 2px 10px rgba(11, 31, 58, .35); }
.hero .nav__link { color: var(--lp-perla); }
.hero .lingua summary { background: rgba(11, 31, 58, .22); }
/* dietro al logo un alone navy sfumato (il marchio vuole il logo bianco su navy): niente bordi, solo profondità */
.hero .nav__logo { position: relative; isolation: isolate; }
.hero .nav__logo::before { content: ""; position: absolute; z-index: -1; inset: -26px -40px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(11, 31, 58, .62), rgba(11, 31, 58, .32) 55%, transparent); }

/* ===== giornata senza rimpicciolimenti (26 ott): card alte quanto la più alta, demo a grandezza vera ma più compatte ===== */
@media (min-width: 1001px) {
    .momenti--pila .momento__carta { height: auto; min-height: var(--h-carta, 0px); }
    .momenti--pila .momento__schermata { height: auto; overflow: visible; }
}
.momenti--pila .ag { --ag-riga: 26px; }                                   /* agenda: righe da mezz'ora più basse */
.momenti--pila .pl-title p, .momenti--pila .pl-kpi:nth-child(n+4) { display: none; }   /* plan: titolo e tre riquadri */
.momenti--pila .pl-day { padding: 7px 10px; }
.momenti--pila .ch-verdetto.is-vuoto { display: none; }                  /* chiusura: il "niente dall'istruttore" lo dice già l'etichetta */
.momenti--pila .ag { --ag-riga: 24px; }
/* chiusura: i pulsanti accanto al nome, non sotto (riga da ~107 a ~60 px) */
.momenti--pila .ch-corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.momenti--pila .ch-corpo > b, .momenti--pila .ch-corpo > small { grid-column: 1; }
.momenti--pila .ch-corpo > .ch-azioni { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.momenti--pila .ch-corpo > .ch-verdetto, .momenti--pila .ch-corpo > .ch-form { grid-column: 1 / -1; }
.momenti--pila .ch-gruppi { gap: 8px; }
/* da telefono non c'è posto accanto al nome: i pulsanti tornano sotto, larghi (prima schiacciavano il nome e lo coprivano) */
@media (max-width: 760px) {
    .momenti--pila .ch-corpo > .ch-azioni { grid-column: 1 / -1; grid-row: auto; margin-top: 8px; }
}
/* barche: tabellone più fitto */
.barche .br-persona { padding: 4px 8px; }
.barche .br-gruppo-persone { gap: 4px; }
.barche .br-gruppo { padding: 5px; }
.barche .br-barca-corpo { min-height: 70px; }
.barche .br-barca-vuota { padding: 12px 10px; }
.barche.fascia { padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(56px, 6vw, 84px); }

/* ======================================================================================================
   REVISIONE 3 (25 ott): telefono vero, avvisi chiari nelle demo, finale del "Ti riconosci?", cursore che invita,
   pagamento della card 3, tessere che reagiscono, barche più piccole, link ai prezzi
   ====================================================================================================== */

/* ----- il telefono: cornice di metallo sottile, vetro nero, isola, barra di stato, tasto laterale.
   Le misure interne sono in cqw (larghezza del telefono), così è uguale a ogni grandezza ----- */
.telefono { container-type: inline-size; position: relative; aspect-ratio: 9 / 19.5; padding: 0; border-radius: 15% / 6.9%; background: #07090c;
    box-shadow: inset 0 0 0 1.5px #737b87, inset 0 0 0 3px #1d222a, 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 4px rgba(2, 10, 24, .3), 0 34px 64px -24px rgba(2, 10, 24, .8); }
.telefono::before { content: ""; position: absolute; right: -1.5cqw; top: 26%; width: 1.9cqw; height: 13%; border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #1d222a, #6b7380 60%, #3a414b); }
.telefono__schermo { position: absolute; inset: 3.4cqw; width: auto; height: auto; overflow: hidden; border-radius: 12cqw; background: #fff; padding-top: 10.5cqw; }
/* barra di stato: ora a sinistra, segnale e batteria a destra */
.telefono__schermo::before { content: "9:41"; position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 10.5cqw; padding: 0 8cqw 0 9.5cqw; display: flex; align-items: center;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cg fill='%23163459'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Crect x='22' y='1' width='21' height='10' rx='3' fill='none' stroke='%23163459' stroke-opacity='.45'/%3E%3Crect x='24' y='3' width='15' height='6' rx='1.5'/%3E%3Crect x='44' y='4.2' width='1.6' height='3.6' rx='.8' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 7.5cqw center / 19cqw auto;
    font: 600 4.6cqw/1 var(--sans); color: var(--lp-navy); letter-spacing: -.01em; }
/* isola */
.telefono__schermo::after { content: ""; position: absolute; z-index: 5; left: 50%; top: 2.4cqw; width: 30cqw; height: 8.6cqw; translate: -50% 0; border-radius: 999px; background: #000; }
.telefono__schermo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.telefono__schermo--scorre > img { height: auto; object-fit: initial; }
.telefono__schermo.modulo { padding-top: calc(10.5cqw + 10px); }
/* nella hero: la scheda è il telefono stesso, niente cornice navy attorno */
.app__scheda--tel .app__scheda-in { padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.app__scheda--tel { width: clamp(150px, 13vw, 190px); right: -4%; bottom: 8%; rotate: 5deg; }
.app__scheda--tel .telefono { width: 100%; }

/* ----- gli avvisi delle demo: chiari, con il filo azzurro, così non si confondono con la fascia navy dell'app ----- */
:is(.ag-toast, .br-toast, .ch-toast, .co-toast, .pl-toast):not(.is-neg) { padding-left: 18px; background: #fff; color: var(--lp-navy); font-weight: 500;
    box-shadow: inset 4px 0 0 var(--lp-azzurro), 0 0 0 1px rgba(22, 52, 89, .1), 0 22px 44px -14px rgba(11, 31, 58, .5), 0 4px 10px rgba(11, 31, 58, .12); }

/* ----- "Ti riconosci?": la risposta prende il posto della domanda, grande; il telefono arriva accanto alla finestra ----- */
.caos__fine { top: clamp(72px, 10vh, 120px); bottom: auto; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.035em; color: var(--lp-navy); }
.caos__riga { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.06em; }
.caos__riga > span { display: inline-block; }
.caos__riga--2 { color: var(--lp-azzurro-ink); }
.caos__tel { position: absolute; z-index: 2; left: calc(50% + min(200px, 26vw)); top: 50%; width: clamp(130px, 12vw, 176px); translate: 0 -44%; }
.caos__tel .telefono { width: 100%; }
.js .caos__tel { opacity: 0; }
html:not(.js) .caos__tel { display: none; }

/* ----- card 3: il pagamento che arriva, al posto della foto ----- */
.momenti--pila .momento__foto.pagato { flex: 0 0 auto; height: 230px; min-height: 0; background: var(--lp-abisso); isolation: isolate; }
.pagato > img { position: absolute; inset: 0; z-index: -1; opacity: .6; }
.pagato__wa { position: absolute; left: 14px; top: 14px; max-width: 74%; margin: 0; padding: 9px 12px; border-radius: 13px 13px 13px 4px; background: #e9fbe5; color: var(--lp-navy);
    font-size: 12.5px; line-height: 1.35; box-shadow: 0 14px 30px -12px rgba(2, 10, 24, .6); opacity: 0; translate: 0 10px; transition: opacity .5s var(--uscita) .25s, translate .6s var(--uscita) .25s; }
.pagato__wa span { display: block; margin-top: 3px; color: var(--lp-azzurro-ink); text-decoration: underline; text-underline-offset: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagato__ricevuta { position: absolute; right: 14px; bottom: 42px; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; padding: 12px 18px 12px 12px;
    border-radius: 16px; background: #fff; color: var(--lp-navy); box-shadow: 0 0 0 1px rgba(22, 52, 89, .06), 0 24px 44px -16px rgba(2, 10, 24, .75);
    opacity: 0; scale: .86; transform-origin: 80% 100%; transition: opacity .4s var(--uscita) 1s, scale .7s var(--uscita) 1s; }
.pagato__spunta { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #10b981; }
.pagato__spunta svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s ease-out 1.45s; }
.pagato__testo small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--lp-grigio); }
.pagato__testo b { display: block; font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pagato__conto { position: absolute; right: 16px; bottom: 13px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--lp-perla);
    opacity: 0; transition: opacity .5s 1.8s; }
.pagato__conto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.momento.is-dentro .pagato__wa { opacity: 1; translate: 0 0; }
.momento.is-dentro .pagato__ricevuta { opacity: 1; scale: 1; }
.momento.is-dentro .pagato__spunta svg { stroke-dashoffset: 0; }
.momento.is-dentro .pagato__conto { opacity: 1; }

/* ----- il cursore che invita a toccare le demo (home.js): una freccia (o un dito, da telefono) che va sul punto giusto e preme ----- */
.momento__schermata { position: relative; }
.invito { position: absolute; z-index: 60; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; visibility: hidden; }
.invito__freccia { position: absolute; left: -4px; top: -2px; width: 26px; height: 26px; max-width: none; overflow: visible; fill: #fff; stroke: var(--lp-navy); stroke-width: 1.4; stroke-linejoin: round;
    filter: drop-shadow(0 3px 5px rgba(11, 31, 58, .45)); }
.invito__anello { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--lp-azzurro); background: rgba(7, 188, 231, .16); opacity: 0; }
.invito__etichetta { position: absolute; left: 20px; top: 24px; padding: 4px 10px; border-radius: 999px; background: var(--lp-navy); color: var(--lp-perla); font-size: 12px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 8px 18px -6px rgba(11, 31, 58, .5); }
.invito--tocco .invito__freccia { display: none; }
.invito--tocco::before { content: ""; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 2px var(--lp-azzurro), 0 6px 14px rgba(11, 31, 58, .35); }

/* ----- funzioni: il telefono delle prenotazioni intero; al passaggio del mouse l'immagine cresce di più e la tessera cambia colore ----- */
.tessera { transition: translate .5s var(--uscita), box-shadow .5s var(--uscita), background-color .45s var(--uscita); }
.tessera:hover { background-color: #dff4fb; box-shadow: 0 0 0 1px rgba(7, 188, 231, .35), 0 28px 50px -24px rgba(22, 52, 89, .45); }
.tessera:hover .tessera__testo h3 { color: var(--lp-azzurro-ink); }
.tessera__testo h3 { transition: color .3s; }
.tessera:hover .tessera__media > * { scale: 1.12; }
.firma.tessera__media, .vento.tessera__media, .lingue-giro.tessera__media { background: transparent; }
.tessera--prenota { background: #dff4fb; }
.tessera--prenota:hover { background-color: #bfe9f7; }
.tessera--prenota:hover .prenota__media > * { scale: 1.05; rotate: -2deg; }
.tessera--prenota .prenota__media > * { transition: scale .7s var(--uscita), rotate .7s var(--uscita); }
.tessera--prenota .prenota__media { height: auto; padding: 26px 40px 26px 8px; align-items: center; overflow: visible; }
.tessera--prenota .telefono--piccolo { width: 178px; margin: 0; }
.tessera--epoi:hover { background-color: #1f4a7a; }
.tessera--epoi:hover h3 { color: var(--lp-azzurrino); }
.tessera--epoi h3 { transition: color .3s; }

/* ----- barche: la demo più piccola (zoom: il trascinamento divide per la scala) e la sezione più bassa ----- */
@media (min-width: 1001px) {
    .barche .br { zoom: .82; }
    .barche .br-barca { flex: 1 1 0; min-width: 0; }   /* le colonne stanno tutte nel riquadro, niente barca tagliata */
    .barche.fascia .barche__in { grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); }
}
.barche.fascia { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); }

/* ----- prezzi: in fondo la nota e il pulsante per la pagina intera ----- */
.prezzi__piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(24px, 3vw, 36px); }
.prezzi__piede .prezzi__nota { margin: 0; max-width: 72ch; }

@media (max-width: 760px) {
    .caos__fine { font-size: clamp(28px, 8vw, 36px); }
    .caos__tel { left: auto; right: max(10px, var(--gutter)); top: auto; bottom: 15%; width: 104px; translate: 0 0; }
    .tessera--prenota .prenota__media { padding: 4px 0 28px; justify-content: center; }
    .tessera--prenota .telefono--piccolo { width: 170px; }
    .prezzi__piede .bottone { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pagato__wa, .pagato__ricevuta, .pagato__conto { opacity: 1; translate: 0 0; scale: 1; transition: none; }
    .pagato__spunta svg { stroke-dashoffset: 0; transition: none; }
    .tessera:hover .tessera__media > *, .tessera--prenota:hover .prenota__media > * { scale: 1; rotate: 0deg; }
}

/* ======================================================================================================
   REVISIONE 4 (28 ott): il video solo nella hero, ogni sezione col suo fondo, stacchi curvi (cupole) e onde che si muovono
   ====================================================================================================== */

/* ----- hero: due video sempre in movimento. Il surfer in superficie; scorrendo la linea dell'acqua (bordo a onda) sale
   da sotto lo schermo (--sotto 0→1, sito.js) e scopre il mare visto da sotto. Velo navy leggero, solo dietro al titolo ----- */
.hero__mare { position: absolute; inset: 0; z-index: 0; overflow: hidden; --sotto: 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__giu { position: absolute; inset: 0; overflow: hidden; translate: 0 calc((1 - var(--sotto)) * 108%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 0 480 0 720 40S1200 80 1440 40V80H0Z'/%3E%3C/svg%3E") 0 0 / 1440px 44px repeat-x,
                  linear-gradient(#000, #000) 0 42px / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 0 480 0 720 40S1200 80 1440 40V80H0Z'/%3E%3C/svg%3E") 0 0 / 1440px 44px repeat-x,
                  linear-gradient(#000, #000) 0 42px / 100% 100% no-repeat;
    animation: linea-acqua 9s linear infinite; }
.hero__giu .hero__video { translate: 0 calc((var(--sotto) - 1) * 108%); }
/* il filo di schiuma lungo il bordo dell'onda */
.hero__giu::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 64px; pointer-events: none;
    background: linear-gradient(rgba(231, 248, 253, .75), rgba(145, 220, 245, .25) 45%, transparent); }
@keyframes linea-acqua { to { -webkit-mask-position: 1440px 0, 0 42px; mask-position: 1440px 0, 0 42px; } }
.hero__mare::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 31, 58, .5) 0%, rgba(11, 31, 58, .26) 42%, rgba(11, 31, 58, .08) 75%, rgba(11, 31, 58, .14)); }
.hero__scena::after { display: none; }
@media (max-width: 760px) {   /* da telefono il testo copre il cielo del surfer: velo un poco più fitto in alto */
    .hero__mare::after { background: linear-gradient(180deg, rgba(11, 31, 58, .62) 0%, rgba(11, 31, 58, .42) 50%, rgba(11, 31, 58, .12) 80%, rgba(11, 31, 58, .14)); }
}
.hero__titolo, .hero__sotto, .hero__sopra { text-shadow: 0 2px 24px rgba(11, 31, 58, .45); }
/* la hero sfuma nel bianco della sezione dopo: sopra il video ma SOTTO il tablet (sta dentro .hero__mare);
   compare verso la fine della corsa della hero (--fine 0→1, sito.js) */
.hero__mare::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 46vh; pointer-events: none; opacity: var(--fine, 0);
    background: linear-gradient(rgba(252, 252, 252, 0), rgba(252, 252, 252, .55) 40%, rgba(252, 252, 252, .92) 65%, var(--lp-perla) 85%); }
/* sul bianco l'ombra scura del tablet diventava una macchia grigia sopra la nota: si schiarisce con --fine,
   e la nota passa dal colore "sull'acqua" al grigio leggibile sul bianco */
.app__schermo { box-shadow: 0 0 0 1px rgba(145, 220, 245, .3),
    0 30px 60px -20px rgba(2, 10, 24, calc(.7 - .58 * var(--fine, 0))),
    0 70px 120px -30px rgba(2, 10, 24, calc(.9 - .86 * var(--fine, 0))); }
.app__nota { position: relative; z-index: 4; color: color-mix(in srgb, var(--lp-grigio) calc(var(--fine, 0) * 100%), var(--lp-fondale)); }
/* il telefono e il messaggio WhatsApp non si sovrappongono: il messaggio più in alto, il telefono più piccolo e più in basso */
.app__scheda--wa { top: 2%; }
.app__scheda--tel { width: clamp(128px, 10.5vw, 158px); bottom: -6%; }

/* ----- "Gestire una scuola…": il telefono sta tutto nello schermo anche sui portatili bassi. Niente `translate` (lo script
   anima il transform e lo scavalcava): alto al massimo metà schermo, centrato un po' sopra la metà ----- */
.caos__tel { --w: min(clamp(120px, 11vw, 168px), 22vh); width: var(--w); top: calc(48% - var(--w) * 1.08); translate: none; }
/* da telefono non c'è posto per il telefono accanto alla finestra senza coprirne le righe: lo dice già il titolo */
@media (max-width: 760px) { .caos__tel { display: none; } }
/* …e allora arriva sotto la tabella, quando la scena fissa finisce */
.caos__tel-sotto { display: none; }
@media (max-width: 760px) {
    .caos__tel-sotto { display: block; width: min(230px, 60vw); margin: -4px auto 0; padding-bottom: 36px; rotate: 3deg; }
    .caos__tel-sotto .telefono { width: 100%; }
}

/* ----- la giornata: il bianco dei post-it scende piano nel blu (sfumatura lunga), il video del mare comincia sotto ----- */
/* (31 ott) da computer restava un vuoto enorme sotto la finestra: la sfumatura è corta anche qui, come da telefono */
.giornata.giornata--pila { background: linear-gradient(var(--lp-perla), #c9dde7 50px, #557d99 120px, var(--lp-navy-profondo) 180px, var(--lp-abisso) 230px);
    padding-top: 200px; }
.giornata--pila .giornata__fondo { top: 180px; }
/* da telefono la stessa sfumatura, ma corta: 400 px di vuoto erano mezzo schermo */
@media (max-width: 760px) {
    .giornata.giornata--pila { background: linear-gradient(var(--lp-perla), #c9dde7 40px, #557d99 100px, var(--lp-navy-profondo) 150px, var(--lp-abisso) 190px);
        padding-top: 170px; }
    .giornata--pila .giornata__fondo { top: 150px; }
}

/* ----- tre passi: il telefono ha di nuovo una larghezza (dentro due griglie centrate si riduceva a zero e spariva) ----- */
.passi__scena { width: min(290px, 100%); }
.passi__scena .telefono, .passi__telefono .passi__scena .telefono { width: 100%; }

/* ----- funzioni: sotto il mare dal drone in video; sopra una card bianca più stretta della pagina (si vede che è una card),
   con finestre a onda da cui si intravede il mare. In alto il blu della giornata sfuma nel video ----- */
.funzioni.fascia { position: relative; isolation: isolate; background: var(--lp-abisso);
    padding: clamp(36px, 4vw, 64px) 0 clamp(110px, 11vw, 170px); }
.funzioni__fondo { inset: 0; height: auto; z-index: -2; background: var(--lp-abisso); }
.funzioni__fondo video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.funzioni__fondo::after { background: linear-gradient(180deg, var(--lp-abisso), rgba(11, 31, 58, 0) 22%, rgba(11, 31, 58, 0) 85%, rgba(11, 31, 58, .35)); }
.funzioni.fascia::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: clamp(36px, 4vw, 64px); bottom: clamp(110px, 11vw, 170px); left: max(16px, 4vw); right: max(16px, 4vw);
    border-radius: clamp(24px, 3vw, 44px); background: var(--lp-perla); box-shadow: 0 40px 90px -40px rgba(2, 10, 24, .7);
    /* aperture organiche (come i riferimenti): una grande in alto a destra accanto al titolo, una in basso a sinistra, due lobi sui bordi */
    --aperture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M57 0C57.5 4.6 61 7.6 66 8.1C71.5 8.7 73.5 12.6 79 14C85 15.5 91 12.6 95 13.4C97.5 13.9 99 14.8 100 15.6V0Z M100 37C96 37.6 94.2 40.6 95 43.6C95.8 46.6 94.6 49.4 100 51Z M0 60C4.2 60.8 5.6 63.6 4.8 66.4C4 69.2 5.4 71.6 0 73Z M0 86C6 84.2 11.5 86.6 14.5 90C17.5 93.4 22.5 93.6 28 95.2C33 96.6 35.6 98.4 36.6 100H0Z M74 100C76.5 97.4 81 96.4 86 96.9C91 97.4 96 95.6 100 94.6V100Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--aperture) 0 0 / 100% 100% no-repeat; mask: var(--aperture) 0 0 / 100% 100% no-repeat; }
@media (max-width: 760px) {   /* da telefono il titolo prende tutta la larghezza: aperture più piccole, negli angoli */
    .funzioni.fascia::before { --aperture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M68 0C69.5 .6 73 1 78 1.05C85 1.1 90 1.45 100 1.55V0Z M0 98.4C8 98.1 14 98.6 20 99.1C25 99.5 28 99.8 30 100H0Z'/%3E%3C/svg%3E"); }
}
.funzioni__in { width: min(1180px, calc(100% - 2 * max(16px, 4vw) - 2 * clamp(16px, 3.5vw, 56px))); margin: 0 auto; padding: clamp(44px, 5vw, 80px) 0 clamp(64px, 7vw, 110px); }
.funzioni.fascia .funzioni__titolo { color: var(--lp-navy); }
.funzioni.fascia .funzioni__sotto { color: var(--lp-grigio); }
/* noleggi e paghe: la schermata intera, non più ingrandita e tagliata */
.tessera--foto .tessera__media { height: auto; aspect-ratio: 1568 / 882; background: #f2f7fb; }
.tessera--foto .tessera__media img { object-fit: contain; transform: none; }

/* ----- cupole: la sezione sale sopra quella prima con un bordo a semicerchio (lago, nato, chiusura) ----- */
:is(.barche.fascia, .nato.fascia, .fine) { --cupola: clamp(56px, 8vw, 130px); position: relative; z-index: 1; margin-top: calc(var(--cupola) * -1);
    -webkit-mask: radial-gradient(56% var(--cupola) at 50% var(--cupola), #000 99.4%, transparent 100%) 0 0 / 100% var(--cupola) no-repeat,
                  linear-gradient(#000, #000) 0 calc(var(--cupola) - 1px) / 100% 100% no-repeat;
            mask: radial-gradient(56% var(--cupola) at 50% var(--cupola), #000 99.4%, transparent 100%) 0 0 / 100% var(--cupola) no-repeat,
                  linear-gradient(#000, #000) 0 calc(var(--cupola) - 1px) / 100% 100% no-repeat; }
.barche.fascia { padding-top: calc(var(--cupola) + clamp(24px, 3vw, 48px)); }

/* ----- onde che si muovono: il bordo alto di perché, prezzi e domande, due strati a velocità diverse ----- */
:is(.perche--mare, .prezzi, .faq) { position: relative; }
.perche--mare { --onda: var(--lp-abisso); background: var(--lp-abisso); }
.prezzi { --onda: var(--lp-navy-profondo); }
.faq { --onda: var(--lp-tenue); background: var(--lp-tenue); }
:is(.perche--mare, .prezzi, .faq)::before, :is(.perche--mare, .prezzi, .faq)::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(100% - 1px);
    height: clamp(34px, 4vw, 58px); background: var(--onda); pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 0 480 0 720 40S1200 80 1440 40V80H0Z'/%3E%3C/svg%3E") 0 100% / 1440px 100% repeat-x;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 0 480 0 720 40S1200 80 1440 40V80H0Z'/%3E%3C/svg%3E") 0 100% / 1440px 100% repeat-x;
    animation: onda-va 22s linear infinite; }
:is(.perche--mare, .prezzi, .faq)::after { height: clamp(46px, 5.4vw, 78px); opacity: .4; animation: onda-torna 14s linear infinite; }
@keyframes onda-va { to { -webkit-mask-position: 1440px 100%; mask-position: 1440px 100%; } }
@keyframes onda-torna { from { -webkit-mask-position: 480px 100%; mask-position: 480px 100%; } to { -webkit-mask-position: -960px 100%; mask-position: -960px 100%; } }

/* ----- perché Looply: ogni riquadro ha la sua foto vera sotto, scura in basso dove c'è il testo; niente icone ----- */
.perche--mare .motivi { grid-auto-rows: minmax(236px, auto); }
.perche--mare .motivi li { isolation: isolate; background: var(--lp-navy-profondo); }
.perche--mare .motivi li:hover { background: var(--lp-navy-profondo); }
.perche--mare .motivo__foto::after { background: linear-gradient(180deg, rgba(11, 31, 58, .12) 0%, rgba(11, 31, 58, .55) 45%, rgba(11, 31, 58, .94) 85%); }
.perche--mare .motivi li:hover .motivo__foto img { scale: 1.06; }

/* ----- nato in una scuola vera: stacco netto, fondo chiaro che sale a cupola sopra il blu del "perché" ----- */
.nato.fascia { background: var(--lp-tenue); color: var(--lp-navy); }
.nato.fascia .nato__in { padding-top: calc(var(--cupola) + clamp(28px, 4vw, 64px)); }
.nato.fascia .nato__storia { color: var(--lp-grigio); }

/* ----- prezzi: fascia blu con il mare in video a luce bassa; la card del calcolo resta bianca ----- */
.prezzi { isolation: isolate; background: var(--lp-navy-profondo); color: var(--lp-perla); }
.sezione__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sezione__fondo video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: saturate(.85); }
.sezione__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--lp-navy-profondo), rgba(16, 42, 73, .2) 30%, rgba(16, 42, 73, .2) 70%, var(--lp-navy-profondo)); }
.prezzi .calcolo { color: var(--lp-navy); }
.prezzi :is(.prezzi__sotto, .piano > span, .piano em small, .aggiunte dd, .prezzi__nota) { color: var(--lp-schiuma); }
.prezzi :is(.piano .piano__parla, .prezzi__nota a) { color: var(--lp-azzurrino); }
.prezzi :is(.piano, .aggiunte > div) { border-color: rgba(145, 220, 245, .22); }
.prezzi .piano.is-attivo { border-top-color: var(--lp-azzurro); }
.prezzi .bottone--linea { color: var(--lp-perla); box-shadow: inset 0 0 0 1.5px rgba(145, 220, 245, .6); }
.prezzi .bottone--linea:hover { background: var(--lp-perla); color: var(--lp-navy); }

/* ----- chiusura: si torna sott'acqua (lo stesso mare della hero, a luce bassa), sopra la cupola ----- */
.fine { isolation: isolate; padding-top: calc(var(--cupola) + clamp(64px, 9vw, 140px)); }
.fine .sezione__fondo video { opacity: .4; }
.fine .sezione__fondo::after { background: linear-gradient(180deg, rgba(11, 31, 58, .55), rgba(11, 31, 58, .25) 50%, var(--lp-abisso)); }

@media (prefers-reduced-motion: reduce) {
    .hero__giu, :is(.perche--mare, .prezzi, .faq)::before, :is(.perche--mare, .prezzi, .faq)::after { animation: none; }
}