@font-face{font-family:"Fredoka";src:url(fredoka.woff2) format("woff2");font-weight:300 700;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(instrumentsans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
/* Zampa · pagina del test di un'app. Il pezzo forte è la videochiamata in apertura, che cambia con l'animale scelto. */
:root{--primario:#16835A;--accento:#FFB238;--fondo:#F1F6F2;--inchiostro:#102119;--carta:#fff;--tenue:#DCEBE1;--su-primario:#fff;--r:26px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--inchiostro);font:17px/1.6 "Instrument Sans",system-ui,sans-serif;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
.w{max-width:1200px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;line-height:1.02;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:34px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--accento);outline-offset:3px}

/* pulsanti, scelte e modulo */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;border-radius:999px;padding:14px 22px;font:600 1rem/1.1 "Instrument Sans",sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s}
.bt:hover{transform:translateY(-1px)}
.bt.pieno{background:var(--primario);color:var(--su-primario)}
.bt.linea{background:transparent;border-color:currentColor;color:inherit}
.bt.piccolo{padding:9px 15px;font-size:.9rem}
.bt:disabled{opacity:.6;cursor:wait}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--tenue);background:var(--carta);color:var(--inchiostro);border-radius:999px;padding:10px 16px 10px 12px;font:600 1rem "Instrument Sans",sans-serif;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.chip span{font-size:1.35rem;line-height:1}
.chip:hover{border-color:var(--primario)}
.chip[aria-pressed="true"]{background:var(--primario);border-color:var(--primario);color:var(--su-primario);transform:scale(1.03)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:700;margin-bottom:10px;padding:0}
.iscrizione{display:flex;flex-direction:column;gap:12px;max-width:520px}
.campo-riga{display:flex;gap:8px;background:var(--carta);border-radius:999px;padding:6px;box-shadow:0 10px 30px -18px rgba(16,33,25,.45);border:1px solid var(--tenue)}
.campo-riga input{flex:1;min-width:0;border:0;background:transparent;font:inherit;padding:0 16px;color:var(--inchiostro)}
.campo-riga input:focus{outline:none}
.campo-riga:focus-within{outline:3px solid var(--accento);outline-offset:2px}
.spunta{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.45;opacity:.8}
.spunta input{margin-top:3px;accent-color:var(--primario);width:17px;height:17px;flex:none}
.trappola{position:absolute;left:-9999px}
.errore{margin:0;color:#B42318;font-weight:600;font-size:.95rem}
.ok{background:var(--tenue);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ok b{font-family:"Fredoka",sans-serif;font-size:1.25rem}

/* barra */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:26px}
.marchio{display:flex;align-items:center;gap:10px;font:600 1.5rem "Fredoka",sans-serif}
.marchio i{width:30px;height:30px;border-radius:50% 50% 50% 14%;background:var(--primario);position:relative}
.marchio i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--accento)}
.marchio img{max-height:44px;width:auto}
.quando{font-weight:600;font-size:.9rem;background:var(--carta);border:1px solid var(--tenue);border-radius:999px;padding:7px 14px}

/* apertura */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-top:20px;padding-bottom:90px;overflow:clip}
.hero-testo{position:relative;z-index:2;display:flex;flex-direction:column;gap:22px}
.sopra{margin:0;font-weight:700;color:var(--primario);display:flex;align-items:center;gap:10px}
.sopra::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--primario);box-shadow:0 0 0 6px color-mix(in srgb,var(--primario) 18%,transparent)}
.hero h1{font-size:clamp(3rem,6.6vw,5.6rem)}
.slogan{margin:0;font-size:1.15rem;max-width:44ch;opacity:.85}
.regalo{margin:0;font-weight:700;display:flex;align-items:center;gap:8px}
.regalo::before{content:"🎁"}

