/* duesentieri.com · il foglio di stile unico (versione 2, 2026-10-21: ?v=3)
   Lo stesso mondo dei video e del logo B: carta calda, inchiostro, verde e ocra, accenti ruggine.
   Titoli in Fraunces (quello del logo), testo in Lora. Prima il telefono, poi il computer.
   Le animazioni stanno in /assets/js/sito.js: qui solo gli stati di partenza e di arrivo.
   Senza JavaScript, o con "riduci movimento", tutto e' fermo e leggibile. */

@font-face{font-family:"Fraunces DS";src:url("/assets/font/fraunces.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora DS";src:url("/assets/font/lora.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --carta:#F5E9D2;
  --carta-2:#EEDDBD;
  --carta-chiara:#FBF4E6;
  --inchiostro:#2B1E16;
  --inchiostro-2:#5A4434;
  --verde:#93A661;
  --verde-chiaro:#C9D3A6;
  --verde-scuro:#55672E;
  --ocra:#D9963F;
  --ruggine:#B95A32;
  --ruggine-scura:#9A4523;
  --legno:#9C6538;
  --sole:#F1CF85;
  --titoli:"Fraunces DS",Georgia,"Times New Roman",serif;
  --testo:"Lora DS",Georgia,"Times New Roman",serif;
  --gutter:16px;
  --largo:1080px;
  --stretto:720px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--carta);overflow-x:hidden}
@supports (overflow-x:clip){html{overflow-x:clip}}
/* Safari su iPhone colora le barre col fondo del body: carta sopra e sotto */
body{margin:0;background:var(--carta);color:var(--inchiostro);font-family:var(--testo);font-size:18px;line-height:1.6;
  font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (overflow-x:clip){body{overflow-x:clip}}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--ruggine-scura);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--inchiostro)}
