/*Fuentes*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:300&display=swap'); /*Se incluye la fuente Raleway*/
@import url('https://fonts.googleapis.com/css?family=Quicksand: 400,300&display=swap'); /*Se incluye la fuente Quicksand*/
@import url('https://fonts.googleapis.com/css?family=Arsenal:400,700&display=swap');

/*Globales*/
*{
    padding: 0px;
    margin: 0px;
}

html {
    font-size: 62.5%;
}

h1{
    font-size: 3.4rem;
}
h2{
    font-size: 3rem;
}
h3{
    font-size: 2.6rem;
}

.body-general{ /*Se definen los atributos del Body*/
    background-image:url("../Imagenes/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.tabla-contenido{
    margin: 10 auto;
    padding: 12px 20px;
    width: 95%;
    border-radius: 8px;
    background-color: #fff;
}

.texto-tabla-contenido{ /*Se definen los atributos del texto en los párrafos de las tablas*/
    padding-top: 5px;
    font-family: "Arsenal", sans-serif;
    font-size: 1.5vw;
}

/**Navbar**/

.contenido-navbar{ /*Se definen los atributos del elemento nav*/
    width: 100%;
    height: 60px;
    background-color: #0008; /*Se define el color de fondo y transpariencia de la navbar*/
}

.contenido-navbar ul{ /*Se definen los atributos de los elementos nav y ul*/
    float: right;
    line-height: 60px;
}

.contenido-navbar ul li{ /*Se definen los atributos de los elementos nav, ul y li*/
    float: left;
    list-style: none;
    position: relative;
}

.contenido-navbar ul li a{ /*Se definen los atributos de los elementos nav, ul, li y a*/
    display: block;
    font-family: "Arsenal", sans-serif;
    font-size: 1.3vw;
    color: white;
    text-decoration: none;
    padding: 0px 18px;
}

.contenido-navbar ul li ul{ /*Se definen los atributos de los elementos nav, ul, li y los elementos ul dentro de li*/
    display: none;
    width: 97%;
    position: absolute;
    background-color: #0008;
}

.contenido-navbar ul li:hover ul{ /*Se definen los atributos de los elementos nav, ul y li cuando se pasa el cursor sobre el ul dentro de li*/
    display: block;
}

.contenido-navbar ul li ul a{ /*Se definen los atributos de los elementos nav, ul, li y a dentro de ul dentro de li*/
    font-size: 1vw;
    text-align: center;
    padding: 0px 8px;
    padding-bottom: 15px;
    width: 6.15vw;
    height: 40px;
}

.contenido-navbar ul .link-conocenos{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .conocenos*/
    transition: all .4s ease; /*Se define una transición*/
}

.contenido-navbar ul .link-conocenos:hover{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .conocenos cuando se pasa el cursor sobre ellos*/
    background-color: #5b81bf; /*Se define los cambios que se producen en la susodicha transición*/
}

.contenido-navbar ul .link-cafeterias{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .cafeterias*/
    transition: all .4s ease; /*Se define una transición*/
}

.contenido-navbar ul .link-cafeterias:hover{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .cafeterias cuando se pasa el cursor sobre ellos*/
    background-color: #ffd666; /*Se define los cambios que se producen en la susodicha transición*/
}

.contenido-navbar ul .link-servicios{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .servicios*/
    transition: all .4s ease; /*Se define una transición*/
}

.contenido-navbar ul .link-servicios:hover{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .servicio cuando se pasa el cursor sobre ellos*/
    background-color: #e6707f;/*Se define los cambios que se producen en la susodicha transición*/
}

.contenido-navbar ul .link-productora{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .servicios*/
    transition: all .4s ease; /*Se define una transición*/
}

.contenido-navbar ul .link-productora:hover{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .servicio cuando se pasa el cursor sobre ellos*/
    background-color: #93c572; /*Se define los cambios que se producen en la susodicha transición*/
}

.contenido-navbar ul .link-tienda{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .tienda*/
    transition: all .4s ease; /*Se define una transición*/
}

.contenido-navbar ul .link-tienda:hover{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .tienda cuando se pasa el cursor sobre ellos*/
    background-color: #59c9a5; /*Se define los cambios que se producen en la susodicha transición*/
}

.contenido-navbar ul .link-contacto{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .contacto*/
    transition: all .4s ease; /*Se define una transición*/
}

.contenido-navbar ul .link-contacto:hover{ /*Se definen los atributos de los elementos nav, ul y elementos de clase .contacto cuando se pasa el cursor sobre ellos*/
    background-color: #7dc9ed; /*Se define los cambios que se producen en la susodicha transición*/
}

.logo-navbar{  /*Se definen los atributos del logo*/
    max-height: 100%;
    min-height: 0%;
    max-width: 20%;
    min-width: 10%;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/*Utilidades*/

.hlobster{
    font-family: "Arsenal", sans-serif;
    color: #000;
}

.pamatic{
    font-family: "Arsenal", sans-serif;
}

.text24p{
    font-size: 2.4rem;
}

.text2vw{
    font-size: 1.8vw;
}

/*Index*/
.body-index{
    background-color: darkslategray;
}

/*Logo Header*/
.centrar-logo{
    background-color: #1e1e1e;
    width: 100%;
}

.logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    min-width: 350px;
}

/*Botones*/
.contenedor-botones-index{ /*Se definen los atributos del contenedor de imágenes*/
    padding: 1rem;
    margin: 0 auto;
    position: relative;
    width: 96%;
    height: 100%;
    display: inline-block;
    text-align: center;
}

.boton-index{ /*Se definen los atributos de los contenedores individuales, que contienen las imágenes y el texto que se sobrepone*/
    margin: 0 auto;
    position: relative;
    width: 16%; 
    min-width: 200px;
    height: 125%;
    display: inline-flex;
    flex-basis: auto;
    font-size: 0px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.boton-index-imagen{ /*Se definen los atributos de los rectángulos que recubren las imágenes*/
    display: block;
    width: 100%; 
    height: 62rem;
    align-content: center;
    border-radius: .5rem;
}

.color-boton-off{ /*Se define la posición de los recuadros, la opacidad y la transición de movimiento. Es así como se oculta cuando el cursor no está sobre las imágenes*/
    position: absolute;
    transition: all .3s ease;
    opacity: 0;
}

.color-boton-on{ /*Se define el tamaño de los rectángulos cuando no tienen el cursor encima*/
    height: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

.boton-index:hover .color-boton-off{  /*Se define la opacidad de los rectángulos cuando se pasa el cursor sobre ellos*/
    opacity: .9; 
}


.boton-index:hover .color-boton-on{ /*Se define el tamaño de los rectángulos cuando tienen el cursor encima*/
    height: 100%;
}

#conoce{ /*Se definen los atributos del recuadro de color para Conoce*/
    background-color: #5b81bf;
    border-radius: .7rem;
}

#cafeteria{ /*Se definen los atributos del recuadro de color para Cafetería*/
    background-color: #ffd666;
    border-radius: .7rem;
}

#servicios{ /*Se definen los atributos del recuadro de color para Servicios*/
    background-color: #e6707f;
    border-radius: .7rem;
}