/* la videochiamata */
.chiamata{position:relative;z-index:2;justify-self:center;width:min(100%,440px);aspect-ratio:4/5;border-radius:36px;overflow:hidden;background:#13231B;box-shadow:0 40px 80px -36px rgba(16,33,25,.6),0 0 0 10px var(--carta);transform:rotate(1.5deg)}
.chiamata .video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.chiamata::before,.chiamata::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.chiamata::before{top:0;height:30%;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.chiamata::after{bottom:0;height:46%;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.barra{position:absolute;z-index:2;left:20px;right:20px;top:18px;display:flex;justify-content:space-between;align-items:flex-start;color:#fff}
.chi{display:flex;flex-direction:column;line-height:1.25}
.chi b{font-size:1.05rem}
.chi small{display:flex;align-items:center;gap:7px;font-size:.85rem;opacity:.9;font-variant-numeric:tabular-nums}
.chi small i{width:8px;height:8px;border-radius:50%;background:#3FE08F;box-shadow:0 0 0 0 rgba(63,224,143,.7);animation:vivo 1.8s infinite}
@keyframes vivo{70%{box-shadow:0 0 0 8px rgba(63,224,143,0)}100%{box-shadow:0 0 0 0 rgba(63,224,143,0)}}
.segnale{display:flex;align-items:flex-end;gap:3px;height:16px}
.segnale i{width:4px;background:#fff;border-radius:2px}
.segnale i:nth-child(1){height:6px}.segnale i:nth-child(2){height:11px}.segnale i:nth-child(3){height:16px}
.pip{position:absolute;z-index:3;right:18px;bottom:96px;width:34%;aspect-ratio:3/4;border-radius:20px;overflow:hidden;border:3px solid #fff;box-shadow:0 14px 30px rgba(0,0,0,.4);background:#2A3A31}
.pip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .55s,transform .9s cubic-bezier(.2,.8,.2,1)}
.pip img.on{opacity:1;transform:none}
.pip .a-gatto{object-position:28% 88%;transform-origin:28% 88%}
.pip .a-gatto.on{transform:scale(1.9)}
.pip span{position:absolute;left:8px;bottom:6px;color:#fff;font-size:.72rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.sottotitolo{position:absolute;z-index:3;left:18px;right:calc(34% + 30px);bottom:98px;margin:0;color:#fff;font-weight:600;font-size:1rem;line-height:1.4;text-shadow:0 1px 8px rgba(0,0,0,.5);min-height:4.2em;display:flex;align-items:flex-end}
.sottotitolo.parla::after{content:"";width:2px;height:1.1em;background:#fff;margin-left:2px;animation:cur .7s steps(1) infinite}
@keyframes cur{50%{opacity:0}}
.comandi{position:absolute;z-index:3;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:16px}
.comandi i{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative}
.comandi i::after{content:"";position:absolute;inset:16px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.c-mic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='2' width='8' height='13' rx='4'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.9V23h-2v-3.1A9 9 0 0 1 3 11z'/%3E%3C/svg%3E")}
.c-cam{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='5' width='15' height='14' rx='3'/%3E%3Cpath d='M17 10l6-4v12l-6-4z'/%3E%3C/svg%3E")}
.comandi .c-fine{background:#E5484D;width:64px;height:52px;border-radius:26px}
.c-fine{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9c-3.5 0-6.6 1-9 2.6-.6.4-.8 1.2-.4 1.8l1.6 2.3c.4.6 1.2.8 1.8.5l2.6-1.3c.5-.3.8-.8.7-1.4l-.2-1.5a13 13 0 0 1 5.8 0l-.2 1.5c-.1.6.2 1.1.7 1.4l2.6 1.3c.6.3 1.4.1 1.8-.5l1.6-2.3c.4-.6.2-1.4-.4-1.8C18.6 10 15.5 9 12 9z'/%3E%3C/svg%3E")}
/* la chiamata in arrivo */
.squilla{position:absolute;inset:0;z-index:5;background:linear-gradient(170deg,#173628,#0C1912);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;transition:transform .8s cubic-bezier(.7,0,.2,1),opacity .6s}
.squilla.via{transform:translateY(-100%);opacity:.4}
.avatar{position:relative;width:118px;height:118px;border-radius:50%;margin-bottom:14px}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%;position:relative;z-index:1}
.avatar::before,.avatar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:onda 1.6s ease-out infinite}
.avatar::after{animation-delay:.8s}
@keyframes onda{to{transform:scale(1.7);opacity:0}}
.squilla b{font:600 1.4rem "Fredoka",sans-serif}
.squilla small{opacity:.75}
.rispondi{display:flex;gap:56px;margin-top:40px}
.rispondi i{width:62px;height:62px;border-radius:50%;position:relative;background:#E5484D}
.rispondi i::after{content:"";position:absolute;inset:18px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.rispondi .c-ok{background:#2FBF71;animation:suona .5s ease-in-out infinite alternate}
.c-ok{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E")}
@keyframes suona{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.chiamata .video{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.chiamata.collegato .video{transform:none}

/* il battito che attraversa l'apertura */
.battito{position:absolute;z-index:1;left:47%;top:calc(50% + 10px);width:58%;height:120px;pointer-events:none}
.battito path{fill:none;stroke:var(--primario);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22 78;animation:corre 2.6s linear infinite;opacity:.9}
@keyframes corre{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* come funzionerà */
.passi{padding-top:60px;padding-bottom:40px}
.passi ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.passi li{position:relative;background:var(--carta);border-radius:var(--r);padding:16px 16px 24px;display:flex;flex-direction:column;gap:8px}
.passi img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:10px}
.passi .n{position:absolute;top:28px;left:28px;width:42px;height:42px;border-radius:50%;background:var(--accento);color:var(--inchiostro);display:grid;place-items:center;font:600 1.2rem "Fredoka",sans-serif}
.passi h3{font-size:1.45rem;padding:0 8px}
.passi p{margin:0;padding:0 8px;opacity:.8}

/* chi aspetta */
.attesa{padding-top:70px;padding-bottom:20px}
.attesa h2 b{color:var(--primario)}
.attesa ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:640px}
.attesa li{display:grid;grid-template-columns:34px 150px 1fr 48px;gap:12px;align-items:center;font-size:1.05rem}
.attesa li span{font-size:1.5rem}
.attesa li i{height:14px;background:var(--tenue);border-radius:9px;overflow:hidden}
.attesa li u{display:block;height:100%;background:var(--primario);border-radius:inherit}
.attesa li em{font-style:normal;font-weight:700;text-align:right}

/* domande */
.faq{padding-top:70px;padding-bottom:40px}
.faq>*{max-width:860px}
.faq details{background:var(--carta);border-radius:20px;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 22px;font-weight:700;font-size:1.08rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font:600 1.5rem "Fredoka",sans-serif;color:var(--primario)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 22px 18px;opacity:.85}

/* chiusura */
.finale{margin-top:60px;background:var(--primario);color:var(--su-primario);padding:80px 0;border-radius:40px 40px 0 0}
.finale h2{margin-bottom:26px;max-width:16ch}
.finale .chip{border-color:rgba(255,255,255,.35);background:transparent;color:inherit}
.finale .chip[aria-pressed="true"]{background:var(--carta);color:var(--inchiostro);border-color:var(--carta)}
.finale .campo-riga{border:0}
.finale .bt.pieno{background:var(--inchiostro)}
.finale .ok{background:rgba(255,255,255,.15)}
.finale .errore{color:#fff;background:rgba(180,35,24,.6);padding:8px 12px;border-radius:12px}
.piede{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;padding-top:28px;padding-bottom:40px;font-size:.92rem;background:var(--primario);color:var(--su-primario);max-width:none;margin:0}
.piede b{font-family:"Fredoka",sans-serif;font-size:1.2rem}
.soc{display:flex;gap:16px;margin-left:auto}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:22px;padding-top:8px;padding-bottom:90px}
  .hero-testo{display:contents}
  .hero-testo>*{order:5}
  .hero .sopra{order:1}.hero h1{order:2}.chiamata{order:3}.hero .slogan{order:4}
  .chiamata{width:min(100%,360px);transform:none;margin:8px 0 10px;box-shadow:0 30px 60px -30px rgba(16,33,25,.6),0 0 0 6px var(--carta)}
  .battito{display:none}
  .passi ol{grid-template-columns:1fr}
}
@media (max-width:560px){
  .w{padding:0 18px}
  .campo-riga{flex-direction:column;border-radius:22px;padding:8px}
  .campo-riga input{padding:12px 12px}
  .chiamata{border-radius:28px}
  .sottotitolo{font-size:.92rem}
  .attesa li{grid-template-columns:28px 1fr 44px}.attesa li i{grid-column:2/4;grid-row:2}
  .soc{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.battito path{animation:none;stroke-dasharray:none;opacity:.4}.chi small i{animation:none}.pip img{transition:none}}

/* l'offerta: in primo piano, è quello che il test mette alla prova */
.prezzo-riga{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.prezzo-riga b{font:600 1.7rem/1 "Fredoka",sans-serif;color:var(--primario)}
.prezzo-riga span{opacity:.75}
.prezzo-riga em{flex-basis:100%;font-style:normal;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.prezzo-riga em::before{content:"🎁"}
.offerta{padding-top:20px;padding-bottom:30px}
.offerta-scheda{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);background:var(--carta);border-radius:36px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(16,33,25,.5)}
.offerta-testo{padding:44px 48px}
.offerta-sopra{margin:0 0 10px;font-weight:700;color:var(--primario)}
.offerta h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:24px}
.offerta ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.offerta li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:1.08rem;line-height:1.45}
.offerta li::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--tenue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316835A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
.offerta-prezzo{background:var(--primario);color:var(--su-primario);padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.prezzo{margin:0;display:flex;flex-direction:column;gap:2px}
.prezzo b{font:600 clamp(3.4rem,6vw,4.8rem)/1 "Fredoka",sans-serif}
.prezzo span{opacity:.85}
.vantaggio{margin:0;background:var(--accento);color:var(--inchiostro);font-weight:700;border-radius:16px;padding:12px 16px;line-height:1.35}
.offerta-prezzo .bt{background:var(--carta);color:var(--inchiostro)}
.offerta-prezzo small{opacity:.8}
.barra-offerta{display:none}
@media (max-width:900px){
  .offerta-scheda{grid-template-columns:1fr}
  .offerta-testo{padding:30px 24px}.offerta-prezzo{padding:30px 24px}
  .barra-offerta:not([hidden]){display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;align-items:center;justify-content:space-between;gap:12px;background:var(--inchiostro);color:#fff;border-radius:22px;padding:10px 10px 10px 18px;box-shadow:0 16px 40px -10px rgba(0,0,0,.5)}
  .barra-offerta b{font:600 1.3rem "Fredoka",sans-serif}
  .barra-offerta small{opacity:.75}
  .barra-offerta .bt{padding:12px 18px}
}