/* digitalastra.it · home 18/10/2026 · lingua «ritagli di carta» del Polpo (reel-forge/src/carta/pezzi.tsx) */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-black-latin.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2')}
:root{
  --rosso:#f03a2a; --rosso-scuro:#c92a1d; --rosso-testo:#d42f20; --rosso-ombra:#9e2116; --carta:#fff4dc; --inchiostro:#1d1712; --inchiostro-2:#2a221b; --inchiostro-3:#3a3027;
  --giallo:#ffc62e; --acqua:#12b89a; --blu:#2f8cff;
  --bg:var(--inchiostro); --bg-2:var(--inchiostro-2); --testo:var(--carta); --testo-2:#d9cbb0; --linea:rgba(255,244,220,.14);
  --foglio:var(--carta); --foglio-testo:var(--inchiostro);
  --titolo:'Archivo Black',system-ui,sans-serif; --corpo:'DM Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ombra:0 8px 0 rgba(0,0,0,.35); --ombra-s:0 5px 0 rgba(0,0,0,.3);
  --r:14px; --molla:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
}
[data-tema="carta"]{--bg:#fff4dc;--bg-2:#f6e7c6;--testo:#1d1712;--testo-2:#5a4a3a;--linea:rgba(29,23,18,.14);--foglio:#fffaf0;--ombra:0 8px 0 rgba(29,23,18,.9);--ombra-s:0 5px 0 rgba(29,23,18,.85)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--testo);font-family:var(--corpo);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--giallo);outline-offset:3px;border-radius:6px}
.grana{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.h2{font-family:var(--titolo);font-weight:400;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:1.15rem;color:var(--testo-2);max-width:58ch;text-wrap:pretty}
.sez{padding:110px 0;position:relative}
.sez-testa{max-width:760px;margin-bottom:56px}
.sez-testa .lead{margin-top:18px}
.striscia{display:inline-block;background:var(--rosso);color:var(--carta);padding:.02em .28em .08em;transform:rotate(-1.6deg);clip-path:polygon(0 8%,3% 0,97% 4%,100% 0,99% 92%,96% 100%,4% 96%,0 100%);box-shadow:var(--ombra-s)}
.etichetta{font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;color:var(--testo-2)}

/* bottoni: molla sul gesto */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--corpo);font-weight:700;font-size:1.05rem;text-decoration:none;border:0;cursor:pointer;padding:1rem 1.6rem;border-radius:12px;white-space:nowrap;transition:transform .45s var(--molla),box-shadow .2s ease,background .2s ease}
.btn svg{width:1.15em;height:1.15em;flex-shrink:0}
.btn-rosso{background:var(--rosso-testo);color:#fff;box-shadow:0 6px 0 var(--rosso-ombra)}
.btn-rosso:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 9px 0 var(--rosso-ombra)}
.btn-rosso:active{transform:translateY(5px);box-shadow:0 1px 0 var(--rosso-ombra);transition-duration:.08s}
.btn-carta{background:var(--foglio);color:var(--foglio-testo);box-shadow:var(--ombra-s)}
.btn-carta:hover{transform:translateY(-3px) rotate(1deg)}
.btn-carta:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.3);transition-duration:.08s}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.marchio img{width:44px;height:auto;transition:transform .5s var(--molla)}
.marchio:hover img{transform:rotate(-8deg) scale(1.06)}
.marchio span{font-family:var(--titolo);font-size:1.25rem;letter-spacing:-.01em}
.nav-voci{display:flex;align-items:center;gap:1.8rem}
.nav-voci a{text-decoration:none;font-weight:600;font-size:1rem;color:var(--testo-2);transition:color .2s;padding:.7rem .1rem;min-height:44px;display:inline-flex;align-items:center}
.nav-voci a:hover{color:var(--testo)}
.nav-voci .lingua{font-family:var(--mono);font-size:.8rem;border:1px solid var(--linea);padding:.2rem .5rem;border-radius:6px}
.nav-voci .btn{padding:.7rem 1.15rem;font-size:.98rem;color:#fff}
.nav-apri{display:none;background:none;border:0;color:var(--testo);padding:8px;cursor:pointer}
.nav-apri svg{width:28px;height:28px}

/* hero */
.hero{padding:56px 0 40px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;min-height:min(760px,calc(100svh - 76px))}
.hero-domanda{display:inline-flex;align-items:center;gap:.55rem;background:var(--foglio);color:var(--foglio-testo);font-weight:700;font-size:1rem;padding:.55rem 1rem;border-radius:10px;transform:rotate(-1.5deg);box-shadow:var(--ombra-s)}
.hero-domanda i{width:10px;height:10px;border-radius:50%;background:var(--rosso);animation:batti 1.6s ease-in-out infinite}
.hero h1{font-family:var(--titolo);font-weight:400;font-size:clamp(3rem,7.4vw,6.4rem);line-height:.98;letter-spacing:-.035em;margin:28px 0 26px}
.hero h1 .striscia{margin-top:.08em}
.hero .lead{font-size:1.25rem;max-width:30em}
.hero-azioni{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.hero-test{margin-top:22px;font-size:.98rem;color:var(--testo-2)}
.hero-test a{color:var(--testo);font-weight:700;text-decoration-color:var(--rosso);text-decoration-thickness:2px;text-underline-offset:4px}
.collage{position:relative;height:640px}
.collage .mattia{position:absolute;right:-10px;bottom:0;height:640px;width:auto;transform:scaleX(-1);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.collage .sole{position:absolute;right:40px;top:70px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--rosso) 55%,transparent),transparent 68%);filter:blur(10px)}
.brief{position:absolute;left:-40px;bottom:30px;width:330px;background:var(--foglio);color:var(--foglio-testo);border-radius:12px;padding:18px 18px 16px;transform:rotate(-3deg);box-shadow:var(--ombra);font-size:.92rem;line-height:1.45}
.brief::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:24px;margin-left:-46px;background:rgba(255,198,46,.75);transform:rotate(2deg)}
.brief b{display:block;font-family:var(--titolo);font-weight:400;font-size:1rem;margin-bottom:8px}
.brief .riga{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed rgba(29,23,18,.22)}
.brief .riga svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.brief .riga small{display:block;color:#5e4e3d;font-size:.8rem}
.brief .bottoni{display:flex;gap:8px;margin-top:10px}
.brief .bottoni span{font-weight:700;font-size:.82rem;padding:.4rem .8rem;border-radius:8px}
.brief .si{background:var(--rosso-testo);color:#fff}
.brief .mod{border:1.5px solid rgba(29,23,18,.3)}
.etichetta-esempio{position:absolute;right:-8px;top:-14px;background:var(--inchiostro);color:var(--carta);font-family:var(--mono);font-size:.78rem;padding:.2rem .5rem;border-radius:6px;transform:rotate(4deg)}

/* le loro parole: ritagli */
.ritagli{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:start}
.ritaglio{background:var(--foglio);color:var(--foglio-testo);padding:30px 30px 26px;border-radius:6px;box-shadow:var(--ombra);clip-path:polygon(0 2%,6% 0,40% 2%,70% 0,100% 2%,99% 50%,100% 98%,60% 100%,30% 98%,0 100%,1% 50%)}
.ritaglio q{display:block;font-family:var(--titolo);font-size:1.45rem;line-height:1.2;quotes:"«" "»"}
.ritaglio p{margin-top:14px;color:#5a4a3a;font-size:1rem}
.ritaglio:nth-child(1){grid-column:1/6;transform:rotate(-1.4deg)}
.ritaglio:nth-child(2){grid-column:6/13;transform:rotate(1deg);margin-top:46px}
.ritaglio:nth-child(3){grid-column:3/10;transform:rotate(-.6deg)}
.ritaglio:nth-child(2) q{color:#c22a1c}

/* cosa fa */
.cosa{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.cosa-figura{position:relative;display:flex;justify-content:center}
.cosa-figura img{width:min(360px,80%);height:auto;animation:respiro 4.5s ease-in-out infinite}
.cosa-figura::after{content:"";position:absolute;bottom:-6px;left:50%;width:220px;height:22px;margin-left:-110px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(6px);z-index:-1}
.voci{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.voci li{display:flex;gap:14px;background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--r);padding:20px;transition:transform .5s var(--molla),border-color .2s}
.voci li:hover{transform:translateY(-4px) rotate(-.5deg);border-color:color-mix(in oklab,var(--rosso) 60%,transparent)}
.ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--rosso-testo);color:#fff;display:grid;place-items:center;box-shadow:0 4px 0 var(--rosso-scuro)}
.ico svg{width:24px;height:24px}
.voci h3{font-family:var(--corpo);font-weight:700;font-size:1.08rem;margin-bottom:4px}
.voci p{color:var(--testo-2);font-size:.98rem;line-height:1.5}

/* oggi / con */
.confronto{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.foglio-oggi,.foglio-con{border-radius:10px;padding:34px}
.foglio-oggi{background:var(--bg-2);border:2px dashed var(--linea);transform:rotate(-.8deg)}
.foglio-con{background:var(--foglio);color:var(--foglio-testo);box-shadow:var(--ombra);transform:rotate(.8deg)}
.confronto h3{font-family:var(--titolo);font-weight:400;font-size:1.5rem;margin-bottom:18px}
.confronto ul{list-style:none;display:grid;gap:14px}
.confronto li{display:flex;gap:12px;align-items:flex-start;font-size:1.04rem}
.confronto li svg{width:22px;height:22px;flex-shrink:0;margin-top:3px}
.foglio-oggi li{color:var(--testo-2)}
.foglio-oggi li svg{color:#9a8a76}
.foglio-con li svg{color:var(--rosso)}

/* per chi: la scala */
.scala{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:end}
.gradino{background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--r);padding:28px;position:relative;transition:transform .5s var(--molla)}
.gradino:hover{transform:translateY(-6px)}
.gradino:nth-child(1){min-height:300px}.gradino:nth-child(2){min-height:350px}.gradino:nth-child(3){min-height:400px;background:var(--rosso-testo);border-color:var(--rosso-testo);color:#fff}
.gradino .chi{font-family:var(--mono);font-size:.8rem;color:var(--testo-2)}
.gradino:nth-child(3) .chi{color:#fff}
.gradino h3{font-family:var(--titolo);font-weight:400;font-size:1.7rem;margin:10px 0 12px}
.gradino p{color:var(--testo-2);font-size:1rem}
.gradino:nth-child(3) p{color:#fff}
.gradino a{display:inline-flex;gap:.4em;align-items:center;margin-top:18px;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.gradino a svg{width:1em;height:1em;transition:transform .4s var(--molla)}
.gradino a:hover svg{transform:translateX(4px)}

/* in pratica */
.pratica{display:grid;gap:0;border-top:1px solid var(--linea)}
.pratica-riga{display:grid;grid-template-columns:56px 260px 1fr;gap:22px;align-items:start;padding:26px 0;border-bottom:1px solid var(--linea)}
.pratica-riga .ico{background:var(--foglio);color:var(--inchiostro);box-shadow:var(--ombra-s)}
.pratica-riga h3{font-family:var(--titolo);font-weight:400;font-size:1.2rem;line-height:1.25;padding-top:8px}
.pratica-riga p{color:var(--testo-2);padding-top:6px}
.pratica-riga p strong{color:var(--testo)}

/* come funziona */
.passi{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;counter-reset:passo}
.passi::before{content:"";position:absolute;left:4%;right:4%;top:30px;border-top:3px dashed color-mix(in oklab,var(--rosso) 70%,transparent)}
.passo{position:relative;padding-top:78px}
.passo .num{position:absolute;top:0;left:0;width:62px;height:62px;border-radius:50%;background:var(--foglio);color:var(--foglio-testo);display:grid;place-items:center;font-family:var(--titolo);font-size:1.3rem;box-shadow:var(--ombra-s);transition:transform .5s var(--molla)}
.passo:hover .num{transform:rotate(-10deg) scale(1.08)}
.passo:nth-child(4) .num{background:var(--rosso-testo);color:#fff}
.passo h3{font-family:var(--titolo);font-weight:400;font-size:1.25rem;margin-bottom:8px}
.passo p{color:var(--testo-2);font-size:1rem}
.indica{position:absolute;right:24px;top:-30px;width:210px;height:auto;transform:scaleX(-1) rotate(4deg);animation:none}

/* testimonianze */
.tv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.tv-card{margin:0;position:relative;transition:transform .5s var(--molla)}
.tv-card:nth-child(odd){transform:rotate(-1.2deg)}.tv-card:nth-child(even){transform:rotate(1.2deg)}
.tv-card:hover{transform:rotate(0) translateY(-4px)}
.tv-card::before{content:"";position:absolute;z-index:2;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(255,198,46,.78);transform:rotate(-3deg)}
.tv-frame{aspect-ratio:9/16;background:#000;border:8px solid var(--foglio);border-bottom-width:0;border-radius:6px 6px 0 0;overflow:hidden}
.tv-frame video{width:100%;height:100%;object-fit:cover;background:#000}
.tv-card figcaption{background:var(--foglio);color:var(--foglio-testo);padding:14px 16px 18px;border-radius:0 0 6px 6px;box-shadow:var(--ombra)}
.tv-quote{display:block;font-family:var(--titolo);font-size:1.02rem;line-height:1.3}
.tv-who{display:block;margin-top:8px;font-size:.88rem;color:#6b5a48}
.tv-who strong{color:var(--rosso-scuro)}

/* blog */
.articoli{display:grid;border-top:1px solid var(--linea)}
.articolo{display:grid;grid-template-columns:150px 1fr 40px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--linea);text-decoration:none;transition:padding .45s var(--molla),background .2s}
.articolo:hover{padding-left:14px;background:var(--bg-2)}
.articolo time{font-family:var(--mono);font-size:.85rem;color:var(--testo-2)}
.articolo h3{font-family:var(--titolo);font-weight:400;font-size:1.3rem;line-height:1.2}
.articolo p{color:var(--testo-2);font-size:.98rem;margin-top:4px}
.articolo svg{width:26px;height:26px;color:var(--rosso);transition:transform .45s var(--molla)}
.articolo:hover svg{transform:translateX(6px)}
.tutti{display:inline-flex;margin-top:28px;font-weight:700;text-decoration-color:var(--rosso);text-decoration-thickness:2px;text-underline-offset:5px}

/* dove */
.luoghi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.luogo{display:flex;gap:14px;align-items:flex-start;text-decoration:none;padding:22px;border:1px solid var(--linea);border-radius:var(--r);transition:transform .5s var(--molla),border-color .2s}
.luogo:hover{transform:translateY(-4px);border-color:var(--rosso)}
.luogo svg{width:26px;height:26px;color:var(--rosso);flex-shrink:0;margin-top:2px}
.luogo b{font-family:var(--titolo);font-weight:400;font-size:1.2rem;display:block}
.luogo span{color:var(--testo-2);font-size:.95rem}

/* faq */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-weight:700;font-size:1.15rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;transition:transform .45s var(--molla),background .2s}
.faq summary i svg{width:18px;height:18px}
.faq details[open] summary i{transform:rotate(45deg);background:var(--rosso);color:#fff}
.faq details p{color:var(--testo-2);padding:0 0 24px;max-width:66ch}

/* cta finale */
.finale{padding:40px 0 110px}
.finale-foglio{position:relative;background:var(--rosso-testo);color:#fff;border-radius:18px;padding:64px 56px;display:grid;grid-template-columns:1fr 260px;gap:30px;align-items:center;box-shadow:0 10px 0 var(--rosso-ombra);overflow:hidden}
.finale-foglio h2{font-family:var(--titolo);font-weight:400;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.finale-foglio p{margin-top:16px;font-size:1.15rem;color:#fff;max-width:46ch}
.finale-foglio .btn{margin-top:28px}
.finale-foglio .btn-carta{color:var(--inchiostro)}
.finale-foglio img{width:250px;background:var(--carta);padding:26px 22px 20px;border-radius:16px;box-shadow:0 8px 0 rgba(0,0,0,.28);transform:rotate(4deg);justify-self:center}
.spunte{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-size:.95rem;color:#fff}
.spunte span{display:inline-flex;gap:6px;align-items:center}
.spunte svg{width:18px;height:18px}

footer{border-top:1px solid var(--linea);padding:34px 0 90px;font-size:.92rem;color:var(--testo-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer a{color:var(--testo-2)}
footer nav{display:flex;gap:18px}

/* comparsa: lo stato iniziale è visibile; solo con JS attivo si nasconde (screenshot-safe) */
html.js .entra{opacity:0;transform:translateY(26px) rotate(var(--rot,0deg));transition:opacity .6s ease,transform .8s var(--molla)}
html.js .entra.visto{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))}
@keyframes respiro{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1.5deg)}}
@keyframes batti{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes cade{from{opacity:0;transform:translateY(-8px) scale(1.04)}to{opacity:1;transform:none}}
html.js .brief .riga{animation:cade .5s var(--molla) both}
.brief .riga:nth-of-type(1){animation-delay:.5s}.brief .riga:nth-of-type(2){animation-delay:.75s}.brief .riga:nth-of-type(3){animation-delay:1s}.brief .riga:nth-of-type(4){animation-delay:1.25s}

@media(max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;min-height:0}
  .collage{height:560px;max-width:520px;margin:10px auto 0;width:100%}
  .collage .mattia{height:560px;right:0}
  .brief{left:0}
  .cosa{grid-template-columns:1fr}
  .cosa-figura img{width:240px}
  .passi{grid-template-columns:1fr 1fr;row-gap:40px}.passi::before{display:none}.indica{display:none}
  .tv-grid{grid-template-columns:1fr 1fr}
  .finale-foglio{grid-template-columns:1fr}.finale-foglio img{width:170px;justify-self:end;margin-top:-20px}
}
@media(max-width:820px){
  .nav-apri{display:block}
  .nav-voci{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg);border-bottom:1px solid var(--linea);padding:10px 24px 24px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .2s,transform .4s var(--molla)}
  .nav-voci.aperto{opacity:1;transform:none;pointer-events:auto}
  .nav-voci a{padding:14px 0;width:100%;font-size:1.1rem}
  .nav-voci .btn{margin-top:10px;justify-content:center}
  .ritagli{grid-template-columns:1fr}
  .ritaglio:nth-child(n){grid-column:auto;margin-top:0}
  .voci,.confronto,.scala,.luoghi{grid-template-columns:1fr}
  .gradino:nth-child(n){min-height:0}
  .pratica-riga{grid-template-columns:48px 1fr;gap:14px}
  .pratica-riga p{grid-column:2}
  .articolo{grid-template-columns:1fr 30px}.articolo time{grid-column:1/-1}
  .sez{padding:80px 0}
  .finale-foglio{padding:40px 26px}
}
@media(max-width:560px){
  body{font-size:17px}
  .hero{padding-top:30px}
  .hero h1{font-size:clamp(2.7rem,13vw,3.6rem)}
  .hero .lead{font-size:1.1rem}
  .hero-azioni .btn{width:100%;justify-content:center}
  .collage{height:470px}.collage .mattia{height:470px;right:-30px}.collage .sole{width:300px;height:300px;right:0}
  .brief{width:270px;bottom:10px;font-size:.85rem}
  .passi,.tv-grid{grid-template-columns:1fr}
  .tv-grid{max-width:340px;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .entra{opacity:1;transform:rotate(var(--rot,0deg))}
}

/* 18/10 sera: griglia di fondo leggera ed elementi di carta nelle sezioni */
:root{--griglia-linea:rgba(255,244,220,.06);--passo-griglia:44px}
[data-tema="carta"]{--griglia-linea:rgba(29,23,18,.06)}
.hero::before,#come-funziona::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--griglia-linea) 1px,transparent 1px),linear-gradient(90deg,var(--griglia-linea) 1px,transparent 1px);background-size:var(--passo-griglia) var(--passo-griglia)}
.hero::before{-webkit-mask-image:radial-gradient(ellipse 75% 80% at 60% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 75% 80% at 60% 45%,#000 30%,transparent 80%)}
#come-funziona::after{-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 70% 45%,transparent 40%,var(--bg) 100%);opacity:.55;z-index:-1}
/* bordo strappato in cima alle sezioni a fondo 2 */
.sez-2::before{content:"";position:absolute;left:0;right:0;top:-13px;height:14px;background:var(--bg-2);clip-path:polygon(0 100%,0 55%,2% 30%,4% 60%,6% 25%,8% 50%,10% 20%,12% 55%,14% 35%,16% 70%,18% 30%,20% 50%,22% 15%,24% 45%,26% 30%,28% 65%,30% 25%,32% 50%,34% 20%,36% 60%,38% 35%,40% 55%,42% 20%,44% 45%,46% 30%,48% 60%,50% 25%,52% 50%,54% 15%,56% 55%,58% 35%,60% 65%,62% 30%,64% 50%,66% 20%,68% 45%,70% 35%,72% 60%,74% 25%,76% 50%,78% 15%,80% 45%,82% 30%,84% 65%,86% 25%,88% 55%,90% 20%,92% 50%,94% 35%,96% 60%,98% 30%,100% 50%,100% 100%)}
.sez-2{background-color:var(--bg-2)}
/* coriandoli di carta */
.coriandoli{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.coriandolo{position:absolute;left:var(--x);top:var(--y);width:var(--w,16px);height:var(--h,10px);background:var(--c);transform:rotate(var(--r));border-radius:2px;box-shadow:0 3px 0 rgba(0,0,0,.25);animation:fluttua var(--t,7s) ease-in-out infinite;animation-delay:var(--d,0s)}
.coriandolo.tondo{border-radius:50%;width:var(--w,12px);height:var(--w,12px)}
@keyframes fluttua{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-14px) rotate(calc(var(--r) + 18deg))}}
.wrap{position:relative;z-index:1}
/* polpo che sbircia dal bordo */
.sbircia{position:absolute;right:4%;bottom:-6px;width:150px;z-index:2;pointer-events:none;transform:rotate(-6deg);transition:transform .6s var(--molla)}
.sez:hover .sbircia{transform:rotate(-2deg) translateY(-6px)}
/* virgolette grandi di carta */
.virgolette{display:block;font-family:var(--titolo);font-size:4.2rem;line-height:.7;height:.5em;color:var(--rosso);margin:-4px 0 14px -4px;pointer-events:none}
.ritaglio q{quotes:none}
.ritaglio q::before,.ritaglio q::after{content:none}
.ritaglio{position:relative;overflow:visible}
/* bollino timbro */
.bollino{position:absolute;right:-22px;top:-26px;width:104px;height:104px;border-radius:50%;background:var(--giallo);color:var(--inchiostro);display:grid;place-items:center;text-align:center;font-family:var(--titolo);font-size:.82rem;line-height:1.1;padding:10px;box-shadow:0 5px 0 rgba(0,0,0,.3);transform:rotate(12deg);border:3px dashed rgba(29,23,18,.35)}
.foglio-con{position:relative}
/* nastro sul gradino rosso */
.gradino:nth-child(3)::before{content:"";position:absolute;top:-12px;left:30px;width:86px;height:24px;background:rgba(255,198,46,.8);transform:rotate(-4deg)}
/* nuvoletta del polpo nelle domande */
.faq-testa{display:flex;align-items:flex-end;gap:26px;justify-content:space-between;flex-wrap:wrap}
.faq-polpo{position:relative;width:150px;margin-right:6%}
.faq-polpo img{width:150px}
.faq-polpo .nuvoletta{position:absolute;left:-46px;top:-34px;background:var(--carta);color:var(--inchiostro);font-family:var(--titolo);font-size:1.6rem;width:58px;height:52px;display:grid;place-items:center;border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.3);transform:rotate(-8deg)}
.faq-polpo .nuvoletta::after{content:"";position:absolute;right:6px;bottom:-10px;border:8px solid transparent;border-top-color:var(--carta);border-left-color:var(--carta)}
/* freccia a pennarello verso i video */
.sottolinea{background:linear-gradient(transparent 62%,color-mix(in oklab,var(--rosso) 55%,transparent) 62%,color-mix(in oklab,var(--rosso) 55%,transparent) 88%,transparent 88%)}
@media(max-width:820px){.sbircia{width:110px}.bollino{right:-8px;width:88px;height:88px;font-size:.72rem}.faq-polpo{display:none}.virgolette{font-size:3.4rem}}
@media(prefers-reduced-motion:reduce){.coriandolo{animation:none}}
@media(max-width:820px){#cosa-fa .coriandoli,#testimonianze .coriandoli{display:none}.coriandolo{opacity:.7}}

/* 18/10 fix: footer, CTA fissa al telefono, apertura al telefono, bollino */
footer .wrap{align-items:center}
.piede-marchio{display:flex;gap:12px;align-items:center}
.piede-marchio img{width:40px}
.piede-marchio b{display:block;font-family:var(--titolo);font-weight:400;color:var(--testo);font-size:1.05rem}
.social{display:flex;gap:10px}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--linea);border-radius:10px;text-decoration:none;color:var(--testo);font-weight:600;transition:transform .45s var(--molla),border-color .2s}
.social a:hover{transform:translateY(-3px);border-color:var(--rosso)}
.social svg{width:20px;height:20px}
.legali{display:flex;gap:18px}
.legali a{min-height:44px;display:inline-flex;align-items:center}
.cta-fissa{display:none}
@media(max-width:820px){
  .cta-fissa{display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:45;justify-content:center;align-items:center;gap:.5em;background:var(--rosso-testo);color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none;min-height:54px;border-radius:14px;box-shadow:0 6px 0 var(--rosso-ombra),0 12px 30px rgba(0,0,0,.4);transform:translateY(140%);transition:transform .5s var(--molla)}
  .cta-fissa svg{width:1.1em;height:1.1em}
  .cta-fissa.su{transform:none}
  .cta-fissa:active{transform:translateY(4px);box-shadow:0 2px 0 var(--rosso-ombra)}
  .foglio-con h3{padding-right:78px}
  .bollino{top:-30px;right:-6px}
  footer .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .collage{height:auto;display:flex;flex-direction:column;align-items:center;margin-top:26px}
  .collage .mattia{position:relative;right:auto;height:420px;width:auto;margin-right:-40px}
  .collage .sole{right:auto;left:50%;margin-left:-150px;top:20px}
  .brief{position:relative;left:auto;bottom:auto;margin-top:-70px;width:min(310px,92%);z-index:2}
}
@media(prefers-reduced-motion:reduce){.cta-fissa{transition:none}}
/* bersagli da 44 px */
.marchio{min-height:48px}
.nav-voci a{padding:.7rem .4rem;min-width:44px;justify-content:center}
.nav-voci .lingua{min-height:44px;padding:.2rem .7rem}
.gradino a{min-height:44px;padding:10px 0 4px}
.hero-test a{display:inline-block;padding:12px 0}
.tutti{padding:10px 0}
.legali a{min-width:44px;justify-content:center}
.piede-marchio span a{display:inline-block;padding:12px 0}
.social{flex-wrap:wrap}
@media(max-width:820px){.hero .coriandoli{display:none}}

/* pagine interne · 18/10/2026 */
.pagina-hero{padding:60px 0 40px;position:relative;overflow:hidden}
.pagina-hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center}
.pagina-hero h1{font-family:var(--titolo);font-weight:400;font-size:clamp(2.6rem,6vw,4.8rem);line-height:1;letter-spacing:-.03em;margin:22px 0 22px;text-wrap:balance}
.pagina-hero .lead{font-size:1.2rem}
.pagina-hero figure{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:420px}
.pagina-hero figure img{position:relative;z-index:1;height:520px;width:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.pagina-hero figure.polpo img{height:auto;width:min(340px,90%);animation:respiro 4.5s ease-in-out infinite;filter:none}
.pagina-hero figure::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;top:40px;left:50%;margin-left:-180px;background:radial-gradient(circle,color-mix(in oklab,var(--rosso) 50%,transparent),transparent 68%);filter:blur(10px)}
.briciole{font-family:var(--mono);font-size:.82rem;color:var(--testo-2)}
.briciole a{color:var(--testo-2)}
.servizi{display:grid;gap:22px}
.servizio{display:grid;grid-template-columns:64px 1fr;gap:22px;background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--r);padding:28px;transition:transform .5s var(--molla),border-color .2s}
.servizio:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--rosso) 60%,transparent)}
.servizio .ico{width:56px;height:56px;border-radius:14px}
.servizio .ico svg{width:28px;height:28px}
.servizio h3{font-family:var(--titolo);font-weight:400;font-size:1.5rem;line-height:1.15}
.servizio .per{font-family:var(--mono);font-size:.8rem;color:var(--testo-2);display:block;margin-bottom:6px}
.servizio p{color:var(--testo-2);margin-top:8px;max-width:70ch}
.servizio ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.servizio li{font-size:.9rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--linea);color:var(--testo)}
.servizio a.vai{display:inline-flex;gap:.4em;align-items:center;margin-top:16px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--rosso);padding:8px 0 2px}
.servizio a.vai svg{width:1em;height:1em;transition:transform .4s var(--molla)}
.servizio a.vai:hover svg{transform:translateX(4px)}
.servizio.primo{background:var(--foglio);color:var(--foglio-testo);border:0;box-shadow:var(--ombra);transform:rotate(-.5deg)}
.servizio.primo:hover{transform:rotate(0) translateY(-4px)}
.servizio.primo p,.servizio.primo .per{color:#5a4a3a}
.servizio.primo li{border-color:rgba(29,23,18,.2);color:var(--inchiostro)}
.storia{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.storia p{color:var(--testo-2);font-size:1.1rem;margin-bottom:18px;max-width:60ch}
.storia p strong{color:var(--testo)}
.polpo-perche{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.polpo-perche img{width:100%;animation:respiro 4.5s ease-in-out infinite}
.calendario{background:var(--foglio);border-radius:14px;padding:14px;box-shadow:var(--ombra);position:relative}
.calendario::before{content:"";position:absolute;z-index:2;top:-12px;left:50%;width:110px;height:26px;margin-left:-55px;background:rgba(255,198,46,.8);transform:rotate(-2deg)}
.calendario iframe{display:block;width:100%;min-height:860px;border:0;border-radius:8px;background:#fff}
.contatti-griglia{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.lista-ico{list-style:none;display:grid;gap:16px;margin-top:26px}
.lista-ico li{display:flex;gap:14px;align-items:flex-start;font-size:1.05rem}
.lista-ico .ico{width:40px;height:40px;border-radius:11px}
.lista-ico .ico svg{width:20px;height:20px}
.settori{display:flex;flex-wrap:wrap;gap:12px}
.settori span{display:inline-flex;align-items:center;gap:8px;background:var(--foglio);color:var(--foglio-testo);font-weight:700;padding:.6rem 1rem;border-radius:10px;box-shadow:var(--ombra-s)}
.settori span:nth-child(odd){transform:rotate(-1.2deg)}.settori span:nth-child(even){transform:rotate(1deg)}
.settori svg{width:20px;height:20px;color:var(--rosso-testo)}
.nota-lingua{font-family:var(--mono);font-size:.82rem;color:var(--testo-2);margin-top:-30px;margin-bottom:34px}
@media(max-width:1024px){.pagina-hero .wrap,.storia,.contatti-griglia,.polpo-perche{grid-template-columns:1fr}.pagina-hero figure img{height:420px}.polpo-perche img{width:220px}}
@media(max-width:560px){.pagina-hero figure{min-height:0}.pagina-hero figure img{height:360px}.servizio{grid-template-columns:1fr;padding:22px}.calendario iframe{min-height:950px}}
/* ottimizzazione 18/10 sera */
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--carta);color:var(--inchiostro);font-weight:700;padding:.7rem 1rem;border-radius:10px;text-decoration:none;transition:top .2s}
.salta:focus{top:12px}
.nav-voci a[aria-current="page"]{color:var(--testo);text-decoration:underline;text-decoration-color:var(--rosso);text-decoration-thickness:3px;text-underline-offset:8px}
[id]{scroll-margin-top:96px}
.indice{display:flex;flex-wrap:wrap;gap:10px;margin:-20px 0 34px}
.indice a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea);text-decoration:none;font-weight:600;font-size:.95rem;color:var(--testo-2);transition:color .2s,border-color .2s,transform .45s var(--molla)}
.indice a:hover{color:var(--testo);border-color:var(--rosso);transform:translateY(-2px)}
.servizi{grid-template-columns:1fr 1fr}
.servizi .servizio.primo{grid-column:1/-1}
.servizi .servizio:last-child:nth-child(even){grid-column:1/-1}
@media(max-width:900px){.servizi{grid-template-columns:1fr}}
@media(max-width:1024px){.contatti-griglia .calendario{order:-1}}
@media(max-width:560px){.pagina-hero figure.polpo img{width:190px}.pagina-hero figure.polpo::before{width:240px;height:240px;margin-left:-120px;top:0}.calendario iframe{min-height:760px}}
@media(min-width:561px){.calendario iframe{min-height:780px}}