@import url(all.min.css);
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Righteous');

* {
    
    box-sizing: border-box;
}

/* Estilos a toda la página */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}
/* BOTONES WHASTAPP Y SCROLL-UP */
/* ------------------------------------- */
#button-up {
    width: 35px;
    height: 35px;
    background: #46a2fd;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
    font-size: 20px;
    position: fixed;
    bottom: 65px;
    right: 35px;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all 300ms ease;
    transform: scale(0.0);
    box-shadow: 0px 1px 10px rgba(0,0,0,0.5); 
}

#button-up:hover {
    border: 4px solid white;
}

.btn-wsp {
    position: fixed; /* Posiciona de manera fija en la pantalla, sin importar el desplazamiento del usuario (scroll). Siempre estará en el mismo lugar visible */
    width: 35px; /* ancho */
    height: 35px; /* alto */
    line-height: 35px; /* Ajustamos el alto de línea al mismo valor que la altura del botón, es para que quede centrado verticalmente el ícono dentro del botón */
    bottom: 25px; /* Colocamos el botón a 25px del borde inferior */
    right: 35px; /* Colocamos el botón a 25px del borde derecho */
    background-color: #25D366; /* color de fondo verde */
    color: white; /* color del ícono */
    border-radius: 50%; /* deja redondo el ícono */
    text-align: center;
    font-size: 28px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.5); /* Aplicar sombra al botón, dando efecto de profundidad o elevación. Es una sombra negra y el 0.3 le da una opacidad del 30% */
    z-index: 4000; /* Es la altura de capas, estará por encima del resto de la página así nada lo tapa */
    transition: all 300ms ease; /* Transición suave con una duración de 300 milisegundos. El all significa que la transición afecta a todas las propiedades del botón (ej background) */
    /* El "ease" indica lo siguiente: Cuando animes la transición, empezá rápido, descelerá y termina suavemente. Es decir es el efecto que quiero darle. Otras funcionas como "ease" pueden ser: linear, ease-in, ease-out, ease-in-out */
   
   
}

.btn-wsp:hover {
    text-decoration: none;
    color: #25D366;
    background: white;
   
}

img {
    display: block;
    /* Cajas en Bloque, una debajo de la otra */
    width: 100%;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

.contenedor {
    width: 100%;
    margin: auto;
    /* Sirve para centrar, ajusta equitativamente los espacios vacíos (izq, decha, arriba y abajo) */
}

.contenedor-flex {
    display: flex;
    /* Cajas en linea */
    flex-wrap: wrap;
    /* Si una caja es más ancha que el contenedor, se va abajo */
    justify-content: space-between;
    /* Mantiene el mismo espacio/distancia entre cajas */
    align-items: center;
    /* Centrar a nivel vertical */
}

/* Estilos header */
.header-principal {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px 15px 15px 15px;
    
}

/* Texto|Logo "Mi Resto" */
.logo {
    font-size: 30px;
    color: white;
    font-family: 'Righteous', cursive;
    font-weight: 100;
    margin-left: 20px;
    text-align: center;
}

.logo-link {
    text-decoration: none;
    color: white;
}

.logo-link:hover {
    color: #0833A2;
}

/* Contenedor que contiene: Imagen del logo y el logo "Mi Resto" */
.contenedor-logo {
    display: flex;
    /* Cajas en linea */
    flex-wrap: wrap;
    /* Si una caja es más ancha que el contenedor, se va abajo */
    justify-content: center;
    /* Centrar a nivel horizontal */
    align-items: center;
    /* Centrar a nivel vertical */
}

/* Imagen del logo */
header img {
    width: 60px;
}

/* FIN CLASE 1 */
/* INICIO CLASE 2 */
/* Estilos del menú */
.nav-principal {
    width: 100%;
    /* ancho del 100% de la pantalla */
    position: relative;
    /* El elemento puede moverse pero solo un poco, mantiene su lugar original reservado */
    padding: 10px;
    /* Marco interno */
    z-index: 2000;
    /* Controlo la altura de las capas */
    background-color: rgba(0, 0, 0, 0.5);
    /* Transparencia del 50% */
}

.icon-menu {
    display: block;
    /* El elemento se comporta como un bloque */
    color: white;
    width: 50px;
    /* Ancho */
    height: 50px;
    /* alto */
    line-height: 45px;
    /* Hace que el contenido (texto o ícono) se alinee verticalmente al centro. Colocando un line-height similar o igual al height del contenedor */
    text-align: center;
    /* Centro el contenido del bloque a nivel vertical */
    cursor: pointer;
    /* Esto hace que caundo pasás el mouse encima, el cursor cambie por una manito indicando que el ícono es clickeable (como un botón) */
    font-size: 25px;
    /* Tamaño del ícono o texto */
}

/* Se ve más adelante la clase icon-bar */
.icon-bar {
    position: relative;
    top: -3px;
}

.social-icon {
    display: flex;
}

/* Íconos de intagram, twitter y facebook */

.social-icon [class*="icon-"] {
    color: white;
    margin-left: 10px;
    /* 10px a la izquierda de espacio entre íconos */
    display: flex;
    /* Cajas una al lado de la otra y no en bloque */
    justify-content: center;
    /* Centro a nivel horizontal */
    align-items: center;
    /* Centro a nivel vertical */
    font-size: 20px;
    /* Tamaño de 20px al ícono */
    width: 35px;
    /* Ancho */
    height: 35px;
    /* alto */
    background-color: #007BFF;
    border-radius: 50%;
    /* El cuadrado lo deja redondo */

}




.social-icon_link {
    text-decoration: none;
    /* Quita el subrayado del hipervínculo */
}

/* El contenedor de los botones de "incio" "nosotros", etc */
.menu {
    position: absolute;
    /* Lo sacas del flujo de la página y lo posicionás manualmente usando top, left, right, bottom. Esto permite que el menú aparezca encima de otros elementos, en un lugar específico */
    top: 70px;
    left: 0;
    /* Comienza en el borde izquierdo del contenedor */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 0;
    margin: 0;
    list-style: none;
    /* Saco números o puntitos a la lista */
    text-align: center;
    height: 0;
    /* El menú comienza cerrado, con altura cero para que permanezca oculto */
    overflow: hidden;
    /* Impide que el contenido se "desborde" y se vea fuera del cuadro de 0px. Es como decirle "Ocultá lo que esté más allá de la altura permitida " */
    transition: height .3s linear;
}

/* Los hipervínculos del menú (listas) */
.menu-link {
    display: block;
    padding: 15px;
    color: white;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.8);
}