:focus-visible{outline:3px solid var(--ruggine);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--titoli);font-weight:620;line-height:1.08;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
.salta{position:absolute;left:-9999px;top:0;background:var(--inchiostro);color:var(--carta);padding:10px 16px;z-index:50}
.salta:focus{left:16px;top:16px}
.solo-lettori{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.contenitore{width:100%;max-width:calc(var(--largo) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* la grana della carta, leggerissima */
.grana{background-image:radial-gradient(rgba(43,30,22,.045) 1px,transparent 1.2px);background-size:7px 7px}

/* ------------------------------------------------------------- testa */
.testa{padding:8px 0 0;text-align:center;position:relative;z-index:2}
.marca{display:inline-flex;align-items:center;gap:9px;color:var(--inchiostro);text-decoration:none;font-family:var(--titoli);font-weight:620;font-size:21px;letter-spacing:.005em}
.marca svg{width:32px;height:32px;flex:none;max-width:none}
.di-chi{font-size:14px;color:var(--inchiostro-2);letter-spacing:.01em}
.di-chi b{font-weight:600;color:var(--inchiostro)}

/* ------------------------------------------------------------- il bottone */
.compra{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:min(100%,300px);min-height:56px;padding:13px 30px;
  background:var(--ocra);color:var(--inchiostro);border:3px solid var(--inchiostro);border-radius:999px;box-shadow:0 5px 0 var(--inchiostro);
  font-family:var(--testo);font-weight:700;font-size:19px;line-height:1.2;text-decoration:none;transition:transform .12s,box-shadow .12s,background-color .2s;-webkit-tap-highlight-color:transparent}
.compra:hover{background-color:#E3A452;color:var(--inchiostro)}
.compra:active{transform:translateY(3px);box-shadow:0 2px 0 var(--inchiostro)}
.compra svg{width:20px;height:20px;flex:none;max-width:none}
/* il lampo leggero, ogni tanto, solo sul bottone vero */
.compra:not(.attesa)::after{content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;left:0;width:42%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,250,236,0) 0,rgba(255,250,236,.62) 50%,rgba(255,250,236,0) 100%);
  transform:translateX(-170%) skewX(-18deg);animation:lampo 6.5s 2.4s infinite}
@keyframes lampo{0%{transform:translateX(-170%) skewX(-18deg)}13%,100%{transform:translateX(340%) skewX(-18deg)}}
.compra.attesa{background:transparent;border-style:dashed;box-shadow:none;color:var(--inchiostro-2);cursor:default}
.compra.attesa:active{transform:none}
.compra.piccolo{min-width:0;min-height:46px;padding:9px 18px;font-size:16.5px;box-shadow:0 4px 0 var(--inchiostro);gap:7px}
.compra.piccolo.attesa{box-shadow:none}
.compra.piccolo svg{width:18px;height:18px}
.nota-acquisto{font-size:14.5px;line-height:1.45;color:var(--inchiostro-2);max-width:22em;text-wrap:balance}
.nota-acquisto.lampeggia{animation:richiamo .9s ease 1}
@keyframes richiamo{0%,100%{color:var(--inchiostro-2)}35%{color:var(--ruggine-scura)}}

.acquisto{display:flex;flex-direction:column;align-items:center;gap:10px}
.prezzo{display:flex;align-items:center;justify-content:center;gap:12px}
.prezzo strong{font-family:var(--titoli);font-weight:640;font-size:36px;line-height:1;white-space:nowrap}
.prezzo span{font-size:13.5px;line-height:1.3;color:var(--inchiostro-2);text-align:left;padding-left:12px;border-left:2px solid rgba(43,30,22,.25)}

/* ------------------------------------------------------------- il primo schermo */
.eroe{--alto:100vh;--sopra:360px;--w:min(56vw,224px);padding:2px 0 22px;text-align:center;position:relative}
@supports (height:100svh){.eroe{--alto:100svh}}
@media (max-width:767px){
  /* sul telefono il libro prende la misura dall'altezza dello schermo, perche' prezzo e bottone stiano sopra la piega
     anche dentro il browser di Instagram e TikTok (che ruba un pezzo di schermo sopra e sotto) */
  .eroe{--w:clamp(150px,calc((var(--alto) - var(--sopra)) / 1.62),min(56vw,224px))}
}
.eroe-testo{position:relative;z-index:2}
.eroe .di-chi{margin-top:2px}
.titolo-eroe{font-size:clamp(44px,12.6vw,96px);font-weight:640;line-height:1;margin-top:4px;letter-spacing:-.012em}
.parola{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .1em;margin:-.04em -.02em -.1em}
.parola>span{display:inline-block}
.eroe .sottotitolo{margin:6px auto 0;max-width:24em;font-size:15.5px;line-height:1.4;color:var(--inchiostro-2);text-wrap:balance}
.unito{white-space:nowrap}
.eroe .acquisto{margin-top:4px;position:relative;z-index:2}
.eroe .nota-acquisto{margin-top:2px}

/* il palco: il sole, la collina del logo col sentiero che si divide, il cartello, il libro */
.palco{--iw:min(calc(var(--w) * 1.9),calc(100vw + 30px));position:relative;height:calc(var(--w) * 1.414 + var(--iw) * .16);margin:12px calc(var(--gutter) * -1) 6px;z-index:1}
.palco-fondo{position:absolute;inset:0;pointer-events:none}
.sole{position:absolute;left:50%;top:calc(var(--w) * .04);width:calc(var(--w) * 1.3);height:calc(var(--w) * 1.3);margin-left:calc(var(--w) * -.65);border-radius:50%;background:var(--sole)}
.isola{position:absolute;left:50%;bottom:0;width:var(--iw);height:auto;margin-left:calc(var(--iw) / -2);overflow:visible}

/* il libro in 3D: una scatola con copertina, costa, retro e i tre tagli delle pagine */
.libro3d{--w2:var(--w);position:absolute;top:calc(var(--w2) * .025);left:50%;width:var(--w2);height:calc(var(--w2) * 1.414);margin-left:calc(var(--w2) / -2);perspective:calc(var(--w2) * 4);perspective-origin:20% -25%;z-index:2}
.l-scorri,.l-mano,.libro{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.libro{--d:calc(var(--w2) * .078);transform:rotateY(26deg) rotateX(-5deg)}
.f{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:1px solid transparent}
.fronte{inset:0;transform:translateZ(calc(var(--d) / 2));border-radius:2px 6px 6px 2px;overflow:hidden;background:#FAF0E0;box-shadow:inset 0 0 0 2px var(--inchiostro)}
.fronte img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fronte::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--inchiostro);
  background:linear-gradient(90deg,rgba(43,30,22,.16) 0,rgba(43,30,22,0) 5%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12) 100%)}
.retro{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:var(--carta-2);border:2px solid var(--inchiostro);border-radius:6px 2px 2px 6px}
.costa{top:0;left:50%;width:var(--d);height:100%;margin-left:calc(var(--d) / -2);transform:rotateY(-90deg) translateZ(calc(var(--w2) / 2));
  background:linear-gradient(90deg,#E4D3B2,#F3E7CE 45%,#E8D8B8);border:2px solid var(--inchiostro);display:flex;align-items:center;justify-content:center;overflow:hidden}
.costa span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--titoli);font-weight:640;font-size:calc(var(--w2) * .043);line-height:1;color:var(--inchiostro);white-space:nowrap;letter-spacing:.02em}
.taglio-dx{top:1.2%;left:50%;width:calc(var(--d) - 2px);height:97.6%;margin-left:calc(var(--d) / -2 + 1px);transform:rotateY(90deg) translateZ(calc(var(--w2) / 2 - 3px));
  background:repeating-linear-gradient(90deg,#FBF6EA 0 1.4px,#E2D2B1 1.4px 2.4px);border-top:1.5px solid var(--inchiostro);border-bottom:1.5px solid var(--inchiostro)}
.taglio-su,.taglio-giu{left:1%;top:50%;width:97%;height:calc(var(--d) - 2px);margin-top:calc(var(--d) / -2 + 1px);
  background:repeating-linear-gradient(0deg,#FBF6EA 0 1.4px,#E2D2B1 1.4px 2.4px);border-left:1.5px solid var(--inchiostro);border-right:1.5px solid var(--inchiostro)}
.taglio-su{transform:rotateX(90deg) translateZ(calc(var(--w2) * .707 - 2px))}
.taglio-giu{transform:rotateX(-90deg) translateZ(calc(var(--w2) * .707 - 2px))}

/* ------------------------------------------------------------- sezioni */
.sezione{padding:56px 0}
.sezione.tinta{background:var(--carta-2)}
.titolo-sezione{text-align:center;max-width:var(--stretto);margin:0 auto}
.occhiello{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ruggine-scura);margin-bottom:10px}
.titolo-sezione h2{font-size:clamp(31px,8.4vw,50px)}
.titolo-sezione p{margin:12px auto 0;max-width:31em;color:var(--inchiostro-2);text-wrap:balance}

/* ------------------------------------------------------------- i 18 capitoli come tappe */
.parte{position:relative;max-width:var(--stretto);margin:40px auto 0}
.parte+.parte{margin-top:48px}
.parte-testa{position:relative;text-align:center}
.parte-img{position:relative;aspect-ratio:2.5/1;border:3px solid var(--inchiostro);border-radius:12px;overflow:hidden;box-shadow:6px 6px 0 var(--inchiostro);background:var(--carta-2)}
.parte-img img{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover}
.parte-testa h3{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin-top:-24px;background:var(--carta);border:3px solid var(--inchiostro);border-radius:16px;
  padding:5px 20px 8px;font-size:22px;line-height:1.15;max-width:calc(100% - 40px)}
.parte-testa h3 span{font-family:var(--testo);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ruggine-scura);margin-bottom:2px}

.tappe{list-style:none;margin:18px 0 0;padding:0;position:relative}
/* senza JavaScript: una linea tratteggiata dritta dietro i tondi */
.tappe::before{content:"";position:absolute;left:38px;top:34px;bottom:34px;border-left:3px dashed rgba(156,101,56,.55)}
.tappe.con-sentiero::before{display:none}
.sentiero-tappe{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.tappa{position:relative;display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;padding:9px 0;text-align:left}
.tondo{display:block;position:relative;z-index:1;justify-self:start;width:62px;height:62px;border-radius:50%;border:3px solid var(--inchiostro);background:var(--sole)}
.tappa:nth-child(odd) .tondo{left:3px}
.tappa:nth-child(even) .tondo{left:13px}
.tondo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.tondo b{position:absolute;right:-7px;bottom:-5px;min-width:27px;height:27px;padding:0 5px;border-radius:14px;background:var(--sole);border:2.5px solid var(--inchiostro);
  font:640 14px/22px var(--titoli);text-align:center;color:var(--inchiostro)}
.tempo .tondo,.tempo .tondo b{background:var(--verde-chiaro)}
.tappa-testo b{display:block;font-weight:600;font-size:16.5px;line-height:1.36;text-wrap:pretty}
.tappa-testo span{display:block;margin-top:3px;font-size:14px;line-height:1.35;color:var(--inchiostro-2)}

/* ------------------------------------------------------------- quattro passi: schede due a due */
.schede{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:var(--stretto);margin:32px auto 0}
.scheda{background:var(--carta-chiara);border:3px solid var(--inchiostro);border-radius:12px;box-shadow:5px 5px 0 var(--inchiostro);overflow:hidden;text-align:center;display:flex;flex-direction:column}
.scheda .figura{position:relative;aspect-ratio:5/4;overflow:hidden;border-bottom:3px solid var(--inchiostro);background:var(--sole)}
.scheda .figura img{width:100%;height:100%;object-fit:cover}
.scheda .cartello-svg{position:absolute;left:50%;top:52%;width:76%;height:auto;transform:translate(-50%,-50%)}
.scheda .onde{position:absolute;left:6%;bottom:6%;width:56%;height:auto}
.scheda .foglietto{position:absolute;right:7%;bottom:7%;width:31%;height:auto;transform:rotate(5deg)}
.scheda .orologio{position:absolute;right:6%;top:6%;width:31%;height:auto}
.scheda .corpo{padding:13px 10px 15px;flex:1}
.scheda .numero{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ruggine-scura)}
.scheda h3{font-size:21px;margin-top:3px}
.scheda p{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--inchiostro-2);text-wrap:balance}

/* ------------------------------------------------------------- il bivio che si tocca */
.segnavia{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100%,340px);margin:28px auto 0;padding:4px 0 30px}
.segnavia-palo{position:absolute;left:50%;top:-14px;bottom:0;width:14px;margin-left:-7px;background:var(--legno);border:3px solid var(--inchiostro);border-radius:4px}
.tavola{position:relative;z-index:1;isolation:isolate;min-height:52px;padding:12px 26px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:700 17px/1.2 var(--testo);color:var(--inchiostro);transition:color .25s}
.tavola::before,.tavola::after{content:"";position:absolute;inset:0;z-index:-1;transition:background-color .25s}
.tavola::before{background:var(--inchiostro)}
.tavola::after{background:var(--carta-chiara)}
.tavola-sx{margin-right:64px;padding-left:38px;transform:rotate(-2.5deg)}
.tavola-sx::before{clip-path:polygon(24px 0,100% 0,100% 100%,24px 100%,0 50%)}
.tavola-sx::after{clip-path:polygon(25.5px 3px,calc(100% - 3px) 3px,calc(100% - 3px) calc(100% - 3px),25.5px calc(100% - 3px),3.6px 50%)}
.tavola-dx{margin-left:64px;padding-right:38px;transform:rotate(2deg)}
.tavola-dx::before{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%)}
.tavola-dx::after{clip-path:polygon(3px 3px,calc(100% - 25.5px) 3px,calc(100% - 3.6px) 50%,calc(100% - 25.5px) calc(100% - 3px),3px calc(100% - 3px))}
.tavola-sx[aria-pressed="true"]::after{background:var(--ocra)}
.tavola-dx[aria-pressed="true"]{color:var(--carta-chiara)}
.tavola-dx[aria-pressed="true"]::after{background:var(--ruggine-scura)}
.tavola[aria-pressed="false"]:hover::after{background:#fff}
.tavola:focus-visible{outline-offset:6px}

.bivi{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:var(--stretto);margin:6px auto 0;perspective:1000px}
.bivio{background:var(--carta-chiara);border:3px solid var(--inchiostro);border-radius:12px;box-shadow:5px 5px 0 var(--inchiostro);padding:14px 10px 16px;text-align:center;display:flex;flex-direction:column;align-items:center}
.tondo.piccolo{width:54px;height:54px;justify-self:auto;margin:0 auto 7px;left:0}
.cap{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ruggine-scura)}
.bivio h3{font-size:17.5px;line-height:1.2;margin-top:3px;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.facce{display:grid;width:100%;flex:1;margin-top:11px;padding-top:11px;border-top:2px dashed rgba(43,30,22,.3);transform-origin:50% 0}
.faccia{grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px}
/* la piccola freccia sopra la frase: ocra a sinistra per la strada di tutti, ruggine a destra per l'altro sentiero */
.etichetta{display:inline-block;white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.01em;line-height:1;padding:6px 10px 6px 17px;
  background:var(--ocra);color:var(--inchiostro);clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 50%)}
