/* ===== Sito Looply (prova 3) — mondo: acqua profonda e luce. Poppins, palette del marchio. ===== */
:root {
    --lp-navy: #163459;
    --lp-navy-profondo: #102a49;
    --lp-abisso: #0b1f3a;        /* fondo dell'acqua, dal navy */
    --lp-azzurro: #07bce7;       /* azione */
    --lp-azzurro-hover: #05a3c9;
    --lp-azzurrino: #91dcf5;     /* linee, luce */
    --lp-azzurro-ink: #0a7299;
    --lp-perla: #fcfcfc;
    --lp-schiuma: #c9e6f4;       /* testo secondario sull'acqua, tinto dall'azzurrino */
    --lp-fondale: #a3c3d7;      /* note piccole sull'acqua */
    --lp-grigio: #5d6e86;        /* testo secondario su perla (dal gestionale) */
    --lp-tenue: #e7f8fd;         /* azzurro tenue di sfondo (dal gestionale) */
    --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --gutter: clamp(16px, 4vw, 48px);
    --uscita: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--lp-navy) var(--lp-abisso); }
body { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--lp-perla); background: var(--lp-abisso); overflow-x: hidden;
    -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, p, figure { margin: 0; }
::selection { background: var(--lp-azzurro); color: var(--lp-navy-profondo); }
:focus-visible { outline: 2px solid var(--lp-azzurrino); outline-offset: 3px; border-radius: 6px; }

/* ----- pulsanti: azzurro con testo navy (bianco su azzurro non si legge) ----- */
.bottone { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px;
    background: var(--lp-azzurro); color: var(--lp-navy-profondo); font: 600 15px/1 var(--sans); white-space: nowrap;
    transition-property: background-color, color, border-color, scale; transition-duration: .2s; transition-timing-function: var(--uscita); }
.bottone:hover { background: var(--lp-azzurrino); }
.bottone:active { scale: .96; }
.bottone--piccolo { padding: 11px 20px; font-size: 14px; }
.bottone--onda { background: transparent; color: var(--lp-perla); box-shadow: inset 0 0 0 1px rgba(145, 220, 245, .38); font-weight: 500; }
.bottone--onda:hover { background: rgba(145, 220, 245, .1); }
.bottone--onda svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* ===== HERO ===== */
.hero { position: relative; height: 240vh; }
.hero__scena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    /* se il WebGL manca: luce dall'alto su acqua profonda */
    background: radial-gradient(ellipse 60% 55% at 50% -8%, rgba(7, 188, 231, .26), transparent 70%),
                linear-gradient(#0f6b94, var(--lp-navy-profondo) 50%, var(--lp-abisso) 85%); }
.hero__acqua { position: absolute; inset: 0; width: 100%; height: 100%; }
/* profondità: il fondo si scurisce verso il basso, la luce resta in alto */
.hero__scena::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent 50%, rgba(4, 13, 28, .55)); }

.nav { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 22px var(--gutter); }
.nav__logo img { width: 160px; height: auto; }   /* sotto i 160 px il marchio prevede la versione corta (telefono) */
.nav__link { display: flex; gap: 34px; font-size: 14.5px; color: var(--lp-schiuma); }
.nav__link a { padding: 10px 0; transition: color .2s; }
.nav__link a:hover { color: var(--lp-perla); }

.hero__testo { position: relative; z-index: 3; padding: clamp(104px, 16vh, 160px) var(--gutter) 0;
    display: grid; justify-items: center; text-align: center; }
