*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:'Arial Black', sans-serif;
    background:#000;
}

.poster{
    position:relative;
    min-height:100vh;
    width:100%;
    background:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.55)),
        url('images/fondo.jpg') center/cover no-repeat;
    overflow:hidden;
    color:#fff;
}

/* TEXTO GIGANTE DE FONDO */
.bg-text{
    position:absolute;
    top:120px;
    left:50%;
    transform:translateX(-50%);
    font-size:140px;
    font-weight:900;
    letter-spacing:15px;
    color:rgba(255,255,255,.08);
    z-index:1;
}

/* BRAND */
.brand{
    text-align:center;
    padding-top:20px;
    z-index:3;
    position:relative;
}
.brand img{
    width:120px;
}
.brand span{
    font-size:14px;
    opacity:.8;
}

/* PIZZAS */
.pizzas{
    position:relative;
    height:520px;
    margin-top:30px;
    z-index:3;
}

.pizza{
    position:absolute;
}
.pizza img{
    width:260px;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));
}

/* POSICIÓN EXACTA */
.p1{ top:0; left:50%; transform:translateX(-50%); }
.p2{ top:140px; left:10px; }
.p3{ top:170px; right:0; }
.p4{ bottom:0; left:40px; }

.badge{
    position:absolute;
    bottom:15px;
    right:15px;
    width:28px;
    height:28px;
    background:#6cbf3c;
    color:#000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

/* TEXTO INCLINADO */
.special{
    position:absolute;
    right:20px;
    bottom:10px;
    font-family:'Brush Script MT', cursive;
    font-size:26px;
    transform:rotate(-10deg);
    z-index:4;
}

/* FOOTER */
.menu{
    padding:20px;
    font-size:14px;
}
.menu div{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}
.menu span{
    background:#6cbf3c;
    color:#000;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}
.menu b{
    margin-left:auto;
    color:#ffd966;
}

/* DESKTOP */
@media(min-width:1024px){
    .poster{
        display:flex;
        justify-content:center;
    }
    .poster > *{
        max-width:420px;
        margin:auto;
    }
}