.faccia.altro .etichetta{padding:6px 17px 6px 10px;background:var(--ruggine-scura);color:var(--carta-chiara);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}
.detto{margin-top:8px;font-family:var(--titoli);font-weight:620;font-size:18.5px;line-height:1.22;text-wrap:balance}
.faccia.tutti .detto{font-size:21px;line-height:1.18}
.faccia.altro .detto{color:var(--ruggine-scura)}
.regola-breve{margin-top:7px;font-size:14px;line-height:1.42;color:var(--inchiostro);text-wrap:balance}
.js .bivio[data-mostra="tutti"] .faccia.altro,.js .bivio[data-mostra="altro"] .faccia.tutti{visibility:hidden}
html:not(.js) .facce{display:block}
html:not(.js) .faccia.altro{margin-top:14px}
html:not(.js) .segnavia{display:none}
.bivi-nota{max-width:var(--stretto);margin:22px auto 0;text-align:center;font-size:15px;color:var(--inchiostro-2);text-wrap:balance}

/* ------------------------------------------------------------- l'estratto: il libro che si apre, poi la pagina */
.apertura{width:min(100%,600px);margin:30px auto 0;perspective:2000px}
.apertura-libro{position:relative;width:100%;aspect-ratio:1.4142 / 1;transform-style:preserve-3d}
.foglio-dx{position:absolute;left:50%;top:0;width:50%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;padding:8% 9%;text-align:center;
  background:linear-gradient(90deg,#E2D2B2 0,#FBF4E6 10%,#FBF4E6 100%);border:2.5px solid var(--inchiostro);border-left-width:1px;border-radius:0 6px 6px 0;box-shadow:5px 5px 0 var(--inchiostro)}
.foglio-num{font-size:clamp(9px,2.4vw,13px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ruggine-scura)}
.foglio-titolo{font-family:var(--titoli);font-weight:640;font-size:clamp(17px,5vw,30px);line-height:1.08;text-wrap:balance}
.foglio-segno{width:56%;height:auto}
.foglio-sotto{font-size:clamp(10px,2.7vw,14px);line-height:1.35;color:var(--inchiostro-2);text-wrap:balance}
.anta{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(-180deg)}
.anta-fronte,.anta-retro{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:2.5px solid var(--inchiostro);overflow:hidden;background:var(--carta-chiara)}
.anta-fronte{border-radius:2px 6px 6px 2px}
.anta-retro{transform:rotateY(180deg);border-radius:6px 0 0 6px;border-right-width:1px}
.anta img{width:100%;height:100%;object-fit:cover}
.anta-retro::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(43,30,22,.22) 0,rgba(43,30,22,0) 12%)}