.hero__titolo { font-weight: 600; font-size: clamp(36px, 5.4vw, 80px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.hero__sotto { margin-top: 22px; max-width: 54ch; font-size: clamp(16px, 1.25vw, 18px); color: var(--lp-schiuma); text-wrap: pretty; }
.hero__azioni { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* il palco dà la prospettiva; l'app parte inclinata e mezza sommersa */
.hero__palco { position: relative; z-index: 2; margin-top: clamp(40px, 7vh, 72px); display: flex; justify-content: center;
    perspective: 1700px; perspective-origin: 50% 0; }
/* campo di luce: la superficie illuminata da cui l'app affiora */
.hero__palco::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -18%; width: min(1500px, 120vw); height: 80%;
    translate: -50% 0; pointer-events: none;
    background: radial-gradient(ellipse 50% 55% at 50% 35%, rgba(7, 188, 231, .34), rgba(7, 188, 231, .1) 45%, transparent 72%); }
.app { --acqua: 100%; width: min(1180px, 88vw); transform-origin: 50% 0; }
.app__schermo { position: relative; overflow: hidden; border-radius: 14px; background: var(--lp-perla);
    box-shadow: 0 0 0 1px rgba(145, 220, 245, .3), 0 30px 60px -20px rgba(2, 10, 24, .7), 0 70px 120px -30px rgba(2, 10, 24, .9); }
.app__schermo img { width: 100%; height: auto; }

/* acqua sopra la parte bassa dello schermo: bordo a onda, caustiche in WebGL, più scura verso il fondo */
.app__acqua { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--acqua) - 12px); pointer-events: none;
    background: linear-gradient(to bottom, rgba(11, 31, 58, .3), rgba(11, 31, 58, .55) 55%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7C40 0 80 0 120 7S200 14 240 7V14H0Z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x,
                  linear-gradient(#000, #000) 0 13px / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7C40 0 80 0 120 7S200 14 240 7V14H0Z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x,
                  linear-gradient(#000, #000) 0 13px / 100% 100% no-repeat;
    animation: onda 6s linear infinite; }
.app__acqua canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
/* la superficie: un filo di luce azzurrina lungo il bordo dell'onda (la maschera lo ritaglia a onda) */
.app__acqua::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 1;
    background: linear-gradient(to bottom, rgba(145, 220, 245, .55), rgba(145, 220, 245, .12) 45%, transparent); }
@keyframes onda { to { -webkit-mask-position: 240px 0, 0 13px; mask-position: 240px 0, 0 13px; } }

.app__nota { margin-top: 16px; text-align: center; font-size: 13px; color: var(--lp-fondale); }

/* le schede attorno alla cornice: GSAP le fa emergere (sul contenitore), il mouse le sposta (sull'interno, --k = profondità) */
.app__scheda { position: absolute; z-index: 3; }
.app__scheda-in { border-radius: 14px; background: #fff; color: var(--lp-navy); overflow: hidden;
    box-shadow: 0 0 0 1px rgba(145, 220, 245, .22), 0 28px 56px -22px rgba(2, 10, 24, .8), 0 6px 14px rgba(2, 10, 24, .25);
    translate: calc(var(--mx, 0px) * var(--k, 1)) calc(var(--my, 0px) * var(--k, 1)); }
/* posizioni scelte per non coprire la scena: la foto sta sulla colonna di Hugo dove la mattina è vuota, il telefono sull'angolo in basso a destra */
.app__scheda--foto { left: -14%; top: 30%; width: clamp(160px, 16vw, 220px); }
.app__scheda--foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.app__scheda--foto span { display: block; padding: 10px 14px; font-size: 13px; font-weight: 500; }
.app__scheda--tel { right: -5%; bottom: -7%; width: clamp(112px, 11vw, 148px); }
.app__scheda--tel .app__scheda-in { padding: 5px; border-radius: 22px; background: var(--lp-abisso); box-shadow: 0 0 0 1px rgba(145, 220, 245, .3), 0 28px 56px -22px rgba(2, 10, 24, .9); }
.app__scheda--tel img { width: 100%; height: auto; border-radius: 17px; display: block; }
.app__scheda--wa { right: -6%; top: 9%; width: clamp(230px, 22vw, 300px); opacity: 0; translate: 0 14px; transition: opacity .5s var(--uscita), translate .6s var(--uscita); }
.hero--su .app__scheda--wa.is-visibile { opacity: 1; translate: 0 0; }   /* solo dopo che l'agenda si è raddrizzata */
.app__scheda--wa .app__scheda-in { padding: 14px 16px 16px; }
.wa__testa { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wa__testa svg { width: 18px; height: 18px; fill: #25d366; }
.wa__testa b { font-weight: 600; }
.wa__testa small { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #0a7f4c; }
.wa__bolla { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #e7f8fd; font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.wa__invia { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: var(--lp-azzurro); color: var(--lp-navy-profondo); font-size: 12.5px; font-weight: 600; }

/* senza JS: tutto fermo, schermo asciutto */
.js .app { --acqua: 36%; }

/* ===== LA GIORNATA: fuori dall'acqua, su perla. L'asse delle ore riprende la colonna delle ore dell'agenda ===== */
/* fondo: perla che scende verso l'azzurro tenue del gestionale, così le finestre bianche delle schermate si staccano */
.giornata { background: linear-gradient(180deg, var(--lp-perla) 0%, var(--lp-perla) 18%, #eef8fc 100%); color: var(--lp-navy); padding: clamp(80px, 11vw, 150px) var(--gutter) clamp(56px, 7vw, 96px); }
.giornata__intro { max-width: 1180px; margin: 0 auto; }
.giornata__titolo { margin: 0; font-weight: 600; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 24ch; }
.giornata__sotto { margin: 22px 0 0; max-width: 58ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; }

/* l'asse delle ore: una linea azzurrina continua a sinistra, un punto per ogni momento (come la colonna delle ore dell'agenda) */
.momenti { list-style: none; position: relative; margin: clamp(56px, 7vw, 96px) auto 0; padding: 0 0 0 28px; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 7vw, 104px); }
.momento__schermata, .momento__testo { min-width: 0; }   /* i contenuti larghi (agenda interattiva) scorrono dentro, non allargano la pagina */
.momenti::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--lp-azzurrino); }
.momento { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 11fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.momento__ora { position: relative; display: block; font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--lp-azzurro-ink); font-variant-numeric: tabular-nums; }
.momento__ora::before { content: ""; position: absolute; left: -33px; top: 50%; width: 11px; height: 11px; translate: 0 -50%; border-radius: 50%;
    background: var(--lp-perla); box-shadow: inset 0 0 0 2px var(--lp-azzurro); transition: background-color .35s var(--uscita); }
.momento.is-attivo .momento__ora::before { background: var(--lp-azzurro); }
.momento__titolo { margin: 12px 0 0; font-weight: 600; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.momento__sotto { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; max-width: 40ch; }
/* la cornice: stessi angoli e stessa luce della hero, ombra più corta perché siamo fuori dall'acqua */
.momento__schermata { margin: 0; border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 18px 40px -18px rgba(22, 52, 89, .35), 0 2px 6px rgba(22, 52, 89, .06); }
.momento__schermata img { width: 100%; height: auto; }

.giornata__oltre { max-width: 1180px; margin: clamp(56px, 7vw, 96px) auto 0; padding-top: 32px; border-top: 1px solid var(--lp-tenue);
    font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--lp-navy); text-wrap: pretty; }
.giornata__nota { max-width: 1180px; margin: 14px auto 0; font-size: 13px; color: var(--lp-grigio); }

/* ===== TUTTO IL RESTO, PER AREA: elenchi con righe sottili, come un listino. Il fondo continua il tenue della giornata ===== */
.aree { background: #eef8fc; color: var(--lp-navy); padding: clamp(64px, 9vw, 120px) var(--gutter); }
.aree__in { max-width: 1180px; margin: 0 auto; }
.aree__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; max-width: 24ch; }
.aree__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; }
.aree__griglia { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(28px, 3.5vw, 48px); }
.area__nome { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--lp-navy); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.area ul { list-style: none; margin: 0; padding: 0; }
.area li { padding: 14px 0 15px; border-bottom: 1px solid rgba(22, 52, 89, .13); }
.area li b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.area li span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--lp-grigio); text-wrap: pretty; }

/* ===== NATO IN UNA SCUOLA VERA: navy profondo, la foto vera dal drone, la storia. Le voci sono segnaposto dichiarati ===== */
.nato { background: var(--lp-navy-profondo); color: var(--lp-perla); }
.nato__in { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter);
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 9fr); column-gap: clamp(32px, 6vw, 96px); align-items: center; }
.nato__foto { margin: 0; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;   /* la foto è 1280×720: tagliata al quadrato sul kite */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.nato__foto img { width: 100%; height: 100%; object-fit: cover; }
.nato__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.nato__storia { margin: 22px 0 0; max-width: 54ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; color: var(--lp-schiuma); text-wrap: pretty; }
.nato__link { display: inline-block; margin-top: 18px; color: var(--lp-azzurrino); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nato__link:hover { color: var(--lp-perla); }
.voci { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.voce { margin: 0; padding-top: 18px; border-top: 1px solid rgba(145, 220, 245, .3); }
.voce blockquote { margin: 0; }
.voce p { font-size: 14.5px; line-height: 1.55; color: var(--lp-fondale); }
.voce figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--lp-azzurrino); }

/* ===== PREZZI: la domanda vera (quanti istruttori) e la risposta grande; sotto, tutti i piani su una riga ===== */
.prezzi { background: var(--lp-perla); color: var(--lp-navy); padding: clamp(64px, 9vw, 120px) var(--gutter); }
.prezzi__in { max-width: 1180px; margin: 0 auto; }
.prezzi__testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.prezzi__titolo { margin: 0; font-weight: 600; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; max-width: 24ch; }
.prezzi__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; }
.periodo { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--lp-tenue); }
.periodo button { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 18px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font: 500 14px/1.2 var(--sans); color: var(--lp-navy); transition: background-color .2s, color .2s; }
.periodo button[aria-pressed="true"] { background: var(--lp-navy); color: var(--lp-perla); }
.periodo small { font-size: 12px; color: var(--lp-azzurro-ink); }
.periodo button[aria-pressed="true"] small { color: var(--lp-azzurrino); }

