/* Stili della landing Vonli (portati da Claude Design) */
[v-cloak]{display:none}
body{margin:0;background:#F4EAD7}
a{color:#1D2B2A}a:hover{color:#B8492A}
.disp{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-variation-settings:'SOFT' 100,'WONK' 1;font-optical-sizing:auto}
.pop{text-shadow:4px 4px 0 #E8673A}
.pop-y{text-shadow:3px 3px 0 #E9B44C}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.demo{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:20px;align-items:start}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
.chips{display:block}
@media (max-width:1180px){.demo{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.demo .side{grid-column:1/-1}}
@media (max-width:980px){.hero,.demo{grid-template-columns:minmax(0,1fr)}.bento{grid-template-columns:minmax(0,1fr)}.s2,.s3,.s4,.s6{grid-column:auto}.chips{display:none}.wrap{padding-left:20px;padding-right:20px}}
.demo2{display:flex;flex-direction:column;gap:14px}
.d-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.seg{display:flex;gap:2px;padding:3px;border:1.5px solid #1D2B2A;border-radius:999px;background:#FFFFFF}
.d-chips{display:flex;flex-wrap:wrap;gap:8px}
.d-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.d-stage{position:relative;height:540px;min-width:0}
.d-plan{position:absolute;inset:0}
.d-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.d-toggle{display:none}
.fs-only{display:none}
.full{position:fixed;inset:0;z-index:1000;background:#F4EAD7;padding:calc(14px + env(safe-area-inset-top,0px)) 20px calc(14px + env(safe-area-inset-bottom,0px));gap:12px;overflow:hidden}
.full .fs-only{display:flex}
.full .d-main{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
.full .d-stage{height:auto;min-height:0}
.full .d-side{overflow-y:auto;min-height:0}
@media (max-width:980px){
.d-main{grid-template-columns:minmax(0,1fr);gap:14px}
.d-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px;scroll-snap-type:x proximity}
.d-chips::-webkit-scrollbar{display:none}
.d-dims{display:none}
.d-stage{height:400px}
.d-plan{padding:40px 14px 30px 46px!important}
.full{padding-left:14px;padding-right:14px}
.full .d-chips{margin:0 -14px;padding:2px 14px 4px}
.full .d-main{grid-template-rows:minmax(0,1fr) auto}
.full .d-toggle{display:inline-flex}
.full .d-side .d-list{display:none}
.full .d-side.open .d-list{display:block;max-height:34vh;overflow-y:auto}
.full .d-side>a{display:none}
.full .d-side.open>a{display:inline-flex}
}
.p3{transform-style:preserve-3d}
.face{position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box;backface-visibility:visible;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:#1D3C3E;display:flex;justify-content:center;align-items:flex-start;white-space:nowrap}
.wood{background-image:repeating-linear-gradient(90deg,rgba(80,50,20,.10) 0 2px,transparent 2px 7px,rgba(255,240,210,.08) 7px 8px,transparent 8px 13px)}
.planks{background-image:repeating-linear-gradient(0deg,rgba(90,60,30,.22) 0 1px,transparent 1px 16px)}
.wheel{border-radius:50%}
.skin{border-top:1.5px solid rgba(29,60,62,.55)!important;border-bottom:1.5px solid rgba(29,60,62,.55)!important;border-left:1px solid rgba(29,60,62,.10)!important}
.float{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;pointer-events:none;perspective:1400px;perspective-origin:50% 20%}
.fabric{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 4px)}
.hatch{background-color:#FFFFFF;background-image:repeating-linear-gradient(45deg,transparent 0 7px,#E2D3B8 7px 8px)}
.mod{background-color:#F0E1C6}
.bad{background-color:#F6D5CE}
.archp{background-image:repeating-linear-gradient(-45deg,#8C8577 0 2px,transparent 2px 6px)}
.sun{position:absolute;border-radius:50%;background:#E9B44C;pointer-events:none}
.sun.hide{display:none}
@keyframes sway{0%{transform:rotateZ(14deg)}100%{transform:rotateZ(34deg)}}
@keyframes spin{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}}
.sway{animation:sway 9s ease-in-out infinite alternate}
.spin{animation:spin 22s linear infinite}
.fit{transform:scale(1)}
@media (max-width:1100px){.fit{transform:scale(.8)}}
@media (max-width:700px){.fit{transform:scale(.52)}.fit-s{transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.sway,.spin{animation:none}}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #1D3C3E;outline-offset:3px}
input,button{font:inherit;color:inherit}
input[type=range]{accent-color:#E8673A}

/* Freccia del marchio: piena, crema con il bordo in inchiostro e lo spessore 3D color sole, come un adesivo anni 70 */
.v-freccia{flex:none;overflow:visible;transition:transform .15s ease}
.v-freccia .e{fill:var(--sun,#E9B44C)}
.v-freccia .o{fill:var(--sun,#E9B44C);stroke:#1D2B2A;stroke-width:1.6;stroke-linejoin:round}
.v-freccia .f{fill:#FFF6E8;stroke:#1D2B2A;stroke-width:2;stroke-linejoin:round}
a:hover>.v-freccia,button:hover>.v-freccia{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.v-freccia{transition:none}a:hover>.v-freccia,button:hover>.v-freccia{transform:none}}