/* Cuando me posiciono en cada contenedor (inicio, nosotros, etc ) */
.menu-link:hover {
    color: #0833A2;
}

.menu-link-select {
    background: #DE423A;
}

/* Lo vemos más adelante */
.mostrar {
    height: 196px;
}



/* CLASE 3 | BANNER */
.banner {
    margin-top: -70px;
    position: relative;
}

.banner:before {
    content: "";
    /* Creo un contenido vacío para que quede un fondo semi transparente */
    position: absolute;
    /* Es como si el contenido flotara en el contenedor, y puedo manipularlo usando TOP, LEFT,etc */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    top: 0;
}

.img-banner {
    width: 100%;
    height: 400px;
    object-fit: cover;
    /* Hace que la imagen se recorte para llenar el contenedor (lo que le especifiqué con el height), sin que se deforme */
}

.contenido-banner {
    width: 90%;
    color: white;
    text-align: center;
    position: absolute;
    z-index: 1500;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* Esto es para centrar el título en la imagen */
    font-size: 24px;
    font-weight: bold;
}





/* CLASE 4 | MAIN */
.columna {
    width: 100%;
}

.grupo-color .contenedor {
    /*background: #0833A2;*/
   /* background-color: rgba(8, 51, 162, 0.8);*/
    background-color: #000000;
    color: white;
    padding: 10px;
    text-align: center;
}

.titulo-principal {
    margin: 15px;
    font-size: 28px;
    font-family: 'Righteous', cursive;
    font-weight: 100;
}

.titulo-columna {
    font-size: 20px;
    color: white;
    
}
.cont-elige{
    padding-right: 30px;
    text-align: center;
    list-style-type: none;
}

.main-descripcion .columna:nth-child(2) {
    padding: 10px;
}

.main-descripcion {
    padding: 15px;
    background-color: rgba(0,0,0, 0.3);
}

.btn {
    display: block;
    text-align: center;
    width: 120px;
    color: white;
    margin: 10px auto;
    text-decoration: none;
    background: #0833A2;
    padding: 10px;
    border-radius: 5px;
}

.titulo-grupo {
    font-family: 'Righteous', cursive;
    font-weight: 100;
    text-align: center;
    font-size: 28px;
    margin: 30px;
}

.especiales-hoy .columna {
    margin-bottom: 30px;
    text-align: center;
}

.especiales-hoy-img {
    margin: auto;
    max-width: 350px;
}

