*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Montserrat,sans-serif;
background:#000;
overflow-x:hidden;
color:#fff;

}

.bg{

position:fixed;
width:100%;
height:100%;
background:

radial-gradient(circle at top,#ff7a00 0%,transparent 40%),

linear-gradient(#000,#090909);

z-index:-2;

}

body::after{

content:"";
position:fixed;
width:100%;
height:100%;

background:

url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

opacity:.15;

z-index:-1;

}

header{

padding:30px;
text-align:center;

}

.logo{

width:180px;
filter:

drop-shadow(0 0 25px orange);

animation:fuego 2s infinite alternate;

}

@keyframes fuego{

from{

transform:scale(1);

}

to{

transform:scale(1.08);

}

}

h1{

font-size:55px;

font-weight:900;

letter-spacing:4px;

margin-top:15px;

}

header p{

color:#ff8c00;

font-size:25px;

font-weight:700;

margin-top:8px;

}

.hero{

display:flex;

align-items:center;

justify-content:center;

gap:80px;

padding:50px;

flex-wrap:wrap;

}

.burger img{

width:550px;

max-width:100%;

filter:

drop-shadow(0 0 35px orange);

animation:flotar 3s ease-in-out infinite;

}

@keyframes flotar{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

.info{

max-width:550px;

}

.info h2{

font-size:60px;

line-height:1.1;

font-weight:900;

}

.info p{

margin-top:25px;

font-size:23px;

color:#ddd;

line-height:1.6;

}

.precio{

margin-top:35px;

font-size:90px;

font-weight:900;

color:#ff9800;

text-shadow:

0 0 20px orange,

0 0 40px #ff5b00;

}

.botones{

display:flex;

justify-content:center;

gap:30px;

padding:40px;

flex-wrap:wrap;

}

.btn1,
.btn2{

text-decoration:none;

padding:22px 55px;

border-radius:70px;

font-size:24px;

font-weight:900;

transition:.35s;

}

.btn1{

background:linear-gradient(45deg,#ff9900,#ff4d00);

color:white;

box-shadow:

0 0 30px orange;

}

.btn1:hover{

transform:scale(1.08);

box-shadow:

0 0 60px orange;

}

.btn2{

background:white;

color:black;

box-shadow:

0 0 25px white;

}

.btn2:hover{

transform:scale(1.08);

background:#25D366;

color:white;

box-shadow:

0 0 40px #25D366;

}

footer{

padding:40px;

text-align:center;

font-size:22px;

color:#999;

}

/*========================*/

@media(max-width:900px){

.hero{

padding:25px;

gap:30px;

}

.logo{

width:110px;

}

h1{

font-size:38px;

}

header p{

font-size:18px;

}

.info{

text-align:center;

}

.info h2{

font-size:42px;

}

.info p{

font-size:18px;

}

.precio{

font-size:65px;

}

.burger img{

width:380px;

}

.btn1,
.btn2{

width:90%;

text-align:center;

font-size:20px;

}

}









.ingredientes{

padding:80px 40px;

max-width:1300px;

margin:auto;

}

.ingredientes h2{

text-align:center;

font-size:48px;

font-weight:900;

margin-bottom:50px;

color:#ff7b00;

text-shadow:0 0 15px rgba(255,120,0,.5);

letter-spacing:2px;

}

.ingredientes-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.ingredientes .item{

display:flex;

align-items:center;

gap:18px;

background:#111;

padding:22px;

border-radius:18px;

border:1px solid rgba(255,123,0,.25);

transition:.35s;

box-shadow:0 0 15px rgba(255,123,0,.15);

}

.ingredientes .item:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(255,123,0,.55);

border-color:#ff7b00;

}

.ingredientes .item svg{

width:45px;

height:45px;

stroke:#ff7b00;

stroke-width:2;

fill:none;

flex-shrink:0;

filter:drop-shadow(0 0 8px #ff7b00);

}

.ingredientes .item span{

font-size:21px;

font-weight:700;

color:#fff;

}








.caracteristicas{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
padding:70px 40px;
max-width:1300px;
margin:auto;

}

.item{

display:flex;
align-items:center;
gap:18px;

padding:20px;

background:#111;

border:1px solid rgba(255,136,0,.2);

border-radius:18px;

transition:.35s;

box-shadow:0 0 15px rgba(255,120,0,.15);

}

.item:hover{

transform:translateY(-8px);

border-color:#ff7b00;

box-shadow:0 0 30px rgba(255,120,0,.55);

}

.item svg{

width:48px;
height:48px;

color:#ff7b00;

stroke-width:2;

flex-shrink:0;

filter:drop-shadow(0 0 8px #ff7b00);

}

.item span{

font-size:20px;

font-weight:700;

color:white;

}







/*==================================================
                TABLETS
==================================================*/

@media (max-width:992px){

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

.info{
    max-width:100%;
}

.info h2{
    font-size:42px;
}

.precio{
    font-size:70px;
}

.burger img{
    width:420px;
    max-width:95%;
}

.caracteristicas{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    padding:50px 20px;
}

.ingredientes{
    padding:60px 20px;
}

.ingredientes-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.item{
    padding:18px;
}

.item span{
    font-size:18px;
}

.item svg{
    width:38px;
    height:38px;
}

}


/*==================================================
                CELULARES
==================================================*/

@media (max-width:768px){

header{

padding:25px 15px;

}

.logo{

width:115px;

}

h1{

font-size:34px;
letter-spacing:1px;

}

header p{

font-size:18px;

}

.hero{

padding:20px 15px;

gap:20px;

}

.burger{

width:100%;
display:flex;
justify-content:center;

}

.burger img{

width:100%;
max-width:360px;

}

.info{

text-align:center;

}

.info h2{

font-size:34px;
line-height:1.15;

}

.info p{

font-size:17px;
line-height:1.5;

}

.precio{

font-size:55px;

}

/* BOTONES */

.botones{

padding:25px 15px;
gap:15px;

}

.btn1,
.btn2{

width:100%;

padding:18px;

font-size:19px;

}

/* CARACTERISTICAS */

.caracteristicas{

grid-template-columns:1fr;

padding:40px 15px;

gap:15px;

}

/* INGREDIENTES */

.ingredientes{

padding:40px 15px;

}

.ingredientes h2{

font-size:34px;

margin-bottom:25px;

}

.ingredientes-grid{

grid-template-columns:1fr;

gap:15px;

}

/* TARJETAS */

.item{

padding:16px;

border-radius:15px;

gap:14px;

}

.item svg{

width:34px;

height:34px;

}

.item span{

font-size:17px;

}

footer{

padding:25px 15px;

font-size:18px;

}

}


/*==================================================
        CELULARES PEQUEÑOS
==================================================*/

@media (max-width:480px){

.logo{

width:80px;

}

h1{

font-size:28px;

}

header p{

font-size:16px;

}

.info h2{

font-size:28px;

}

.info p{

font-size:16px;

}

.precio{

font-size:48px;

}

.item{

padding:14px;

}

.item svg{

width:30px;

height:30px;

}

.item span{

font-size:16px;

}

.btn1,
.btn2{

font-size:18px;

padding:16px;

}

}






/*================================
        CARRUSEL THE BUNKER'S
================================*/


.carrusel-bunker{

width:100%;

max-width:1200px;

margin:70px auto;

position:relative;

padding:0 20px;

}


.slider{

overflow:hidden;

border-radius:30px;

}


.slide{

display:none;

animation:entrada .8s ease;

}


.slide.activo{

display:block;

}


.slide img{

width:100%;

height:550px;

object-fit:cover;

border-radius:30px;


border:5px solid #ff7b00;


box-shadow:

0 0 20px #ff7b00,

0 0 60px rgba(255,120,0,.5);


transition:.5s;

}



.slide img:hover{

transform:scale(1.03);

}



/* ANIMACION */

@keyframes entrada{

from{

opacity:0;

transform:scale(.95);

}


to{

opacity:1;

transform:scale(1);

}

}




/* BOTONES */


.prev,
.next{


position:absolute;

top:50%;

transform:translateY(-50%);


width:55px;

height:55px;


border-radius:50%;


border:none;


background:#ff7b00;


color:white;


font-size:35px;


font-weight:bold;


cursor:pointer;


box-shadow:

0 0 20px orange;


z-index:5;


}



.prev{

left:35px;

}



.next{

right:35px;

}



.prev:hover,
.next:hover{


background:white;

color:#ff7b00;


transform:

translateY(-50%) scale(1.1);


}



/* PUNTOS */


.dots{

position:absolute;

bottom:25px;

left:0;

width:100%;

text-align:center;

}


.dot{

display:inline-block;


width:13px;

height:13px;


margin:5px;


background:white;


border-radius:50%;


cursor:pointer;


opacity:.5;

}



.dot.activo{


background:#ff7b00;


opacity:1;


box-shadow:

0 0 15px orange;


}




@media(max-width:768px){

.carrusel-bunker{

margin:40px auto;
padding:0 10px;

}


.slide img{

height:300px;
border-radius:20px;
border:4px solid #ff7b00;

}


.prev,
.next{

width:45px;
height:45px;
font-size:25px;

}


.prev{

left:20px;

}


.next{

right:20px;

}


.dots{

bottom:15px;

}

}