#productora{
     background-color: #93c572;
    border-radius: .7rem;
}

#tienda{ /*Se definen los atributos del recuadro de color para Tienda*/
    background-color: #59c9a5;
    border-radius: .7rem;
}

#contacto{ /*Se definen los atributos del recuadro de color para Contacto*/
    background-color: #7dc9ed;
    border-radius: .7rem;
}

.texto-boton-index{ /*Se definen los atributos del texto que se sobrepone a las imágenes*/
    color: black;
    font-family: sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    right: -30%;
    transform: translate(-50%, -100%);
    font-size: 1rem;
    text-align: center;
}

/*Seccion Información*/

.informacion{  /*Se definen los atributos del contenedor de la información de la parte inferior de la página*/
    padding: 0px;
    width: 87.5%;
    transform: translate(6.5rem, 1rem);
    box-sizing: content-box;
    background: #fff;
    border-radius: .4rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.5);
    display: flex;
}

.texto-info-index{ /*Se definen los atributos del texto dentro del susodicho contenedor*/
    margin: 0 0;
    padding: 1rem;
    width: 60%;
    font-family: "Arsenal", sans-serif;
    font-weight: 400;
    font-size: 1.6vw; 
    color: #707070;
}

.imagen-info-index{ /*Se definen los atributos de la imaagen contenida en el susodicho contenedor*/
    width: 30%;
    height: 30%;
    padding: 1rem;
}

/*Sección Contactos*/
.contenedor-contacto{ /*Se definen los atributos del recuadro de contactos*/
    width: 100%;
    background-color: #000;
    transform: translate(0, 2rem);
}

.contacto-texto li{ /*Se definen los atributos del texto del susodicho recuadro*/
    padding: .7rem;
    text-decoration: none;
    list-style: none;
    display: inline-block;
    font-family: "Arsenal", sans-serif;
    font-size: 1.4rem;
    color: #fff;
}

/**Página Conócenos**/