.pagina{max-width:var(--stretto);margin:30px auto 0;background:var(--carta-chiara);border:3px solid var(--inchiostro);border-radius:6px 12px 12px 6px;box-shadow:8px 8px 0 var(--inchiostro);
  padding:26px 20px 32px}
.pagina h4{font-family:var(--titoli);font-weight:620;font-size:22px;margin:0 0 12px}
.racconto p{text-wrap:pretty;margin:0 0 14px;font-size:18px;line-height:1.66;text-align:left;hyphens:auto;-webkit-hyphens:auto}
.racconto .battuta{padding-left:14px;border-left:3px solid var(--ocra)}
.racconto .secca{font-weight:600}
.racconto figure{margin:22px -20px}
.figura-pali{position:relative;overflow:hidden;aspect-ratio:900 / 605;border-top:3px solid var(--inchiostro);border-bottom:3px solid var(--inchiostro)}
.figura-pali img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.racconto figcaption{padding:8px 16px 0;font-size:14px;color:var(--inchiostro-2);text-align:center}

.cartello{margin:30px 0 0;text-align:center}
.frecce{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;padding:4px 0}
.frecce::before{content:"";position:absolute;left:50%;top:-8px;bottom:-16px;width:12px;margin-left:-6px;background:var(--legno);border:2.5px solid var(--inchiostro);border-radius:3px}
.freccia{position:relative;display:inline-block;isolation:isolate;font-weight:700;font-size:16px;line-height:1.25;padding:10px 22px;color:var(--inchiostro);
  filter:drop-shadow(0 3px 0 var(--inchiostro))}
