/* ==== v2 (novembre 2026): testata a fumetto, Oggi a Limone, cerca, lingua, app, suggerimenti ==== */
:root{--sky1:#3FA4F2;--sky2:#CDEBFF;--hero-fg:#0E2340;--hero-muted:#1F3E66;--ok:#2F8F46}
/* testata: cielo che segue il meteo vero, paesaggio delle storie, mascotte */
header.hero{position:relative;z-index:1;overflow:hidden;color:var(--hero-fg);
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 78%);transition:background .8s}
.hero[data-cielo="variabile"]{--sky1:#5EAEE8;--sky2:#DCEFFC}
.hero[data-cielo="coperto"]{--sky1:#8F9EAF;--sky2:#DCE2E9}
.hero[data-cielo="nebbia"]{--sky1:#AEB9C4;--sky2:#F1F3F5}
.hero[data-cielo="pioggia"]{--sky1:#74808F;--sky2:#BFC8D2}
.hero[data-cielo="neve"]{--sky1:#9EABBA;--sky2:#E6EBF0}
.hero[data-notte]{--sky1:#0B1A33;--sky2:#2E4A78;--hero-fg:#F3F7FB;--hero-muted:#BCD0EA}
.hero-top{position:relative;z-index:3;padding-top:20px;display:grid;gap:8px}
.hero .coords{color:var(--hero-muted);align-items:center}
.hero h1{color:var(--hero-fg)}
.hero h1 span{color:var(--hero-muted)}
.hero .tagline{color:var(--hero-fg);font-weight:700;max-width:34ch;margin:0}
.lingua{margin-left:auto;font:700 13px/1 var(--font-mono);letter-spacing:.06em;color:var(--hero-fg);background:color-mix(in srgb,#FFFFFF 55%,transparent);
  border:2px solid var(--hero-fg);border-radius:999px;padding:6px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.hero[data-notte] .lingua{background:color-mix(in srgb,#0B1A33 50%,transparent)}
.lingua b{opacity:.45;font-weight:700}.lingua b[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.lingua:focus-visible{outline:3px solid var(--lemon);outline-offset:2px}
.scena{position:relative;z-index:2;margin-top:-18px;aspect-ratio:1080/820;max-height:440px}
.scena img.paes{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block;transition:filter .8s}
.hero[data-notte] img.paes{filter:brightness(.55) saturate(.75) hue-rotate(8deg)}
@media (min-width:560px){.scena{aspect-ratio:auto;height:clamp(320px,42vw,560px);max-height:none}.scena img.paes{object-position:50% 22%}}
.cielo-fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.nuvola{position:absolute;height:auto;opacity:.95}
.stella{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFFFFF;opacity:.8}
.goccia{position:absolute;top:-20px;width:2px;height:16px;border-radius:2px;background:color-mix(in srgb,#FFFFFF 70%,var(--sky1))}
.fiocco{position:absolute;top:-10px;border-radius:50%;background:#FFFFFF}
.sole{position:absolute;right:14%;top:18px;width:62px;height:62px;border-radius:50%;background:#FFE14D;border:3px solid #0E2340;box-shadow:0 0 0 10px color-mix(in srgb,#FFE14D 35%,transparent)}
.luna{position:absolute;right:14%;top:22px;width:48px;height:48px;border-radius:50%;background:#F3F1DA;border:3px solid #0E2340;box-shadow:inset -12px -6px 0 #D9D5B4}
/* mascotte */
.masc{position:absolute;z-index:4;right:max(6px,env(safe-area-inset-right,0px));bottom:2px;width:clamp(96px,30vw,150px);aspect-ratio:340/360;
  background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.masc svg{width:100%;height:100%;overflow:visible;display:block}
.masc:focus-visible{outline:3px solid var(--lemon);outline-offset:4px;border-radius:20px}
.fumetto{position:absolute;z-index:5;right:calc(clamp(96px,30vw,150px) - 6px);bottom:calc(clamp(96px,30vw,150px) * .78);max-width:min(190px,52vw);
  background:#FFFFFF;color:#0E2340;border:2.5px solid #0E2340;border-radius:16px 16px 4px 16px;padding:7px 11px;font:700 14px/1.25 var(--font-body);
  box-shadow:3px 3px 0 #0E2340;opacity:0;transform:translateY(6px) scale(.9);transform-origin:100% 100%;transition:opacity .25s,transform .25s;pointer-events:none}
.fumetto.on{opacity:1;transform:none}
.mz .m-tongue,.mz .m-mouth-o,.mz .m-fioc{opacity:0}
.mz .m-ting{transform:scale(0)}
.mz.g-ombrello .m-arml,.mz.g-ombrello-neve .m-arml,.mz.g-tazza .m-arml,.mz.g-lanterna .m-arml,.mz.g-cielo .m-arml{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .masc.entra svg{animation:mEntra .9s cubic-bezier(.3,1.4,.5,1) both}
  .masc.salta svg{animation:mSalta .6s ease-out}
  .mz .m-idle{animation:mzBreath 1.6s ease-in-out infinite alternate;transform-origin:160px 340px}
  .mz .m-arm{animation:sArm 7s ease-in-out 1s infinite}
  .mz .m-fore{animation:sFore 7s ease-in-out 1s infinite}
  .mz .m-eyes{animation:sBlink 4.6s linear infinite}
  .mz .m-mouth-o{animation:sTalk 7s step-end 1s infinite}
  .mz .m-mouth-c{animation:sSmile 7s step-end 1s infinite}
  .mz.g-ombrello-neve .m-fioc{animation:mzFioc 2.2s linear infinite}
  .mz .m-swing{animation:mzSwing 1.4s ease-in-out infinite alternate}
  .mz .m-fumo{animation:mzFumo 1.2s ease-out infinite}
  .mz .m-scarf{animation:mzScarf .7s ease-in-out infinite alternate}
  .mz .m-foglia{animation:mzFoglia 1.1s ease-in-out infinite alternate}
  .mz .m-ting{animation:sTing 5s ease-in-out 2s infinite}
  .masc.salta .m-hat{animation:sCappello .9s ease-out}
  .nuvola{animation:nuvola linear infinite}
  .stella{animation:brilla 2.4s ease-in-out infinite alternate}
  .goccia{animation:goccia linear infinite}
  .fiocco{animation:fiocco linear infinite}
  .sole{animation:sole 4s ease-in-out infinite alternate}
}
@keyframes mEntra{from{transform:translateY(60%) scale(.6);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes mSalta{0%{transform:none}25%{transform:scale(1.1,.85)}55%{transform:translateY(-22%) scale(.95,1.06)}100%{transform:none}}
@keyframes mzBreath{from{transform:none}to{transform:translateY(-8px) scale(1.012,.99)}}
@keyframes sArm{0%,30%,100%{transform:rotate(-6deg)}4%,12%,20%{transform:rotate(-26deg)}8%,16%,24%{transform:rotate(12deg)}}
@keyframes sFore{0%,28%,100%{transform:rotate(0)}3%,9%,15%,21%{transform:rotate(-14deg)}6%,12%,18%,24%{transform:rotate(14deg)}}
@keyframes sBlink{0%,93%,100%{transform:none}95%{transform:scaleY(.08)}}
@keyframes sTalk{0%{opacity:0}2%{opacity:1}3.5%{opacity:0}5%{opacity:1}6.5%{opacity:0}8%{opacity:1}9.5%{opacity:0}100%{opacity:0}}
@keyframes sSmile{0%{opacity:1}2%{opacity:0}3.5%{opacity:1}5%{opacity:0}6.5%{opacity:1}8%{opacity:0}9.5%{opacity:1}100%{opacity:1}}
@keyframes sTing{0%,80%,100%{transform:scale(0) rotate(0)}88%{transform:scale(1.2) rotate(45deg)}96%{transform:scale(0) rotate(90deg)}}
@keyframes sCappello{0%{transform:none}35%{transform:translate(30px,-60px) rotate(28deg)}70%{transform:translate(10px,-20px) rotate(-8deg)}100%{transform:none}}
@keyframes mzFioc{0%{transform:translateY(0);opacity:0}12%{opacity:1}80%{transform:translateY(90px);opacity:1}100%{transform:translateY(96px);opacity:0}}
@keyframes mzSwing{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
@keyframes mzFumo{0%{transform:translateY(6px);opacity:0}30%{opacity:.9}100%{transform:translateY(-26px);opacity:0}}
@keyframes mzScarf{from{transform:rotate(-6deg)}to{transform:rotate(14deg)}}
@keyframes mzFoglia{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}
@keyframes nuvola{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
@keyframes brilla{from{opacity:.25}to{opacity:.95}}
@keyframes goccia{from{transform:translate(0,0)}to{transform:translate(-30px,460px)}}
@keyframes fiocco{from{transform:translate(0,0)}50%{transform:translate(14px,230px)}to{transform:translate(-6px,470px)}}
@keyframes sole{from{box-shadow:0 0 0 8px color-mix(in srgb,#FFE14D 30%,transparent)}to{box-shadow:0 0 0 16px color-mix(in srgb,#FFE14D 18%,transparent)}}

/* Oggi a Limone */
.oggi{--c:var(--accent);display:grid;gap:12px;padding:16px 16px 14px;border-radius:16px;background:var(--surface);border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.oggi-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.oggi h2{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;margin:0;letter-spacing:.02em}
.oggi .quando{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.meteo{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.meteo .ico{grid-row:span 2;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c-met) 14%,var(--surface));color:var(--c-met)}
.meteo .ico svg{width:32px;height:32px}
.meteo .cond{font-weight:700;font-size:17px;line-height:1.2}
.meteo .cond small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.quote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.quota{padding:8px 10px;border-radius:12px;background:var(--bg);border:1px solid var(--line);min-width:0}
.quota b{display:block;font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.quota span{display:block;font-size:12px;color:var(--muted);line-height:1.25;margin-top:3px}
.neve3{display:flex;gap:10px;align-items:center;font-size:14px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--c-met) 10%,var(--surface))}
.neve3 svg{flex:none;width:20px;height:20px;color:var(--c-met)}
.conto{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--bg)}
.conto .n{grid-row:span 2;font-family:var(--font-display);font-weight:800;font-size:54px;line-height:.9;color:var(--lemon);font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
.conto b{font-family:var(--font-display);font-size:21px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.conto span{font-size:13px;opacity:.85}
.conto a{color:inherit}
.detto{margin:0;padding:2px 0 2px 14px;border-left:4px solid var(--lemon)}
.detto q{font-weight:700;font-size:16px;quotes:"“" "”"}
.detto small{display:block;color:var(--muted);font-size:13px}
.notizie{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.notizie li{display:flex;gap:8px;font-size:14px;line-height:1.35}
.notizie li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--accent)}
.fonte{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.fonte a{color:inherit}
.scheletro{display:inline-block;min-width:2.2ch;border-radius:6px;background:var(--line);color:transparent}

/* cerca */
.toc .wrap{grid-template-columns:auto minmax(0,1fr);align-items:center}
.toc-panel{grid-column:1/-1}
.cerca{position:relative;min-width:0}
.cerca svg{position:absolute;left:12px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cerca input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:2px solid var(--ink);border-radius:999px;padding:7px 12px 7px 36px;box-shadow:3px 3px 0 var(--ink);min-width:0}
.cerca input::placeholder{color:var(--muted)}
.cerca input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.esito{grid-column:1/-1;margin:0;font-size:14px;color:var(--muted)}
.esito a{color:var(--accent);font-weight:700}
mark{background:var(--lemon-soft);color:inherit;border-radius:3px;padding:0 1px}

/* microanimazioni */
@media (prefers-reduced-motion:no-preference){
  html.anima main section,html.anima .feature,html.anima .cta-box,html.anima .oggi{opacity:0;transform:translateY(18px);transition:opacity .5s ease-out,transform .5s ease-out}
  html.anima main .visto{opacity:1!important;transform:none!important}
  html.anima .visto .sign .t{animation:cartello .9s ease-out .15s}
  .feature{position:relative;overflow:hidden}
  .feature::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:luccica 6s ease-in-out 2s infinite}
  .copy[data-done]{animation:pop .35s ease-out}
  .conto .n.gira{animation:pop .45s ease-out}
}
@keyframes cartello{0%{transform:rotate(0)}30%{transform:rotate(-4deg)}60%{transform:rotate(2.5deg)}100%{transform:rotate(0)}}
@keyframes luccica{0%,70%{left:-60%}100%{left:130%}}
.burst.cuore{color:var(--heart)}.burst.stellina{color:var(--star)}

/* suggerisci un posto */
#sec-sug{--c:var(--c-ami)}
.sug-box{display:grid;gap:12px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--c)}
.sug-box p{margin:0}
.sug-form{display:grid;gap:12px}
.sug-form label{display:grid;gap:4px;font-weight:700;font-size:14px}
.sug-form label span{font-weight:400;color:var(--muted)}
.sug-form input,.sug-form textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;width:100%}
.sug-form textarea{min-height:76px;resize:vertical}
.sug-form input:focus-visible,.sug-form textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.tipi{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.tipi legend{font-weight:700;font-size:14px;margin-bottom:6px;padding:0}
.tipi label{display:inline-flex;font-weight:700}
.tipi input{position:absolute;opacity:0;width:1px;height:1px}
.tipi label span{color:var(--ink);font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--bg);cursor:pointer}
.tipi input:checked+span{background:var(--c);border-color:var(--c);color:#0E2340}
.tipi input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.trappola{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.sug-stato{margin:0;font-weight:700;min-height:1.5em}
.sug-stato.ok{color:var(--ok)}.sug-stato.ko{color:var(--c-num)}
.btn{justify-self:start;font:inherit;font-weight:700;color:var(--bg);background:var(--ink);border:0;padding:11px 18px;border-radius:999px;cursor:pointer}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:default}
.comm .ic{background:color-mix(in srgb,var(--c-ami) 22%,var(--surface));color:var(--ink)}
div.link{cursor:default}

/* app sul telefono */
.app-box{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--accent-soft);border:1.5px solid var(--accent)}
.app-box img{grid-row:span 3;width:56px;height:56px;border-radius:14px;border:2px solid var(--ink)}
.app-box h3{margin:0;font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.05;text-transform:uppercase}
.app-box p{margin:0;font-size:14px}
.app-box .btn{margin-top:4px}
.app-guida{grid-column:1/-1;margin:4px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface);font-size:14px}
#t-minmax{font-size:22px;line-height:1.1;padding-top:4px}
.fav,.voto{flex:none}
.cielo-dietro{position:absolute;inset:0 0 40% 0;z-index:0;pointer-events:none;overflow:hidden}
.scena img.paes{z-index:1}
.cielo-dietro .sole{right:9%;top:4%;width:54px;height:54px}
.cielo-dietro .luna{right:10%;top:5%;width:44px;height:44px}
.quota span strong{font-weight:700;color:var(--ink)}
.quota em{display:block;margin-top:4px;font:500 11px/1.2 var(--font-mono);font-style:normal;color:var(--muted)}
.quota em.live{color:var(--ok)}
.quota em.live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:currentColor;vertical-align:0}
@media (prefers-reduced-motion:no-preference){.quota em.live::before{animation:battito 1.6s ease-in-out infinite}}
@keyframes battito{0%,100%{opacity:1}50%{opacity:.25}}
.quota b.mm{font-size:22px;line-height:1.1;padding-top:4px}
.oggi-extra{margin:-4px 0 0;font-size:13px;color:var(--muted)}
.neve3.suolo::before{content:"❄";color:var(--c-met)}
.neve3{margin:0}
.hero h1 .nw{display:inline;white-space:nowrap;font:inherit;letter-spacing:inherit;color:inherit;margin:0}
.fiocco-h1{display:inline-block;width:.78em;height:.78em;margin-left:.12em;vertical-align:-.04em}
.fiocco-h1 .flake-big{width:100%;height:100%;filter:drop-shadow(0 0 5px rgba(255,255,255,.7)) drop-shadow(0 1px 2px rgba(14,35,64,.25))}