.conocenos td{ /*Se definen los atributos de las columnas y filas de las tablas*/
    text-align: left;
    vertical-align:top;
    padding: 15px;
    width: 33.3%;
    height: 50%;
}

.headertabla{ /*NO*/
    font-family: "Arsenal", sans-serif;
    font-size: 2vw;
    color: #2e2e2e;
}

.imagen-tabla-conocenos{ /*Se definen los atributos de las imágenes dentro de las tablas*/
    width: 80%;
    margin-top: 30px;
    box-sizing: content-box;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.imagen-presentacion{
    height: 100%;
    max-height: 350px;
    max-width: 450px;
    margin-top: 10px;
    box-sizing: content-box;
    box-shadow: 0 5px 15px rgba(0,0,0,.5); 
}

/*Página Cafeterías*/

.cafeterias td{ /*Se definen los atributos de las columnas y filas de las tablas*/
    text-align: left;
    vertical-align:top;
    padding: 15px;
    width: 40%;
    height: 50%;
}

.imagen-promocion, th td{ /*Se definen los atributos de la celda contenedora de la imagen en el apartado de promociones*/
    text-align: left;
    vertical-align:top;
    padding: 15px;
    width: 25%;
    height: 50%;
}

.imgpromo{ /*Se definen los atributos de la imagen en el apartado de promociones*/
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.texto-promocion, th td { /*Se definen los atributos de la celda contenedora del texto en el apartado de promociones*/
    text-align: left;
    vertical-align:top;
    padding: 15px;
    width: 75%;
    height: 50%;
}

.pag-menu{
    padding-top: 10px;
    padding-bottom: 10px;
    width: 80%;
    max-width: 2500px;
}

.tabla-menu{
    text-align: center;
    vertical-align:top;
    padding: 15px;
    width: 75%;
    height: 50%;
}

/**Tienda y Servicios**/

.tabla-productos{ /*Se definen los atributos de las cajas que contienen los elementos que conforman las tablas de productos*/
    margin: 10 ;
    padding: 12px 20px;
    width: 75%;
    min-width: 640px;
    border-radius: 8px;
    background-color: #fff;
}

.tabla-productos table{ /*Se definen las tablas que definen las tablas de productos*/
    width: 100%;
    height: 35%;
    min-width: 450px;
}
    

.tabla-productos-contenedor-imagen{ /*Se definen los atributos de las cajas que contienen imágenes*/
    width: 25%;
    min-width: 9rem;
}

.imagen-producto{ /*Se definen los atributos de las imágenes de productos*/
    width: 90%;
    min-width: 70px;
    max-width: 175px;  
    transition: all .3s ease;
}

.imagen-producto:hover{ /*Se define una transición de transformación de escala cuando se pone el cursor sobre las imágenes de productos*/
    transform: scale(1.05);
}

.prodtabla td{ /*Se definen los atributos de las columnas y filas de las tablas*/
    text-align: left;
    vertical-align:top;
}

.textprod{ /*Se definen los atributos del texto del nombre del producto*/
    padding-top: 5px;
    font-family: 'Arsenal', sans-serif;
    font-weight: 300;
    font-size: 30px;
    color: #2e2e2e;
}

.textmarc{ /*Se definen los atributos del texto del nombre de la marca*/
    font-family: 'Arsenal', sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: #4e4e4e;
}

.textoprecio{ /*Se definen los atributos del texto del número del precio del producto*/
    font-family: 'Arsenal', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #2e2e2e;
    padding-top: 8px;
}

/**Contactos**/
.tabla-centrada{ /*Se definen los atributos del contenedor, que almacena la información principal de la página*/
    margin: 10 auto;
    padding: 12px 20px;
    width: 95%;
    max-width: 1200px;
    height: 55%;
    max-height: 340px;
    min-height: 335px;
    border-radius: 8px;
    background-color: #fff;
}

.lista-interior{ /*Se cambia el estilo de lista de los elementos listados*/
    list-style:inside;
}

.lista-interior th{ /*Se define un espaciado en las celdas de la tabla que contiene los botones de redes sociales*/
    padding-bottom: 10px;
}

.tabla-contactos{ /*Se define la tabla que contiene los botones de redes sociales*/
    padding-right: 30px;
    float: right;
}

.boton{ /*Se definen los botones de redes sociales*/
    font-family: "Lobster", cursive;
    font-size: 25px;
    cursor: pointer;
}

.enlace{ /*Se define el texto de los botones de redes sociales*/
    color: #2e2e2e;
    text-decoration:none;
}
  
.imgboton{ /*Se definen los atributos de las imágenes de los botones de redes sociales*/
    width:  50px;
}