.freccia::before,.freccia::after{content:"";position:absolute;inset:0;z-index:-1}
.freccia::before{background:var(--inchiostro)}
.freccia::after{inset:2.5px}
.freccia.sx{padding-left:30px;margin-right:12%;transform:rotate(-2deg)}
.freccia.sx::before{clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%)}
.freccia.sx::after{background:var(--ocra);clip-path:polygon(17px 0,100% 0,100% 100%,17px 100%,0 50%)}
.freccia.dx{padding-right:30px;margin-left:12%;transform:rotate(1.5deg);color:var(--carta-chiara)}
.freccia.dx::before{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%)}
.freccia.dx::after{background:var(--ruggine-scura);clip-path:polygon(0 0,calc(100% - 17px) 0,100% 50%,calc(100% - 17px) 100%,0 100%)}
.regola{margin:30px auto 0;max-width:30em;font-family:var(--titoli);font-weight:600;font-size:22px;line-height:1.3}
.regola span{display:block;text-wrap:balance}
.regola .rossa{margin-top:8px;color:var(--ruggine-scura)}

.il-resto{margin-top:30px;padding-top:24px;border-top:2px dashed rgba(43,30,22,.35);text-align:center}
.il-resto h4{margin-bottom:6px}
.il-resto>p{color:var(--inchiostro-2);text-wrap:balance}
.il-resto ul{list-style:none;padding:0;margin:16px auto 0;max-width:27em;text-align:left}
.il-resto li{text-wrap:pretty;position:relative;padding:8px 0 8px 30px;border-bottom:1.5px dashed rgba(43,30,22,.22);font-size:17px}
.il-resto li:last-child{border-bottom:0}
.il-resto li::before{content:"";position:absolute;left:2px;top:15px;width:16px;height:10px;background:var(--verde);border:2px solid var(--inchiostro);
  clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%)}