.calcolo { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center;
    padding: clamp(28px, 4vw, 52px); border-radius: 24px; background: #fff;
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 24px 48px -24px rgba(22, 52, 89, .3), 0 2px 6px rgba(22, 52, 89, .05); }
.calcolo__domanda { display: block; font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.calcolo__numero { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
.calcolo__numero output { font-size: clamp(56px, 6vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; min-width: 2ch; }
.calcolo__numero span { font-size: 17px; color: var(--lp-grigio); }
/* il cursore: pista azzurra fino al valore, pomello navy con anello chiaro, area di tocco larga */
.calcolo__cursore { --p: 0%; width: 100%; margin: 22px 0 0; height: 44px; appearance: none; -webkit-appearance: none; background: none; cursor: pointer; }
.calcolo__cursore::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--lp-azzurro) var(--p), var(--lp-tenue) var(--p)); }
.calcolo__cursore::-moz-range-track { height: 6px; border-radius: 999px; background: var(--lp-tenue); }
.calcolo__cursore::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--lp-azzurro); }
.calcolo__cursore::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--lp-navy);
    border: 0; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(22, 52, 89, .2), 0 6px 14px rgba(22, 52, 89, .3); transition: scale .15s var(--uscita); }
.calcolo__cursore::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--lp-navy); border: 0;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(22, 52, 89, .2), 0 6px 14px rgba(22, 52, 89, .3); }
.calcolo__cursore:active::-webkit-slider-thumb { scale: 1.1; }
.calcolo__cursore:focus-visible { outline: none; }
.calcolo__cursore:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--lp-azzurro); }
.calcolo__scala { display: flex; justify-content: space-between; margin-top: 2px; padding: 0 6px; font-size: 12px; color: var(--lp-grigio); font-variant-numeric: tabular-nums; }
.calcolo__esito { padding-left: clamp(0px, 4vw, 48px); border-left: 1px solid rgba(22, 52, 89, .12); }
.calcolo__piano { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.calcolo__piano b { font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.calcolo__piano span { font-size: 15px; color: var(--lp-grigio); }
.calcolo__prezzo { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.calcolo__prezzo > span:first-child { font-size: clamp(44px, 4.6vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.calcolo__per { font-size: 17px; color: var(--lp-grigio); }
.calcolo__nota { margin-top: 12px; min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--lp-azzurro-ink); text-wrap: pretty; }
.calcolo__esito .bottone { margin-top: 22px; }
.calcolo__cta-nota { margin-top: 12px; font-size: 13.5px; color: var(--lp-grigio); }
.calcolo__cta-nota a { color: var(--lp-azzurro-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* pulsante a filo (home e pagine interne) */
.bottone--linea { background: transparent; color: var(--lp-navy); box-shadow: inset 0 0 0 1.5px var(--lp-navy); }
.bottone--linea:hover { background: var(--lp-navy); color: var(--lp-perla); box-shadow: 0 12px 24px -12px rgba(22, 52, 89, .6); }

.piani { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.piano { padding-top: 16px; border-top: 2px solid rgba(22, 52, 89, .12); transition: border-color .25s; }
.piano.is-attivo { border-top-color: var(--lp-azzurro); }
.piano b { display: block; font-weight: 600; font-size: 18px; }
.piano > span { display: block; margin-top: 2px; font-size: 14px; color: var(--lp-grigio); }
.piano em { display: block; margin-top: 10px; font-style: normal; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.piano em + em { margin-top: 2px; }
.piano em small { margin-left: 5px; font-size: 13px; font-weight: 400; color: var(--lp-grigio); }
.piano .piano__parla { font-size: 14px; font-weight: 400; color: var(--lp-azzurro-ink); }
/* Enterprise non è un gradino in più ma un'altra cosa (funzioni su misura): linea tratteggiata, il cursore non lo accende mai */
.piano--misura { border-top-style: dashed; }
@media (max-width: 1000px) and (min-width: 761px) { .piani { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 40px); } }
.aggiunte { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.aggiunte > div { padding-top: 14px; border-top: 1px solid rgba(22, 52, 89, .13); }
.aggiunte dt { font-weight: 600; font-size: 15.5px; }
.aggiunte dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--lp-grigio); text-wrap: pretty; }
.prezzi__nota { margin-top: 28px; font-size: 13px; color: var(--lp-grigio); }

/* ===== DOMANDE: titolo a sinistra, elenco a destra con righe sottili; la croce ruota quando si apre ===== */
.faq { background: var(--lp-perla); color: var(--lp-navy); padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(64px, 9vw, 120px); }
.faq__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 5fr) minmax(0, 11fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__titolo { margin: 0; font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.faq__sotto { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--lp-grigio); }
.faq__sotto a { color: var(--lp-azzurro-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq details { border-top: 1px solid rgba(22, 52, 89, .14); }
.faq details:last-child { border-bottom: 1px solid rgba(22, 52, 89, .14); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 19px 0; cursor: pointer;
    font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--lp-azzurro-ink); stroke-width: 2; stroke-linecap: round; transition: rotate .3s var(--uscita); }
.faq details[open] summary svg { rotate: 45deg; }
.faq summary:hover { color: var(--lp-azzurro-ink); }
.faq details p { margin: 0 0 22px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--lp-grigio); text-wrap: pretty; }
.faq details[open] p { animation: faq-apre .35s var(--uscita) both; }
@keyframes faq-apre { from { opacity: 0; translate: 0 -6px; } }

/* ===== CHIUSURA: si torna nell'acqua ===== */
.fine { position: relative; overflow: hidden; padding: clamp(96px, 14vw, 180px) var(--gutter); background: var(--lp-abisso); color: var(--lp-perla); text-align: center; }
.fine__acqua { position: absolute; inset: 0; width: 100%; height: 100%; }
.fine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 60%, rgba(4, 13, 28, .5)); }
.fine__in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; display: grid; justify-items: center; }
.fine__titolo { margin: 0; font-weight: 600; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.fine__testo { margin: 20px 0 0; max-width: 52ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--lp-schiuma); text-wrap: pretty; }
.fine__azioni { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ===== PIEDE ===== */
.piede { background: #061527; color: var(--lp-fondale); padding: 56px var(--gutter) 36px; font-size: 14px; }
.piede__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.piede__marchio img { width: 140px; height: auto; }
.piede__marchio p { margin: 16px 0 0; max-width: 28ch; line-height: 1.5; }
.piede h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--lp-perla); }
.piede a { display: block; padding: 5px 0; transition: color .2s; }
.piede a:hover { color: var(--lp-perla); }
.piede__basso { max-width: 1180px; margin: 44px auto 0; padding-top: 20px; border-top: 1px solid rgba(145, 220, 245, .14);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; }
.piede__basso p { margin: 0; }
.lingue a { display: inline; padding: 0; margin-right: 16px; }
.lingue a[aria-current] { color: var(--lp-perla); text-decoration: underline; text-underline-offset: 4px; }

/* ===== barra fissa da telefono: compare dopo la hero, sparisce sulla chiusura (che ha già i pulsanti) ===== */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--lp-navy-profondo);
    box-shadow: 0 -8px 24px rgba(2, 10, 24, .35); translate: 0 110%; transition: translate .4s var(--uscita); }
.barra.is-visibile { translate: 0 0; }

/* ===== Telefono ===== */
@media (max-width: 760px) {
    .hero { height: 210vh; }
    .nav { padding: 16px var(--gutter); }
    .nav__logo img { width: 118px; }   /* versione corta del logo, senza tagline */
    .nav__link { display: none; }
    .hero__testo { padding-top: 92px; }
    .hero__sotto { margin-top: 16px; }
    .hero__azioni { margin-top: 26px; }
    .hero__azioni .bottone { flex: 1 1 100%; justify-content: center; }
    .hero__palco { margin-top: 36px; perspective: 1100px; }
    .app { width: calc(100vw - 2 * var(--gutter)); }
    /* da telefono: la vera schermata mobile dell'Agenda, dalla scheda del giorno alle prime lezioni (390×654 px CSS) */
    .app__schermo { aspect-ratio: 390 / 654; border-radius: 22px; }
    .app__schermo img { height: 100%; object-fit: cover; object-position: 50% 0; }
    .ag--hero { display: contents; }   /* da telefono l'agenda viva non parte: resta la schermata vera dentro la cornice */
    .app__scheda { display: none; }

    /* la giornata: testo e schermata uno sotto l'altro, l'asse delle ore resta a sinistra */
    .momenti { padding-left: 22px; }
    .momento { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
    .momento__ora::before { left: -27px; }
    .momento__schermata { border-radius: 10px; }

    .aree__griglia { grid-template-columns: 1fr; gap: 36px 0; }
    .nato__in { grid-template-columns: 1fr; row-gap: 32px; }
    .nato__foto { aspect-ratio: 4 / 3; }
    .voci { grid-template-columns: 1fr; gap: 16px; }
    .prezzi__testa { grid-template-columns: 1fr; align-items: start; }
    .calcolo { grid-template-columns: 1fr; padding: 22px 18px; border-radius: 18px; }
    .calcolo__esito { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(22, 52, 89, .12); }
    .calcolo__esito .bottone { width: 100%; justify-content: center; }
    .piani { grid-template-columns: 1fr; gap: 20px 0; }
    .aggiunte { grid-template-columns: 1fr; gap: 16px 0; }
    .faq__in { grid-template-columns: 1fr; row-gap: 20px; }
    .fine__azioni .bottone { flex: 1 1 100%; justify-content: center; }
    .piede__in { grid-template-columns: 1fr 1fr; }
    .piede__marchio { grid-column: 1 / -1; }
    .barra { display: flex; }
    .barra .bottone { flex: 1; justify-content: center; padding: 13px 14px; }
    .barra .bottone--onda { flex: 0 0 auto; }
    .piede { padding-bottom: 96px; }   /* spazio per la barra fissa */
}
@media (max-width: 900px) and (min-width: 761px) {
    .aree__griglia { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero { height: auto; }
    .hero__scena { position: relative; height: auto; min-height: 100svh; padding-bottom: 64px; }
    .js .app { --acqua: 100%; }
    .app__acqua { animation: none; }
    .faq details[open] p { animation: none; }
    .barra { transition: none; }
    .consenso { transition: none; }
}

/* ===== consenso ai cookie ===== */
/* scheda piccola in basso a sinistra; da telefono a tutta larghezza, sopra la barra fissa (z-index 50) */
.consenso { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: calc(100% - 40px); max-width: 420px;
    padding: 18px 20px; border-radius: 14px; background: #fff; color: var(--lp-navy); font-size: 14px; line-height: 1.5;
    box-shadow: 0 18px 48px rgba(6, 21, 39, .28), 0 2px 8px rgba(6, 21, 39, .12);
    opacity: 0; translate: 0 12px; transition: opacity .25s var(--uscita), translate .25s var(--uscita); }
.consenso[hidden] { display: none; }
.consenso.is-aperto { opacity: 1; translate: 0 0; }
.consenso__testo { margin: 0; }
.consenso__testo b { font-weight: 600; }
.consenso__testo a { color: var(--lp-azzurro-ink); text-decoration: underline; text-underline-offset: 3px; }
.consenso__azioni { display: flex; gap: 10px; margin-top: 14px; }
.consenso .bottone { border: 0; cursor: pointer; }
.consenso .bottone--onda { color: var(--lp-navy); box-shadow: inset 0 0 0 1px rgba(22, 52, 89, .25); }
.consenso .bottone--onda:hover { background: var(--lp-tenue); }
@media (max-width: 760px) {
    .consenso { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 14px 14px 0 0;
        padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); }
    .barra.is-visibile ~ .consenso { bottom: calc(66px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; }
    .consenso__azioni .bottone { flex: 1; justify-content: center; }
}

/* ===== scelta della lingua in alto (details/summary: funziona anche senza JS) ===== */
.nav__destra { display: flex; align-items: center; gap: 12px; }
.lingua { position: relative; }
.lingua summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px; cursor: pointer; user-select: none;
    color: var(--lp-perla); font: 500 13.5px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(145, 220, 245, .35); transition: background-color .2s, box-shadow .2s; }
.lingua summary::-webkit-details-marker { display: none; }
.lingua summary:hover { background: rgba(145, 220, 245, .12); box-shadow: inset 0 0 0 1px rgba(145, 220, 245, .6); }
.lingua summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lingua .lingua__freccia { width: 14px; height: 14px; transition: rotate .3s var(--uscita); }
.lingua[open] .lingua__freccia { rotate: 180deg; }
.lingua__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; min-width: 186px; padding: 6px; border-radius: 14px; background: #fff; color: var(--lp-navy);
    box-shadow: 0 0 0 1px rgba(22, 52, 89, .08), 0 24px 48px -18px rgba(2, 10, 24, .6); }
.lingua[open] .lingua__menu { animation: lingua-apre .28s var(--uscita); }
@keyframes lingua-apre { from { opacity: 0; translate: 0 -6px; } }
.lingua__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; transition: background-color .15s; }
.lingua__menu a b { width: 26px; font-size: 12px; font-weight: 600; color: var(--lp-azzurro-ink); }
.lingua__menu a:hover { background: var(--lp-tenue); }
.lingua__menu a[aria-current] { background: var(--lp-tenue); font-weight: 600; }
.nav__link a { position: relative; }
.nav__link a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; scale: 0 1; transform-origin: 100% 50%; transition: scale .35s var(--uscita); }
.nav__link a:hover::after { scale: 1 1; transform-origin: 0 50%; }
@media (max-width: 760px) {
    .nav__destra { gap: 8px; }
    .lingua summary { padding: 8px 10px; }
    .lingua summary > svg:first-child { display: none; }
}

