/* =====================================================
   VARIABILI (desktop vs mobile)
   ===================================================== */
:root{
  /* ======== DIMENSIONI IMMAGINI ======== */
  --img-comune-h-desktop: 44px;   /* logo Comune di Ampezzo */
  --img-comune-h-mobile:  33px;

  --mark-maxw-desktop: 45vw;      /* logo V30M */
  --mark-maxw-mobile:  89vw;

  --sponsor-maxw-desktop: 19vw;  /* loghi sponsor */
  --sponsor-maxw-mobile:  68vw;

  /* ======== SPAZIATURE / GAP TRA SEZIONI ======== */
  --hero-padding-top-desktop: 30px;
  --hero-padding-top-mobile: 30px;

  --gap-after-hero-desktop: 50px;
  --gap-after-mark-desktop: 50px;
  --gap-after-card-desktop: 0px;
  --gap-after-lead-desktop: 40px;

  --gap-after-hero-mobile: 30px;
  --gap-after-mark-mobile: 50px;
  --gap-after-card-mobile: 20px;
  --gap-after-lead-mobile: 60px;

  /* ======== SFONDO PAGINA ======== */
  --bg-desktop: url("../img/sfondo.jpg");
  --bg-mobile:  url("../img/sfondo_mob2.jpg");

  /* Offset posizione (puoi spostare lo sfondo) */
  --bg-y-desktop: -140px;  /* + giù, - su   */
  --bg-x-desktop:   0px;   /* + dx,  - sx   */
  --bg-y-mobile:   0px;
  --bg-x-mobile:     -40px;

  /* Scala sfondo (ingrandisci/riduci) */
  --bg-scale-desktop: 100%; /* es. 120% ingrandisce */
  --bg-scale-mobile:  140%;

  /* Tipografia */
  --text: #ffffff;
  --font-main: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
 /* ======== CTA (footer link progetto) ======== */
  --cta-font-size-desktop: 25px;
  --cta-font-size-mobile: 14px;

  --cta-padding-top-desktop: 10px;
  --cta-padding-bottom-desktop: 18px;

  --cta-padding-top-mobile: 6px;
  --cta-padding-bottom-mobile: 36px;

  --cta-text-color: #ffffff;         /* colore testo "Scopri il Progetto" */
  --cta-link-color: #e8a936;         /* colore link */
  --cta-link-hover-color: #ff0000;   /* colore link al passaggio mouse */
}

/* =====================================================
   RESET / BASE
   ===================================================== */
*{ box-sizing:border-box; margin:0; padding:0 }
html, body { height:100% }

body{
	background-color: #2e6b66; /* sicurezza in più */
  color: var(--text);
  font-family: var(--font-main);
  line-height: 1.35;

  /* SFONDO a TUTTA PAGINA */
  background-image: var(--bg-desktop);
  background-size: var(--bg-scale-desktop);
  background-repeat: no-repeat;
  background-position: calc(50% + var(--bg-x-desktop)) var(--bg-y-desktop);
}

@media (max-width:480px){
  body{
    background-image: var(--bg-mobile);
    background-size: var(--bg-scale-mobile);
    background-position: calc(50% + var(--bg-x-mobile)) var(--bg-y-mobile);
  }
}

.frame{ min-height:100vh; display:flex; flex-direction:column }

/* =====================================================
   1) HERO – solo il logo Comune (sezione trasparente)
   ===================================================== */
.hero{
  padding-top: var(--hero-padding-top-desktop);
  margin-block-end: var(--gap-after-hero-desktop);
  display:flex; justify-content:center;
  background: transparent;
}
.header img{
  height: var(--img-comune-h-desktop);
  width:auto; object-fit:contain;
}

@media (max-width:480px){
  .hero{
    padding-top: var(--hero-padding-top-mobile);
    margin-block-end: var(--gap-after-hero-mobile);
  }
  .header img{ height: var(--img-comune-h-mobile); }
}