/* ------------------------------------------------------------- non e' per te se */
.no-lista{list-style:none;margin:30px auto 0;padding:0;max-width:var(--stretto);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.no-lista li:last-child{grid-column:1 / -1}
.no-lista li{background:var(--carta-chiara);border:3px solid var(--inchiostro);border-radius:12px;padding:16px 12px 18px;text-align:center;box-shadow:5px 5px 0 var(--inchiostro)}
.no-lista b{display:block;font-family:var(--titoli);font-weight:620;font-size:19px;line-height:1.2;text-wrap:balance}
.no-lista span{display:block;margin-top:6px;color:var(--inchiostro-2);font-size:15px;line-height:1.45;text-wrap:balance}
.si-invece{max-width:var(--stretto);margin:28px auto 0;text-align:center;font-family:var(--titoli);font-weight:600;font-size:22px;line-height:1.35;text-wrap:balance}

/* ------------------------------------------------------------- domande */
.domande{max-width:var(--stretto);margin:30px auto 0}
.domande details{border-bottom:2px dashed rgba(43,30,22,.3)}
.domande details:first-child{border-top:2px dashed rgba(43,30,22,.3)}
.domande summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 2px;
  font-family:var(--titoli);font-weight:600;font-size:20px;line-height:1.3;text-align:left;-webkit-tap-highlight-color:transparent}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--inchiostro);background:var(--sole) no-repeat center/14px 14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%232B1E16' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.domande details[open] summary::after{transform:rotate(135deg)}
.domande .risposta{padding:0 2px 20px;text-align:left;color:var(--inchiostro-2)}
.domande .risposta p+p{margin-top:10px}

/* ------------------------------------------------------------- di nuovo il libro e il bottone */
.chiusura{padding:56px 0 64px;text-align:center}
.chiusura-libro{--w:150px;position:relative;width:var(--w);height:calc(var(--w) * 1.414);margin:0 auto 30px}
.chiusura h2{font-size:clamp(34px,9vw,54px)}
.chiusura .sottotitolo{margin:10px auto 0;max-width:26em;color:var(--inchiostro-2);text-wrap:balance}
.chiusura .acquisto{margin-top:22px}

/* ------------------------------------------------------------- la barra in basso (solo telefono) */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:var(--carta);border-top:3px solid var(--inchiostro);
  transform:translateY(115%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}
.barra.su{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.9,.25,1.05),visibility 0s}
.barra-dentro{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:520px;margin:0 auto}
.barra-testo{display:flex;flex-direction:column;line-height:1.2;text-align:left;min-width:0}
.barra-testo b{font-family:var(--titoli);font-weight:640;font-size:18px;white-space:nowrap}
.barra-testo span{font-size:13.5px;color:var(--inchiostro-2);white-space:nowrap}
html:not(.js) .barra{display:none}