/* ===== menu sempre a portata (sito.js). In cima è libero sulla scena; appena si scorre diventa una capsula navy staccata dai bordi,
   con il logo intero. Da telefono la tendina è dello stesso materiale della capsula, con le voci grandi e lo stormo in filigrana.
   Le pagine interne tengono il posto del menu (--nav-h) così il testo non salta ===== */
.nav__apri, .nav__demo, .nav__filigrana { display: none; }
.nav-fissa .nav { position: fixed; z-index: 60; top: 10px; left: 50%; right: auto; width: min(1240px, calc(100% - 20px)); translate: -50% 0;
    padding: 7px 7px 7px 22px; border-radius: 999px;
    background: var(--lp-navy);   /* navy pieno: il marchio non vuole il vetro sfocato */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-azzurrino) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--lp-perla) 12%, transparent),
        0 20px 44px -24px var(--lp-abisso);
    animation: nav-scende .55s var(--uscita); }
@keyframes nav-scende { from { translate: -50% calc(-100% - 14px); } }
.nav-fissa .nav__logo img { width: 138px; }
.nav-fissa .hero .nav__logo::before { display: none; }
.nav-fissa .hero .nav__logo img { filter: none; }
.nav-fissa .hero .nav__link a, .nav-fissa .hero .lingua summary { text-shadow: none; }
.nav-fissa .hero .lingua summary { background: transparent; }
.nav-fissa .testata { padding-top: var(--nav-h, 0px); }
/* la pagina in cui si è: voce chiara con un punto azzurro sotto (il trattino del passaggio del mouse resta per le altre) */
.nav__link a[aria-current] { color: var(--lp-perla); }
.nav__link a[aria-current]::before { content: ""; position: absolute; left: 50%; bottom: -1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--lp-azzurro); }
.nav__link a[aria-current]::after { display: none; }

