/* Tre Ore del Panettone – stile allineato alla locandina 2026
   Palette: verde bosco scuro, giallo panettone, crema, azzurro cielo */
:root{
  --notte:#082215;      /* verde quasi nero dei pannelli */
  --bosco:#0f3320;      /* verde pannello */
  --pino:#1d5134;       /* verde chiaro abeti */
  --oro:#ffd033;        /* giallo titoli */
  --oro-scuro:#e9b412;
  --crema:#fef9e6;      /* fascia sponsor */
  --crema-2:#f6eccb;
  --cielo:#2f7fd0;
  --testo:#13261a;
  --r:16px;
  --display:"Anton","Barlow Condensed",Impact,sans-serif;
  --cond:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --script:"Kaushan Script",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;font:17px/1.6 "Barlow",system-ui,sans-serif;color:var(--testo);background:var(--crema)}
h1,h2,h3{line-height:1.02;margin:0 0 .5em}
h2{font:400 clamp(2.2rem,5vw,3.4rem) var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--bosco)}
h3{font:700 1.4rem var(--cond);text-transform:uppercase;letter-spacing:.02em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.txt{max-width:64ch}
.giallo{color:var(--oro)}

/* pennellata gialla sotto i titoli, come sulla locandina */
section h2::after{content:"";display:block;width:120px;height:14px;margin-top:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16'%3E%3Cpath d='M3 9C40 4 110 2 197 4l-2 5c-60 2-120 4-190 6z' fill='%23ffd033'/%3E%3C/svg%3E") no-repeat left/100% 100%}

/* pannelli "a pennello" con bordi irregolari (filtro SVG #ruvido) */
.brush{position:relative;isolation:isolate;display:inline-block;padding:18px 28px}
.brush::before{content:"";position:absolute;inset:0;background:var(--notte);z-index:-1;filter:url(#ruvido);opacity:.94}

/* ---------- navigazione ---------- */
header.nav{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--notte) 92%,transparent);color:#fff;backdrop-filter:blur(8px);border-bottom:3px solid var(--oro)}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;min-height:58px}
.brand{font:400 1.25rem var(--display);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;margin-right:auto}
.brand span{color:var(--oro)}
.nav a.l{font:600 1.05rem var(--cond);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;opacity:.85}
.nav a.l:hover,.nav a.l[aria-current]{opacity:1;color:var(--oro)}

/* ---------- bottoni ---------- */
.btn{display:inline-block;padding:.55em 1.4em;border-radius:999px;background:var(--oro);color:var(--notte);font:700 1.15rem var(--cond);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:2px solid var(--oro);box-shadow:0 6px 18px #0004;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#ffe066}
.btn.o{background:none;color:inherit;border-color:currentColor;box-shadow:none}
.btn.o:hover{background:#ffffff1a}
.nav .btn{padding:.3em 1em;font-size:1rem}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;padding:56px 0 0;
  background:
    linear-gradient(180deg,#08221500 45%,#08221599 90%),
    linear-gradient(90deg,#08221566 0%,#08221522 60%,#08221500 100%),
    url("../img/trail-crinale-val-nure.jpg") 40% 0/cover,var(--cielo)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .85fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero .titolo{padding:22px 34px 26px;text-align:center}
.hero .luogo{display:block;text-transform:uppercase;font:400 clamp(1.8rem,4vw,3rem) var(--display);letter-spacing:.06em}
.hero h1{margin:0;font:400 clamp(3.6rem,10vw,7.4rem)/.92 var(--display);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 5px 0 var(--notte)}
.hero h1 .del{display:block;font-size:.42em;line-height:1.1}
.hero h1 .pan{display:block;color:var(--oro)}
.hero .top{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:8px;font:italic 800 1.6rem var(--cond);color:#cfd8cf;letter-spacing:.08em}
.hero .top::before,.hero .top::after{content:"";height:5px;width:70px;border-radius:3px;background:var(--oro)}
.hero .data{margin-top:26px;padding:16px 28px}
.hero .data b{display:block;font:400 clamp(1.8rem,4vw,2.8rem)/1.05 var(--display);text-transform:uppercase}
.hero .data b.giallo{font-size:clamp(2.2rem,5.4vw,3.6rem)}
.hero .data .ora{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:10px;border-top:4px solid var(--oro);font:700 1.5rem var(--cond);text-transform:uppercase}
.hero .data .ora svg{flex:none}
.hero .festa{margin:22px 0 0;font:1.6rem/1.2 var(--script);transform:rotate(-4deg);text-shadow:0 2px 8px #000a}
.hero .festa .anni{display:inline-block;font:400 1.6rem var(--display);font-style:normal;color:var(--notte);background:var(--oro);padding:.05em .7em;border-radius:6px;margin-right:10px;box-shadow:0 4px 0 var(--oro-scuro)}
.hero .cta{margin-top:30px}
.locandina{justify-self:center;max-width:400px;transform:rotate(2.5deg);text-decoration:none;color:#fff}
.locandina img{border-radius:10px;border:6px solid var(--crema);box-shadow:0 30px 60px #000a}
.locandina span{display:block;text-align:center;margin-top:12px;font:600 1rem var(--cond);text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.locandina:hover span{color:var(--oro);opacity:1}
.profilo{display:block;width:100%;height:clamp(150px,20vw,260px);margin-top:-30px;margin-bottom:-2px;position:relative}

/* ---------- dati gara ---------- */
.dati{margin-top:-60px;position:relative;z-index:2}
.dati dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;margin:0;padding:26px 34px;background:var(--bosco);color:#fff;border-radius:var(--r);box-shadow:0 24px 60px #08221555;border-bottom:6px solid var(--oro)}
.dati dt{font:600 1rem var(--cond);text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.dati dd{margin:0;font:400 2.3rem/1.1 var(--display);color:var(--oro)}

/* ---------- sezioni ---------- */
section{padding:80px 0}
.dati+section{padding-top:64px}
section.chiara{background:#fffdf3}
.due{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.foto{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 18px 44px #08221533;transform:rotate(-1.2deg);border:6px solid #fff}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.v{max-width:420px;justify-self:center}
.pill{display:inline-block;background:var(--oro);color:var(--notte);padding:10px 22px;border-radius:999px;margin:0 0 18px;font-family:var(--cond);font-size:1.15rem}
.lista{padding-left:1.2em}
.lista li::marker{color:var(--oro-scuro)}

/* programma */
ol.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
ol.tl li{padding:22px;background:#fff;border-radius:var(--r);border-top:6px solid var(--oro);box-shadow:0 10px 30px #0822151a}
ol.tl b.h{display:block;font:400 2.6rem/1 var(--display);color:var(--bosco);margin-bottom:8px}

/* iscrizioni */
.iscr{color:#fff;background:radial-gradient(50% 60% at 15% 0,#ffd03326,transparent 70%),var(--bosco)}
.iscr h2,.scura h2{color:#fff}
.quote{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:26px 0}
.q{padding:30px;border-radius:var(--r);background:var(--notte);box-shadow:0 16px 40px #0004}
.q.g{background:var(--crema);color:var(--testo)}
.q ul{list-style:none;margin:10px 0 0;padding:0}
.q li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid #ffffff33}
.q.g li{border-color:#0822152a}
.q b{font:400 2.3rem var(--display);color:var(--oro)}
.q.g b{color:var(--bosco)}

/* contatti e faq */
.contatti .pers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:#fff;padding:24px;border-radius:var(--r);box-shadow:0 10px 30px #0822151a;border-left:6px solid var(--oro)}
.card > b{font:700 1.4rem var(--cond);text-transform:uppercase}
.card p{margin:.2em 0}
.card .cta{margin-top:14px}
details{background:#fff;border-radius:var(--r);margin-bottom:10px;padding:16px 20px;box-shadow:0 10px 30px #0822151a}
summary{font:700 1.2rem var(--cond);text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
summary::marker{color:var(--oro-scuro)}
details p{margin:10px 0 0}

/* sponsor: la fascia crema della locandina si fonde con lo sfondo */
.sponsor{background:var(--crema);border-top:6px solid var(--oro)}
.sponsor img{width:100%;max-width:1024px;margin:10px auto 0}

/* footer */
footer{background:var(--notte);color:#fff;padding:30px 0;font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
footer .sito{font:400 1.3rem var(--display);letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;gap:12px}
footer .sito::before,footer .sito::after{content:"";width:34px;height:4px;border-radius:2px;background:var(--oro)}

/* regolamento */
.reg h1{font:400 clamp(2.8rem,8vw,5rem) var(--display);text-transform:uppercase;color:var(--bosco)}
.reg h2{font-size:1.9rem;margin-top:1.6em}
.reg ul{padding-left:1.2em}
.reg li::marker{color:var(--oro-scuro)}
.hero.mini{padding:46px 0 0}
.hero.mini .wrap{display:block}
.hero.mini h1{font-size:clamp(3rem,9vw,5.6rem)}

@media(max-width:860px){
  .hero .wrap,.due{grid-template-columns:1fr}
  .hero .titolo{padding:18px 20px}
  .locandina{max-width:300px}
  section{padding:56px 0}
  .nav a.l{font-size:.95rem}
}
@media(max-width:520px){
  .nav .wrap{gap:4px 14px;padding-top:6px;padding-bottom:8px}
  .brand{width:100%;margin-right:0}
  .hero .data{padding:14px 18px}
  .dati{margin-top:-36px}
  .dati dl{padding:20px;grid-template-columns:1fr 1fr;gap:16px}
  .dati dd{font-size:1.7rem}
  .profilo{height:120px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}