/* Camper Club Italiano – stile pagina di attesa */

:root{
  --verde:#009246; --rosso:#CE2B37; --nero:#000000;
  --carta:#FFFFFF; --asfalto:#2B2D30; --nebbia:#ECEDEF; --testo:#000000; --tenue:#5A5D63;
  --fondo:#FFFFFF;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#17191C; --testo:#F4F5F6; --tenue:#A9ADB3; --nebbia:#2A2D31; --asfalto:#8B9096;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fondo:#17191C; --testo:#F4F5F6; --tenue:#A9ADB3; --nebbia:#2A2D31; --asfalto:#8B9096;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; min-height:100%;
  background:var(--fondo); color:var(--testo);
  font-family:"Questrial","Century Gothic","Avant Garde",Futura,"Trebuchet MS",sans-serif;
  font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fascia del logo: resta sempre bianca, come il logo */
.testata{
  background:var(--carta);
  display:flex; justify-content:center;
  padding:clamp(1.5rem,4vw,3rem) 1rem clamp(1rem,3vw,2rem);
  position:relative;
}
.testata img{width:min(760px,96%); height:auto; display:block}

main{
  max-width:1080px; margin:0 auto;
  padding:clamp(2rem,6vw,4.5rem) clamp(1.25rem,4vw,2.5rem) 3rem;
}

.annuncio{text-align:center; max-width:36rem; margin:0 auto}
.annuncio h1{
  font-weight:400; margin:0;
  font-size:clamp(2rem,5.2vw,3.4rem); line-height:1.08; letter-spacing:-0.01em;
}
.annuncio p{margin:1rem auto 0; color:var(--tenue); max-width:32rem}

/* Conto alla rovescia */
.conto{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(.5rem,2.5vw,2.25rem);
  margin:clamp(2.5rem,6vw,4rem) 0 0;
  padding:0; list-style:none;
}
.conto li{display:flex; flex-direction:column; align-items:center; min-width:0}
.cifra{
  font-size:clamp(3rem,13vw,8.5rem); line-height:.9;
  font-variant-numeric:tabular-nums; letter-spacing:-0.03em;
  color:var(--testo);
}
.conto li:first-child .cifra{color:var(--verde)}
.conto li:last-child .cifra{color:var(--rosso)}
.unita{margin-top:.6rem; font-size:clamp(.85rem,1.8vw,1rem); color:var(--tenue)}
.sep{
  font-size:clamp(2.2rem,9vw,6rem); line-height:1; color:var(--tenue); opacity:.35;
  align-self:flex-start; padding-top:.15em;
}

/* La strada: il camper avanza verso il 15 novembre */
.strada{margin:clamp(3rem,7vw,5rem) auto 0; max-width:900px}
.carreggiata{position:relative; height:110px}
.asfalto{
  position:absolute; left:0; right:0; bottom:18px; height:6px;
  background:var(--nebbia); border-radius:3px;
}
.scia{
  position:absolute; left:0; bottom:12px; height:18px; width:0;
  transition:width 1.2s cubic-bezier(.2,.7,.2,1);
}
.scia span{
  position:absolute; left:0; right:0; height:4px; border-radius:2px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 35%);
          mask:linear-gradient(90deg,transparent,#000 35%);
}
.scia span:nth-child(1){top:0; background:var(--verde)}
.scia span:nth-child(2){top:7px; background:#fff; box-shadow:0 0 0 1px var(--nebbia)}
.scia span:nth-child(3){top:14px; background:var(--rosso)}
.camper{
  position:absolute; bottom:22px; left:0; width:96px;
  transform:translateX(-50%);
  transition:left 1.2s cubic-bezier(.2,.7,.2,1);
  color:var(--testo);
}
.camper svg{display:block; width:100%; height:auto}
.traguardo{
  position:absolute; right:0; bottom:18px; width:14px; height:64px;
  background:
    conic-gradient(var(--testo) 25%,transparent 0 50%,var(--testo) 0 75%,transparent 0) 0 0/7px 7px;
  border-left:2px solid var(--testo);
}
.tappe{display:flex; justify-content:space-between; margin-top:.5rem; color:var(--tenue); font-size:.95rem}
.tappe strong{color:var(--testo); font-weight:400}

.online{
  display:none; text-align:center; margin-top:3rem;
}
.online a{
  display:inline-block; padding:.9rem 1.6rem; border-radius:999px;
  background:var(--verde); color:#fff; text-decoration:none; font-size:1.1rem;
}
.online a:focus-visible{outline:3px solid var(--rosso); outline-offset:3px}
body.aperto .online{display:block}
body.aperto .conto,body.aperto .annuncio p{display:none}

footer{
  max-width:1080px; margin:0 auto;
  padding:2rem clamp(1.25rem,4vw,2.5rem) 2.5rem;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  color:var(--tenue); font-size:.95rem;
  border-top:1px solid var(--nebbia);
}
footer a{color:inherit}
footer a:focus-visible{outline:2px solid var(--verde); outline-offset:2px}

/* Linee tricolore come nel logo, sui bordi della fascia */
.testata::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--verde) 0 33.33%,#fff 0 66.66%,var(--rosso) 0);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .scia span:nth-child(2){background:#F4F5F6; box-shadow:none}
}

@media (max-width:560px){
  .conto .sep{display:none}
  .conto{display:grid; grid-template-columns:repeat(4,1fr); gap:.25rem}
  .camper{width:70px}
  .carreggiata{height:90px}
}
@media (prefers-reduced-motion:reduce){
  .scia,.camper{transition:none}
}