@media (max-width: 760px) {
    .nav__logo img, .nav-fissa .nav__logo img { width: 138px; }   /* sempre il logo intero, con WATERSPORTS */
    .nav__destra > .bottone { display: none; }   /* la demo sta nella tendina (e nella barra in basso) */
    .nav-fissa .nav { top: 8px; width: calc(100% - 16px); padding: 6px 6px 6px 16px; }
    .nav__apri { display: grid; place-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
        background: color-mix(in srgb, var(--lp-azzurrino) 16%, transparent); transition: background-color .25s; }
    .nav__apri:focus-visible { outline: 2px solid var(--lp-azzurro); outline-offset: 2px; }
    .nav__apri i { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--lp-perla); transition: translate .35s var(--uscita), rotate .35s var(--uscita), width .35s var(--uscita); }
    .nav__apri i:last-child { width: 11px; justify-self: end; }
    .nav--aperta .nav__apri { background: var(--lp-azzurro); }
    .nav--aperta .nav__apri i { background: var(--lp-navy); width: 17px; }
    .nav--aperta .nav__apri i:first-child { translate: 0 3.5px; rotate: 45deg; }
    .nav--aperta .nav__apri i:last-child { translate: 0 -3.5px; rotate: -45deg; }

    /* la tendina: stesso navy velato della capsula, voci grandi, divisori sottili */
    nav.nav .nav__link { display: grid; position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); gap: 0; overflow: hidden;
        padding: 10px 10px 12px; border-radius: 28px; isolation: isolate; color: var(--lp-perla); font-size: 22px; font-weight: 600; letter-spacing: -.02em;
        background: var(--lp-navy);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-azzurrino) 20%, transparent), 0 30px 60px -26px var(--lp-abisso);
        opacity: 0; visibility: hidden; translate: 0 -10px; scale: .98; transform-origin: 50% 0;
        transition: opacity .22s, translate .35s var(--uscita), scale .35s var(--uscita), visibility 0s .35s; }
    .nav-fissa nav.nav .nav__link { left: 0; right: 0; }   /* nella capsula la tendina è larga quanto lei */
    nav.nav--aperta .nav__link { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition: opacity .22s, translate .35s var(--uscita), scale .35s var(--uscita); }
    nav.nav .nav__link a { padding: 16px 14px; border-radius: 16px; color: var(--lp-perla); text-shadow: none; }
    nav.nav .nav__link a + a:not(.nav__demo) { box-shadow: 0 -1px 0 color-mix(in srgb, var(--lp-azzurrino) 14%, transparent); }
    nav.nav .nav__link a::after { display: none; }
    nav.nav .nav__link a:active { background: color-mix(in srgb, var(--lp-azzurrino) 12%, transparent); }
    nav.nav .nav__link a[aria-current] { color: var(--lp-azzurrino); }
    nav.nav .nav__link a[aria-current]::before { left: auto; right: 16px; top: 50%; bottom: auto; width: 7px; height: 7px; margin: -3.5px 0 0; }
    nav.nav .nav__link .nav__demo { display: flex; justify-content: center; margin-top: 10px; padding: 15px; border-radius: 999px; font-size: 16px; color: var(--lp-navy); letter-spacing: 0; }
    /* lo stormo del logo in filigrana, grande, nell'angolo */
    nav.nav .nav__filigrana { display: block; position: absolute; z-index: -1; right: -46px; bottom: -40px; width: 190px; opacity: .07; pointer-events: none; }
    /* all'apertura le voci arrivano una dopo l'altra */
    nav.nav--aperta .nav__link > a { animation: voce-entra .45s var(--uscita) backwards; }
    nav.nav--aperta .nav__link > a:nth-child(2) { animation-delay: .04s; }
    nav.nav--aperta .nav__link > a:nth-child(3) { animation-delay: .08s; }
    nav.nav--aperta .nav__link > a:nth-child(4) { animation-delay: .12s; }
    @keyframes voce-entra { from { opacity: 0; translate: 0 10px; } }
}
@media (prefers-reduced-motion: reduce) {
    .nav-fissa .nav, nav.nav--aperta .nav__link > a { animation: none; }
    nav.nav .nav__link { transition: none; }
}