/* =====================================================
   2) MARK – logo V30M (sezione trasparente)
   ===================================================== */
.mark{
  margin-block-end: var(--gap-after-mark-desktop);
  display:flex; justify-content:center; align-items:center;
  background: transparent;
}
.mark__img{
  width: var(--mark-maxw-desktop);
  max-width: none;
  height: auto; display:block;
}

@media (max-width:480px){
  .mark{ margin-block-end: var(--gap-after-mark-mobile); }
  .mark__img{ width: var(--mark-maxw-mobile); }
}

/* =====================================================
   3) CARD – titolo + testo + numero
   ===================================================== */
.card{
  margin-block-end: var(--gap-after-card-desktop);
  width: min(660px, 92%);
  margin-inline:auto;
  text-align:center;

  /* semi-trasparente per leggibilità sullo sfondo */
  background: rgba(0,0,0,.82);
  border-radius: 12px;
  padding: 18px;
}
.card h1{ font-size: 27px; margin-bottom:.5em }

/* testo introduttivo DENTRO la card, poco spazio sotto */
.card .lead{
  margin-top: 10px;
  margin-bottom: 6px;   /* <-- distanza ridotta dal numero */
  font-size: 16px;
}

.badge{
  font-weight: 800;
  letter-spacing: .05em;
  font-size: 20px;
}

@media (max-width:480px){
  .card{
    margin-block-end: var(--gap-after-card-mobile);
    width: calc(100% - 24px);
  }
  .card .lead{ font-size: 15px; margin-bottom: 4px; }
  .badge{ font-size: 18px; }
}

/* Stile per il numero nella badge */
.numero {
  display: inline-block;
  font-size: 1.5rem;        /* dimensione numero */
  font-weight: bold;        /* grassetto */
  color: #e8a936;           /* colore testo */
  background: rgba(0, 0, 0, 0.4); /* sfondo semitrasparente opzionale */
  padding: 6px 14px;        /* spazio interno */
  border-radius: 8px;       /* angoli arrotondati */
  line-height: 1;           /* compatta verticalmente */
}
@media (max-width: 480px) {
  .numero {
    font-size: 1.3rem;
    padding: 4px 10px;
  }
}
no grazie 


/* =====================================================
   4) FOOTER – CTA + loghi (sezione trasparente)
   ===================================================== */
.footer{
  padding-block: 14px;
  width: min(960px, 92%);
  margin: 0 auto;
  text-align:center;
  display:flex; flex-direction:column; gap:12px;
  background: transparent;
}

/* CTA blocco link */
.footer .cta{
  font-size: var(--cta-font-size-desktop);
  padding-top: var(--cta-padding-top-desktop);
  padding-bottom: var(--cta-padding-bottom-desktop);
  color: var(--cta-text-color);
  text-align: center;  /* centra orizzontalmente nel flex container */
}

.footer .cta a{
  color: var(--cta-link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

.footer .cta a:hover{
  color: var(--cta-link-hover-color);
}

@media (max-width:480px){
  .footer .cta{
	  align-items: center;     /* centra tutti i figli orizzontalmente */
    font-size: var(--cta-font-size-mobile);
    padding-top: var(--cta-padding-top-mobile);
    padding-bottom: var(--cta-padding-bottom-mobile);
  }
}

.footer .sponsor {
  display: flex;
  justify-content: center;  /* centra orizzontalmente */
  align-items: center;      /* centra verticalmente (se necessario) */
}

.footer .sponsor img {
  width: var(--sponsor-maxw-desktop);
  max-width: none;
  height: auto;
  display: block;
}

@media (max-width:480px){
  .footer .sponsor img {
    width: var(--sponsor-maxw-mobile);
    max-width: none;
  }
}

/* =====================================================
   TABLET (481–991px) – opzionale
   ===================================================== */
@media (min-width:481px) and (max-width:991px){
  .card{ width:min(700px, 92%) }
}