*{
    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%;
    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;
    }
}
.rubik-distressed-regular {
  font-family: "Rubik Distressed", system-ui;
  font-weight: 400;
  font-style: normal;
}
    .bg-text {
    position: absolute;
    top: 120px;
    font-size: 5.8rem;
    font-weight: 100;
    letter-spacing: 15px;
    color: rgb(255 255 255 / 79%);
    z-index: 1;
        font-family: "Rubik Distressed", system-ui;
}
.p2 {
    top: 140px;
    left: 10px;
    transform: rotateZ(19deg);
}
.p1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotateZ(344deg);
}
.p3 {
    top: 222px;
    right: 0;
    transform: rotateZ(339deg);
}
/* === FILTROS PREMIUM === */
.filters{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    gap:12px;
    padding:14px;
    background:rgba(10,10,10,.85);
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.filters button{
    flex:1;
    padding:12px 0;
    border-radius:14px;
    border:none;
    background:#1c1c1c;
    color:#bbb;
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
    transition:.25s;
}

.filters button:hover{
    background:#262626;
    color:#fff;
}

.filters button.active{
    background:linear-gradient(145deg,#6cbf3c,#9be15d);
    color:#111;
    box-shadow:0 6px 18px rgba(155,225,93,.35);
}

.products{
    padding:18px 14px 30px;
}

/* === PRODUCT CARD === */
.product{
    display:flex;
    align-items:center;
    gap:14px;

    background:linear-gradient(145deg,#141414,#1d1d1d);
    border-radius:18px;
    padding:14px;

    margin-bottom:14px;
    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.04);

    transition:.3s;
}

.product:hover{
    transform:translateY(-2px) scale(1.015);
    box-shadow:
        0 12px 28px rgba(0,0,0,.6),
        inset 0 0 0 1px rgba(155,225,93,.35);
}

.product img{
    width:78px;
    height:78px;
    object-fit:cover;
    border-radius:14px;
    background:#000;
    box-shadow:0 6px 14px rgba(0,0,0,.6);
}

.product .info{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.product h4{
    font-size:16px;
    font-weight:600;
    color:#fff;
    line-height:1.2;
}

.product .price{
    font-size:15px;
    font-weight:700;
    color:#9be15d;
}
.product:not(:has(img)){
    padding-left:20px;
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    color: #fff;
}
.modal.show{display:flex;}
.modal-box{
    background:#111;
    padding:22px;
    border-radius:18px;
    max-width:360px;
    width:90%;
    animation:pop .3s ease;
}
.modal-box h3{color:#9be15d;}
.m-price{
    margin-top:10px;
    font-size:20px;
    font-weight:bold;
    color:#ffd966;
}
.close{
    position:absolute;
    top:14px;
    right:18px;
    font-size:26px;
    cursor:pointer;
}
@keyframes pop{
    from{transform:scale(.85);opacity:0}
    to{transform:scale(1);opacity:1}
}
.hidden{
    display:none;
}



/* ===== HERO ENTRANCE ANIMATIONS ===== */
.poster *{
    animation-fill-mode: both;
}

/* Fade limpio SIN mover layout */
@keyframes fadeIn{
    from{ opacity:0 }
    to{ opacity:1 }
}

/* ===== ELEMENTOS HERO ===== */

/* Letras grandes */
.bg-text{
    opacity:0;
    animation:fadeIn 1.2s ease forwards;
}
.bg-text:nth-child(1){ animation-delay:.2s }
.bg-text:nth-child(2){ animation-delay:.35s }
.bg-text:nth-child(3){ animation-delay:.5s }
.bg-text:nth-child(4){ animation-delay:.65s }

/* Logo */
.brand{
    opacity:0;
    animation:fadeIn .9s ease forwards;
    animation-delay:.15s;
}

/* Texto especial */
.special{
    opacity:0;
    animation:fadeIn 1s ease forwards;
    animation-delay:.9s;
}

/* Pizzas */
.pizza{
    opacity:0;
    animation:fadeIn .9s ease forwards;
}

.p1{ animation-delay:.4s }
.p2{ animation-delay:.6s }
.p3{ animation-delay:.8s }
.p4{ animation-delay:1s }



/* ===== LOADER ===== */
#loader{
    position:fixed;
    inset:0;
    background:#0b0b0b;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.55)),
        url('images/fondo.jpg') center/cover no-repeat;
}

.loader-box{
    text-align:center;
    color:#fff;
}

.loader-box img{
    width:140px;
    margin-bottom:20px;
}

#loader-text{
    font-size:18px;
    letter-spacing:.5px;
    color:#9be15d;
    min-height:24px;
    font-family: monospace;
}

/* Fade out */
#loader.fade-out{
    opacity:0;
    pointer-events:none;
    transition:opacity .8s ease;
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:13px;
    letter-spacing:.6px;
    color:#fff;
    opacity:.85;
    z-index:5;
    animation:fadeIn 1s ease forwards;
    animation-delay:1.4s;
}

.scroll-indicator span{
    font-size:12px;
    opacity:.8;
}

/* Flecha */
.arrow{
    width:22px;
    height:22px;
    border-left:2px solid #9be15d;
    border-bottom:2px solid #9be15d;
    transform:rotate(-45deg);
    animation:arrowFloat 1.6s infinite ease-in-out;
}

/* Animación flecha */
@keyframes arrowFloat{
    0%{ transform:translateY(0) rotate(-45deg); opacity:.4 }
    50%{ transform:translateY(8px) rotate(-45deg); opacity:1 }
    100%{ transform:translateY(0) rotate(-45deg); opacity:.4 }
}
/* ===== FLOATING SIN ROMPER POSICIÓN ===== */
@keyframes floatSafe{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
    100%{ transform:translateY(0); }
}

.pizza-float{
    animation: floatSafe 4.5s ease-in-out infinite;
}

/* delays distintos para naturalidad */
.p1 .pizza-float{ animation-delay:0s }
.p2 .pizza-float{ animation-delay:.6s }
.p3 .pizza-float{ animation-delay:1.2s }
.p4 .pizza-float{ animation-delay:1.8s }


body{
    font-family:'Arial Black', sans-serif;
    background:#6ec1e4; /* celeste Argentina */
}