/* torna su: il cerchio si riempie scorrendo (non e' la barra in cima) */
.torna-su{--sposta:0px;position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:31;width:48px;height:48px;border-radius:50%;
  opacity:0;pointer-events:none;transform:translateY(calc(var(--sposta) + 14px)) scale(.85);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.torna-su svg{width:48px;height:48px}
.torna-su.su{opacity:1;pointer-events:auto;transform:translateY(var(--sposta))}
@media (max-width:767px){.barra.su~.torna-su{opacity:0;pointer-events:none}}
html:not(.js) .torna-su{display:none}

/* ------------------------------------------------------------- piede */
.piede{background:var(--inchiostro);color:var(--carta);padding:44px 0 calc(40px + env(safe-area-inset-bottom));text-align:center;font-size:15px}
.piede a{color:var(--carta)}
.piede .marca{color:var(--carta)}
.piede .marca svg{width:46px;height:46px}
.piede-link{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.social a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:2px solid rgba(245,233,210,.45);border-radius:999px;text-decoration:none;font-size:14px}
.social a:hover{border-color:var(--carta);color:var(--carta)}
.social svg{width:18px;height:18px;flex:none;max-width:none}
.venditore{margin:26px auto 0;max-width:34em;color:rgba(245,233,210,.78);line-height:1.55;text-wrap:balance}
.segnaposto{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.7;background:#FFE14D;color:#2B1E16;font-weight:700;padding:1px 6px;border-radius:3px}
.nota-ai{margin-top:12px;color:rgba(245,233,210,.66);font-size:13.5px;text-wrap:balance}
.copy{margin-top:8px;color:rgba(245,233,210,.6);font-size:14px}

/* ------------------------------------------------------------- pagine interne (privacy, termini, 404) */
.interna .testa{padding-bottom:6px}
.documento{max-width:calc(var(--stretto) + 2*var(--gutter));margin:0 auto;padding:30px var(--gutter) 60px}
.documento h1{font-size:clamp(34px,9vw,48px);text-align:center}
.documento .aggiornata{text-align:center;color:var(--inchiostro-2);font-size:15px;margin-top:10px}
.documento h2{font-size:23px;margin:34px 0 10px}
.documento p,.documento li{font-size:17px;line-height:1.65}
.documento p+p{margin-top:10px}
.documento ul{padding-left:22px;margin:10px 0}
.documento li+li{margin-top:6px}
.documento .riquadro{margin-top:24px;background:var(--carta-chiara);border:2.5px solid var(--inchiostro);border-radius:10px;padding:16px 18px}
.torna{display:flex;justify-content:center;margin-top:40px}
.pagina-404{text-align:center;padding:60px 0 80px}
.pagina-404 img{width:min(80%,420px);margin:0 auto 26px;border:3px solid var(--inchiostro);border-radius:10px;box-shadow:6px 6px 0 var(--inchiostro)}
.pagina-404 h1{font-size:clamp(36px,10vw,56px)}
.pagina-404 p{margin:12px auto 26px;max-width:24em;color:var(--inchiostro-2);text-wrap:balance}

/* ------------------------------------------------------------- pagine del dopo acquisto (grazie, recupera): le scrive il worker */
.servizio{padding:26px 0 70px}
.servizio-scheda{max-width:560px;margin:0 auto;text-align:center}
.servizio-cartello{width:96px;height:auto;margin:0 auto 14px}
.servizio-cartello .s1{transform-box:view-box;transform-origin:60px 40px;animation:assesta1 1.8s cubic-bezier(.3,1.6,.4,1) .15s both}
.servizio-cartello .s2{transform-box:view-box;transform-origin:60px 80px;animation:assesta2 1.8s cubic-bezier(.3,1.6,.4,1) .3s both}
@keyframes assesta1{0%{transform:rotate(-16deg)}100%{transform:rotate(0)}}
@keyframes assesta2{0%{transform:rotate(14deg)}100%{transform:rotate(0)}}
.servizio h1{font-size:clamp(34px,9.4vw,52px)}
.servizio .sotto{margin:12px auto 0;max-width:27em;color:var(--inchiostro-2);text-wrap:balance}
.servizio .compra{margin-top:24px}
.servizio .riquadro{margin:26px auto 0;max-width:30em;background:var(--carta-chiara);border:2.5px solid var(--inchiostro);border-radius:12px;padding:14px 16px;font-size:16px;line-height:1.5;text-wrap:pretty}
.servizio .piccolo{margin:16px auto 0;max-width:30em;font-size:15px;color:var(--inchiostro-2);text-wrap:balance}
.servizio .avviso{margin:18px auto 0;max-width:30em;padding:12px 14px;border:2.5px dashed var(--ruggine-scura);border-radius:12px;color:var(--inchiostro);font-size:16px;text-wrap:balance}
.modulo{max-width:420px;margin:24px auto 0;text-align:left}
.modulo label{display:block;font-weight:700;font-size:16px;margin-bottom:6px}
.modulo input{width:100%;min-height:54px;padding:12px 16px;font:400 18px/1.3 var(--testo);color:var(--inchiostro);background:var(--carta-chiara);border:3px solid var(--inchiostro);border-radius:12px}
.modulo input:focus{outline:3px solid var(--ruggine);outline-offset:2px}
.modulo .compra{display:flex;width:100%;margin-top:14px;cursor:pointer}
.mini-copertina{width:120px;margin:0 auto 18px;perspective:600px}
.mini-copertina img{border:3px solid var(--inchiostro);border-radius:3px 6px 6px 3px;box-shadow:6px 6px 0 var(--inchiostro);transform:rotateY(14deg) rotate(-2deg)}

/* ------------------------------------------------------------- partenze delle animazioni (solo con JS e senza "riduci movimento")
   Il primo schermo parte nascosto per non lampeggiare prima che arrivi lo script; dopo 3 s si mostra comunque (classe senza-intro). */
.js:not(.fermo):not(.senza-intro) .entra,
.js:not(.fermo):not(.senza-intro) .parola>span,
.js:not(.fermo):not(.senza-intro) .eroe .libro3d,
.js:not(.fermo):not(.senza-intro) .segnale,
.js:not(.fermo):not(.senza-intro) .logo-vivo .fr1,
.js:not(.fermo):not(.senza-intro) .logo-vivo .fr2{opacity:0}
.js:not(.fermo):not(.senza-intro) .traccia{stroke-dasharray:1 2;stroke-dashoffset:1}
.js:not(.fermo):not(.senza-intro) .passi-scopri{stroke-dashoffset:1}

@media (prefers-reduced-motion:reduce){
  .compra::after{animation:none!important;display:none}
  .barra,.barra.su,.torna-su,.torna-su.su{transition:none}
  .servizio-cartello .s1,.servizio-cartello .s2{animation:none}
}

/* telefoni stretti: i tre social stanno su una riga sola */
@media (max-width:400px){
  .social{gap:6px}
  .social a{gap:5px;padding:6px 9px;font-size:13.5px}
  .social svg{width:16px;height:16px}
  .tavola{font-size:16px;padding-top:11px;padding-bottom:11px}
}
@media (max-width:370px){
  .eroe .sottotitolo{font-size:15px}
  .prezzo strong{font-size:33px}
  .bivio{padding-left:8px;padding-right:8px}
  .detto{font-size:17.5px}
}

/* ------------------------------------------------------------- tablet e computer */
@media (min-width:768px){
  :root{--gutter:32px}
  body{font-size:19px}
  .testa{padding-top:22px}
  .marca{font-size:22px}
  .marca svg{width:38px;height:38px}
  .eroe{--w:260px;padding:14px 0 70px}
  .eroe .di-chi{font-size:15px}
  .eroe .sottotitolo{font-size:20px;margin-top:12px}
  .palco{margin:26px auto 14px}
  .eroe .acquisto{margin-top:10px}
  .prezzo strong{font-size:44px}
  .prezzo span{font-size:15px}
  .sezione{padding:88px 0}
  .parte{max-width:900px}
  .schede{grid-template-columns:repeat(4,1fr);max-width:var(--largo);gap:20px}
  .scheda .corpo{padding:18px 16px 20px}
  .bivi{grid-template-columns:repeat(4,1fr);max-width:var(--largo);gap:18px}
  .bivio{padding:18px 14px 20px}
  .detto{font-size:21px}
  .faccia.tutti .detto{font-size:24px}
  .regola-breve{font-size:15.5px}
  .tondo.piccolo{width:64px;height:64px}
  .segnavia{gap:12px}
  .tavola{font-size:18px;padding:14px 30px}
  .pagina{padding:46px 56px 50px}
  .racconto figure{margin:26px -56px}
  .no-lista{grid-template-columns:repeat(3,1fr);max-width:var(--largo);gap:16px}
  .no-lista li{padding:20px 18px 22px}
  .no-lista li:last-child{grid-column:auto}
  .no-lista b{font-size:21px}
  .no-lista span{font-size:16px}
  .chiusura-libro{--w:180px}
  .social{gap:12px}
  .social a{gap:8px;padding:8px 14px}
  .freccia{font-size:17px}
  .barra{display:none}
  .torna-su{right:22px;bottom:22px}
}
@media (min-width:768px) and (max-width:1000px){
  .schede,.bivi{grid-template-columns:1fr 1fr;max-width:var(--stretto)}
}
/* le tappe sul computer: il sentiero passa in mezzo e i capitoli stanno una volta a sinistra e una a destra */
@media (min-width:900px){
  .tappe{margin-top:30px}
  .tappe::before{left:50%;margin-left:-1.5px}
  .tappa{grid-template-columns:1fr 128px 1fr;gap:18px;padding:6px 0}
  .tappa .tondo{grid-column:2;grid-row:1;justify-self:center;width:84px;height:84px}
  .tappa:nth-child(odd) .tondo{left:-14px}
  .tappa:nth-child(even) .tondo{left:14px}
  .tappa:nth-child(odd) .tappa-testo{grid-column:1;grid-row:1;text-align:right}
  .tappa:nth-child(even) .tappa-testo{grid-column:3;grid-row:1;text-align:left}
  .tondo b{font-size:15px}
  .tappa-testo b{font-size:18px}
  .tappa-testo span{font-size:15px}
  .parte-img{aspect-ratio:3.2/1}
}
/* il primo schermo del computer: testo a sinistra, il bivio col libro a destra */
@media (min-width:1024px){
  .eroe{--w:clamp(260px,calc((var(--alto) - 250px) / 1.72),330px);padding:10px 0 80px;text-align:left}
  .eroe-griglia{display:grid;grid-template-columns:1fr minmax(0,560px);grid-template-rows:auto auto;column-gap:56px;align-items:center}
  .eroe-testo{grid-column:1;grid-row:1;align-self:end}
  .palco{--iw:calc(var(--w) * 1.86);grid-column:2;grid-row:1 / span 2;margin:10px 0 0}
  .eroe .acquisto{grid-column:1;grid-row:2;align-self:start;align-items:flex-start;margin-top:28px}
  .titolo-eroe{font-size:clamp(70px,7.4vw,104px)}
  .eroe .sottotitolo{margin-left:0;font-size:21px;max-width:22em}
  .eroe .nota-acquisto{text-align:left}
  .prezzo{justify-content:flex-start}
}