:root {
    --fuenteTitulo: 'Playfair Display', sans-serif;
    --fuenteParrafo:'Montserrat', sans-serif;
    
    --verde: #c3ff00;
    --amarillo: #eeff00;
    --crema: #efd778;

    --amarillo1: #ffd000;
    --amarillo2: #ffb347;

    --gris: #e1e1e1;
    --blanco: #ffffff;
    --negro: #000000;
    --rojo: #c00000;
    --crema2: #ffd27a;



}

/* ACA HACEMOS QUE EL BORDER, EL PADING, ETC NO AFECTE EL ANCHO DE NUESTROS ELEMENTOS */
html {
    box-sizing: border-box;
    /* ACA HACEMOS QUE 1REM MIDA 10PX RECORDAR ES IMPORTANTE HACERLO SIEMPRE*/
    font-size: 62.5%;
}

/* esto hace heredar del padre html lo que es la fuente    */
*, *:before, *:after {
    box-sizing: inherit;
}

* {
    box-sizing: border-box;
}
h1, h2, h3 {
    margin: 0;
    font-size: 1.5rem;
    margin: 0;
    font-family: var(--fuenteTitulo) ;
}

body{
color:white; 

}


a {
    color: var(--blanco);
    font-family: var(--fuenteParrafo);
    font-size:20px;
    margin: 0;
    color: var(--negro);
    font-weight: bold;
}

.display-flex {
    display: flex;
    justify-content: center;
    padding: 0;
}

.padding-cero {
    padding: 0;
}


h2{
font-size:20px;
text-transform: uppercase;
margin-bottom: 1rem;
}

p {
font-family :var(--fuenteParrafo) 'Patrick Hand', cursive, sans-serif;
font-size:20px;
margin: 0;
text-align: start;
}

svg {
    color: var(--crema2);
}
body, p, h1, h2, h3 {
    margin: 0;
}

body {
    background-image: url("../img/7.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0;
    background-attachment: fixed ;
    min-height: 100vh;
}
header {
    min-height: 22rem;
}

.luces {
    position: absolute;
    top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.luces span {
    width: 12px;
    height: 12px;
    background: #ffd27a;
    border-radius: 50%;
    box-shadow: 0 0 5px #ffd27a,
                0 0 15px #ffb347,
                0 0 30px #ff8c00;
    animation: parpadeo 2s infinite alternate;
}

@keyframes parpadeo {
    0%{
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}



.logo img {
    height: 15rem;
    border-radius: 50%;
    margin: 2rem 0 0 1rem;    
}

.subtitulo {
    width: auto;
    text-align: center;
    margin-top: 1rem;
    font-size: 2rem;
    letter-spacing: 2px;
    font-weight: bold;
    background:linear-gradient(
    180deg,
    #4a2c0f,
    #2a1708
    );  

      /* box-shadow:
    0 0 6px #ffb347,
    0 0 15px rgba(255,140,0,0.8),
    0 0 30px rgba(255,140,0,0.4),
    inset 0 0 10px rgba(255,200,120,0.3);  */
   text-shadow:
    0 0 4px #ffd27a,
    0 0 10px rgba(255,179,71,0.7);
}

    
.navegador a {
    display:inline-block;
    margin: 0 2rem;

    padding: .5rem 4rem;

    font-family:var(--fuenteParrafo);
    font-size:2rem;

    color:#ffe8b0;
    text-decoration:none;
    font-weight: bold;

     background:linear-gradient(
    180deg,
    #4a2c0f,
    #2a1708
    );  

    border-radius:10px;
    border:3px solid #ffb347;

    /* text-shadow:
    0 0 4px #ffd27a,
    0 0 10px rgba(255,179,71,0.7); */

    box-shadow:
    0 0 6px #ffb347,
    0 0 15px rgba(255,140,0,0.8),
    0 0 30px rgba(255,140,0,0.4),
    inset 0 0 10px rgba(255,200,120,0.3);

    transition:all .25s ease;
}

/**TRANSICION DE LUZ**/
/* .btn-menu:hover{
transform:scale(1.05);
box-shadow:
0 0 15px #ffd27a,
0 0 30px #ff8c00;

} */

.navegador div {
    margin-bottom: 2rem;
}


.titulo {
    font-family:var(--fuenteTitulo);
    font-size:30px;
    color: var(--blanco);
    margin-top: 1.5rem;
    font-size: 2.5rem;
    width: auto;
    text-align: center;
     background:linear-gradient(
    180deg,
    #4a2c0f,
    #2a1708
    ); 
    
    
}

.titulo h3 {
    border: solid .1rem var(--amarillo1);
   
}
    

/** MAIN **/

.contenedor {
    border-radius: 1rem;
    display: flex;
    justify-content: center;

    padding: 0 1rem; 
    margin-top: 2rem;


}



.contenedor img {
    width: 11rem;
    height: 12rem;
    border-radius: 1rem;
    margin: 0 auto;
}

.contenedor p {
    color: var(--blanco);
}

.campo {
    column-gap: 1rem;
}
 .fondo  {
    
    padding: 1rem;
    border-radius: 1rem; 
    background:linear-gradient(
    180deg,
    #4a2c0f,
    #2a1708
    ); 
} 
section {
    text-align: center;
}

.base-delivery {
   
    border: solid var(--amarillo2) .1rem;
    border-radius: 1rem;
    padding: 1rem;

}
.campo-delivey {
    display: flex;
}

.btn-wasap {
    margin-top: 2rem;
    border-radius: .5rem;
    border: solid var(--crema2) .1rem;
    box-shadow:
    0 0 6px #ffb347,
    0 0 15px rgba(255,140,0,0.8),
    0 0 30px rgba(255,140,0,0.4),
    inset 0 0 10px rgba(255,200,120,0.3);
   color: var(--blanco);
   padding: 1rem;

}   
.btn-pedir {
    margin-top: 2rem;
    border-radius: .5rem;
    border: solid var(--crema2) .1rem;
    box-shadow:
    0 0 6px #ffb347,
    0 0 15px rgba(255,140,0,0.8),
    0 0 30px rgba(255,140,0,0.4),
    inset 0 0 10px rgba(255,200,120,0.3);
    color: var(--negro);
    padding: 1rem;
    background:linear-gradient(
    180deg,
    #ffb347,
    /* #d2e93d  */
    #d17c36 

    ); 
    font-size: 1rem;
    width: 75%;
    

}



.btn-wasap p {
    font-size: 1.8rem;
}


.display-flex svg {
    color: var(--amarillo2);
}
    
.campo-combos img {
    width: 11rem;
    height: 12rem;
    border-radius: 1rem;
    margin-top: 2rem;
    
}