.especiales-hoy-titulo {
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.especiales-hoy-precio {
    font-size: 24px;
    font-weight: bold;
    color: #0833A2;
}

/* ESTILOS RESPONSIVE */




/* CLASE 5 | FOOTER */
.footer-principal {
    background: #222222;
    color: white;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    /* padding: 20px 10px; */
    font-size: 12px;
}

.copy {
    width: 100%;
    text-align: center;
    margin: auto;
    margin-top: 15px;
}

.footer-principal [class*="icon-"] {
    color: white;
    text-decoration: none;
    margin-right: 10px;
    font-size: 15px;
}

.footer-principal [class*="icon-"]:before {
    position: relative;
    top: 2px;
    right: 5px;
}

@media screen and (max-width:400px) {
    header img {
        display: none;
    }
}

@media screen and (min-width:480px) {
    .columna-33 {
        width: 32%;
    }

    .columna-33 .titulo-columna {
        text-align: center;
        font-size: 18px;
    }

    .footer-principal .contenedor-flex {
        
        align-items: flex-start;
    }

    .footer-principal .desc-columna {
        text-align: center;
        
    }
}
@media screen and (min-width:1024px) {
    
}



@media screen and (min-width:480px) {
    .banner {
        margin-top: -145px;
        z-index: -1000;
    }

    .img-banner {
        height: 700px;
    }

    .contenido-banner {
        font-size: 32px;
        top: 55%;
    }
     .columna-50 {
        width: 49%;
    }

    .columna-50-25 {
        width: 49%;
        background: white;
        color: black;
    }

    .grupo-color .contenedor {
        padding: 30px;
        line-height: 25px;
        
    }

    .especiales-hoy .columna {
        border: 5px solid #a4a4a4;
    }

    .especiales-hoy-img {
        height: 200px;
        max-width: 600px;
        object-fit: cover;
    }

    .especiales-hoy {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 1px;
        background-color:#0833A2;
        color: white;
    }
}

@media screen and (min-width:1024px) {

    /* menú de hamburguesa */
    .icon-menu {
        display: none;
        /* Oculto el elemento (la hamburguesa) */
    }

    .menu {
        position: static;
        /* Ka posición por default, no se puede usar "top", "left" etc */
        display: flex;
        height: auto;
        /* Se ajusta a la alutra y al ancho del contenido que tengo dentro del contenedor */
        width: auto;
        background-color: rgba(0, 0, 0, 0);
    }

    .menu-link {
        background-color: rgba(0, 0, 0, 0);
        margin-left: 15px;
        margin-right: 15px;
    }

    .menu-link-select {
        background: #DE423A;
    }
    .contenido-banner {
        font-size: 45px;
    }

    .img-banner {
        height: 850px;
    }
    .grupo-color .contenedor {
        padding: 60px;
        line-height: 35px;
    }

    .columna-33{
        width: 29%;
        /*background-color: beige;*/
    }

    .columna-50-25 {
        width: 24.5%;
        background-color: white;
        color: black;
    }

    .main-descripcion .columna:nth-child(2) {
        padding: 10px;
        line-height: 30px;
    }
}
/* MOD: estilos para celulares como Galaxy A02s (720px ancho) */
@media (max-width: 720px) {
    .icon-menu {
        display: block; /* botón hamburguesa visible */
    }
.social-icon [class*="icon-"] {
  display: none; /* no se muestran nunca */
}
    .menu {
        display: none; /* menú oculto por defecto */
        flex-direction: column;
        background: rgba(51, 51, 51, 0.6);/*color opacidad*/
        width: 100%;
    }

    .menu.mostrar {
        display: flex; /* menú desplegado al hacer clic */
        flex-direction: column;
        background: rgba(51, 51, 51, 0.6); /* MOD: opacidad aplicada también al desplegado */
    }
 #btnMenu {
    display: block; /* botón hamburguesa visible */
  }

    .columna {
        flex: 1 1 100%; /* columnas apiladas */
    }

    h1, h2, h3, p {
        font-size: clamp(14px, 4vw, 18px); /* texto adaptable */
    }
}

/* MOD: estilos para pantallas mayores a 721px (tablets y PC) */
@media (min-width: 721px) {
    .icon-menu {
        display: none; /* ocultar hamburguesa */
    }
.social-icon [class*="icon-"] {
  display: flex; /* no se muestran nunca */
}
    .menu {
        display: flex;
        flex-direction: row;
        background: none;
        width: auto;
    }

    .columna {
        flex: 1 1 50%; /* dos columnas en tablets */
    }

    .contenido-banner {
        font-size: 1.5 rem;
    }
}
@media (min-width: 1024px) {
    .columna {
        flex: 1 1 33%; /* tres columnas en PC */
    }

    .logo-link {
        font-size: 1.5rem;
    }
}