:root{
--azzurro:#79c8f2;
}

body{
margin:0;
background:var(--azzurro);
font-family:'Sole24SansNumber',sans-serif;
}

.container{
max-width:1200px;
}

.hero-box{ background:#79c8f2; padding:20px 0; margin-bottom:20px; } .hero-image{ display:block; width:100%; max-width:1000px; /* puoi aumentare fino a 1200px */ height:auto; margin:0 auto; }

.hero h1{
font-family:'SoleSerifHeadline',serif;
font-size:clamp(2rem,4vw,4rem);
color:#000;
}

.hero h1 span{
font-weight:bold;
}

.hero .lead{
font-size:1.6rem;
color:#000;
}

.week{
margin-bottom:12px;
}

.week-text{
background:#fff;
padding:24px;
height:100%;
}

.week-text h2{
font-family:'SoleSerifHeadline',serif;
font-size:2rem;
margin-bottom:20px;
}

.week-text ul{
margin:0;
padding-left:20px;
line-height:2;
}

.week-image{
background:#9dd7f5;
display:flex;
justify-content:center;
align-items:center;
height:100%;
padding:20px;
min-height:220px;
}

.footer-note{
background:#fff;
padding:15px;
margin:20px auto;
max-width:1200px;
text-align:center;
}

@media(max-width:991px){
.hero-box{padding:25px;}
.hero .lead{font-size:1.2rem;}
.week-image{min-height:180px;}
}

/* ========================== HEADER ========================== */ 
header{ background:#19526e; box-shadow:0 2px 8px rgba(0,0,0,.15); } 
header .logo{ height:60px; width:auto; }
@media (max-width:768px)
{ header .logo{ height:45px; } } /* Per compensare la sticky header */ 
.hero{ padding-top:40px; }



/* ==========================
   FOOTER ISTITUZIONALE
========================== */

.footer-corporate{
    background:#174a6c;   /* stesso blu dell'header */
}

.footer-corporate p{
    color:#fff;
    font-size:.85rem;
    line-height:1.5;
}

.logo-gruppo24ore{
    width:220px;
    max-width:100%;
}

/* ===== HERO PROMO ===== */

.hero-promo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    margin-top:25px;
}

.hero-text{
    max-width:700px;
}

.hero-price{
    flex-shrink:0;
}

.price-badge{
    width:170px;
    height:auto;
    display:block;
}

@media (max-width:768px){

    .hero-promo{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .price-badge{
        width:140px;
    }

}